DEV Community

loading...
Cover image for πŸ§‘β€πŸ’» How I developed my portfolio for a month πŸ—“ + Demo 🍿

πŸ§‘β€πŸ’» How I developed my portfolio for a month πŸ—“ + Demo 🍿

Roden
Frontend developer from Russia
・12 min read

Full Portfolio Demo

Introduction

Today I would like to share with you my experience in developing a personal portfolio. I understand that many of you immediately wondered after reading the title. And why spend so much time developing a portfolio at all? After all, you just need to create a small one-page website and add all the information about yourself and your works there. And here I definitely agree with you that if you are developing a business card website, then this is quite a working option. You don't even have to spend a few days developing such a site. Such a site can be developed in 4-6 hours.

But I set myself a different task. I wanted to create a portfolio that would show with its appearance what kind of developer I am and what I am capable of. I wanted to use animations, build complex objects using HTML and CSS, make smooth transitions between pages, choose bright colors for the site. But at the same time, of course, I did not want to make a site from the nineties, which usually caused users to have epilepsy.

Alt Text

I wanted my portfolio to be something like a picture that I painted like an artist.

I didn't want to fill my site with boring and monotonous text content. Let's be honest. No one cares what you like to eat in the morning and for dinner, no one cares what TV shows and movies are your favorite, what games you play and how you spend your time. The employer is not even interested in whether you watch anime? This is assumed by default.

Alt Text

So I decided to focus on the appearance of the site. Therefore, the first thing we will discuss with you is the design.

Design

1. Colors

The first step is to discuss the colors that I decided to use in my project.
This is:
Vinous: #9b2d30
Alt Text

and Beige: #f7e0b5
Alt Text

I have long dreamed of using these colors together, but unfortunately I could not do it at work and so finally I decided to use them in my personal portfolio.

I think that these colors are very well in harmony with each other. And in the future we will have to use many more colors, but more on this later in the following chapters.

2. Pages

As for the pages, I decided to make them only 2. This is the home page where my photo, brief information about me and links to my social networks will be placed so that people can contact me. On the second page, I decided to arrange my works, which can be viewed with the help of a special presentation (more on this later).

3. Style

I decided to design the appearance of the site in a minimalistic style. I didn't want a large number of unnecessary photos and the like to be present on the site. I wanted the site to look seasoned and concise. Therefore, I decided to use Flat design as the design of the portfolio elements.

4. Animation

As for animations, here is the same approach as with the style of elements. Animations should look appropriate, and be combined with all their surrounding elements. Animations and static elements on the site should look like a single whole.

Alt Text
Perfect! πŸ‘Œ

Technologies

Before we go any further, I should tell you what tools I used for development.

1. HTML

To create a DOM structure, I decided to use the PUG preprocessor. It significantly helped me reduce the amount of code due to the ability to use loops and mixins.

2. CSS

To create styles for elements, I preferred to use the SASS preprocessor with SCSS syntax. I did this for the same reason as with the PUG preprocessor.

3. JavaScript

To create animations, I needed to use three JS libraries:

  1. TweenMax.js
  2. Anime.js
  3. Revealer.js

Home Page

Finally, we can start analyzing the pages of the portfolio itself directly.

Alt Text

When I started working through the DOM structure and it came to the section where my photo should have been, I thought for a while and asked myself this question. Why would I just insert my photo? I thought it was too easy for me. Is it really impossible to use this place more effectively, instead of just occupying this place with a photo?

Moreover, I do not like to be photographed.

Alt Text

And here I would like to return to my recent quote.

I wanted my portfolio to be something like a picture that I painted like an artist.

I thought that I would be able to apply my own knowledge of HTML and CSS in order to simply draw myself.

And I started a difficult job. πŸ₯·

Alt Text

1. Step One

At first it was not easy, but the most important thing is to find an avatar layout on the Internet that you could be inspired by when creating your own CSS portrait. (CSS portrait - sounds strange)

