Skip to content

Instantly share code, notes, and snippets.

@divyaspec

divyaspec/freecodecamp-build-a-personal-portfolio-webpage.markdown

Created January 10, 2017 21:56
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save divyaspec/46ca20d0d194727212b72121f68bdad3 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save divyaspec/46ca20d0d194727212b72121f68bdad3 to your computer and use it in GitHub Desktop.
Download ZIP
FreeCodeCamp : Build a Personal Portfolio Webpage
Raw
freecodecamp-build-a-personal-portfolio-webpage.markdown
Raw
index.pug
header#banner.navbar.navbar-default.navbar-fixed-top
.container
a.scrollable(href='#top')
img(src='http://qlip.in/images/qlip.png', alt='qlip | UI/UX Design and Development', title='qlip | UI/UX Design and Development')
button.navbar-toggle.collapsed(type='button', data-toggle='collapse', data-target='#navbar', aria-expanded='false')
span.sr-only Toggle navigation
span.icon-bar
span.icon-bar
span.icon-bar
nav#navbar.collapse.navbar-collapse(role='navigation')
ul.nav.navbar-nav.navbar-right
li
a.scrollable(href='#top') About
li
a.scrollable(href='#portfolio') Portfolio
li
a.scrollable(href='#contact') Contact
// end header
a#top(name='home')
main
header
.intro-text
p
| Front-End Developer and UX/UI designer, with practical experience in project management, branding strategy, and creative direction; devoted to functional programming and information architecture.
hr.star-bright
span.skills Web Developer - User Experience Designer - Graphic Artist
img(src='http://qlip.in/images/avatar.jpg', alt='A picture of Justin looking at San Francisco from across the Golden Gate Bridge.', title='A picture of Justin looking at San Francisco from across the Golden Gate Bridge.')
// Gallery Grid Section
section#portfolio
h2 Portfolio
hr.star-dark
ul.grid
li
img(src='http://qlip.in/images/YMCA-Realtor-Donation-3.jpg', alt='')
li
img(src='http://qlip.in/images/webcaballero.jpg', alt='')
li
img(src='http://qlip.in/images/webmarqas.jpg', alt='')
li
img(src='http://qlip.in/images/webbrandaxis.jpg', alt='')
li
img(src='http://qlip.in/images/panacea1.jpg', alt='')
li
img(src='http://qlip.in/images/webgatomalo.jpg', alt='')
// Contact Section
section#contact
h2 Contact Me
hr.star-dark
div
form#contactForm(novalidate='')
.form-item
label(for='“name”') Name
input#name(type='text', placeholder='Name', required='')
.form-item
label(for='“email”') Email Address
input#email(type='email', placeholder='Email Address', required='')
.form-item
label(for='“phone”') Phone Number
input#phone(type='tel', placeholder='Phone Number', required='')
.form-item
label(for='“message”') Message
textarea#message(rows='5', placeholder='Message', required='')
br
button(type='submit') Send
div
p
| Want to get in touch with me? Be it to request more info about myself or my experience, to ask for my resume, tips on how to solve your sudoku, random questions about the universe and the meaning of life, or even if only for some nice Fika here in stunning Toronto... just feel free to drop me a line anytime.
p I promise to reply A.S.A.P.
p Note: No spam/soliciting pour moi, merci :)
// Scroll to Top Button (Only supposed to be visible on small and small screen sizes)
.scroll-top
a.button.scrollable(href='#top')
i.fa.fa-chevron-up
// Footer
footer
#footer-above
div
h3 About this page
p
| Made with
i.fa.fa-fw.fa-coffee
| and
i.fa.fa-fw.fa-music
br
| by
a(href='http://qlip.in') Justin Sane
| .
div
h3 Around the Web
ul
li
a.button.social(href='https://www.linkedin.com/in/hallaathrad')
i.fa.fa-fw.fa-linkedin
li
a.button.social(href='https://github.com/hallaathrad')
i.fa.fa-fw.fa-github
li
a.button.social(href='https://twitter.com/hallaathrad')
i.fa.fa-fw.fa-twitter
li
a.button.social(href='https://www.flickr.com/photos/hallaathrad/', title='My Flickr')
i.fa.fa-fw.fa-flickr
#footer-below
| qlip ©
script.
document.write(new Date().getFullYear())
| . All Rights Reversed
// <aside id="html5badge"><img src="http://www.w3.org/html/logo/badge/html5-badge-v-css3-graphics-semantics.png" width="38" height="170" alt="HTML5 Powered with CSS3 / Styling, Graphics, 3D &amp; Effects, and Semantics" title="HTML5 Powered with CSS3 / Styling, Graphics, 3D &amp; Effects, and Semantics"></aside>
Raw
script.js
$(window).on('resize', function() {
'use strict';
var element = document.querySelector('#banner'),
elHeight = 0,
elTop = 0,
dHeight = 0,
wHeight = 0,
wScrollCurrent = 0,
wScrollBefore = 0,
wScrollDiff = 0;
window.addEventListener('scroll', function () {
// Hide the displayed menu. If you want to scroll, you're obviously not interested in the options.
$('.navbar-collapse').collapse('hide');
$('.navbar-toggle').addClass('collapsed').blur();
if($(window).width() <= 768) {
elHeight = element.offsetHeight;
dHeight = document.body.offsetHeight;
wHeight = window.innerHeight;
wScrollCurrent = window.pageYOffset;
wScrollDiff = wScrollBefore - wScrollCurrent;
elTop = parseInt(window.getComputedStyle(element).getPropertyValue('top')) + wScrollDiff;
// scrolled to the very top; element sticks to the top
if(wScrollCurrent <= 0) {
element.style.top = '0px';
} // scrolled up; element slides in
else if(wScrollDiff > 0) {
element.style.top = (elTop > 0? 0 : elTop) + 'px';
} // scrolled down
else if(wScrollDiff < 0) {
// scrolled to the very bottom; element slides in
if(wScrollCurrent + wHeight >= dHeight - elHeight) {
element.style.top = ( ( elTop = wScrollCurrent + wHeight - dHeight ) < 0 ? elTop : 0 ) + 'px';
} // scrolled down; element slides out
else { element.style.top = ( Math.abs( elTop ) > elHeight ? -elHeight : elTop ) + 'px'; }
}
wScrollBefore = wScrollCurrent;
} //
else element.style.top = '0px';
});
}).resize();
// Floating label headings for the contact form
$(function() {$("body")
.on("input propertychange", ".form-item",function(e) {
$(this).toggleClass("form-item-filled",!! $(e.target).val());})
.on("focus", ".form-item",function() {
$(this).addClass("form-item-focused");})
.on("blur", ".form-item",function() {
$(this).removeClass("form-item-focused");});
});
// Highlight the top nav as scrolling occurs
$('body').scrollspy({target: '.navbar-fixed-top'})
// Closes the Responsive Menu on Menu Item Click
$('.navbar-collapse ul li a').click(function() {
$(".navbar-collapse").collapse('hide');});
// jQuery for page scrolling feature - requires jQuery Easing plugin
$(function() {$('body').on('click', 'a.scrollable', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({scrollTop: $($anchor.attr('href')).offset().top},1500,'easeInOutExpo');
event.preventDefault();
});
});
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
Raw
style.postcss
@use postcss-nested;
@use autoprefixer;
@use postcss-simple-vars;
@use postcss-discard-comments;
$fargglad:#722872;
$morkfarg:#592059;
$morkgra:#888;
body{
margin:0;
padding:0;
color:#666;
background:#888;
font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 20px;
}
h2,h3{
color:$morkgra;
font-weight:bold;
text-align:center;
text-transform:uppercase;
}
a{
color:$fargglad;
&:hover,&:focus{
color:$morkfarg;
}
}
#banner .container,
main header,
#portfolio .grid,
#contact>div,
footer #footer-above {
display:flex;
flex-flow:row wrap;
justify-content:space-around;
align-items:flex-start;
margin:0 auto;
}
#banner{
background-color:$fargglad !important;
height:80px;
box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.2);
border-color:$morkfarg;
.container{
width:95%;
max-width:1024px;
justify-content:space-between;
align-items:center;
&::before, &::after{
display:none
}
}
img{
height:50px;
margin:15px 0;
}
}
nav {
font-size: 13px;
background:$fargglad;
-webkit-transition:all .3s;
-moz-transition:all .3s;
transition:all .3s;
@media(max-width:768px){
padding:5px;
text-align:center;
margin:0 auto;
width:120%;
.active a{
color:$fargglad;
background:#bbb;
box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.1);
}
}
.&>li{
height:100%;
text-transform:uppercase;
font-weight:bold;
letter-spacing:2px;
display:inline-flex;
a{
color:#ffffff;
padding:10px 20px;
&:hover{
color:$fargglad;
background:#bbb;
box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.1);
}
}
}
.&bar-toggle {
margin-right:0;
}
}
#top {
height:80px;
display:block;
}
main {
>*:not(.scroll-top){
max-width:1024px;
margin:0 auto;
box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.2);
}
header {
background:#aaa;
color:#fff;
text-align:right;
padding:70px 10% 50px;
align-items:flex-end;
align-content:space-around;
@media(min-width:1023px) {
padding:50px 30px ;
}
img {
border-radius:50%;
margin:30px 0 10px;
max-width:80%;
height:auto;
width:250px;
}
.intro-text {
max-width:675px;
text-align:center;
margin-bottom:30px;
@media(min-width:1023px) {
text-align:right;
width:610px;
}
/*.name {
text-transform:uppercase;
font-weight:bold;
font-size: 2em;
}*/
.skills {
font-size: 1.15em;
}
}
}
section {
background:#eee;
padding:40px 0;
&#contact>div{
margin:0px auto;
&>div{
width:80%;
p {margin: 60px auto 0;
max-width:700px;}
@media(min-width:1023px) {
max-width:38%;
p {margin-top: 35px;
&:last-child {
margin-top:270px;
}
}
}
}
}
}
}
#portfolio {
& .grid {
padding:0;
max-width: 90%;
list-style: none;
margin-top:20px;
& li {
margin:20px;
max-width:600px;
@media(min-width:1023px) {
max-width:420px;
}
}
}
& img {
max-width:100%;
height:auto;
display:block;
}
}
form {
width:80%;
@media(min-width:1023px) {
width:40%;
margin-left:20px;
}
& .row:first-child .form-item {
border-top: 1px solid #fff;
}
.&-item {
position: relative;
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: 1px solid #bbb;
& input, & textarea {
z-index: 1;
position: relative;
padding-right: 0;
padding-left: 0;
border: 0;
border-radius: 0;
font-size: 1.5em;
background: 0 0;
box-shadow: none!important;
resize: none;
width:100%;
&:focus {
outline:0
}
}
& label {
display: block;
z-index: 0;
position: relative;
top: 2em;
margin: 0;
font-size: .85em;
line-height: 1.764705882em;
vertical-align: middle;
vertical-align: baseline;
opacity: 0;
-webkit-transition: top .3s ease,opacity .3s ease;
-moz-transition: top .3s ease,opacity .3s ease;
-ms-transition: top .3s ease,opacity .3s ease;
transition: top .3s ease,opacity .3s ease;
}
&-filled label {
top: 0;
opacity: 1;
color:#aaa;
}
&-focused label {
color:$fargglad;
}
}
}
footer {
color: #fff;
background-color: #aaa;
text-align:center;
box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.2);
h3 {
margin-bottom:30px;
color:#fff;
}
#&-above {
padding-top:50px;
width:80%;
div {
margin-bottom:50px;
width:250px;
}
ul {
padding:0;
}
li {
display:inline;
}
}
#&-below {
box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.2);
padding:25px 0;
background-color:$fargglad;
text-align:center;
}
}
.button {
color: #fff;
border:solid 2px #fff;
border-radius:50%;
display:inline-block;
width:50px;
height:50px;
text-align:center;
font-size:20px;
line-height:48px;
transition:all .3s ease-in-out;
&:hover {
border:solid 2px #fff;
color:$fargglad;
background: #fff;
}
}
.scroll-top {
z-index:1049;
position:fixed;
visibility:visible;
bottom:2%;right:2%;
a {
background:$fargglad;
&:hover, &:focus {
color:$fargglad;
background-color:#bbb;
border-color:$fargglad;
}
@media(min-width:768px){
visibility:hidden;
}
}
}
hr.star-{
&bright, &dark {
margin: 40px auto 30px;
padding: 0;
max-width: 512px;
border: 0;
border-top: solid 5px;
text-align:center;
header & {
@media(min-width:1023px){
margin-right:0;
text-align:right;
&:after {
right:-10px;
}
}
}
&:after {
content: '\f121';
font-family: FontAwesome;
display: inline-block;
position: relative;
top: -.8em;
padding: 0 .25em;
font-size: 2em;
}
}
&bright {
border-color: #fff;
&:after {
color: #fff;
background-color: #aaa;
}
}
&dark {
border-color: $morkgra;
&:after {
color: $morkgra;
background-color: #eee;
}
}
}
/*#html5badge{
position:fixed;
right:0;
top:100px;
}*/
Raw
styles
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment