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 
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
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.menuwith 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 
1 Like
transition: 0.4s ease-in-out;