And here's what happened:

CodePen:

It took me about 6 - 7 hours to create it. This is taking into account the fact that I had to spend a lot of time searching for good examples of avatars on the Internet.

2. Step Two

In general, I was satisfied with the result, but the avatar itself, as you can see, is small in size, and the image that the avatar was intended to replace was large in size.

Moreover, the avatar merged colors with the background. πŸ˜‚
Alt Text

Therefore, I decided to create a special environment around the avatar to fill the empty space in the place of which the photo should have been.

And later I decided to animate this very environment to make the picture look more lively.

And here's what happened:

CodePen: (See in the format 0.5x)

Alt Text

I have already posted this work on my very first post.

3. Step Three

Next, I needed to create a text with brief information about myself (who I am and where I live). Here I decided to use a straight font, because it fit very well into the overall style.

Something like that:
Alt Text

It's already coming out well and it pleases.

4. Step Four

Next, I needed to implement navigation, with which I could switch between the pages of the site. I decided to make it minimalistic and unfixed so that it doesn't follow the window when scrolling. It wasn't necessary.

Alt Text

But do not forget about adaptability, because what looks good on the desktop will not look good on the phone.

Therefore, I decided to make text links to pages disappear on screens less than 900px and a burger menu appears.

Alt Text

And when you click on the burger menu button, a Popup menu appears in which the necessary links to pages and social networks are located.

Alt Text

I have a separate article about this burger menu.

CodePen:

5. Step Five

I decided to attach links to my social networks and email to the lower edges of the screen. I also added position: fixed; to them so that they follow the screen when scrolling.

Alt Text

6. Step Six

And the last thing I decided to do on the home page is to describe my personal qualities.

Alt Text

To do this, I decided to use icons. Quite a logical action. Describing your personal qualities, visualizing it all with icons.

But here, too, I later wondered. I told myself. So stop, stop, stop, stop, wait a minute? Can't you draw such icons yourself? Yes, it will not be easy, but it is possible, right? Aren't you tired of these static images that you can find on a million other sites?

After thinking about all this a little more, I still decided to get down to business.

Alt Text

And I started drawing again, but this time icons. πŸ₯·
Alt Text

And here's what I got. Oh, I forgot to add that I also wanted to animate them. I love doing this.

Alt Text

I also did a separate article about them.

CodePen:

It remained only to add the text to them and that was all. The home page will be finished.

Result:
Alt Text

7. Step Seven

Well, the end of creating a home page has come. It took me a little less than three weeks to create it. Yes, yes, do not be surprised, because it is not so easy to create everything that has been described from the first time. And before we go to the second page, I suggest you take a look at the result.

Home Page CodePen Demo:

Oh my God

, `6500` lines of `SCSS` code, and this is taking into account `loops` and `mixins` that shorten the code. Without them, there would probably be `7500` or `8000` lines of code. But there is still a portfolio page ahead.

Portfolio Page

With the portfolio page, everything was simpler, it was no longer necessary to come up with a style for the pages. But there was another problem. You see, when demonstrating my works, I planned that each work would have its own page separately. But I quickly realized that I don't want to produce a large number of identical html files. And what will happen in a couple of years when the number of works will become significantly more?

And I decided to create a section for the presentation of my works right on the page with my exhibited projects.

Alt Text

This section of the presentation was supposed to work according to the following principle:
1. You click on a special card for any project;
2. The presentation opens according to the principle of the Popup menu, only in the case of a presentation it opens on the right, not on top;
3. The content of the presentation itself is filled in depending on the project that you selected by clicking on the card, and all data about the project is stored in an array

Here's how it works:
Alt Text

To close the presentation, click on the round button in the upper-left corner.

Close Button
Alt Text

I have already created a separate article about this presentation.

Mini CodePen Demo:

Finishing touches

Well, that's it, the portfolio is ready. It remains only to add small details. Namely, the preloader. You see, what's the matter, there are a huge number of elements on the site that need a little time to load, and in order not to observe the loading of elements, a small preloader is needed.

