Creating a portfolio website is, in my opinion, essential for any professional looking to showcase their work. While you can share your work through your GitHub profile, a portfolio can effectively demonstrate your skills as it serves as a good side project itself. 😄
Personally, I’ve rebuilt my portfolio several times (maybe 4 times 😬) because I wanted to update the design and was never fully satisfied. But now, I’ve finally found a great fit for my design! :D
Design of my Portfolio
I started by sketching out the layout and design elements that I wanted to include. I focused on creating a clean and modern look, with an emphasis on showcasing my projects and skills effectively.
I've taken inspiration from the landing page of Vite.js and began sketching the header and hero section of my landing page on Figma. This approach helped me visualize the overall structure and ensure the design aligns with my goals.
After that, I decided to take a break from sketching the full website because it already matched what I had in mind.
Here you can see my sketching: https://www.figma.com/design/LH9ntrVY3bGnD3qFxLeAtQ/PORTFOLIO (you can notice the design of my old portfolio; for that one, I wasn't lazy 😆)
Next step was to think about the stack I wanted to use…
Architecture of my Portfolio
For the frontend, I'm diving into NextJS to get familiar with the framework. For styling, I'm enjoying using CSS Modules, and my frontend is comfortably hosted on Vercel.
As a frontend developer, my main focus has been the frontend of my side project. I didn't build the backend from scratch. Instead, I'm using DatoCMS, a headless CMS, to easily manage my content, such as side projects and skills. I chose this CMS because it requires the use of GraphQL, a technology I wanted to learn. They also have great documentation that's easy to follow and a good free tier plan 😃
To retrieve data from DatoCMS into my frontend, I needed to use GraphQL. You can use the DatoCMS SDK to fetch data without building GraphQL queries, but I wanted to take this opportunity to learn GraphQL 😄
I'm planning to go deeper into how I've structured my data in DatoCMS and what cool features it offers in another post...
What I’ve Learned from It
It was such an exciting project! I’ve learned so much 🙂 I've gained a deeper understanding of how to integrate a headless CMS with a frontend framework like NextJS. DatoCMS has an awesome SDK (react-datocms) that includes the Image component, making it easy to get optimized versions of images (just like the Image component from NextJS).
Plus, learning and implementing GraphQL queries has been especially rewarding.
Future Improvements
I am happy with my portfolio, but there is always room for improvement. In the future, I want to add a section on the main page to show my last 3 blog articles (I still need to write two more 😜). I also plan to update the content and design regularly to show my new skills and projects.
Conclusion
Building a portfolio has been an invaluable experience, helping me grow both technically and creatively. Integrating various technologies and seeing the final product come to life has been immensely rewarding. I strongly encourage everyone to start this journey; it’s a great way to showcase your skills and passion.
Check out the source code and my portfolio! I'd love to hear any feedback you have. If you find it helpful or inspiring, please give it a star ⭐ — it means a lot to me!
Thanks for reading this guide. I hope you found it useful in your own journey. Happy coding, and may your projects shine as brightly as the stars you earn!
Top comments (0)