Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Minimalist Portfolio using HTML, CSS, Javascript

#accessibility#fetch#sass/scss#semantic-ui#solid-js
P

@Jeth0214

Desktop design screenshot for the Minimalist portfolio website coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
3intermediate
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hello Guys, Is it good to have this project as my portfolio? I am just going to change those images and edit the descriptions and links. Can you guys give ideas on what I need to improve or change if I will going to use it as my portfolio.? Also, please have a code review on my solution. It will help me write my code more efficient and readable. Thanks.

Community feedback

P

@christopher-adolphe

Posted

Hi @Jeth0214,

You did a great job for this challenge. šŸ‘ I have check your solution from your git repository and everything is nice and neat there. šŸ‘Œ I like the approach you have used for the portfolio. I only have the following suggestions.

  • You should refrain from using id selectors in your CSS because it hinders on the reusability of style.
  • I saw that you are handling responsive images via JavaScript. I recently found that there is nice alternative to achieve the same result. Maybe you can give it a try. šŸ˜‰ Read more here
<picture>
  <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
  <source media="(min-width: 800px)" srcset="elva-800w.jpg">
  <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
</picture>
  • You might want to wrap asynchronous logics in a try...catch block like this:
async function renderProjectsToTheView(width) {
    try {
        let response = await fetch("../assets/json/projects.json");

        if (response.status === 200) {
            data = await response.text();
        } else {
            throw new Error(`Error: ${response.statusText}`);
        }

        projects = JSON.parse(data);
        device = checkDevice(width);
        getProjectsData(projects, device);
    } catch (error) {
        console.log(error);
    }
}

And yes, you can absolutely use this as your portfolio website but I would suggest you to spice it up a little bit more so that you come up with something unique because I think many have had the same idea of using this project as their own portfolio. šŸ˜‰

I hope this helps.

Keep it up.

Marked as helpful

2

P

@Jeth0214

Posted

@christopher-adolphe Thanks for those tips. I learned new things. I will continue to create frontend challenge to put on my my portfolio. Then, I will put some changes to make my portfolio different from this one. Thanks

0
P

@christopher-adolphe

Posted

Hi @Jeth0214,

I'm happy to help šŸ™‚. I have yet to try the responsive image approach but I see you've already applied it. Well done!

Yes, that's the way to go šŸ‘. I need to set myself some free time so that I can start my second challenge (it's a bit overdue now šŸ˜…) and also think about my own portfolio too.

Best regards.

0
P
Daveā€¢ 5,245

@dwhenson

Posted

hey @Jeth0214, the site looks good!

Definitely look into using a HTML solution for managing your images! My only other suggestion is to perhaps put a min-height on the body as in the contact page your footer is no longer at the bottom of the page which looks odd.

I actually adapted this challenge for my only site, it still need work, but you can have a look here - https://dwhenson.com/ you might get some ideas of changes you could make to give it your own style.

Cheers Dave

Marked as helpful

1

P

@Jeth0214

Posted

@dwhenson Thank for your comment. I saw your site, It is nice. It gives me ideas on where to start. I managed those images by using the picture element suggested by @christopher-adolphe.

1
P
Jason Nembhardā€¢ 320

@jNembhard

Posted

Hey @Jeth0214,

This a great attempt at a portfolio, but I'd suggest you re-do it completely after you build more projects.

Why? Looking at what you have now, the implementation is clean and understandable, but people who hire also like to know why you make certain design decisions and used certain coding tools. If you started with a framework, you could've cut this down to 3 static pages and one dynamic page instead of 7 static pages.

You did exactly what the instructions said, and that's a good start, but what can you do to make it yours? Clickable portfolio pictures, your own language for the projects, animations perhaps? You get the picture. Get as creative as possible!

0

Please log in to post a comment

Log in with GitHub
Discord logo

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