And also add a small animation of the elements surfacing to give the site a light elegance.
Alt Text

Initially, I made a preloader on which the word "Welcome" appears using SVG, but I quickly realized that this may look good, but it certainly won't work as a preloader for my site. Because it's a very long time. 10 seconds!!!
Alt Text

Therefore, I decided to abandon the word animation, and reduce the preloader animation to one second on both pages.

Alt Text

Well that's it.

Responsive

Home Page:
Alt Text

Portfolio Page:
Alt Text

The site is adapted for screen resolutions such as:
@media 1728px
@media 1600px
@media 1440px
@media 1300px
@media 1180px
@media 1080px
@media 960px
@media 890px
@media 830px
@media 720px
@media 642px
@media 576px
@media 414px
@media 375px
@media 320px
@media iPad (min-width: 415px) and (max-width: 1025px) (portrait)
@media iPad (min-width: 415px) and (max-width: 910px) (portrait)
@media iPad (min-width: 415px) and (max-width: 834px) (portrait)
@media iPad (min-width: 415px) and (max-width: 768px) (portrait)
@media iPad (min-width: 415px) and (max-width: 685px) (portrait)
@media iPad (min-width: 415px) and (max-width: 595px) (portrait)
@media iPad (min-width: 415px) and (max-width: 490px) (portrait)
@media (min-width: 1601px) and (max-width: 5000px) and (max-height: 940px)
@media (min-width: 1441px) and (max-width: 1600px) and (max-height: 700px)
@media (min-width: 1301px) and (max-width: 1440px) and (max-height: 670px)
@media (min-width: 1181px) and (max-width: 1300px) and (max-height: 615px)
@media (min-width: 1081px) and (max-width: 1180px) and (max-height: 540px)
@media (min-width: 961px) and (max-width: 1080px) and (max-height: 515px)
@media (min-width: 891px) and (max-width: 960px) and (max-height: 470px)
@media (min-width: 720px) and (max-width: 890px) and (max-height: 425px)
@media (min-width: 376px) and (max-width: 414px) and (max-height: 730px)
@media (min-width: 321px) and (max-width: 375px) and (max-height: 660px)
@media (max-width: 320px) and (max-height: 560px)

Unfortunately, there were too many @media queries, this is due to the fact that I used the value vh for height, these are viewports for height. Because of this, some elements had to be trimmed sometimes, but don't be too scared.

Summing up the results

Friends, now it's time to take stock, and calculate how much time it took me to create each individual element and why it ends up being about a month.

1. Design: It took me about 3-4 days of long wanderings on such sites as Behance and Dribbble to think about how I want to see my portfolio
2. CSS Illustration: It took me about a week to create CSS Illustration, well, maybe a little more
3. Navigation: I spent 2 days creating the navigation
4. Icons: I spent a week and a half creating animated icons, it was not easy
5. Portfolio Presentation: And I spent a week creating a portfolio and presentations for projects
6. Preloader: I also spent 2 days creating preloaders

This results in approximately 33 days.

During all this time, 900 lines of code were written on the PUG preprocessor, 9000 lines of code on SCSS and 565 lines of code on JS.

Comrades, don't think about it, I'm not bragging. There's nothing to brag about here. I just decided to summarize it in terms of the amount of code.

But remember, quantity does not mean quality.

Alt Text

The End

Friends, it's time to say goodbye. Thank you for paying attention to my post. My God, I wrote it for about five hours!!! And it feels like no more than two hours have passed. Well, okay, it's not scary. Below is the promised link to the full demo portfolio.

Full Portfolio Demo

You can also download it from my repository

I can advise you to subscribe to my Twitter, I also post my work there.

And finally, I want to say, friends, make such portfolios as you like. If you want to make a business card website without any extraneous elements, animations and other things, then please do it. Or on the contrary, you want to make some highly animated portfolio, or even make a 3d website on three.js then it is completely your right. There are no serious rules that you must follow here. The most important thing is that you like it first of all. And your employer should like your resume.

