DEV Community

Cover image for 🧑‍💻 How I developed my portfolio for a month 🗓 + Demo 🍿

🧑‍💻 How I developed my portfolio for a month 🗓 + Demo 🍿

Roden on June 24, 2021

Full Portfolio Demo Introduction Today I would like to share with you my experience in developing a personal portfolio. I understand that many of...
Collapse
 
m0nae profile image
Monae Payne

Dude, that portrait with the animated background is crazy. Outstanding work! 🖤

Collapse
 
kerthin profile image
Roden

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

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

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

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
 
fradar profile image
FRADAR

This is stunning! I like the way you put this all together. There is just one thing, though. It's not very important, but it stands out to me. On your portfolio page, at the starting, it says "Fronend" instead of "Frontend". I'm sure that it's just a small spelling mistake. Other than that, I love the effort put into this. It is very elegant, and the choice of colours, art and animations are lovely. You are one of the most talented coders I have ever seen!

Collapse
 
kerthin profile image
Roden

Thank you very much for your praise. As for the spelling error, I have already managed to correct it on the site itself, but I forgot to just insert a new picture into the article.

Collapse
 
fradar profile image
FRADAR

Ahh I see that now.

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

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

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

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
 
cenacr007_harsh profile image
KUMAR HARSH

The Landing Page is really unique and looks dope.

Collapse
 
kerthin profile image
Roden

Thanks! Animation really makes the page much more unique. 🦄

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
 
iammalan profile image
iamMalan

The best DEV post ever!!! You're talented as hell man! Keep up! 👏

Collapse
 
kerthin profile image
Roden

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

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

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

Thank you for your kind parting words.

Collapse
 
pmejna profile image
Przemyslaw Mejna

Great work :)

Collapse
 
kerthin profile image
Roden

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

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

Thank you for your high assessment of my article.

Collapse
 
evandaley profile image
Evan

Nice work!

Collapse
 
kerthin profile image
Roden

Thanks 🎉

Collapse
 
pablohs1986 profile image
Pablo Herrero

Amazing!!! 👏👏👏👏

Collapse
 
kerthin profile image
Roden

Thanks 🎉

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

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

Thanks 😊

Collapse
 
thecodealchemist profile image
Nyasha Chiroro

Dude this is amazing

Collapse
 
kerthin profile image
Roden

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

Thanks! 🎉

Collapse
 
mariamoalli profile image
Mariam Oluseyi-Alli

Awesome display of details 👍

Collapse
 
kerthin profile image
Roden

Thanks

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

Thank you very much! 🎉 It's nice to know that you liked my article and made you laugh.

Collapse
 
aaheli8 profile image
Aaheli Sadhukhan

This looks so amazing!!! Great work.

Collapse
 
kerthin profile image
Roden

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.