Skip to content
Submitted almost 2 years ago

Portfolio Page with Next.js and host on Vercel. Screenshot page.

An•330
@antran1245
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Single-page developer portfolio
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

I find difficult putting the rings on the right side of the screen without going overflow. I used clip Css to cut the rings in half and then position absolute to place the rings. How would you approach to placing the rings on the right side of screen?

Community feedback

  • Amal Karim ✅•1,290
    @amalkarimPosted almost 2 years ago

    Hi, An 👋

    Congratulations for completing the challenge!

    I personally myself haven't done this challenge yet. But allow me to give some personal suggestions based on the look of your solution.

    • I never used Clip css, but I think it's not necessarily to use it. Just give the rings position:absolute;, and some positioning value (i.e. right: ...px;, top: ...px;). Or... Using the existing code, just leave it like that. Then add overflow-x: hidden; to <div class="Home_container__bCOhY">.
    • Add background-color: black; to the <body> and change color of the some parts of the content in order to be able to be read. Some of the texts are not readable because they have the same color as the background.
    • Lastly, check the Accessibiliy report and HTML validation report to solve some of the problems there. I think it's a good practice to always try to take care of those two reports.

    Other than those, I think you did great. Happy coding!

    Marked as helpful
    0
    An•330
    @antran1245Posted almost 2 years ago

    @amalkarim Thanks for the reply.

    You right. I should have give the <div class="Home_container__bCOhY"> an overflow-x: hidden;. It would been easier.

    This is my first time using Vercel to host my site and the screenshot is different from what I am seeing on my host site. I think if I fixed the Accessibiliy report and HTML validation report, then the screenshot should be fixed too. However, I am not completely sure.

    0

Please log in to post a comment

Log in with GitHub

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