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
Β 
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
Β 
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
Β 
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
Β 
mayankpathak profile image
Mayank Pathak β€’

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

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
Β 
osiclin profile image
osita β€’

Beautiful

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
Β 
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
Β 
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
Β 
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
Β 
pmejna profile image
Przemyslaw Mejna β€’

Great work :)

Collapse
Β 
kerthin profile image
Roden β€’

Thanks 😊

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
Β 
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
Β 
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
Β 
bharathkumarmurugan profile image
Bharath Kumar β€’

That was so amazing art work.

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

Collapse
Β 
mithukr profile image
Mithu_kr β€’

Tq buddy πŸ‘©β€πŸ­

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.