Skip to content

Instantly share code, notes, and snippets.

@Teguh010

Teguh010/flexbox-resume-challenge.markdown

Created November 11, 2019 08:33
Show Gist options
  • Save Teguh010/1b92d66ed3589f63573c261aa2870909 to your computer and use it in GitHub Desktop.
Save Teguh010/1b92d66ed3589f63573c261aa2870909 to your computer and use it in GitHub Desktop.
Download ZIP
Flexbox Resume Challenge
Raw
index.html
<div class="container">
<div class="row">
<div class="col col-3 avatar"></div>
<div class="col col-6">
<div class="row">
<div class="col col-5 name section">
<h1>Kendrick Arnett</h1>
</div>
<div class="col download section">
<div class="wrap-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M14 2v11h2.51L12 18.01 7.49 13H10V2h4zm2-2H8v11H3l9 10 9-10h-5V0zm3 19v3H5v-3H3v5h18v-5h-2z"/>
</svg>
</div>
</div>
</div>
<div class="row">
<div class="col col-5 subtitle section">
<h3>The experienced <span class="the-experienced-role"></span></h3>
<div class="the-experienced-roles">
<p>user experience fanatic.</p>
<p>front-end developer.</p>
<p>bike commuter.</p>
<p>A/B tester.</p>
<p>photographer.</p>
<p>pattern library enthusiast.</p>
</div>
</div>
<div class="col github section">
<div class="wrap-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M12 0C5.374 0 0 5.373 0 12c0 5.302 3.438 9.8 8.207 11.387.6.11.793-.26.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.09-.745.083-.73.083-.73 1.205.085 1.84 1.238 1.84 1.238 1.07 1.834 2.806 1.304 3.49.997.108-.776.42-1.306.763-1.605-2.665-.305-5.467-1.334-5.467-5.93 0-1.312.47-2.382 1.236-3.222-.125-.303-.536-1.524.116-3.176 0 0 1.008-.322 3.3 1.23.958-.266 1.984-.4 3.004-.404 1.02.005 2.047.138 3.006.404 2.29-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.236 1.91 1.236 3.22 0 4.61-2.807 5.625-5.48 5.922.43.372.824 1.102.824 2.222v3.293c0 .32.192.694.8.576C20.567 21.796 24 17.3 24 12c0-6.627-5.373-12-12-12z"/>
</svg>
</div>
</div>
</div>
<div class="row toc">
<div class="col section" data-title="home">
<div class="wrap-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M4 24H2V0h2v24zM22 2H6v12h16l-4-5.97L22 2z"/>
</svg>
</div>
</div>
<div class="col section" data-title="resume">
<div class="wrap-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M13.744 8s1.522-8-3.335-8H2v24h20V11c0-3.42-5.247-3.745-8.256-3zM14 19H6v-1h8v1zm4-3H6v-1h12v1zm0-3H6v-1h12v1zM14.568.075C16.77 1.25 20.506 4.958 22 6.955c-1.286-.9-4.044-1.656-6.09-1.178.22-1.468-.186-4.534-1.342-5.702z"/>
</svg>
</div>
</div>
<div class="col section" data-title="portfolio">
<div class="wrap-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M12.23 15.5c-6.8 0-10.367-1.22-12.23-2.597V22h24v-8.95c-3.218 2.222-9.422 2.45-11.77 2.45zM14 18.032C14 19.12 13.104 20 12 20s-2-.88-2-1.968V17h4v1.032zM0 9.492V7h24v2.605c0 5.29-24 5.133-24-.114zM9 2c-1.104 0-2 .896-2 2v2h2V4.5c0-.276.224-.5.5-.5h5c.276 0 .5.224.5.5V6h2V4c0-1.104-.896-2-2-2H9z"/>
</svg>
</div>
</div>
<div class="col section" data-title="contacts">
<div class="wrap-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M17.997 18H6.002L6 17.377c0-1.26.1-1.986 1.588-2.33 1.684-.39 3.344-.736 2.545-2.21C7.767 8.476 9.46 6 12 6c2.49 0 4.225 2.383 1.865 6.84-.775 1.463.826 1.81 2.545 2.208C17.9 15.392 18 16.12 18 17.38l-.003.62zm4.81-2.214c-1.29-.298-2.49-.56-1.908-1.657 1.768-3.343.468-5.13-1.4-5.13-1.266 0-2.25.817-2.25 2.324 0 3.903 2.27 1.77 2.247 6.676h4.5l.003-.463c0-.946-.074-1.493-1.192-1.75zM.003 18h4.5c-.02-4.906 2.247-2.772 2.247-6.676C6.75 9.817 5.765 9 4.5 9c-1.868 0-3.168 1.787-1.398 5.13.58 1.098-.62 1.358-1.91 1.656C.075 16.044 0 16.59 0 17.536L.002 18z"/>
</svg>
</div>
</div>
<div class="col section" data-title="feedback">
<div class="wrap-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M10.252 23h-3.21c-.612 0-1.157-.427-1.354-1.007L4.098 17H8.71l.918 3.17c.178.553.512 1.042.962 1.41.758.617.27 1.42-.34 1.42zm9.286-21.902c-1.522.617-4.525 3.74-8.252 4.64C10.484 6.835 10 8.617 10 10.582c0 1.86.44 3.553 1.166 4.662 3.94.942 6.303 3.996 8.31 4.67 2.2.743 4.528-3.467 4.524-9.42-.003-5.96-2.47-10.203-4.462-9.397zm1.704 15.472c-.72 1.656-1.987 1.685-2.72 0-.436-1-.73-2.77-.892-3.96h.38c1.174 0 2.125-.954 2.125-2.13s-.95-2.133-2.125-2.133h-.39c.16-1.21.538-2.947.974-3.89.764-1.652 1.94-1.68 2.72 0 1.315 2.837 1.368 8.793-.072 12.113zM8.807 15h-4.37C1.983 15 0 12.953 0 10.5S1.984 6 4.436 6H8.88c-.56 1.3-.876 2.887-.876 4.594 0 1.627.29 3.14.803 4.406z"/>
</svg>
</div>
</div>
<div class="col section" data-title="blog">
<div class="wrap-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M12.014 6.54S14.16 2.57 15.49 0L24 8.51c-2.583 1.322-6.556 3.46-6.556 3.46l-5.43-5.43zm-8.517 6.423S2.157 18.217 0 21.567l.827.826 3.967-3.967c.348-.348.57-.8.63-1.288.033-.27.152-.532.36-.74.498-.498 1.306-.498 1.803 0 .498.5.498 1.305 0 1.803-.208.21-.47.33-.74.362-.488.06-.94.28-1.288.63L1.59 23.16l.826.84c3.314-2.133 8.604-3.51 8.604-3.51l4.262-7.838-3.95-3.95-7.837 4.26z"/>
</svg>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col col-6 about-me section">
<h2>About Me</h2>
<blockquote>
<p class="lede">Hard-working person on the way to success…</p>
<p>Customize your website as you want.</p>
</blockquote>
<ul class="soft-skills">
<li class="skill">
<div>
<h3>Creative</h3>
<p>
Lorem ipsum dolor sit amet
</p>
</div>
<div class="wrap-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M5 8.5C5 7.672 5.672 7 6.5 7S8 7.672 8 8.5c0 .83-.672 1.5-1.5 1.5S5 9.33 5 8.5zm9 .5l-2.52 4L9 11.04 5 17h14l-5-8zm8-4v14H2V5h20zm2-2H0v18h24V3z"/>
</svg>
</div>
</li>
<li class="skill">
<div>
<h3>Self-Motivated</h3>
<p>
Lorem ipsum dolor sit amet
</p>
</div>
<div class="wrap-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M5 20v2H3v-2h2zm2-2H1v6h6v-6zm6-1v5h-2v-5h2zm2-2H9v9h6v-9zm6-2v9h-2v-9h2zm2-2h-6v13h6V11zm0-11l-6 1.22 1.716 1.71-6.85 6.732-3-3.002-7.842 7.797 1.41 1.418 6.427-6.39 2.992 2.993 8.28-8.137L21.8 6 23 0z"/>
</svg>
</div>
</li>
<li class="skill">
<div>
<h3>Punctual</h3>
<p>
Lorem ipsum dolor sit amet
</p>
</div>
<div class="wrap-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10S2 17.514 2 12 6.486 2 12 2zm0-2C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm1 12V6h-2v8h7v-2h-5z"/>
</svg>
</div>
</li>
</ul>
</div>
<div class="col col-3 personal-info section">
<h2>Personal Info</h2>
<dl class="info-lines">
<ul>
<li class="info-line">
<dt>Name:</dt>
<dd>Kendrick Arnett</dd>
</li>
<li class="info-line">
<dt>Date of Birth:</dt>
<dd>09/24/1980</dd>
</li>
<li class="info-line">
<dt>Address:</dt>
<dd>101 Main Street</dd>
</li>
<li class="info-line">
<dt>Phone:</dt>
<dd>555/555-1234</dd>
</li>
<li class="info-line">
<dt>Email:</dt>
<dd>[email protected]</dd>
</li>
</ul>
</dl>
</div>
</div>
<div class="row">
<div class="col col-3 experience section">
<h2>Pro. Experience</h2>
<ul class="jobs">
<li class="job" data-start-date="12/2010" data-end-date="12/2011" data-job-title="Sr. Awesomeness Engineer">Fancy Company Name</li>
</ul>
<ul class="jobs">
<li class="job" data-start-date="1/2012" data-end-date="12/2012" data-job-title="Ultra Sr. Awesomeness Engineer">Another Fancy Company Name</li>
</ul>
<ul class="jobs">
<li class="job" data-start-date="1/2012" data-end-date="12/2012" data-job-title="Ultra Sr. Awesomeness Engineer">Another Fancy Company Name</li>
</ul>
</div>
<div class="col col-6 professional-skills section">
<h2>Professional Skills</h2>
<ul class="skills">
<li class="skill">
<div class="pie-wrap">
<div class="pie">90%</div>
</div>
<h4 class="skill-title">Prototyping</h4>
<p>
Concept of the number one Tunguska event courage of our questions quasar realm of the galaxies. Corpus callosum, Tunguska event, shores of the cosmic ocean rich in mystery the ash of stellar alchemy something incredible is waiting to be known.
</p>
</li>
<li class="skill">
<div class="pie-wrap">
<div class="pie">85%</div>
</div>
<h4 class="skill-title">Design</h4>
<p>
Flatland billions upon billions dispassionate extraterrestrial observer tendrils of gossamer clouds venture, permanence of the stars prime number at the edge of forever explorations, hundreds of thousands star stuff harvesting star light, made in the interiors of collapsing stars?
</p>
</li>
<li class="skill">
<div class="pie-wrap">
<div class="pie">70%</div>
</div>
<h4 class="skill-title">Development</h4>
<p>
Drake Equation Flatland radio telescope quasar, rings of Uranus, something incredible is waiting to be known preserve and cherish that pale blue dot the only home we've ever known realm of the galaxies.
</p>
</li>
</ul>
</div>
</div>
<div class="row footer">
<div class="col col-f footer-name section">
<h3>Kendrick Arnett</h3>
<p>
Light years inconspicuous motes of rock and gas venture shores of the cosmic ocean brain.
</p>
</div>
<div class="col col-f cv section">
<h3>CV</h3>
<ul>
<li>English</li>
<li>French</li>
<li>Spanish</li>
</ul>
</div>
<div class="col col-f subscribe section">
<h3>Subscribe</h3>
<input type="text" class="input"/>
</div>
<div class="col col-f social section">
<h3>Follow Me At</h3>
<ul class="social-icons">
<li class="social-icon"></li>
<li class="social-icon"></li>
<li class="social-icon"></li>
<li class="social-icon"></li>
<li class="social-icon"></li>
<li class="social-icon"></li>
</ul>
</div>
</div>
</div>
Raw
script.js
$(function(){
$('.the-experienced-role').typed({
stringsElement: $('.the-experienced-roles'),
loop: true,
loopCount: false,
startDelay: 2000,
backSpeed: 25,
backDelay: 2000,
typeSpeed: 25
});
});
function $$(selector, context) {
context = context || document;
var elements = context.querySelectorAll(selector);
return Array.prototype.slice.call(elements);
}
$$('.pie').forEach(function(pie) {
var p = parseFloat(pie.textContent);
var NS = "http://www.w3.org/2000/svg";
var svg = document.createElementNS(NS, "svg");
var circle = document.createElementNS(NS, "circle");
var title = document.createElementNS(NS, "title");
circle.setAttribute("r", 16);
circle.setAttribute("cx", 16);
circle.setAttribute("cy", 16);
circle.setAttribute("stroke-dasharray", p + " 100");
circle.setAttribute('class', 'outer')
svg.setAttribute("viewBox", "0 0 32 32");
title.textContent = pie.textContent;
pie.textContent = '';
svg.appendChild(title);
svg.appendChild(circle);
var innerCircle = document.createElementNS(NS, "circle");
innerCircle.setAttribute("class", 'innerCircle');
innerCircle.setAttribute("r", 14);
innerCircle.setAttribute("cx", 16);
innerCircle.setAttribute("cy", 16);
innerCircle.setAttribute("stroke-dasharray", "100 100");
svg.appendChild(innerCircle);
pie.appendChild(svg);
});
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/mattboldt/typed.js/master/dist/typed.min.js"></script>
Raw
style.scss
@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,100,500,500italic,400italic,300italic,100italic);
@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:300);
@function pow($number, $exponent) {
$value: 1;
@if $exponent > 0 {
@for $i from 1 through $exponent {
$value: $value * $number;
}
}
@return $value;
}
@function type-scale($level: 0) {
$scale-factor: 1.25;
@return pow($scale-factor, $level) + rem;
}
@mixin background-gradient($base-color: #131313, $scale-lightness: 0) {
// Inspired by http://lea.verou.me/css3patterns/#carbon
$base: scale-color($base-color, $lightness: percentage($scale-lightness));
background:
linear-gradient(27deg, $base 0.3125rem, transparent 0.3125rem) 0 0.3125rem,
linear-gradient(207deg, $base 0.3125rem, transparent 0.3125rem) 0.625rem 0,
linear-gradient(27deg, scale-color($base, $lightness: 5%) 0.3125rem, transparent 0.3125rem) 0 0.625rem,
linear-gradient(207deg, scale-color($base, $lightness: 5%) 0.3125rem, transparent 0.3125rem) 0.625rem 0.3125rem,
linear-gradient(90deg, scale-color($base, $lightness: 3%) 0.625rem, transparent 0.625rem),
linear-gradient(scale-color($base, $lightness: 3%) 25%, scale-color($base, $lightness: 2%) 25%, scale-color($base, $lightness: 2%) 50%, transparent 50%, transparent 75%, scale-color($base, $lightness: 6%) 75%, scale-color($base, $lightness: 6%));
background-color: scale-color($base, $lightness: -3%);
background-size: 1.25rem 1.25rem;
}
html {
background: linear-gradient(to left, #8e9eab , #efeff0);
font-size: 1vw;
font-family: 'Roboto';
font-weight: 300;
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
h1, h2, h3, h4 {
font-family: 'Roboto Condensed';
font-weight: 100;
}
h1, h2, h3 {
text-transform: uppercase;
}
h1 {
font-size: type-scale(5);
}
h2 {
font-size: type-scale(3);
}
h3 {
font-size: type-scale(2);
}
.container {
display: flex;
flex-direction: column;
width: 90%;
margin: 2rem auto;
box-shadow: 0 0.25rem 2rem 0 rgba(0, 0, 0, 0.3);
}
.section {
padding: 2rem;
h2:first-of-type {
margin-top: 0;
}
h3:first-of-type {
margin-top: 0;
}
}
.row {
display: flex;
}
$num-cols: 9;
.col {
flex: 1 1 10%;
min-height: 10vw;
}
@for $i from 2 through $num-cols {
.col.col-#{$i} {
flex: $i $i percentage($i/10);
}
}
.col.col-f {
flex: (9/4) (9/4) percentage(9/4/10);
}
.avatar {
background: #fff;
background-image: url('https://s3.amazonaws.com/uifaces/faces/twitter/felipebsb/128.jpg');
background-size: cover;
filter: blur(10px);
transform: scale(1);
}
.name, .subtitle {
display: flex;
align-items: center;
h1, h3 {
margin-top: 0;
margin-bottom: 0;
}
}
.download, .github {
display: flex;
align-items: center;
justify-content: center;
background-color: #2f2f2f;
@include background-gradient($scale-lightness: 0.1);
svg {
fill: #848484;
transition: transform 150ms ease-in-out;
transform: scale(1);
&:hover {
transform: scale(1.25);
transition: transform 150ms ease-in-out;
z-index: 2;
}
}
}
.name {
@include background-gradient($scale-lightness: 0.2);
color: #efefef;
}
.subtitle {
@include background-gradient($scale-lightness: 0.1);
color: #efefef;
}
.github {
@include background-gradient($scale-lightness: 0);
color: #fff;
}
.wrap-icon {
width: 4rem;
// height: 100%;
}
.toc {
.wrap-icon {
width: 2.5rem;
height: 100%;
margin: 1rem;
}
svg {
fill: #fff;
}
}
.toc .col {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transition: transform 100ms ease-in-out;
transform: scale(1);
svg {
transform: scale(1);
transition: transform 100ms ease-in-out;
}
&:hover {
transform: scale(1.1);
transition: transform 100ms ease-in-out;
z-index: 2;
svg {
transform: scale(1.3);
transition: transform 100ms ease-in-out;
}
}
&:after {
content: attr(data-title);
color: #fff;
letter-spacing: 0.1rem;
text-transform: uppercase;
}
&[data-title="home"] {
background-color: #00bd9c;
}
&[data-title="resume"] {
background-color: #2c97de;
}
&[data-title="portfolio"] {
background-color: #9c56b8;
}
&[data-title="contacts"] {
background-color: #e87e03;
}
&[data-title="feedback"] {
background-color: #e94b35;
}
&[data-title="blog"] {
background-color: #daa900;
}
}
.about-me {
background: #fff;
blockquote {
border-left: 0.25rem solid #e94b35;
padding-left: 1rem;
margin-left: 0;
.lede {
color: #e94b35;
font-weight: 500;
letter-spacing: 0.3rem;
text-transform: uppercase;
}
}
.soft-skills {
display: flex;
justify-content: space-around;
padding: 0;
list-style-type: none;
.skill {
display: flex;
align-items: top;
justify-content: center;
flex-direction: row-reverse;
width: 30%;
h3 {
font-weight: 700;
margin: 0;
}
}
.wrap-icon {
margin: 0;
margin-right: 1rem;
width: 3rem;
}
}
}
.soft-skills .skill {
&:hover .wrap-icon {
transform: scale(1);
fill: #e94b35;
transition: all 200ms ease;
}
}
.soft-skills .skill .wrap-icon {
transform: scale(0.8);
fill: scale-color(#131313, $lightness: 60%);
transition: all 200ms ease;
}
.the-experienced-roles {
display: none;
visibility: hidden;
}
.personal-info {
background-color: scale-color(#131313, $lightness: 95%);
display: flex;
flex: 1;
flex-direction: column;
.info-lines {
-webkit-margin-before: 0;
-webkit-margin-after: 0;
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
}
.info-line {
margin-bottom: 1rem;
dt, dd {
display: inline-block;
margin: 0;
}
dt {
text-transform: uppercase;
font-weight: 500;
margin-right: 0.5rem;
}
}
}
.experience {
background-color: #9c56b8;
color: #fff;
}
.jobs, .job-lines {
list-style-type: none;
margin: 0;
padding: 0;
}
.jobs .job {
text-transform: uppercase;
font-weight: 500;
margin-bottom: 1rem;
&:before {
text-transform: none;
font-weight: 100;
display: block;
opacity: 0.6;
content: attr(data-start-date) ' – ' attr(data-end-date)
}
&:after {
text-transform: none;
font-weight: 100;
display: block;
opacity: 0.6;
content: attr(data-job-title)
}
}
.professional-skills {
background-color: #2c97de;
color: #fff;
.skills {
display: flex;
justify-content: space-around;
list-style-type: none;
margin: 0;
padding: 0;
.skill-title {
text-transform: uppercase;
letter-spacing: 0.1rem;
}
}
}
.professional-skills:hover {
.outer {
animation: dash 1s ease-in-out forwards;
}
}
.professional-skills .skill {
display: flex;
flex-direction: column;
max-width: 25%;
.pie-wrap {
}
.pie {
text-align: center;
margin-bottom: 1rem;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
svg {
position: static;
width: 7rem;
height: 7rem;
transform: rotate(-90deg);
background: transparent;
border-radius: 50%;
}
circle {
fill: #fff;
fill-opacity: 0.2;
stroke: #fff;
stroke-width: 32;
}
.outer {
animation: dash 1s ease-in-out forwards;
}
.innerCircle {
fill: #2c97de;
stroke-width: 0;
stroke: #2c97de;
fill-opacity: 1;
}
}
@keyframes dash {
from {
stroke-dasharray: 0 100;
}
to {
stroke-dasharray: auto 100;
}
}
.footer {
background-color: scale-color(#131313, $lightness: 20%);
color: scale-color(#131313, $lightness: 60%);
.footer-name {
}
.cv, .social {
ul {
display: flex;
justify-content: space-between;
list-style-type: none;
padding: 0;
}
}
.subscribe .input {
padding: 0.5rem;
background: transparent;
border: 2px solid scale-color(#131313, $lightness: 60%);
color: scale-color(#131313, $lightness: 60%);
width: 100%;
&:focus {
outline: 0;
}
}
}
.social-icons {
display: flex;
justify-content: space-between;
.social-icon {
border-radius: 0.125rem;
width: 2.5rem;
height: 2.5rem;
background-color: scale-color(#131313, $lightness: 60%);
}
}
.typed-cursor {
font-size: 1.5625rem;
opacity: 1;
animation: blink 0.7s infinite;
}
@keyframes blink {
0% { opacity: 1; }
50% { opacity: 0; }
100% { opacity: 1; }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment