What I wanted
- Minimal: I aimed for a clean, uncluttered design that highlights the content without unnecessary distractions. The focus was on simplicity and functionality, ensuring that users can navigate easily.
- Personal: My portfolio needed to reflect my personality and style. It should not only showcase my projects but also tell my story and give visitors a sense of who I am as a developer and as a person.
- Storytelling: Each project and journal entry was crafted to tell a story. I wanted to share not just what I did, but why I did it, the challenges I faced, and the lessons I learned. This approach makes the portfolio more engaging and insightful.
How It's Built
I chose a tech stack that I felt confident with and excited to learn more about:
- Framework: Next.js 14 with TypeScript
- Styling: TailwindCSS
- Animations: Framer Motion
- Content SDK: Contentlayer
- Form handling: React Hook Form, Zod & Resend
- Hosting: Vercel
Setting up Contentlayer
Setting up Contentlayer was a bit challenging initially because I had no prior experience with it. However, I quickly learned that it was easier than I had anticipated. I decided to use Contentlayer for managing my projects, journal entries, and tech stack information. It integrates seamlessly with custom components using MDX, making content management smooth and efficient.
Contact Form Implementation
The contact form was an area I was more familiar with. I used React Hook Form for managing form state and Zod for both client and server-side validation. This setup ensures robust validation and smooth user interactions. To handle email submissions, I integrated Resend, which reliably sends form data to my inbox.
Hosting on Vercel
Hosting the site on Vercel was a straightforward decision. Vercel's seamless integration with Next.js, combined with its powerful analytics and speed insights, helped me optimize the site's performance and user experience. The deployment process was hassle-free, and the insights provided by Vercel allowed me to make informed improvements.
Final Thoughts
Building my portfolio site has been a rewarding journey. It allowed me to explore new technologies, overcome challenges, and learn a lot in the process. This project wasn't just about showcasing my work; it was about creating a space that reflects my personality and storytelling style. I hope my experience inspires others to embark on their own projects and continue learning and growing in the world of web development.
Happy coding!