Hey everyone!
I just spent a big block of time building my portfolio site for the final project in the Responsive Web Design course. Let me know what you think!
How’s my code look?
Am I doing anything wrong?
Are there “best practices” in code that I’m not doing?
How’s my design?
Any tips?
Thanks for taking the time to check out my project! 
P.s I left the freeCodeCamp test script at the top of the html. You’re welcome to remove it to take a look at the project unhindered.
Nice work. Looks great!
The only issue I saw, and maybe this was on my end, or maybe it’s a CodePen thing, but it didn’t work on my iPhone 7 - scrolling was almost impossible and it would sometimes black out upon attempting to do so.
Anyway, keep it up and good luck!
At first glance it seems like this isn’t ready for review. You have lorem text for your projects instead of telling me a little about what you did.
The languages that you speak…I shouldn’t have to go to your code to see the ‘alt’ text to figure out what the icons are/mean. A little text or label under the icon would be meaningful.
Get in touch section, you have three icons of which only one seems to be a way to see anything about you.
That is the largest footer I’ve ever seen. And why have the links in there (some of which work, others don’t) when you have a fixed navbar?
This may just be a nit with me but that throbbing ‘Learn more’ reminds me of the old flash element from the 90’s. I hate it!
It looks really nice but I would like to point out some things…
One more thing I know this takes some studying but consider using Github Pages to host your project page it’s free and once you know the basics of git not only can you use that as one of your skills you’ll gain so many benefits for coding, and since it’s hosted as it’s own website it will look more legit to employers.
I know this is a lot but don’t be discouraged i’m no where near perfect myself but feedback from others can go a long way, Happy coding!
I’m going to assume this is a work in progress, so I wont ding you on your placeholder text and stuff…all of that is totally okay, esp since youre in the learning stages. goodness knows my portfolio wasn’t anywhere near that refined or complete after 12 hours. You’ve done an awesome job 
I totally agree with not hosting your portfolio on codepen, its great for practicing with, but not for presenting yourself with. Github pages is a popular choice, and if your site is entirely front end, surge.sh is another great option. I understand this is an FCC project, so not like you need to worry about all of that right now, but when you’re ready to job hunt, you have options.
Definitely consider using a picture of yourself instead of that icon, or no picture like that at all if you don’t want to. It does make things more personal and would add personality though.
Look up how to remove the blue outline from the Submit and Let’s Do This buttons that appear when they are in active state.
Personally, I dont think it’s necessary to label all the icons in your skillset…if someone doesn’t know what the logo for github, vsc or wordpress means, they arent your target market and I think it would make it look cluttered and take away from the clean look you have. Im another thats not too keen on the animated learn more link, but…all of these are personal preference things.
Anyway, its super clear you put a lot of work into this. I think your layout and design skills are fantastic considering you are just getting started in the FCC curriculum and new to development. This project is definitely something to be proud of.
Hey everyone!
Thanks for taking the time to give me feedback, I really appreciate it. I should have stated in my post that this is a project for the Responsive Web Design course so it is more of a template for a portfolio than an an actual portfolio. Similar to how the product landing pages are. This is the reason for all the Lorem ipsum text, its more of a placeholder. Same goes for the social buttons that are not linked. I just thought it better to keep them there as a template for the project. Although I should have put in some example links for the social buttons.
@willjw3 Thanks! Hmm that doesn’t sound good. I’ll definitely look into it. My code probably isn’t the best for cross browser support. Something I need to improve on greatly.
@Roma Thanks for the tips. I totally agree with you on the Learn More link. I was very unhappy with it when I put it in. I tried using an animation for it which I couldn’t get to work properly. Then ended up with a transform that was not so great. It just looks very ‘pixelated’. I’ll replace it with plain text.
Do you mean the Tools I Use section? Because the Languages I Speak have a little text above the icons. I’ll have to agree with @cndragn on this one. I’m not sure I want to put a text label underneath the tools. I think it would take away from the clean look. I’ve seen many profiles that don’t have the text underneath.
@Myles2 Thanks for all the feedback. For point 1 & 2, as I stated above I forget to mention that this is more of a template portfolio specifically for the project in the course. Although I will definitely check out Formspree for when I host my full portfolio on Github Pages (thanks for the tip). For point 3 I just linked my name because most sites I see link their logo and name to the home. But you did draw my attention to the fact that my anchor doesn’t bring me to the correct height on the page! For 5, the picture I have is more of a template placeholder. For 6, I’m going to have the button open up an email. I should have put an example email in though. For 7, so do you mean only have the text within the button be an active link rather than the whole button? And do you mean my links in the navbar? I’m definitely not discouraged. One problem with self learning is you don’t get regular feedback or constructive criticism on your work. So its great to have a community that provides each other with that. Thanks again
@cndragn Thanks for the feedback. As I said at the start of this post, this is more of a template portfolio for the course project than my actual portfolio for employers. I’ll be sure to check out surge.sh I haven’t heard of that one. I will definitely add a picture of myself for my real portfolio. Oh thanks for the tip on the buttons blue outline. I completely forgot to remove that! I agree with you on not labeling my icons. For the Learn More link, I wasn’t happy with it from when I put it in. I originally tried to use keyframes to animate it but couldn’t get it working. Instead I settled on a tacky transform. The pixels don’t seem to render smoothly at all which makes it look pretty bad. I’ll definitely change it. Thanks for all your compliments! 
While this does make sense I mentioned it because you have two buttons that essentially do the same thing in the same place most people will probably click home since it’s obviously a button next to other nav buttons, and some people who know from going on different websites might will try clicking your name but in my opinion to much functionality can confuse the user but really it’s just a personal preference so no problem.
I don’t mean the nav bar buttons. I’m talking about the "check out my GitHub for more projects " link because if you notice you can click it being like four inches to it’s side. Like I said this is really small to say something about but it was something I like to be conscious of. So If you just got rid of some of that padding it should be an easy fix.
But if you didn’t do anything I mentioned it really would be fine I just thought to point them out.
Happy coding!
I’ll have to disagree with you that having the name/logo of the website in the navbar link to the home is too much functionality. In fact, I think its sort of a standard that most websites use. Or almost every website I have come across anyway.
I didnt notice the Github sentence was doing that. Thats not what I want it to do. It was definitely a misuse of padding. Thanks for bringing it to my attention 
EDIT: I just checked the code and I havent actually added any padding. It appears that I accidentally created that section clickable! Whoops.
Nice visual design – very clean and modern. I’m not a huge fan of the title fonts, but they’re readable enough.
I recommend having the section titles link to the individual projects the same way the images do. I also suggest disabling the submit on the form, since it’s a placeholder.
Nice! i like it. It’s clean and fast.
Only problem I see is that the hamburger menu to the left will overlap other elements if you shrink the browser, also the vs code icon is not obvious to detect for most visitors, and the only link that works in the right part of the footer is the project link and the obvious lorem ipsum content… But early feedback is always good to have.
Now you can throw a couple of more hours on it to polish it and add silly paralax effects and make a Hugo theme of it and then host it on GitHub with a custom domain for free. 
I like it, nice clean design and good use of whitespace.
I would move the nav links and h1 header down a bit, basically, just increase the height of the header and center the content.
Space out the tools icons a bit.
The form is the only thing that is a little broken. On large screen sizes (above 1668px) it is not being laid out as it should. The submit button also moves around a bit randomly a different screen sizes.
The footer content feels a little messy to me. But it’s not bad and there are like a million ways of doing footer layouts. It always gets a bit hard the more content you have. I would see if you can’t tweak it a bit. One option is to layout the license content side by side. Then make the footer a centered two-column layout with the column content being left aligned (if that makes sense).
All in all, I would say you have done a very nice job.
As total newbie too, I have to say I am quite impressed with mobile version. Colors and everything looked perfect. It seemed like something you spent much more than a day in a party mode
If you want to use this one in the future, I would play with desktop version, as the computers (used for projects) and some other images (program icons) look bigger than we are used to these days.