Minimalist Portfolio using HTML, CSS, Javascript

Community feedback

• 

  P

  Christopher Adolphe•600

  @christopher-adolphePosted over 2 years ago

  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

  ---

  

  Roland Jethro Suyom•365

  @Jeth0214Posted over 2 years ago

  @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•600

  @christopher-adolphePosted over 2 years ago

  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,295

  @dwhensonPosted over 2 years ago

  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

  ---

  

  Roland Jethro Suyom•365

  @Jeth0214Posted over 2 years ago

  @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

  @jNembhardPosted over 2 years ago

  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