First portfolio-less portfolio

Hello Everyone,

I just finished my portfolio. I would appreciate any feedback. I am stuck on making it more visually appealing.
here is the link: http://codepen.io/yodlim/pen/BQgKZq

3 Likes

looks like you could make it more visually appealing like you said. but not bad for a start :slight_smile:

How to add the icon of freecodecamp to the project like you

Nice job. Looks great. Links work to.

You have to use the font awesome in your css like this https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css then to add the icon in your HTML use this html <i class="fa fa-free-code-camp" aria-hidden="true"></i> and here you see some examples to use it. Good luck!

Looks good for now I would say, I would add some color to it and a picture to make it more visually attractive. You can always come back later to improve your portfolio :wink:

2 Likes

very simple and cool.
Am stuck on making mine visually appealing too.
I think i’ll just keep it simple like yours.
here’s a link to mine

Plain and simple, love it. As suggested, you can some color to break the gray also it would be nice to justify those projects. :slight_smile:

Maybe you’ve already moved on, but I think the colour scheme looks very nice. It’s simple and tasteful. I’m sure you meant to write portfolio and not potfolio :wink:

I like the icons at the bottom. They look really great. The only thing I thought you really need to clean up is the form at the bottom. At least on my screen, it went right to the edges and doesn’t look very good at all. Maybe you need to put some CSS coding on the form-group to make it a percentage of the width or put some margins in.

Hm, your portfolio is very clean and simple, which I like. It’s very easy to navigate and read. That said, it’s also very much like a standard paper resume. This is the internet. Use some colour (not too much!) and punch up your page with some photos or images. I think the hard part is deciding what photo and how it should be presented. Take your time with that and create one yourself. At the very least, make a profile picture to show everyone who you are. People like looking at pictures. I think the for the contact info, you may want to reconsider posting your email online. Spammers. Maybe you can just have a button that creates and sends you an email (I don’t know how to do that) or create an online form like the sample page.

I like the structure of it… regarding its visual appeal, I do not dislike the sobriety of the colours although you could add a little touch here and there. I mean, keep it grey but perhaps add some detail in another colour (such as lines or buttons, or even some of the fonts). Don’t add to much though! What I know from interior design and fashion is to never use more than three tones. A main one (the grey), another one for details and -eventually- a third one very sparingly.

Or, another option would be to use background images. You could put something with the tones you have chosen, such as a grayish landscape (mountains come to mind). This would keep the serene mood of your portfolio but make it look more polished at the same time…

this is my advise. Do not ask me how to do it though! I am only now starting to do my own portfolio… wish me luck! :star_struck:

Type font awesome cheat sheet
Select the icon you want
Embed the code in your html

I enjoy your portfolio. I would suggest adding a background img. Great work. Just add the img url. This is the CSS code btw.

.pageOne{
background:url("–#--");
background-size:cover;
height:800px;
margin-top: -10%;
};

Hey Limyod, I have a quick way to fix a design problem with your website. I don’t mean to revive a dead topic, but this may be able to help someone else with the same dilemma.

When you select Home, About, Projects, or Contact from your navbar, the website scrolls down and the navbar covers up the title of whichever section you navigate to. To make it so that the navbar doesn’t cover any titles, you can change where the scroll lands using:

    padding-top: 10px;
    margin-top: -10px;

…in the CSS properties of a class you can assign to every element you’d like to navigate to. Increase the pixels (i.e., -10 -> -30 and 10 -> 30) if the navbar still covers some information.