For the last few months, I've been working on a personal portfolio. I've always believed that a separate portfolio is important for any dev since it connects you to future opportunities and it helps you to grow your network.
Today I deployed it on madza.dev. There's still some stuff to improve, like testing browser compatibility, tweaking some UX, etc, so it's still a WIP, for sure. But hey, everyone has to start somewhere, right?
I tried to document everything during the process and thought it would be useful to share the planning phases, technical execution, and the major takeaways from the project.
Planning
I've always liked to write, code, and do some music production in my spare time, so I wanted my portfolio to reflect all that. I came up with an idea to dedicate a separate space for each.
On the UI/UX side, I wanted my portfolio to be simple, clean, and easy to navigate on both mobile and desktop devices. Also, the content should be easy to filter and search.
Wireframing
Once I had identified the main purpose, content blocks, and features, I started to put my ideas on paper to come up with the blueprints of the layout.
Landing
I believe that the landing area creates the first impression for the visitors, which further dictates whether or not they want to explore more of the site and get to know more about the developer.
I decided to display a short and concise introduction of myself, contact info, and some dev-related visuals to grab the visitor's attention.
Blog
Then I began to work on my content sections. I started by drawing a simplified wireframe for my blog. My aim was to list all my articles, sort them via tags and be able to browse them using the search component.
Since I knew my portfolio would be fully self-hosted (including all the content), I planned each title of the article to be a clickable link, which would then open the particular article for further reading.
Projects
For my projects, I wanted to showcase all my websites, apps, and games. I also wanted to assure that the users are able to open external links to the projects, see source code, as well as read more about the projects.
Visitors should also be able to filter projects using the category tags as well as search for a specific project using the search component.
Music
In order to showcase my music, I wanted to design a music player with basic playback controls. So I came up with a player component with play, pause, next, previous, loop, shuffle, volume, time, progress bar, and playlist.
As in both previous pages, the tracks should be sorted across tags. Except I removed the search since I did not plan to include that many tracks, where it would be hard to find them by their title.
Color Scheme
Next, I had to decide which colors to use to color my wireframes. I'm a fan of dark modes, so I knew I would go with some dark tones as dominant ones.
In order the give some accents, I had to pick another color shade, that gives contrast and looks nice. I decided to go with purple, as for me it has always worked well with very dark tones.
So I ended up with the following color scheme:
For anyone wondering - the light mode switch is something I have considered and might implement in the future.
Fonts
I believe typography is a very important part of any website. And, as I've seen, it's also often undervalued for devs. Finding nice fonts that work well together can make a massive difference in both looks and ease of use.
I've always been a fan of rounded fonts, therefore I knew my main typography would be based on them. Tho, I included a couple of different families as well, to make a nice mixture.
Varela Round - one of my favorite fonts. Easy for the eyes and nice-looking, so I chose it for headers and blog text.
Quicksand - clean and relatively slim font. Fitted perfectly for sub-titles, card text, and component-level text.
Poppins - quality and professional-looking font (out of those, that are free). I decided to use it for the hero area, logo, and navigation text.
Inter - Simple and great-looking font. I used to give contrast to round fonts for description text and sub-headers.
Designs
After I got all my blueprints done and I knew all the color tones and fonts I would use, finally, it was time to put everything together.
Landing
For the landing area, I highlighted the keywords, so it's easy to tell what I focus on right away. The contact button looked great on purple and made it stand out, so visitors would not have to spend time searching for ways to reach out.
I also ended up including an SVG animation from Undraw.co. I went a bit further and customized the color shades and added some animations to it using CSS.
Blog
For the blog section, I used panels, that are few shades lighter than the background. They looked nice and assured it's easier to distinguish between the articles.
I also included the post date and approximate reading time, as well as wrote a custom function to generate a preview of the article from the body.
Projects
I used a panel system for projects as well, to stay consistent and keep the theme thorough the portfolio. I also included the icons linking to external links.
Same as for the blog section, project titles looked great on white, while descriptions looked nice on darker shades to give some contrast.
Music
The music component was focused more on functionality and involved less text. Thus I found some nice icons on Icons8 and gave them great contrast to the background.
For playlist items, I used the same theme as for the headers and descriptions in the Blog and Project section, with the active track being highlighted.
Content
At this point, I had all the main blocks of my portfolio designed. Tho, in the developer world, there is a belief, that the content is king. That meant I had to work on the separate sections for the content to be opened.
I came up with the wireframe displaying the title, details, hero image, body, and sharing options for the articles in the Blog and Project sections.
Then I had to pick the colors I would use. Instead of going with my main black - purple color palette again, I decided I would go with something that would highlight the main HTML elements.
Here is an example of one of my projects being displayed by using the color theme above. Notice just the h3, ol, and a elements are being used in this rather short example.
Tech stack
The portfolio is created using NextJS framework and based on Contentful to assist in content management. With exception of some Node utility packages for UX, the rest of the site is written from the ground up.
NextJS
NextJS is a production-ready framework that allows developers to quickly create static and dynamic JAMstack websites and provide a layer of abstraction to aid in common tasks in traditional React apps.
Some of my favorite features include Static vs Server Side Rendering, Dynamic routing, Static file serving, Image optimization, CSS modules among many others.
Contentful
Contentful has been around for a long time and during that time has proven itself as a rock-solid CMS solution. Designing content models and managing the content is very straightforward.
With it we can use all the content types we would ever need - starting from simple Boolean values to Rich Text and Markdown fields.
Extra modules
Framer Motion is a React library for animations. It provides users with production-ready animations and a low-level API we can interact with to integrate these animations into your applications.
Nprogress is used to display the load progress of the site. It works well with next-router and I thought it improved the overall UX of the site by a lot.
Remark-highlight.js is used for code block highlighting on Blog posts and Project pages.
React-share is a tiny package intended for exactly what the name implies - to share content across social media platforms. I used it on blog articles and project pages.
Deployment
The source code is being stored on GitHub. Usually, this is my preferred workflow as my code gets backed up and I get version history in case I need it sometime later.
From the GitHub repo, it's further deployed on Vercel (formerly Zeit). This way the live site gets updated in real-time each time there is a new feature or a fix being pushed up on GitHub.
Both services have been on top of the game and I chose the latter for the hosting as NextJS is their own product and their platform is specifically designed to support it in the first place.
Final notes
This project definitely learned a couple of things for me. It has not only improved my overall dev skills but also helped me to understand what areas I care more about and where I want to be in the dev space.
From now on, I'm looking to work on new projects and add more content to my portfolio. I believe that quality over quantity is the right way to go, so I keep reminding myself to be patient.
Hopefully, you learned a thing or two and got some ideas or inspiration to build or re-design your own portfolio, as well. Be persistent and remember the best is yet to come! 😉
Writing has always been my passion and it gives me pleasure to help and inspire people. If you have any questions, feel free to reach out!
Connect me on Twitter, LinkedIn and GitHub! Visit my Blog for more articles like this.