Hi there, looking for honest feedback about my first draft of Portfolio project on codepen.
In all honesty I dont yet properly understand the workings of bootstrap fluid container and grid layout.
I used mostly old school css and at this stage it doesnt scale to smaller devices well, I will work on that as I go.
I’m not sure whats important at this stage so I throw caution to the wind and open myself to criticizm.
Thanks.
The codepen project
please see the updated project
The idea behind the project is good but there is more work to do on Navbar, see your project on mobile browser. Navbar breaks and messes up. The website is not responsive at all. Try to fix things, if you are using bootstrap then look at other frameworks or learn more on bootstrap (see docs).
Hi Adrian,
This looks really cool! Also what you do is really cool! I think the responsive element will be really important to take this to the next level. Definitely skim the Bootstrap Documentation if you are using it. In my very limited experience Bootstrap can be a really great way to save a lot of time fine-tuning CSS. I really like the contact section. I think it looks really polished and nice.
I have a few things that really stood out to me. You need a header below the nav-bar with your name! This is no time to be shy. Or if you do want to be shy and discrete, put a fake name (Jane Doe, John Doe) in and add yours instead later on. The vrgoggles photo looks a little skewed. I think you may need to crop it to the size you want in a photo editor. The css you have currently is compressing the image to 35% of the original width without changing it’s original height. If you don’t want to crop the photo but you want to modify it’s size you just need to change width and height to maintain proportions.
Also, I think the nav-bar would really stand out nicely with a subtle box-shadow effect. In the portfolio section the background color is the same as the nav-bar so they look the same.
I really like how you made the nav-bar links work without any js. That is really simple and effective. I did play around with this a little because it was bugging me that the links were not taking me to the true start of the section. I think this is because the nav bar is there. If the nav bar wasn’t present you would be at the exact start of the section. I don’t know if this is the best solution by I played around with sneaking the anchor tags in the end of the preceding sections and this seemed to have the desired effect.
<a name="portfolioTarget"></a>
<div class = "logo">
<img class = "logo" src = "http://lets3d.com/lets3d/logo/tetra512.png">
</div><!-- end logo class-->
`type or paste code here`
I hope this helps!
Thanks,
Gabe
Thanks for the feedback both of you.
I have taken it all onboard and made some good advances and studied bootstrap some more.
Fixes included:
Added my name to the top of the About section,
fixed the distorted image,
made the whole thing responsive by utilizing bootstrap grid instead of %
fixed the nav bar collapse issue, by utilizing bootstrap nav system.
Still have work to do making the nav bar position “fixed” (my current methods break the nav nav-bar system) I might need some help about making this work, also making the navbar go full width, also making the nav button text a bit bigger. The nav tutorial I followed didnt cover these 3 things.
Here is the updated attempt.
https://codepen.io/Adrianl3d/full/QmZBMx/
thanks again for any input.
There is more room for improvement. Below you are using images for social media connections, that text also doesnt look good. Make it bigger and make a proper footer.
Instead of images for footer use svg or web fonts (most supported). Something like font awesome will be good but not best.
Navigation and other elements are looking good now and are responsive.
Hello! I think you can make a email clickable: adrian@lets3d.com.