Https://iamcharliekim.github.io/portfolio/

Https://iamcharliekim.github.io/portfolio/
0

I would like some feedback on my portfolio website, especially in regards to responsive design and overall visual aesthetics! Thanks!
https://iamcharliekim.github.io/portfolio/

1 Like

Nice work! Design looks super clean :slight_smile: Few thoughts for you:

  • Change the Favicon
  • Add a graphic to the home page. Headshot or candid photo would work.
  • The language is a bit formal on the Home and About pages. Use it to show some personality :slight_smile:
2 Likes

thanks for the feedback James! Really appreciate it

1 Like

Hmm… a little too monochrome for me, but hey, great job!

yeah I was thinking it needs an accent color

1 Like

yeah…
kinda does unless it is just your style.

considered your feedback and made some adjustments:
https://iamcharliekim.github.io/portfolio/

1 Like

Nice, man! It has now become amazingly awesome!

Great here are few things I should have added

  • Mobile Responsiveness
  • Little animation while changing views ( about, projects etc)
  • A little more explanation about the project like technology stack etc
1 Like

so I actually designed the website mobile-first and added media queries for wider screens but for some reason when i look at my website on my phone it doesn’t adjust the layout as it should. However, it works on Chrome…

I’ve included the proper meta tags but for some reason it still doesn’t work. Any idea on how to solve this issue would be greatly appreciated!

Here is my repo: https://github.com/iamcharliekim/portfolio

1 Like
  • Don’t leave your href empty. If you have a link with no href, it should not be a link. Use a <button>. Same for your .menu with links inside that are divs.
  • It’s better to use CSS to style the same set of links instead of making separate mobile and desktop versions of the same code. Goal is to “not repeat yourself”.
  • You are using incorrect quote characters here: <meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
  • Try not to use numbers in classnames, it’s not good practice .project1.
  • Try to keep your CSS clean, use a linter if it helps. It’s not necessary but it helps with readability. ie: missing semicolons margin: 10px 0
1 Like

really appreciate the feedback so thank you!

What did you mean when you mentioned “incorrect quote characters” in my meta tag?

1 Like

It would seem better to put it all on one page and have the user scroll down in order to see it.

However, the page is very nice and I wonder where you got the background image from? I like the style and it seems hard to find background friendly images.

Use CSS transitions to make your buttons more fluent when changing style.

–> https://www.w3schools.com/css/css3_transitions.asp

Your Navbar seems too big on smaller screens:

For your quiz app, make the selected option change color. The little bullet point seems hard to notice and strains the users eyes to look at.


Notes

Please hit the reply button or I do not get notified.

Helpful tools–> https://codepen.io/Mike-was-here123/post/check-out-these-sites

2 Likes

You are using curly quotes but you need to use straight quotes for HTML. ie: is curly, " is straight

2 Likes

wow i didn’t even know you could do both. not sure how I even got the curly braces but thank you!

1 Like

no problem! usually curly quotes come from autocomplete in programs like word or notes, or from copy/pasting from other sources, so just remember to double check! curly quotes are not valid code and can cause problems for you

2 Likes

finalized my portfolio page (for now):
http://iamcharliekim.github.io/portfolio

would like some feedback on the mobile-view!

1 Like

I love the websites look and there are only two things that I can immediately spot.

From a CSS users view you could add transition: 0.4s; to all the links so when they are hovered they kind of slowly grow instead of instantly.

Also maybe have some :hover effect on the contact page with the contact links :face_with_raised_eyebrow:

1 Like

transition: 0.4s ease-in-out;

Line spacing for your name and the footer needs to be expanded on mobile.

Click on the image to see full image.

(Please hit the reply button).