Work in progress portfolio

This portfolio was a ton of fun and is still a huge work in progress, so please don’t judge the “about me” to harshly XD.
I do plan to add a link and upload the code to the MP3 player I made once I remove the copyright music. Also my footer looks weird because it is missing links to my github, LinkedIn(when i get one), and a few others.

website: https://hunterchao.dev

code: GitHub - ChaoHunter/portfolio: My portfolio page

I hope you enjoy and I am open to any suggestions.

PS. I had to use a separate css file to make it work on smaller screens as if I would use <meta …> in my HTML it would cause my site to break. (I built the site without the meta tag starting out, I know me no brain) If you can help me understand why it breaks I would be forever in your debt. Though a separate css file is kinda nice.

Hey, Hunter!

I had a quick look at your work. Here is a few things I’ve noticed from a user’s perspective:

  1. The page isn’t truly responsive. Ctrl+Shift+m in FF lets you view the page in different modes. I saw that your picture didn’t scale nor did other elements. In fact, you have a little mistake in your mobile.css with “gaps” and “font-size” set to “3em”, blowing up on smaller screens. I found 0.9em to work for your site. Suggestion: re-work with Media Query.
  2. Divitis problem. This is nothing to worry about but I see it for the second time today. HTML5 has nice layout tags available allowing for simpler layout and it makes it easier to style as well. For one-pager there are a lot of DIVs. Suggestion: Refactoring.
  3. Some of the images are huge. I logged onto your website and it took time to load. I saw JS animation, which is sweeeet btw, and a second later the background. Suggestion: Image Compression
  4. No link to your MP3 player stuff. I wanted to check it out)) I know you mentioned it but here is why I’m pointing it out. Perhaps, avoid putting in stuff that’s not production ready (not clickable) because it takes away from UX. I believe it is one of the concepts in software design that you ought to be putting things into your app that are actually going to do something instead of being just placeholders.
  5. Footer is outside of your body tag. Again, this is the second time I saw it today. Perhaps I’m missing something here but it should be on the inside.

Hope my notes are helpful and clear. I’ve starred your repo on GitHub (well done for putting it there :+1:), so will be following your progress. If you are okay with it, I might even submit a pull request :smiley:

Cheers!

Sorry the late response, and thank you so much for taking a look.

  1. The responsive problem seems to be a fault of firefox for some reason. If you use the chrome dev tool to check responsive design the whole document resizes perfectly(I still think the “about” image is to big but I originally intended that size)
    Also if you select a device on firefox the sizing is also set right. Why it bugs out when you move it around manually I am unsure and is 100% probably on me.
    I do plan to change the 3 em gap to probably “space around” or something better since it is using flex.

  2. 100% will refactor if you look my includes the nav bar and is just placed weird. I have no clue what I was thinking XD

  3. I forgot about lowering the quality of images. Thank you and also what tool do you recommend for compressing an image? I use handbrake for video compression, I would assume gimp would work somehow for photos.

  4. I can give a link Bronziy's Music Player (My mess around site where I keep a lot of things i make) The MP3 player looks ugly so be warned. Also I was concerned giving a link while it has copyright music on it, I don’t want to go to jail XD

  5. Thank you I will fix that.

Just wanted to say thank you so much for all the advice. I now have to see why firefox is doing what its doing

1 Like

So about the responsiveness of the app. It seems when I was using chrome dev tools it was applying my other CSS properties when I hit the break point I set. But it you just grab the browser and resize the window then the break points to not apply for some reason. I think this has to do with me not using the <meta…> tag with media queries in the on CSS file. The only way to fix now it find out why the meta tag breaks the page and fix it so I can use media queries.

Or I could just make the images scale down… but then i loose my top bar changing when shrinking the browser window

Hi, @mw3lab! Remember that browsers try very hard to display your content the right way, meaning that they take your code and they figure out how to display it even if your code contains mistakes. The behavior you see in your Chrome browser is set by Chrome itself so that people have nice UX even when the code is not on par. Page responsiveness should be hard-coded in your CSS but I don’t see it.

I’ll find the time to open a pull request and make some additions for you to try out in your code.

Keep up the good work!

P.S. checked out your player - nice! Just drop a link with your contact info at the bottom of the page so that people get in touch with you the developer :smiley:

I’m on Gentoo Linux and I make heavy use of GIMP for single images. Here is your image at 6MB and here is mine at 0.6MB after I scaled it down by a factor of 2 (I couldn’t see the whole image on my 27" screen :wink:) and reduced its quality by about the same factor. Visually they do not differ much. But it’s just a matter of taste and speed.

For batch conversions I’d use magick (convert) in your terminal as most Linux OS have it pre-installed.

So yeah going back through my work and man is it hot garbo. I found the issue to the meta tag thing. It seems that my “welcome” text was not getting smaller as the screen was shrinking causing huge white space to the right. I assumed it was from the “about photo” causing the issues and using meta and media queries was not fixing it so I assumed that the meta tag was just broken and would require a bunch of refactoring. When in reality it was just the big welcome needed to be smaller.

Also made the image shrink as the window shrinks thank you for letting me know about that. I will now check with firefox for now on. I just learned that when a flex box is made the flex items have min-width: auto; causing it to not shrink smaller than the child. This caused the image not to shrink even with the image being set with %.

I am now going through and refactoring most of the CSS to use @media queries now that I fixed my problem.
the hard coded CSS for responsiveness it in a separate CSS file linked in the HTML doc

BTW just wanted to say thank you so much!!! Just talking and thinking about what you have said has helped me think of things differently.

Will add contact info today,

I drive a semi so I might go a while before commenting back but I would love to see the additions.

Dang that image looks great for its size honesty i cant tell the difference . I haven’t touched many photo editing software, I just got gimp for cropping PNGs but my dunce brain never thought of image compression but now it makes total sense as a first time visitor wont have the image cached and needs to download it.
Quick question if i have images in a folder but they are not used do they still load for the user?

Technically - no. That’s because the server response contains only information that is necessary to display the request (CSS, links, Media, HTML, scripts).

And that’s just exporting to JPEG, there are other formats that can take it down to 100KB range.

You are welcome! I am exactly the same. Just talking about things and helping others makes me understand it all better. In fact, I got to think about some of the things you have mentioned, like caching and looking closer at that WELCOME line))) I just started reviewing someone else’s code and it makes for a great experience.

Have fun trucking :wink:. I hope you’re enjoying yourself.

Cheers!

I just finished most of the new edits. Once I have a LinkedIn and a resume to put up I am going to fix the footer up to add more social media things instead of just email.