Portfolio up and running on github

Code Feedback
1

Hello Everyone, I finally finished my Portfolio and hosted it up on github. i would like to know what you think generally…and possible improvements…
Thanks

3 Likes
2

Hey man your page looks great! Nice clean design!

Do you mind telling me how I can upload my portfolio onto my github account also?

3

Thanks for the feed back
I can give you a small run down

follow the steps listed, when you get to step 3 move to the cloned folder in your terminal using, then on your physical folder, copy and paste your html, css and JS(if applicable) and then go to back to your terminal and continue with step 4

Don’t hesitate to post here if you have any questions.

1 Like
4

Awesome, appreciate it! I just realized that FCC also has lessons on how to get GitHub up and running but I’ll definitely take a look :slight_smile:

5

Sorry, I assumed you had a github account… my bad, but yeah, you just go through FCCs instructions to register and set it up

6

Yeah I do have an account but I don’t have anything in it… I’ve done the projects so far on Codepen… I think it would be practical to get comfortable with Github because it’s obviously widely used.

7

I loved it! But…
I can’t explain exactly how, but the navbar feels a little bit awkward for me. Maybe you should test other styles on the nav.

8

Really really good.

Did you create your own logo?

9

Thanks, I will take a look. I used half my own style and half bootstrap. Did you get the drop down menu on smaller screen size?

10

Thank you. The logo S was from flat icons. All you have to do is give them a mention somewhere on your portfolio

11

Hey, you got a nice website :slight_smile:
Can you tell me how does one get a heading and anchors side by side just as your website has(the name and nav)?

12

Hello meetmangukiya, I made the heading using bootstrap. Everything from the logo and name to the nav-pills are in a single row. This facilitates responsive behaviour of the nav as the screen size changes.
Inside your header div you can make a bootstrap row like this:

`


/

<ul class="nav-pills>
`

You just have to make sure you have the bootstrap at the head of your HTML.

You can also check the HTML, CSS, and Javascript of any website using your browser developer tools.
if you are on chrome, just right click anywhere on the page and click on inspect…or use the shortcut crtl+shift+i on windows and linux, while cmd+alt+i on mac(i think:slight_smile:). Safari and chrome also have developer tools, but google chrome is most recommended.

I hope this helps.

1 Like
13

these are so cool, keep it up fellow camper!

1 Like
14

Oh… yeah, row could’ve done that, didn’t come in mind :disappointed: Thanks for the info. :smiley:

15

Great looking portfolio! Keep up the good work. One minor critique: the background in your hero(?) section makes the text hard to read, at least on mobile.

1 Like
16

Thanks @zaclem01 I have got that feedback alot for mobile users. It’s much better on desktop. I plan add some more paddings to push down the text on mobile view in my media queries.

I really appreciate the time and effort you took to check it out.
Regards, Sotu

17

Wow! Very nice and professional looking. Color scheme is great. Love the spinning animations on your social media links (how did you do that?).

I’d hire you, haha.

1 Like
18

Love the design and the color scheme is really pretty. Some advice:

  • Add a favicon and change the title (on the tab) to your name or something similar
  • Add some padding underneath the header name (Sotu’s Place)
  • Maybe make “Place” the same font size as “Sotu’s”
  • The text in the first portion of the page is washed out by the clock, maybe move the clock to the right a bit? Also just my opinion but it might look better if you make that whole section smaller so there isn’t so much empty space.
  • Vertically center the project descriptions
  • Add a line underneath the “See my work” section before you list the projects.

I love the design overall!

1 Like
19

Hello @Battle941 thanks for taking time to check out my portflolio.
If employers are as generous as you, I probably would have my first developer job already.

Here is the css for that animation…
.morph { display: inline-block; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -ms-transition: all 0.5s ease; transition: all 0.5s ease; }

.morph:hover { display: inline-block; border-radius: 50%; -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); }

You can check the html structure from the page.

cheers!

1 Like
20

Hello @l-emi thanks for your feedback. it is appreciated.
I have also noticed the need for a favicon, as well as the white text on the white background. I am working on both at the moment. i would push the changes to github as soon as i finish…

I used a 100view port height (vph) for the landing page that’s why it covers the the entire screen when the page is ready.

I tried adding those paddings to the heading as you suggested it sure did look better.

for those project description, you know, it never occurred to me that i should make them vertically aligned. Reason why feedback is so important.

Thanks once again for your time.
Sotu

1 Like