Building My Portfolio Website

June 2025

Portfolio Website Cover Image

Introduction

This blog post details the journey of creating my personal portfolio website. The goal was to build a clean, fast, and easily deployable site to showcase my projects, skills, and experiences in cyber security and IT.

From Dynamic to Static

Initially, this website was built using Next.js, a React framework. While powerful, I decided to convert it to a purely static HTML, CSS, and JavaScript site. This change simplifies the hosting and deployment process significantly, making it ideal for platforms like GitHub Pages or Vercel for static sites.

Technology Stack

  • HTML5: For structuring the content.
  • CSS3: For styling and layout, including responsive design.
  • JavaScript: For interactive elements like the image carousel.

Development Process

The conversion and development involved translating the structure and styling from the Next.js components into standard HTML and CSS. The interactive parts, such as the image carousels on the blog posts, were implemented using vanilla JavaScript. A significant part of this process was assisted by an AI coding partner (Gemini/Cursor), helping with generating the initial static HTML structures based on the required content and implementing features like the carousels and the audio player.

Key Features Implemented

  • **Responsive Design:** Ensures the site looks good and functions well on desktops, tablets, and phones.
  • **Clean and Modern UI:** Focus on readability and easy navigation.
  • **Blog Section:** Dedicated area to share insights, projects, and event experiences.
  • **Image Carousels:** Added to individual blog posts to showcase event photos.
  • **Audio Player:** Integrated into the podcast blog post.
  • **Project & Event Highlighting:** Structured layout for presenting different types of content.

Challenges & Learnings

Converting from a framework to static HTML required careful attention to detail to ensure all original content and styling were preserved. Implementing interactive elements like the carousel manually provided a good exercise in core JavaScript. Working with the AI tool streamlined much of the repetitive coding and structure generation, highlighting the potential of AI in web development workflows.

Future Plans

  • Adding more project details and case studies.
  • Potentially adding a contact form.
  • Exploring minor design refinements.

Conclusion

Building this static portfolio has been a rewarding experience. It provides a solid and efficient platform to share my professional journey and work. The process also highlighted the advantages of static sites for simple portfolios and the evolving role of AI in assisting development.