Hello,
After lots of tears, sweat and, sometimes, blood, here is my first personal portfolio.
Please take a look at my portfolio, without Boostrap to try to have a small page, and without JS because I don’t have learn it yet.
You can jump with the button, or simply scroll to navigate.
The form doesn’t work.
All comment will be appreciated.
Thanks a lot for your contribution, and sorry for my (poor) english.
Hi 
This code go to: Pen Settings → stuff for “head”
(minus doctype, html, head and body)
Link to video Using Bootstrap with Codepen
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!-- FOR RESPONSIVE DESIGN -->
<meta name="viewport" content="initial-scale=1.0, user-scalable=yes width=device-width" />
<!-- LINK TO CSS FILE -->
<link rel="stylesheet" href="portfolio.css" type="text/css" media="all" />
<!-- /// -->
<title>Breenbo Portfolio</title>
</head>
<body>
A bug:
<a href="https://www.coursera.org/accomplishments" target="_blank" id="coursera">
<img id="coursera" class="logo" src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Coursera.svg/640px-Coursera.svg.png" alt="logo coursera"/>
</a>
MDN documentation:
defines a unique identifier (ID) which must be unique in the whole document.
I think is better just use Bootstrap because there is more documentation and is easier to find the problems and bugs.
Cheers and happy coding
I think it’s great that you’re trying to build from scratch, but I’d recommend at least referencing a frame work like Bootstrap just to get some solid perspective on things like spacing, layout, and basic functionality. As a bonus, Bootstrap has great documentation on media queries to give you some ideas about making your site more responsive! Keep it up! 
Oh God! I can’t even imagine the number of @media tags you had to use to make that work without Bootstrap. I am bookmarking your project because reading through its code actually makes me understand Bootstrap internals lol. Keep it up!
The effects u have given are really nice and the fact that u haven’t used any framework is awesome.
Only one suggestion from my end is try formatting the texts,buttons etc. to make the page eye pleasing because thats what attracts the viewers
Thank you for your help and your links.
I only have one media query, after i use relatives units like %, vh and vw.
I think it’s quite responsive that way.
I will add another @media for tablet design in the future.
Thank you for your comment.
Thank you for your comment, I have to find nice fonts.
On mobile, all the titles are to the right, and way too huge. Plus I can’t see your bio/ info if it’s included. Responsive design is tricky so good luck!
Your comment is very interesting because I tried the portfolio on Opera, Firefox, Chrome, Dolphin and CM Browser (all Android), and it work well, parallax scrolling works only on Firefox.
I have some issues on Adblock browser and UC browser, I don’t know why.
Could you tell me what is your web browser and your mobile, please ?
Thank you.
A Nexus 6 with Chrome. Have you tried it on an actual Mobile device? It’s a sizeable phone and chrome generally is the best for rendering, so this should really not be an issue…
Like the image scrolling effect in the background.
I tried on a Xperia Z3 compact and a LG G4, maybe there are (already ?!) too old…
I’ve updated the link to use Github instead of Codepen by the way, if you want to give another try.
I’ll ask some people to have a look with differents mobiles, thanks a lot for your help !
Your Be, Know, Do, etc. buttons link to the bottom of the section. As a user I should not click a button and be put at bottom, and then have to scroll up. The buttons should link to the top of the section.
You’re right, the page isn’t obvious that way, I’ll made some changes to be more user friendly, add transitions, fonts and use flexbox.
Thanks for your comment.
Thanks, I like it too!
Great site mate, awesome on how you got that responsive stuff without bootstrap, i learned about @media looking at your code so thanks alot!
Just a noob question I am a beginner too,
how did you post your website off github.io ? did you pay for that?
Breenbo - How did you do the fixed background please?
Hello,
I found an interesting tuto at [W3School] (http://www.w3schools.com/howto/howto_css_parallax.asp) and adapt it to my code.
If you prefer you can google parallax scrolling.
Feel free to use the code on my Github.