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.
Top comments (97)
Whenever I see someone else's portfolio it makes me want to completely change my own. Looks really good man, and interesting to see your process
You should actually redesign your portfolio
Thank you so much! 🙏❤
In your CSS file, you can add the following to remove the X-axis scroll bar that appears at the bottom of your blog page:
body
{
overflow-x: hidden;
}
Thanks for noticing! 👍 Fixed it 😉
@madza As a homework, I think you should try changing the y-axis scroll bar colour in the blog page into one that meets the theme of your website.
Good point 😉
At one time during dev I actually styled them the way you described, but I switched back to classic style as they were pretty hard to notice 😀😀
You can still find them used in this post, for example, where I use them as X-axis scrolls for code snippets.
I just commented them out for the main Y-axis, the code is still there and I might use it again if I change my mind 😀😀
@ShadowNinja just deployed the custom Y-axis scrolls, so you could take a look 😉 Curious, do you think they look better like this? 👀
Definitely looks better but it needs to be more lighter; I could barely tell its there.
Isn't there any way to make it lighter?
Yeah, that was the initial reason I switched back. 😉 But I will take your advice and try to experiment with some lighter shades like #576180 from my color palette described in this post 🎨
Thanks a lot for the input, helped a lot 🙏💖
u have done a great works.
if u need my help. i will with my pleasure.
send me mail at anytime.
Thanks for the support 👍😉
Ok. I like contact with talent developer.
Best regards.
If any problem occured, I will send u a request.
Means a lot, thanks! 👍💯
Stunning.. 👏🏻
Thank you so much, mate! 🙏💖
It's awesome. Some great effort there. Btw I have a question. How can that scrollable list be achieved? like you've done with your music section? It's like a fixed container but it has got items scrolling in it.
Thanks for the kind words! 😉
The trick for the scrollbar to appear for fixed divs is first set the specific
heightor you can also usemax-heightif you don't want to show empty space in case of fewer items. And then useoverflow-y: scrollto display scroll when the content exceeds the height of the containing div. 😉Thanks for this. I've been struggling to get it work since a few days. Really appreciate it.😄
No worries, happy to help! 🙏❤
Looks clean. Biggest critique I have is that I think you should make your projects more easily visible. It was jaring to get to your home page, try scrolling to see more, have it not work, then have to search the UI for where I could see your work. Maybe just put that page of projects additionally at the bottom of your main page. Also I'd suggest adding more visual distinction between your projects. The only difference is their text, which requires reading each one to distingush them. Maybe add a bit of a picture to each one, either a picture of the project or some releated image off of unsplash.
Looks good!
Thanks for the valuable feedback! 😉
During development, I had the same thought to make a landing page scrollable, where I would present just 3-4 highlights for each section and then add 'view more' that would open the respective section with all the content. That's a nice point, as most of the portfolios are like that.
About the project's images. At one point in the development, I had listed the projects as a title and image. It was really easy to tell right away what each project looks like and what it's about (especially since most of the visuals were GIFs). But I went with the text and description as it's the main theme throughout the whole portfolio. Same for the Blog articles not showing preview images.
I still have the code for that, so I might switch back to that in the future.
Thank you for sharing this. I’m working on my own first portfolio and the ones I’ve seen so far are beautiful but waaaaaaaay over my skill level at this point. Yours is concisely and relatable for a beginner like me.
Awesome to hear! 🙏❤
That was the goal to create something simple and easy to use 😉
Loved your site. Congratulations 😁
Just wanted to ask, disabling open in a new tab feature say using ctrl + click or using the mouse wheel was intentional?
Thanks a lot! 🙏💖
Just tested on navigation items, markdown links, and images. Ctrl + click works as expected opening in a new tab. I'm on Chrome v89, what browser do you use and which link do you specifically try to open? 👀
Both the blog posts and the links in the project section won't open using the mouse wheel. Also, the blog posts don't show the open in new tab when right-clicked.
The navigation items are perfect 🙌
I am using Edge Chromium v89
Thanks for the notice! 😉
Tbh, I've never used a mouse wheel to open in a new tab, that's why never tested against it. I use next/link and the absence of 'open in new tab' is most likely caused due to links being dynamically generated (in case of blogs and projects) 😉
I will see what I can do with this when I will have some free time 😉
Glad to help you 😁
After reading this post, no wonder you are missing for so long. At last, you finally replacing the incomplete portfolio website! Now the website looks great and resourceful. I just get know that you are producing EDM music. I stopped making music 7 years ago, my SoundCloud profile.
Yeah, been working on this for the last months 😉 Thank you for your kind words, means a lot! 🙏💖
Just listened to your tracks on SC, great job. 💯 Didn't know you produced music as well 😀 Trance and progressive were the first genres for me, too 😀🎵🎶
Some comments may only be visible to logged-in visitors. Sign in to view all comments.