Initial Concept

My journey into web development began with the creation of a personal portfolio website. The primary objective was to have an online presence that showcased my projects, experiences, and skills. This digital space would serve as a virtual résumé, providing insights into my work.

Choosing React and Chakra UI

To bring this vision to life, I opted for a modern tech stack:

  • React: Leveraging its component-based architecture allowed for a dynamic and responsive user interface.
  • Chakra UI: This React component library provided a set of accessible and customizable UI components, enabling a consistent design language across the site.

The combination of React and Chakra UI facilitated a seamless development experience, allowing me to focus on both functionality and aesthetics.

Development Experience

Building the website was an educational and rewarding journey. I gained hands-on experience with:

  • Component Design: Structuring the UI into reusable components.
  • Responsive Design: Ensuring the site was accessible across various devices and screen sizes.
  • Continuous Integration and Continuous Deployment (CI/CD): Automating the build process to compile the React application into static HTML, which was then deployed using GitHub Pages.

However, as I continued to develop and maintain the site, I encountered challenges that prompted me to reassess my approach.

Challenges Faced

The initial excitement of building the website gradually gave way to several maintenance hurdles:

  • Time-Consuming Updates: Implementing new features or making design changes required significant time and effort.
  • Bug Fixes: Addressing unforeseen issues became increasingly frequent, detracting from the site’s primary purpose.
  • Content Management: Adding new projects or blog posts necessitated manual coding, which was neither efficient nor scalable.

These challenges highlighted the need for a more streamlined and maintainable solution.

Transition to Hugo and PaperMod

In search of a more efficient workflow, I discovered Hugo, a fast and flexible static site generator. Its features aligned perfectly with my requirements:

  • Markdown Support: Simplified content creation and editing.
  • Theming: A variety of pre-built themes allowed for quick customization.
  • Performance: Hugo’s speed in generating static pages ensured optimal site performance.

Among the available themes, PaperMod stood out for its simplicity. Its minimalist design resonated with my aesthetic preferences, and its functionality met all my needs without unnecessary complexity.

Implementation and Outcome

Migrating to Hugo and adopting the PaperMod theme was a transformative decision. The process involved:

  • Content Migration: Converting existing content into Markdown format.
  • Configuration: Setting up config.yaml to tailor the site’s appearance and behavior.
  • Deployment: Utilizing platforms like GitHub Pages for hosting.

The benefits were immediate:

  • Reduced Maintenance: The need for manual coding diminished significantly.
  • Enhanced Focus: I could concentrate on content creation rather than technical upkeep.
  • Scalability: Adding new content became a straightforward process, encouraging regular updates.

Reflection

This transition not only improved the functionality and maintainability of my portfolio website but also provided valuable insights into the importance of choosing the right tools for a project. It reinforced the idea that while building from scratch offers learning opportunities, leveraging existing solutions can lead to more efficient and sustainable outcomes.

For those interested, the source code of my old portfolio website is available on GitHub: old-portfolio-website.

Note: This project is now deprecated, and the repository serves as an archive of my initial foray into web development.