Creating My Portfolio Website from Scratch

As a budding software developer, I knew that having a strong online presence was crucial. That's why I decided to embark on the journey of creating my portfolio website from scratch. This project not only showcased my skills but also served as a learning experience, pushing me to apply various technologies and best practices. In this blog post, I'll walk you through the process of how I built my portfolio website.

The first step was to plan out the structure of my website. I decided on a single-page application with several key sections: Landing Page, About Me, Projects, and Contact. This structure would allow visitors to easily navigate through my work and get to know me better.

For the project, I chose Next.js as the framework for building the site. Next.js offers server-side rendering, static site generation, and a great developer experience. I also used Tailwind CSS for styling, which allowed me to quickly create a responsive and visually appealing design. Additionally, I incorporated Shadcn UI for some custom components and animations.

The landing page is the first thing visitors see when they arrive at my site. It features a hero section with a brief introduction and a call-to-action button. Here's a snippet of the JSX code I used to create the landing page:

The About Me section gives visitors a deeper insight into my background and skills:

To showcase my technical skills, I created a visually appealing grid layout:

For the contact form, I implemented form validation using React Hook Form and Zod:

Finally, I assembled all the components in the main page:

All the code can be found in my github repository, where I also documented the process and challenges I faced. Building my portfolio website was a rewarding experience that not only showcased my skills but also helped me grow as a developer. I encourage anyone looking to create their own site to dive in and start coding. The possibilities are endless, and the journey is worth it.