First Portfolio Ever!

First Portfolio Ever!
0

#1

Hey guys,

Just finished up my FIRST portfolio, was about three days of reading, learning, coding, rinse and repeat!

Tell me what you think and don’t be afraid to tell me what could improve!

https://s.codepen.io/TSwiv/debug/JRJGvk

Thanks FCC community…:v: out


#2

Nice! :thumbsup:

I think you forgot to make your tribute page thumbnail a link. You might also want to make the name and email fields the same width as the message box.


#3

Ahh cheers for that @kevcomedia, There’s always something you’ve forgotten!


#4

Great Page! Keep up the good work. I liked the progress bars.


#5

Great design and I particularly like the bars for your skills! If I may add, put an “overflow-x:hidden” in your body to remove the horizontal scrollbar. It’s up to you though, I just don’t think that you need to scroll your page horizontally. Other than that, great job!


#6

Great tip! Thanks heaps! Didn’t think of that!


#7

you’re welcome :slight_smile: good luck on the next challenges!


#8

hey, this is a really great first portfolio :slight_smile:

I have a few thoughts, which you’re totally free to take or leave:

  • you’ve picked three pretty cool fonts to use, which is neat, but it makes the page a little overwhelming. I would probably just stick to one of them, like Exo – it might be less exciting, but it makes it a lot easier for users to know where to look

  • a cool thing to do a lot of times is to avoid using pure black, and go with a color that works with your theme instead - if you switched out black for a dark dark blue like #0C0E1D; it might pull everything together better visually

  • this is less of a suggestion than just a “hey this cool thing exists”… there are some pretty neat image filters in CSS that you may be able to use: https://css-tricks.com/almanac/properties/f/filter/ – the only thing you’ll need to remember is that it isn’t fully supported, so if you want it to work you’d have to use vendor prefixes. Example: if you wanted to have your grayscale image filtered to a bit of a sepia that would match your background image, you might do

    #self { -webkit-filter: sepia(100%) hue-rotate(-20deg); filter: sepia(100%) hue-rotate(-20deg); }

  • the jumbotron’s h3 might be easier to read if the font-size were a little higher like the h3s on the rest of the page

  • I would highly recommend sticking a text-shadow on the jumbotron text so that it will stand out more from the background image. The great thing about text-shadows is that they won’t ruin your background image by covering it up - they just make the text pop a little more, like this…

I don’t know if any of that will be what you want to do, but regardless, keep up the great work! And seriously, the progress bars are a nice touch

edit: forgot to mention, there was one small typo by the contact form “bussiness” --> “business”


#9

Nice work @Taylor-S,

When in mobile view your text is slightly off centre due to your image. :vulcan:


#10

Wow! Great suggestions @gracenut! I’ll definitely be implementing these in my portfolio.
Also great tip on the text shadow


#11

@CarlBlakemore thanks mate! I’ll try figure that out.


#12

Really nice! Seeing how this is your first portfolio, I think your skills are way too high. That you have 80% of html learned is high but feasible. 80% of CSS proficiency I think is too high. CSS is very complex, and while you may have 80% basic knowledge, I know you do not have 80% proficiency. CSS takes YEARS to master. (I would place myself and most people here at probably 60% proficiency at completing front-end but thats my opinion.)

I don’t want to sound belittling, but CSS and HTML take looong time to be proficient. Also, jquery is a library. Javascript is the language, you may want to change that.


#13

You should be able to hide the image using the media query or have it switch above your text


#14

Thanks for the honesty @IsaacAbrahamson , I’ll make some more changes, it’s hard to grasp skill proficiency as it’s a forever increasing field of knowledge! :slight_frown: I found that this sort of stuff was just being really good at googling a problem and figuring out the answer. This has to come into play somehow.

Thanks again :+1:


#15

I agree. Googling is what we all do, and it will always be the best way, but I don’t think its right to say you are ‘proficient’ in a language if all you know how to do is copy-paste programming without knowing why it does what it does or all the ups and downs of the language.


#16

awesome portfolio u got
now i see u havent hosted ur portfolio
but if were to make and host my portfolio
would that be a good idea to be add the freecamp code projects that i’ve completed to my portfolio?


#17

Hi @Taylor-S

I think you have done a great job, and apart from the good design itself I think you set the tone of the whole page just right. You speak to the person hiring or recruiting, rather than just speaking to other developers.

I noticed one thing looking at your portfolio on a 1366 x 768 screen, which is a common screen size for laptops.

Notice how “devotion” and “Dev.” are left hanging on their own. The link to your codepen only takes us to the debug view so we can’t see the code so I don’t have any specific solution suggestion, but I wanted to make you aware of how it looks on a very common screen size.