DEV Community

loading...
Cover image for Hooray! I Created my First Portfolio! πŸ“‚πŸŽ‰

Hooray! I Created my First Portfolio! πŸ“‚πŸŽ‰

Madza
Discussions. πŸ’¬ Tools. πŸ›  Resources. πŸ“š All things productivity. πŸŽ―πŸš€πŸ’―
Originally published at madza.dev ・8 min read

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.

Planning

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.

Landing Page

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.

Blogs Page

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.

Projects Page

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.

Music Page

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:

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.

Varela Round Font

Quicksand - clean and relatively slim font. Fitted perfectly for sub-titles, card text, and component-level text.

Quicksand Font

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.

Poppins Font

Inter - Simple and great-looking font. I used to give contrast to round fonts for description text and sub-headers.

Inter Font

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.

Home Page

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.

Blog Page

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.

Projects Page

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.

Music Page

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.

Content Wireframe

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.

Content Color Scheme

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.

Content Design

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

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

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.

Github

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.

Vercel

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.

Discussion (87)

Collapse
sufyaan323 profile image
ShadowNinja

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;
}

Collapse
madza profile image
Madza Author

Thanks for noticing! πŸ‘ Fixed it πŸ˜‰

Collapse
sufyaan323 profile image
ShadowNinja

@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.

Thread Thread
madza profile image
Madza Author • Edited

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 πŸ˜€πŸ˜€

Thread Thread
madza profile image
Madza Author

@ShadowNinja just deployed the custom Y-axis scrolls, so you could take a look πŸ˜‰ Curious, do you think they look better like this? πŸ‘€

Thread Thread
sufyaan323 profile image
ShadowNinja • Edited

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?

Thread Thread
madza profile image
Madza Author • Edited

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 πŸ™πŸ’–

Collapse
dyllandry profile image
Dylan Landry

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!

Collapse
madza profile image
Madza Author • Edited

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.

Collapse
mohammedfarmaan profile image
Mohammed Farmaan.

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.

Collapse
madza profile image
Madza Author

Thanks for the kind words! πŸ˜‰
The trick for the scrollbar to appear for fixed divs is first set the specific height or you can also use max-height if you don't want to show empty space in case of fewer items. And then use overflow-y: scroll to display scroll when the content exceeds the height of the containing div. πŸ˜‰

Collapse
mohammedfarmaan profile image
Mohammed Farmaan.

Thanks for this. I've been struggling to get it work since a few days. Really appreciate it.πŸ˜„

Thread Thread
madza profile image
Madza Author

No worries, happy to help! πŸ™β€

Collapse
louislow profile image
Louis Low • Edited

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.

Collapse
madza profile image
Madza Author

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 πŸ˜€πŸŽ΅πŸŽΆ

Collapse
cdthomp1 profile image
Cameron Thompson

Your site looks great! I like the clean look and easy to use interface. It might be helpful to have thumbnail images on your project/article cards, to help visualize what the project/article might be about.

Great work!

Collapse
madza profile image
Madza Author

At one time during the dev process I used them, tho switched back to text and description cause it fitted the overall theme of the portfolio better. I might switch back again, since other devs recommended that as well πŸ˜‰
Thanks a lot for the kind words! πŸ™πŸ’–

Collapse
luciferchase profile image
Lucifer Chase

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?

Collapse
madza profile image
Madza Author

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? πŸ‘€

Collapse
luciferchase profile image
Lucifer Chase • Edited

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.
screenshot
The navigation items are perfect πŸ™Œ
I am using Edge Chromium v89

Thread Thread
madza profile image
Madza Author

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 πŸ˜‰

Thread Thread
luciferchase profile image
Lucifer Chase

Glad to help you 😁

Collapse
leob profile image
leob • Edited

Love it, it's clean, slick and professional ... the dark mode is a winner, really makes the site stand out and is pleasant on the eye ... and the animations are well done, convincing and very good-looking, you don't often see animations utilized that well ... congrats, great job!

Collapse
madza profile image
Madza Author

Thank you so much for the kind words! πŸ™β€

Collapse
lauraftx profile image
Laura Finger

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.

Collapse
madza profile image
Madza Author

Awesome to hear! πŸ™β€
That was the goal to create something simple and easy to use πŸ˜‰

Collapse
azeemdev profile image
Azeem Sharif

Hi there , My name is Azeem and Recently I started working as a react developer. Usually we get front end designed by some other guy in the company but In my case. I am similar to you. I am trying to create my portfolio and a blog where I can write content everyday. But you know I am really struggling on the planing part as I am not very creative at creating new content from scratch. Can you give me some pointers and tips.

Collapse
madza profile image
Madza Author

The irony is - it's also the most important part. πŸ˜‰
I've always thought that the best source for new ideas is to consume quality information every day. Make it a habit to read blogs like DEV, Hashnode, and Medium. Focus on the devs that provide quality over quantity. Our thought processes and ideas are largely defined by the information we consume, it's just sometimes we are not fully aware of it. πŸ’‘

Collapse
andrewbaisden profile image
Andrew Baisden

