Hello friends,
Preparing to publish my basic portfolio page soon, as the next step in my career change process (from IT infrastructure). I’ll be seeking a junior front-end position.
Would appreciate any and all feedback on the page: styling, coding screw-ups or lack of best practice, etc. That includes the projects as well.
Many thanks in advance!
Steve
Im on it from my phone, its very tiny. Would be nice with some responsiveness 
Eeek! Lesson learned, test pages on actual devices, not just resizing browser windows! Thanks, I’ll fix this right away.
Steve
It should be fine just by resizing the window, no? Also he’s write, you can work on the font-size. Font-families too! :D. I like the animations and good job!
Don’t forget to fix the spaces between sections!
I added the viewport meta tag and responsiveness should be A-OK now. Thanks again!
Steve
Hi Tech,
When you say
did you have a suggestion in mind? I’m using 100vh for each section to make it look clean when navigating via the menu. Thanks for the feedback!
Steve
Hey,
Good idea on using 100vh but sometimes it doesn’t look so good when you have a lot of space left over (imo), here’s an example here:
Althought, here there is leftover space but it still looks very neat, so keep that here that way 
:
LOL, love the visual aids! You must have a huge screen/resolution…another lesson learned to test as such. I will think on how to tamp down that extra space -maybe set a max width on the “About” text content so it extends further vertically. Thanks!
Steve
Good idea ! XD But what do you mean I have a huge screen/resolution? I don’t know shit about that so tell me X).
#MSPaint
I’ve introduced another much needed responsive breakpoint based on the feedback received and I think it looks much better now. Additional suggestions are most welcome. Thanks folks!
Can you give me all the breakpoints you use please 
? I’m kinda bad with responsive web design sometimes especially media queries.
The site is really good and I see that you have put a lot of effort in it. I would still like to point out the following:
maybe ovals aren’t a good choice as they look kind of cartoonish. If you still prefer to keep them then I think you should try to center the text within the oval and add some padding to make them look decent.
while scrolling if I hover over the projects, they climb on top of the nav-bar
make the project hover-animation faster
add padding-top for the footer
Hi Tech, take a look at my CSS file (View Source in your browswer) and you can see the breakpoints towards the bottom under the Media Queries comment. I just have two for now, at 500px and 1000px.
Thanks again and any other questions/suggestions, please let me know!
Steve
Hello rustyelectron,
Thanks for taking the time to respond!
Re the ovals, if anyone else reading this would care to comment I’d appreciate it. Stay or go? I’m not wedded to them, just kind of started on that theme. I don’t mind the site being a bit different if it helps it stand out to a recruiter, but don’t want to make bad/dated design choices either.
I’ll play with z-index to see if I can get those project cards to behave, thanks! Same with the transition speed.
I don’t want the footer too large, but I’ll play with it to center the text vertically within it.
Thanks again! Let me know if anything else jumps out too.
Steve
Hey!
I tried to view the source code of the page but that gave me access to html only and when I tried inspect element that didn’t let me see media queries but only the other CSS content.
Althought thank you for telling me that you have 500px and 1000px.
IMPORTANT NOTE: You could, just paste all of your HTML and CSS code into a codepen to make it easier for us to read your code and give you help regarding the code. Also would help me learn by reading your code 
Regarding your media queries again, is it @media (min-width:500px) { //CSS } and @media (min-width:1000px) { //CSS } OR @media (max-width:500px) { //CSS } and @media (max-width:1000px) { //CSS } exactly? If you don’t mind saying/showing your code (on codepen).
Again, good job sir!
Hey, looks great overall,
Points to consider:
Top-nav bar on hover animations/effect, I don’t like the transformation, the circle. You can highlight the hover with color game or make the text “GO UP” a bit ( by using transformY …)
also… the form!
You repeat yourself with * your name, and then using a placeholder with Enter your name.
That is unnecessary.
Just use * Your name inside the placeholder so you have overall 3 lines of 3 inputs rather than 6 lines.
Use the remaining space to increase the size of your social icons, and also play with the colors.
Hope I’ve been helpful.
Hi Tech,
No problem! But you were almost there! View Source and then just click the hyperlink in the for style.css to peruse away. Also, searching my name on github (from the URL) will give you my repo with the code. 
I started the project on CodePen but moved it to GH when I started really improving it, so I could practice with git. I’ll publish the 1.0 version on my own shared hosting account when its ready.
thanks,
Steve
Alright, thanks !
Hi borispov,
Thank you for the kind comments and suggestions!
I will play with the nav item transition a bit more to see what I can improve.
Re the form, everything I’ve been reading about form best practices say that using only placeholder text is bad and confusing to users, who may forget what they were supposed to be typing. Anybody else have input on this?
thanks again for responding!
Steve
Hey steve.
These are just my opinions, and I too am fairly new to web development:
I like that you’ve setup a fast and firm color scheme. However it might just be me, but i don’t like the colors. Have you picked them out yourself, or used a color scheme found online? If not, i would try to use another more popular color scheme.
The smooth scroll on your 1-page website is pretty slick. I would very much like to know how you’ve done that
I agree witch Tech with the too much white space on a large screen. My resolution for example is 1440p, and i feel like there’s a lot of space and not too much content.
The welcome splash image looks pretty well. Have you considered adding a down-pointing arrow or something, to indicate there’s more down below? I got the feeling for example that this site wasn’t a one-page website.
The gentle zoom animation on your projects are very nice. I really like it. However the heading seems really small. Same with the title bar. Have you considered changing the font or making the letters all caps, or start with a big letter?
Have you considered adding a gentle animation to the hover on social media buttons?
Have you considered using another symbol than a " * " or just dropping the symbol entirely?
You button for send does not make the cursor a link-click cursor. Is that intended? I didn’t know if the button even worked to start off with.
Your message box looks kind of weird to me. Maybe add a full border? When the text starts a line over the bottom border, it makes me feel a little uneasy.
Have you considered adding a bit of padding between the copyright statement and the top of you footer?
I hope i did not offend you, that isn’t my goal. Good luck with the page, it looks pretty swell!
