Submitted about 1 year ago

Responsive Single Page Developer Portfolio

Bhoami K Khona•360

@bhoamikhona

Preview site View code

This is a solution for...Single-page developer portfolio

HTML
CSS
JS

2junior

Design comparison

SolutionDesign

Solution retrospective

Frontend Mentor - Single Page Developer Portfolio

This is my solution to the Single Page Developer Portfolio.

Screenshot

portfolio-challenge

Built with

Semantic HTML5 markup
CSS
CSS Flexbox
CSS Grid
CSS Animations
JavaScript

Challenges

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

Feedback

Any constructive feedback is welcomed.

Community feedback

Raj Kiran Chaudhary•100
@rk-codeflowPosted 11 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
0
Bhoami K Khona•360
@bhoamikhonaPosted 11 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?
0
Omer Cagri Sayir•80
@omercsxPosted about 1 year ago
Great! Your solution's footer looking better than real one! You can center app logos (github etc.) Great work!
0

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