Submitted 11 months ago

Responsive Single Page Developer Portfolio

Bhoami K Khona• 340

@bhoamikhona

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Single-page developer portfolio

HTML
CSS
JS

2junior

View challenge

Design comparison

SolutionDesign

Solution retrospective

This is my solution to the Single Page Developer Portfolio.

Solution URL: Link
Live Site URL: Link

Semantic HTML5 markup
CSS
CSS Flexbox
CSS Grid
CSS Animations
JavaScript

Resizing and adding hover effects to svg icons
Learning to use <picture> and <source> for displaying images on various screen sizes i.e. using media queries
Image overlay for the projects section
Learning to use keyframes to add animations

Any constructive feedback is welcomed.

Community feedback

Raj Kiran Chaudhary• 100

@rk-codeflow

Posted 9 months ago

It looks great on desktop however there are some issues in mobile devices like horizontal scrolling. Instead of using vanilla CSS, using SCSS would be much better and using mobile-first approach instead of desktop first would be great for responsiveness.

Marked as helpful

Bhoami K Khona• 340

@bhoamikhona

Posted 9 months ago

@rk-codeflow

Actually what is causing that weird behavior are the decorative rings and circle. I tried commenting those out in the code and the rest of the page was working fine.

Do you have any tips on how I could place them so, that wouldn't happen?

Omer Cagri Sayir• 80

@omercsx

Posted 11 months ago

Great! Your solution's footer looking better than real one! You can center app logos (github etc.) Great work!

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord