First Personal Portfolio - No Bootstrap

First Personal Portfolio - No Bootstrap
0

#1

Here is my personal portfolio, obviously still a lot of content to eventually to be added.

My Portfolio

I chose to go away from Bootstrap and manually go through making the page responsive with my own CSS.

Any comments/feedback is greatly appreciated, I’m always looking to improve :slight_smile:


#2

Nice, I quite like the style you have going on so far.

Two observations for me is to maybe introduce some white space (probably padding) on the top and bottom of your sections so it doesn’t look too crowded/stifling. This should also provide some visual breaks in between all the information you’re sharing.

And the last one is that on smaller devices, your get-in-touch div still has the max-width which makes the paragraph and the social media icons centered.


#4

Oops must have forgot to change it when I was making that div’s media queries.

I went in and fixed it, thank you for your input!


#5

It’s really challanging to build the website from the ground up. Bootstrap is the easy mode and I don’t think I’m able to do my own custom css after learning bootstrap.

Anyway congrats on your project completion.


#6

Hey, nice work. I am trying to do the same thing regarding bootstrap. Not sure if we are brave or foolish!


#7

@grogmate Making it responsive using media queries is a piece of cake. It allows you more flexibility (well at least that’s what my experience was). I watched this video and it was all clear to me. Derek has a lot of good videos for web developers to check out.


#8

Portfolio looks really good. I like how you have everything laid out. It flows very nicely. I’ve gone back and forth between using bootstrap and media queries. While bootstrap is much easier media queries give you so many more options and customization mixing the two is always a good option.


#9

Thank you for the positive feedback!

While I think Bootstrap is beneficial, some developers told me they don’t like using it due to the overhead it brings. Plus I like having complete control of how elements are laid out on the page with my own css.

And us using our own css, we are taking the obviously harder road to travel which will lead to a lot more challenges, but solving those challenges is the best way to learn and will have a better understanding of CSS in the end IMO.

But after saying all this, this is strictly my OPINION I’m not trying to bash on Bootstrap, its very convenient and widely used.

Hopefully we’re more on the brave side than foolish


#10

Looks good. I think being able to build something responsive with and w/o bootstrap is a beneficial skill to have.

Good job.


#11

Thank you for your feedback, means a lot!


#12

Looks good on mobile. Honestly Bootstrap tends to get in my way, and sites made without it look so much better/less generic. Great work!

I’m not really fond of the gradient going from red to white though; could I suggest just using a darker/brighter shade of red instead? Gradients tend to look better when the range of colours isn’t too wide.

Good resources for colors:
Paletton
Coolors


#13

Yea I honestly didn’t spend too much time on the gradient I just picked a generic pre-made one.

But that first linked resource is great I will probably mess around with it and see what I can do, Thank you!

(Oh and I don’t know if it works for you, but the second link is a dead link for me)


#14

Ah sorry, I was on mobile and didn’t check the link. Fixed!


#15

First of all, great job!

I just have a few suggestions which you can do with as you like:
The “Hello! My name…” text is currently centered. I would try left aligned (ragged left) or justified text for better balance.

There is a gradated line between sections, and that same line is used under the “Hello” text, but it doesn’t span the whole width like the other gradated lines do. For consistency, I would place it between the grey and white sections and run the entire width to match the other lines.

Lastly, the message box in the contact section is not the same width as the other fields. I think it’d look nice if they were all the same width.

Your site works like a charm in FF on my Mac! :slight_smile:


#16

How did you make it responsive without bootstrap? I tried pasting media queries into codepen’s css section but it didn’t work.

The message part of the form is not really aligned. Other than that it all looks great to me.

Just a suggestion, you could make a smooth transition on the navbar links like so. http://codepen.io/skullscream-1471533661/full/xOvgrZ


#17

When you do not use bootstrap, it’s all media queries for everything you want to be responsive (which is most likely going to be everything on the page). With a use of a lot of divs, I try to imagine using divs like having different boxes on the page that you edit and customize one box at a time.

A simple example of a media query:

Original CSS:

.intro {
max-width: 60%;
font-family: "Raleway", arial;
float: left;
font-size: 2em;
text-align: center;
color: white;
}

Media Query:

@media (max-width: 800px) { 
.intro { 
float: none;
max-width: 100%;
padding-top: 50px;
}

So basically for media queries, you specify a max-width (800px), and at this width you can completely over-ride and change the original CSS styles.

So when the page reached 800px, you can see I changed the max-width of the element from 60% to 100%. What this does is make the .intro div 100% width and will move everything below it, so as the div shrinks down it is now responsive (Don’t forget I also removed the float: left).

Also any styles you don’t specify in the media query, it will inherit the styles from the original CSS. For Example, I did not have to declare color: white again in the media query because it will just stay the same if not changed.

Lastly, I’m not sure why it didn’t work for you but ALWAYS make sure your media queries are AFTER your original CSS because CSS styles at the bottom are always the styles that run last and will be displayed.


#18

Looks nice and tidy. I feel myself comfortable, when I read it. One notice: the last “message” box is wider than the rest of them (Win7/Chrome) But this red color is really cool.


#19

It’s nice. :slight_smile:
I just noticed that you align center your paragraph. I think it’ll look nicer when align left. And the width of Input and Textarea is not equal.


#20

Thanks a lot!

I actually fiddled with that a little bit, trying to get the “cols” attribute in the
< textarea > just right, because 39 was a little too small, and 40 was a little too big. I will probably go back in and change this in the css when I come back to this project in the future. Wasn’t going for perfection in the rough draft so I just said “screw it” lol :smile:


#21

Thanks for the feedback!

Believe it or not, I’ve changed that paragraph align back and forth between left and center and I ultimately chose center only because I slightly prefer how it looks on smaller screens.