Alt Text

You can also check out my recent article on the topic of a portfolio for developers.

See you all later.
Alt Text

Discussion (53)

Collapse
m0nae profile image
Monae Payne

Dude, that portrait with the animated background is crazy. Outstanding work! πŸ–€

Collapse
kerthin profile image
Roden Author

Thank you for your high appreciation! πŸŽ‰ This portrait is probably the main element in the entire portfolio.

Collapse
adam_cyclones profile image
Adam Crockett

So a couple of things, the justified text is a no-no for accessibility and if accessibility is equal to good UX I would change this:

screenshot of justified text no easy to read

Your name in the intro, it stands out less than the rest of the text, try to use AAA contrast ratio, you can see this in your browser colour picker.

Collapse
kerthin profile image
Roden Author

I agree with you, I should try to align the text differently. The problem was that I didn't like the way the text looked when I aligned it in the center and on the left and right sides. You are also right that I should think about the color contrast in the title. Thank you very much for your constructive criticism. 🀝

Collapse
adam_cyclones profile image
Adam Crockett

Oh and penetrate 😬 beware of this word πŸ˜™πŸŽΆ

Collapse
kerthin profile image
Roden Author

You are definitely right here πŸ˜‚ πŸ™ƒ

Collapse
bluzzi profile image
Bluzzi

I am very impressed with the portrait and the environment that you have created directly via code.

Why this choice ? Why didn't you use a video? Wouldn't it be less heavy for the site? You wanted a challenge?

In any case it's impressive.

Collapse
kerthin profile image
Roden Author

Thank you for your praise! As for the css illustration, then you are undoubtedly right. For me, it was a challenge. And just inserting a video on the site would not be serious.

Collapse
cromodder profile image
Paolo BoΕΎac

Kudos for the details and animations. However, since there are plenty of moving parts on the site, it would be nice to take into consideration people that have problems with flashing content and to apply those animations only if users don't have active reduced motion feature in their OS settings. ( more about prefers-reduced-motion) `

Also, to make site more inclusive, consider adding visible focus for every interactive element on the page (Introduction to Focus)

Collapse
thomasledoux1 profile image
Thomas Ledoux

Looks really nice!
I did immediately spot a typo on the homepage though :D It says "fronend developer" instead of "fron*t*end developer"

Collapse
kerthin profile image
Roden Author

Thank you for pointing out the error. I haven't noticed about in so much development time. πŸ˜‚

Collapse
devcoder profile image
devcoder

Nice work! But the menu says portfolio is confusing it should be renamed to Projects

Collapse
kerthin profile image
Roden Author

Thank you for advice. You're right. I probably will soon transfer the inscription to 'Projects'.

Collapse
mzcoderhub profile image
Galang YP

Broh how did u learn to create that visual design animation, im only stuck in styling lol im not good at FE dev

Collapse
kerthin profile image
Roden Author

Well, in principle, to develop such an animation as in the portfolio, a lot of knowledge is not required. It is enough just to be able to work with @keyframe and use it to change the properties of elements step by step. And you also need to be able to work with properties such as animation, transform and transition. And then you will be able to make the same animations as on the portfolio and even better. I also advise you to study the js libraries anime.js and TweenMax.js, for working with more complex animations like menus, smooth transitions between pages, preloader, and other things. Although you can try to do all this without libraries, but it will be very hard.

Collapse
knightkrusty profile image
Vaibhav

do you ever used this much animation on actual production website in some company?

Collapse
pablohs1986 profile image
Pablo Herrero

Amazing!!! πŸ‘πŸ‘πŸ‘πŸ‘

Collapse
kerthin profile image
Roden Author

Thanks πŸŽ‰

Collapse
iammalan profile image
iamMalan

The best DEV post ever!!! You're talented as hell man! Keep up! πŸ‘

Collapse
kerthin profile image
Roden Author

Thanks

Collapse
bharathkumarmurugan profile image
Bharath Kumar

That was so amazing art work.

Collapse
gizilhn profile image
gizilhn

wow this was very instructive. I'm not a software developer, but I figured out how to improve my portfolio.

Collapse
kerthin profile image
Roden Author

I wish you good luck in improving your portfolio! πŸŽ‰

Collapse
booyouon profile image
Vince Abuyuan

Woah this is really cool! Really inspired me to work on my CSS

Collapse
kerthin profile image
Roden Author

Thanks! Good luck with your work

Collapse
codeparl profile image
CodeParl

Your work is so elegant, keep it up buddy!

Collapse
kerthin profile image
Roden Author

Thank you for your kind parting words.

Collapse
pmejna profile image
Przemyslaw Mejna

Great work :)

Collapse
kerthin profile image
Roden Author

Thanks 😊

Collapse
sylvainjacot profile image
Sylvain

Really amazing job. But what about the page speed ? What's your score on mobile ? 🎠πŸ”₯

Collapse
kerthin profile image
Roden Author

The loading of the site as a whole is not very good, because the DOM structure is too large, and a huge amount of css code does not allow you to make the loading fast enough. I need to reduce the amount of code where possible, and even more minimize the quality of images on the projects page.

Collapse
ibrahimwehbi profile image
Ibrahim Wehbi

Amazing work, well explained, well written <3

Collapse
kerthin profile image
Roden Author

Thank you for your high assessment of my article.

Collapse
evandaley profile image
Evan

Nice work!

Collapse
kerthin profile image
Roden Author

Thanks πŸŽ‰

Collapse
quangcanh2975 profile image
Quang Canh Nguyen

Wow. It's amazing. I always suffer when working with css and it usually spend a lot of time to complete a simple task . Could you please give me some advices about how you learned and practiced it? Thank you very much

Collapse
fanchgadjo profile image
Francois K

That looks amazing ! I like the animations and the attention to detail.

Please, try to fix the fron-t-end typo, it draws too much attention.

Collapse
kerthin profile image
Roden Author

Thank you for your feedback! πŸŽ‰ As for the typo, I corrected it on the site, it remains only to correct the error on the article's splash screen.

Collapse
osiclin profile image
osita

Beautiful

Collapse
kerthin profile image
Roden Author

Thanks 😊

Collapse
thecodealchemist profile image
Nyasha Chiroro

Dude this is amazing

Collapse
kerthin profile image
Roden Author

Thank you very much for your high appreciation! 😊

Collapse
mayankpathak profile image
Mayank Pathak

"Nice work @kerthin , Likes the Portfolio very much, Really Amazing work"

Collapse
kerthin profile image
Roden Author

Thanks! πŸŽ‰

Collapse
cenacr007_harsh profile image
KUMAR HARSH

The Landing Page is really unique and looks dope.

Collapse
kerthin profile image
Roden Author

Thanks! Animation really makes the page much more unique. πŸ¦„

Collapse
samyukthasudhakar profile image
Samyuktha Sudhakar

Your work is 🀯. Trust me the way you articulated it in this article with all the relatable gifs took it to another level. Had fun reading and learning, thank you πŸ˜„

Collapse
kerthin profile image
Roden Author

Thank you very much! πŸŽ‰ It's nice to know that you liked my article and made you laugh.

Collapse
mariamoalli profile image
Mariam Oluseyi-Alli

Awesome display of details πŸ‘

Collapse
kerthin profile image
Roden Author

Thanks

Collapse
aaheli8 profile image
Aaheli Sadhukhan

This looks so amazing!!! Great work.

Collapse
kerthin profile image
Roden Author

Thanks πŸŽ‰

Collapse
knightkrusty profile image
Vaibhav

Music Player project is pretty nice replicate an native app pretty nicely, although next and prev button in it looks like share buttons.