Portfolio-nextJS

React, SASS, Next JS, framer-motion, swiper, Eslint

Description

Personal portfolio and blog website..

• Developed with Next.js using Static Site Generation.
• Dynamic pages for projects and blog posts.
• Blog posts and project details written in markdown and rendered with react-markdown.
• Framer motion, AOS and Swiper for the "eye candy".
• Deployed with "Deploy to GitHub Pages".

Key takeaways

I've wanted to build a cool, or at least presentable, portfolio for a while now. Since I've been working a lot with Next.js lately, I figured it would be a great idea to build this portfolio using Next.js instead of some plain html/css/js. Because I wanted to write some blog posts as well, it would make sense to use Next.js due to its SEO advantages. And since I didn't want to pay for hosting just yet, Github Pages should do the trick.

It turned out to be not more complicated but bigger and more complex than expected. but it might not be the best approach to deploy it, since github now supports direct deployment of static sites like this.

This is an evolving project, so there is some room for DRY improvement since things went another way as originally thought of. E.g. I started rendering posts with react-markdown and projects descriptions like this with JSON. After a while I decided to render project descriptions also with react-markdown.