Post Originally at my website
I decided to revamp my portfolio as there were a lot of things that I wanted to add on such as sub-pages and even dynamically generated pages, while my previous portfolio still gets the job done I figure out it's now the right time to further revamp my portfolio.
When I'm working on a project I like to structure out my process into workflows that help me get an organized roadmap of achieving the project till the end result.
Research
The first process is to do research, this includes finding inspirations from other people's portfolios and setting the right theme to fit my portfolio website, I also created a mood-board in which I could use as my reference when I'm building out a portfolio. Creating a unique concept takes time and so following what's already been used would help us on focusing on the important matters and will save us time.
Design
One big mistake that I had while building out my portfolio as I didn't sketch out nor created a wireframe of what my actual website would look like. I straight up got myself into coding and that's where things had gone awry, there were a lot of times that I iterated a particular section and a lot of inconsistencies with my colors, font sizes but either way, it turned out pretty well and I had learned a lesson
Always start with wireframing your website as it helps you get a clear sense of the idea of what you're trying to build and you won't get end up with multiple revisions which could potentially waste so much of your time.
Coding the website
This is the most exciting part of revamping my portfolio and it's when I get to choose what tools, technologies that I would plan to use. I had chosen to use Tailwind, Next.js, and MDX. I've been using Next.js in my previous project and I had grown to absolutely enjoy it, it's my go framework for building a project, I use to design my project from scratch with CSS but this time I decided to use Tailwind and explore with it, One of the things that I like about Tailwind is that it doesn't lock you in their design system and instead it lets you be the one to create for yourself.
Conclusion
After a couple of days building out my portfolio website I had learned a couple of things and also explore new technologies. I'll continue to improve my website as I think there is still a couple of improvements, especially with MDX since I could use JSX component inside of markdown.
Top comments (1)
Nice one! Another easy way to build a blog with next.js is to use a headless cms starter :) preview-agilitywebsitegatsby.gtsb.... - it all works out of the box, and you can deploy it automatically to Vercel for free - no coding required.