Here’s is my portfolio project. Designed primarily for laptops and tablets…!
I’ve put a github link also as it shows the page in full browser and not the slightly shortened height of the codepen. Codepen version seems to arrive slightly off to what i thought I coded for in-page anchors.
The contact form is not fully working but there for visual completeness.
Menu collapse button doesn’t work in codepen but works in everything else. If you can see what I’m missing regarding the code in codepen please let me know
I appreciate your honest thoughts - positive and negative!!
Your design looks good, abstract, clean and yet playful.
You might want to target="_blank" your hyperlinks in order to keep your own website open in a different tab when visitors want to skim the linked portfolio and social media profiles.
Also, I’m using firefox and your mail form at the bottom seems slightly off…
Other than that I love it… good job!
Like John stated. I love the clean and playful design. Def my type of design. Great work!
Looks good. Your fonts and art style is very quirky and lighthearted, while your elements are nicely positioned and spaced, so it looks clean as well.
- Your circular icons in the navigation are a bit close to the edges of the bar.
- You have “Back to top” at multiple positions; maybe you can add a back to top button that follows the user instead
- Two of your form inputs are to the right of their labels, while one is underneath its label. They should all be consistently either to the right, or under, their labels.
Again, good work! I look forward to seeing more of it!
Good job! I like so much the design. In my opinion, the font size is a bit small, especially in the header. I would not put social icons into the menu collapse. If you decide put them in the menu, I would not use icons, maybe the same text of navbar, it look a little weird now. I would add padding-left in the input type text, in the form and I would and increase the font size here too.
Congratulations! I love the font that you used.
Lots of brilliant feedback so thankyou all.
Good point about opening new pages. I’ve gone back and forth trying to decide which is better received. For me I know I don’t like having extra tabs opening but I’m possibly unusual.
The contact form is pretty poor. It was a cut and paste job as I just needed a visual placeholder before I do it fully.
I agree it’s not good and I am going to completely redesign it - thanks all of you for your comments on that part
The circle icons in the header have been a right pain. I also wanted them smaller as it reduced the nav are height which looks nicer - my problem was that although I could make the circle and the font reduce in size, once I did I could not keep the font aligned to Centre of circle. (Any thoughts looking at the code how to do this?). I thought about using text instead but I really wanted to practice putting the icons into a right aligned bar. Maybe I’m so new to all this I’m missing obvious things but I found just getting the icon fonts etc into my project very hard and time consuming. Should be at least 15 seconds shorter next time!!!
The logo is a return to top button but “totally un-user friendly” as its a secret!!! I think the ‘back to top’ button on the nav bar is a good idea though I’ve not noticed seeing them on sites before. I will have a mess later with it but need a break from seeing that cows face staring at me for a day!!!
3 questions for you all!
- Would you all open links in new tab?
- Was it the contact form font-size that was too small or the about me text and portfolio titles too?
- Anyone know how to keep my font centralized in the circles when I reduce circle size (for the social icons)!!!
Thanks again for your comments - useful to hear all your opinions and I have taken note
Hi, I really like your site, very clear design, as others said. I like the colours, the grey and yellow combination looks fantastic together, and the whole is very creative and different. I love it!
I’m not sure I would use the blue and the red circles though, I think it’s really beautiful without those, just the white icons in the grey background, (or maybe just a white circle border would look good as well) It’s only personal preference though .
I’m not sure how you could keep the font centralised if you reduce the circle, but in my own portfolio I was fiddling with padding on a lot on my buttons. Very time consuming, but in the end I got an okay result.
Another thing. In the portfolio part, I would try to give the tiles a bit bigger border, maybe even a bit shadow, so they jump out a bit more.
I think it’s only the contact form that has a too small font size, the others look good to me.
Opening links: I personally just used the new tab, because codepen doesn’t allow any other way.(if I understand correctly) But I think I would also prefer to open in the same tab.
Your design is beautiful!
It’s very late and I should be sleeping instead of going through FCC forum posts.
But for what it’s worth, I think your page looks damn good
thanks for your constructive words. Very appreciated.
I will definitely have a look at the borders. But I’m sure you know th feeling of ‘I will have a rest from it for a day’!!!
That makes sense. I will implement the new tab opening from now on.
My contact form is awful. I’m going to redo it from scratch - I have to admit that I threw it in there at the end just as a sort of place holder till I could learn how to do a nice simple one.
Haha the amount of times I’ve done that and never gone back… Try to make a habit of not doing that! Believe me you’ll thank me when you’re in a job interview and realise then that it doesn’t sound so great trying to explain yourself hehe!
thanks - always nice to hear.
I know I was way too lazy throwing that form in there as a ‘temporary’ measure!!!..I must do it tonight…
There is a way to remove the code bar from the top if i want a full website size for my portfolio ?
I like it. Very coherent and intuitive.
Thanks Jon. Appreciate your feedback
?hi. Im not sure what you mean…?
“But I’m sure you know th feeling of ‘I will have a rest from it for a day’!!!”
One way to keep your font centralized in the circles is this:
transform: translate(-50%, -50%);
font-size: 10px; //you can put whatever font-size, always keep centered.