Congrats!

Collapse
madza profile image
Madza Author

Thanks a lot πŸ™πŸ’–

Collapse
daviddalbusco profile image
David Dal Busco

Well played @madza πŸ₯³

The Framer Motion is a nice touch πŸ‘

Collapse
madza profile image
Madza Author

Thanks! πŸ™πŸ’– As far as I've tried it I really liked it, seems like a powerful library πŸ’ͺ

Collapse
adhocore profile image
Jitendra Adhikari

i think you meant to use the sentence quick brown fox jumps over the lazy dog with all the alphabets. current one misses some letters (h, s, t).

Collapse
madza profile image
Madza Author

Hahah, good eye πŸ¦ŠπŸΆπŸ˜€πŸ˜€

Collapse
devlorenzo profile image
DevLorenzo

Hey, well done for the portfolio!
Just a question, what did you use to make the photos of the planning part?

Collapse
madza profile image
Madza Author

Thanks for the support! πŸ™πŸ’–
I use Figma, an awesome and powerful tool for designing and wireframing πŸ™ŒπŸ‘

Collapse
andrewbenrichard profile image
Andrew Ben Richard

Finally an inspiration to start mine :)

Collapse
madza profile image
Madza Author

Awesome to hear! πŸ‘ Good luck πŸš€πŸŒ±

Collapse
grenmath profile image
Mathieu Grenier

Vercel is kinda like Netlify ?

Collapse
madza profile image
Madza Author

Both are serverless deployment platforms for web applications. Both are awesome for frontend/static stuff, plus Vercel excels on the backend as well. πŸ˜‰ Plus I like their UI better πŸ˜‰

Collapse
toobajamal profile image
ToobaJamal

Hey! That's awesome :)

Collapse
madza profile image
Madza Author

Great to hear! Thanks πŸ™β€

Collapse
lakshyakhatri profile image
Lakshya Khatri

I’m in love with your portfolio. It looks so simple yet so beautiful. πŸ”₯❀️πŸ₯°

Collapse
madza profile image
Madza Author

Thank you so much, means a lot πŸ™β€

Collapse
0916dhkim profile image
Donghyeon Kim

Your dynamic lists are awesome!

Collapse
madza profile image
Madza Author

Thanks a lot! πŸ™πŸ’–

Collapse
benjaroa profile image
benjaroa

Congrats, Mazda and thanks for sharing!

I didn't know about some of the things you used there, can you tell us about the pricing? You got that site running for free?

Cheers!

Collapse
madza profile image
Madza Author

Thank you so much! πŸ™πŸ’–
Since it is deployed on Vercel I don't have to pay anything to run the site. The only pay (yearly) is for the custom domain I use. πŸ˜‰

Collapse
kalashin1 profile image
Kinanee Samson

Nice work, the portfolio looks great especially the part where you showcase your previous works. You have a nice color scheme in place too.

Collapse
madza profile image
Madza Author

Thanks a lot! πŸ™β€

Collapse
k1y05h17k profile image
k1y05h17k

Hey man, this is a beautiful design, I get many ideias after read your post :)

Collapse
madza profile image
Madza Author

Awesome to hear! πŸ˜‰ Thanks a lot! πŸ™β€

Collapse
grenmath profile image
Mathieu Grenier

Awesome

Collapse
madza profile image
Madza Author

Thank you so much! πŸ™β€

Collapse
ravens48 profile image
Ravens48

Nice job !

Collapse
madza profile image
Madza Author

Thanks a lot! πŸ™β€

Collapse
nicatquliyev profile image
Nicat Quliyev

Loved it, congrats to you πŸ₯³

Collapse
madza profile image
Madza Author

Awesome to hear! Thanks πŸ™β€

Collapse
mattmarquise profile image
Matthew Marquise

Congrats! Looks incredible! Also loving the musicπŸ‘ŠπŸ» Keep up the great work!

Collapse
madza profile image
Madza Author

Awesome to hear that! πŸ™πŸ’–
Thanks for taking a listen 🎢🎡

Collapse
devui profile image
DevUI

So cool!

Collapse
madza profile image
Madza Author

Thanks a lot! πŸ™πŸ’–

Collapse
verberden profile image
Sergei Novikov

It looks very nice not tough and as for me pretty clean. Congrats! πŸ‘

Collapse
madza profile image
Madza Author

Thank you so much! πŸ™πŸ’–

Collapse
said_mounaim profile image
Said Mounaim

Nicee 😍 congrats

Collapse
madza profile image
Madza Author

Thanks a lot! πŸ™πŸ’–

Collapse
jlrxt profile image
Jose Luis Ramos T.

Gran trabajo. Γ‰xito.

Collapse
madza profile image
Madza Author

Thank you, I guess?! πŸ˜€πŸ˜€

Collapse
zzoukk profile image
zZouKk

This is cool !

Psss... Live demo links are missing on project pages.

Collapse
madza profile image
Madza Author

Yup, I know I should add them once the project is opened, currently, there are just GitHub links πŸ˜‰