Add the html, css, and the dependencies
This commit is contained in:
Min-Zhong "John" Lu
parent
9de6af229b
commit
4fb227a134
5 changed files with 620 additions and 0 deletions
6
.gitmodules
vendored
Normal file
6
.gitmodules
vendored
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
[submodule "Font-Awesome"]
|
||||
path = dep/Font-Awesome
|
||||
url = https://github.com/FortAwesome/Font-Awesome
|
||||
[submodule "normalize.css"]
|
||||
path = dep/normalize.css
|
||||
url = https://github.com/necolas/normalize.css/
|
||||
1
dep/Font-Awesome
Submodule
1
dep/Font-Awesome
Submodule
|
|
@ -0,0 +1 @@
|
|||
Subproject commit 1743947b8fff6b727c19ef6ee8bd334d7386b725
|
||||
1
dep/normalize.css
vendored
Submodule
1
dep/normalize.css
vendored
Submodule
|
|
@ -0,0 +1 @@
|
|||
Subproject commit ab3abb6d36cf3cd66e22faeec65dcef1196ba1c1
|
||||
244
resume.html
Normal file
244
resume.html
Normal file
|
|
@ -0,0 +1,244 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="stylesheet" type="text/css" href="dep/normalize.css/normalize.css" />
|
||||
<link rel="stylesheet" type="text/css" href="dep/Font-Awesome/css/font-awesome.css" />
|
||||
<link rel="stylesheet" type="text/css" href="style.css" />
|
||||
</head>
|
||||
<body lang="en">
|
||||
<section id="main">
|
||||
<header id="title">
|
||||
<h1>John Doe</h1>
|
||||
<span class="subtitle">Plaintiff, defendant & witness</span>
|
||||
</header>
|
||||
<section class="main-block">
|
||||
<h2>
|
||||
<i class="fa fa-suitcase"></i> Experiences
|
||||
</h2>
|
||||
<section class="blocks">
|
||||
<div class="date">
|
||||
<span>2015</span><span>present</span>
|
||||
</div>
|
||||
<div class="decorator">
|
||||
</div>
|
||||
<div class="details">
|
||||
<header>
|
||||
<h3>Some Position</h3>
|
||||
<span class="place">Some Workplace</span>
|
||||
<span class="location">(remote)</span>
|
||||
</header>
|
||||
<div>
|
||||
<ul>
|
||||
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
|
||||
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec mi ante. Etiam odio eros, placerat eu metus id, gravida eleifend odio. Vestibulum dapibus pharetra odio, egestas ullamcorper ipsum congue ac. Maecenas viverra tortor eget convallis vestibulum. Donec pulvinar venenatis est, non sollicitudin metus laoreet sed. Fusce tincidunt felis nec neque aliquet porttitor</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="blocks">
|
||||
<div class="date">
|
||||
<span>2014</span><span>2015</span>
|
||||
</div>
|
||||
<div class="decorator">
|
||||
</div>
|
||||
<div class="details">
|
||||
<header>
|
||||
<h3>Another Position</h3>
|
||||
<span class="place">Some Workplace</span>
|
||||
<span class="location">Some City, Some Country</span>
|
||||
</header>
|
||||
<div>
|
||||
<ul>
|
||||
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
|
||||
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
|
||||
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="blocks">
|
||||
<div class="date">
|
||||
<span>2013</span><span>2014</span>
|
||||
</div>
|
||||
<div class="decorator">
|
||||
</div>
|
||||
<div class="details">
|
||||
<header>
|
||||
<h3>Yet Another Job Position</h3>
|
||||
<span class="place">Some Workplace</span>
|
||||
<span class="location">Some City, Some Country</span>
|
||||
</header>
|
||||
<div>
|
||||
<ul>
|
||||
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec mi ante. Etiam odio eros, placerat eu metus id, gravida eleifend odio</li>
|
||||
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
<section class="main-block">
|
||||
<h2>
|
||||
<i class="fa fa-folder-open"></i> Selected Projects
|
||||
</h2>
|
||||
<section class="blocks">
|
||||
<div class="date">
|
||||
<span>2015</span><span>2016</span>
|
||||
</div>
|
||||
<div class="decorator">
|
||||
</div>
|
||||
<div class="details">
|
||||
<header>
|
||||
<h3>Some Project 1</h3>
|
||||
<span class="place">Some workplace</span>
|
||||
</header>
|
||||
<div>
|
||||
<ul>
|
||||
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
|
||||
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec mi ante. Etiam odio eros, placerat eu metus id, gravida eleifend odio. Vestibulum dapibus pharetra odio, egestas ullamcorper ipsum congue ac</li>
|
||||
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec mi ante. Etiam odio eros, placerat eu metus id, gravida eleifend odio</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="blocks">
|
||||
<div class="date">
|
||||
<span>2014</span><span>2015</span>
|
||||
</div>
|
||||
<div class="decorator">
|
||||
</div>
|
||||
<div class="details">
|
||||
<header>
|
||||
<h3>Some Project 2</h3>
|
||||
<span class="place">Some workplace</span>
|
||||
</header>
|
||||
<div>
|
||||
<ul>
|
||||
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec mi ante. Etiam odio eros, placerat eu metus id, gravida eleifend odio. Vestibulum dapibus pharetra odio, egestas ullamcorper ipsum congue ac. Maecenas viverra tortor eget convallis vestibulum. Donec pulvinar venenatis est, non sollicitudin metus laoreet sed. Fusce tincidunt felis nec neque aliquet porttitor</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="blocks">
|
||||
<div class="date">
|
||||
2014
|
||||
</div>
|
||||
<div class="decorator">
|
||||
</div>
|
||||
<div class="details">
|
||||
<header>
|
||||
<h3>Some Project 3</h3>
|
||||
<span class="place">Some workplace</span>
|
||||
</header>
|
||||
<div>
|
||||
<ul>
|
||||
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec mi ante. Etiam odio eros, placerat eu metus id, gravida eleifend odio</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
<section class="main-block concise">
|
||||
<h2>
|
||||
<i class="fa fa-graduation-cap"></i> Education
|
||||
</h2>
|
||||
<section class="blocks">
|
||||
<div class="date">
|
||||
<span>2009</span><span>2014</span>
|
||||
</div>
|
||||
<div class="decorator">
|
||||
</div>
|
||||
<div class="details">
|
||||
<header>
|
||||
<h3>Ph.D. in Forty-Two Discovery</h3>
|
||||
<span class="place">Inexistent University</span>
|
||||
<span class="location">Some City, Some Country</span>
|
||||
</header>
|
||||
<div>Relationship of the number with the answer to life, the universe and everything</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="blocks">
|
||||
<div class="date">
|
||||
<span>2005</span><span>2009</span>
|
||||
</div>
|
||||
<div class="decorator">
|
||||
</div>
|
||||
<div class="details">
|
||||
<header>
|
||||
<h3>LL.B. in Hæmatophagic Economics</h3>
|
||||
<span class="place">Inexistent University</span>
|
||||
<span class="location">Some City, Some Country</span>
|
||||
</header>
|
||||
<div>President's Scholarship</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="blocks">
|
||||
<div class="date">
|
||||
<span>2005</span><span>2009</span>
|
||||
</div>
|
||||
<div class="decorator">
|
||||
</div>
|
||||
<div class="details">
|
||||
<header>
|
||||
<h3>B.S. in Existential Science (Double Major)</h3>
|
||||
<span class="place">Inexistent University</span>
|
||||
<span class="location">Some City, Some Country</span>
|
||||
</header>
|
||||
<div>President's Scholarship</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="blocks">
|
||||
<div class="date">
|
||||
</div>
|
||||
<div class="decorator">
|
||||
</div>
|
||||
<div class="details">
|
||||
<header>
|
||||
<h3>Massive Online Fee–Required Course (selective list)</h3>
|
||||
</header>
|
||||
<div class="concise">
|
||||
<ul>
|
||||
<li>Introduction to something else</li>
|
||||
<li>Introduction to some more useless things</li>
|
||||
<li>Impractical philosophy</li>
|
||||
<li>Astrology and its effects on astrology</li>
|
||||
<li>Artificial politics</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
<aside id="sidebar">
|
||||
<div class="side-block" id="contact">
|
||||
<h1>
|
||||
Contact Info
|
||||
</h1>
|
||||
<ul>
|
||||
<li><i class="fa fa-globe"></i> johndoe.gtld</li>
|
||||
<li><i class="fa fa-linkedin"></i> linkedin.com/in/john</li>
|
||||
<li><i class="fa fa-envelope"></i> me@johndoe.gtld</li>
|
||||
<li><i class="fa fa-phone"></i> 800.000.0000</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="side-block" id="skills">
|
||||
<h1>
|
||||
Skills
|
||||
</h1>
|
||||
<ul>
|
||||
<li>Omnipresence</li>
|
||||
<li>Anonymity</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<ul>
|
||||
<li>Ordinarity</li>
|
||||
<li>No name rights</li>
|
||||
</p>
|
||||
</div>
|
||||
<div class="side-block" id="disclaimer">
|
||||
This résumé was wholly typeset with HTML/CSS — see <code>git.io/vVSYL</code>
|
||||
</div>
|
||||
</aside>
|
||||
</body>
|
||||
</html>
|
||||
368
style.css
Normal file
368
style.css
Normal file
|
|
@ -0,0 +1,368 @@
|
|||
@page{
|
||||
size: letter portrait;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
*{
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root{
|
||||
--page-width: 8.5in;
|
||||
--page-height: 11in;
|
||||
--main-width: 6.4in;
|
||||
--sidebar-width: calc(var(--page-width) - var(--main-width));
|
||||
--decorator-horizontal-margin: 0.2in;
|
||||
|
||||
--sidebar-horizontal-padding: 0.2in;
|
||||
|
||||
/* XXX: using px for very good precision control */
|
||||
--decorator-outer-offset-top: 10px;
|
||||
--decorator-outer-offset-left: -5px;
|
||||
--decorator-border-width: 1px;
|
||||
--decorator-outer-dim: 9px;
|
||||
--decorator-border: 1px solid #ccc;
|
||||
|
||||
--row-blocks-padding-top: 5pt;
|
||||
--date-block-width: 0.6in;
|
||||
|
||||
--main-blocks-title-icon-offset-left: -19pt;
|
||||
}
|
||||
|
||||
body{
|
||||
width: var(--page-width);
|
||||
height: var(--page-height);
|
||||
margin: 0;
|
||||
font-family: "Open Sans", sans-serif;
|
||||
font-weight: 300;
|
||||
line-height: 1.3;
|
||||
color: #444;
|
||||
hyphens: auto;
|
||||
}
|
||||
|
||||
h1, h2, h3{
|
||||
margin: 0;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
li{
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
#main{
|
||||
float: left;
|
||||
width: var(--main-width);
|
||||
padding: 0.25in 0.25in 0 0.25in;
|
||||
font-size: 7pt;
|
||||
}
|
||||
|
||||
#sidebar{
|
||||
float: right;
|
||||
position: relative; /* for disclaimer */
|
||||
width: var(--sidebar-width);
|
||||
height: 100%;
|
||||
padding: 0.6in var(--sidebar-horizontal-padding);
|
||||
background-color: #f2f2f2;
|
||||
font-size: 8.5pt;
|
||||
}
|
||||
|
||||
/* main */
|
||||
|
||||
/** big title **/
|
||||
#title, h1, h2{
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
#title{
|
||||
position: relative;
|
||||
left: 0.55in;
|
||||
margin-bottom: 0.3in;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
#title h1{
|
||||
font-weight: 300;
|
||||
font-size: 18pt;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
#title h1 strong{
|
||||
margin: auto 2pt auto 4pt;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.subtitle{
|
||||
font-size: 8pt;
|
||||
}
|
||||
|
||||
/*** categorial blocks ***/
|
||||
|
||||
.main-block{
|
||||
margin-top: 0.1in;
|
||||
}
|
||||
|
||||
#main h2{
|
||||
position: relative;
|
||||
top: var(--row-blocks-padding-top);
|
||||
/* XXX: 0.5px for aligning fx printing */
|
||||
left: calc((var(--date-block-width) + var(--decorator-horizontal-margin)));
|
||||
font-weight: 400;
|
||||
font-size: 11pt;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
#main h2 > i{
|
||||
/* use absolute position to prevent icon's width from misaligning title */
|
||||
/* assigning a fixed width here is no better due to needing to align decorator
|
||||
line too */
|
||||
position: absolute;
|
||||
left: var(--main-blocks-title-icon-offset-left);
|
||||
z-index: 1; /* over decorator line */
|
||||
color: #444;
|
||||
}
|
||||
|
||||
#main h2::after{ /* extends the decorator line */
|
||||
height: calc(var(--row-blocks-padding-top) * 2);
|
||||
position: relative;
|
||||
top: calc(-1 * var(--row-blocks-padding-top));
|
||||
/* XXX: 0.5px for aligning fx printing */
|
||||
left: calc(-1 * var(--decorator-horizontal-margin));
|
||||
display: block;
|
||||
border-left: var(--decorator-border);
|
||||
z-index: 0;
|
||||
line-height: 0;
|
||||
font-size: 0;
|
||||
content: ' ';
|
||||
}
|
||||
|
||||
/**** minor tweaks on the icon fonts ****/
|
||||
#main h2 > .fa-graduation-cap{
|
||||
left: calc(var(--main-blocks-title-icon-offset-left) - 2pt);
|
||||
top: 2pt;
|
||||
}
|
||||
|
||||
#main h2 > .fa-suitcase{
|
||||
top: 1pt;
|
||||
}
|
||||
|
||||
#main h2 > .fa-folder-open{
|
||||
top: 1.5pt;
|
||||
}
|
||||
|
||||
/**** individual row blocks (date - decorator - details) ****/
|
||||
|
||||
.blocks{
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
}
|
||||
|
||||
.blocks > div{
|
||||
padding-top: var(--row-blocks-padding-top);
|
||||
}
|
||||
|
||||
.date{
|
||||
flex: 0 0 var(--date-block-width);
|
||||
padding-top: calc(var(--row-blocks-padding-top) + 2.5pt) !important;
|
||||
padding-right: var(--decorator-horizontal-margin);
|
||||
font-size: 7pt;
|
||||
text-align: right;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.date span{
|
||||
display: block;
|
||||
}
|
||||
|
||||
.date span:first-child::after{
|
||||
position: relative;
|
||||
top: 1pt;
|
||||
right: 5.5pt;
|
||||
display: block;
|
||||
height: 10pt;
|
||||
content: '|';
|
||||
}
|
||||
|
||||
.decorator{
|
||||
flex: 0 0 0;
|
||||
position: relative;
|
||||
width: 2pt;
|
||||
min-height: 100%;
|
||||
border-left: var(--decorator-border);
|
||||
}
|
||||
|
||||
/*
|
||||
* XXX: Use two filled circles to achieve the circle-with-white-border effect.
|
||||
* The normal technique of only using one pseudo element and
|
||||
* border: 1px solid white; style makes firefox erroneously either:
|
||||
* 1) overflows the grayshade background (if no background-clip is set), or
|
||||
* 2) shows decorator line which should've been masked by the white border
|
||||
*
|
||||
*/
|
||||
|
||||
.decorator::before{
|
||||
position: absolute;
|
||||
top: var(--decorator-outer-offset-top);
|
||||
left: var(--decorator-outer-offset-left);
|
||||
content: ' ';
|
||||
display: block;
|
||||
width: var(--decorator-outer-dim);
|
||||
height: var(--decorator-outer-dim);
|
||||
border-radius: calc(var(--decorator-outer-dim) / 2);
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.decorator::after{
|
||||
position: absolute;
|
||||
top: calc(var(--decorator-outer-offset-top) + var(--decorator-border-width));
|
||||
left: calc(var(--decorator-outer-offset-left) + var(--decorator-border-width));
|
||||
content: ' ';
|
||||
display: block;
|
||||
width: calc(var(--decorator-outer-dim) - (var(--decorator-border-width) * 2));
|
||||
height: calc(var(--decorator-outer-dim) - (var(--decorator-border-width) * 2));
|
||||
border-radius: calc((var(--decorator-outer-dim) - (var(--decorator-border-width) * 2)) / 2);
|
||||
background-color: #555;
|
||||
}
|
||||
|
||||
.blocks:last-child .decorator{ /* slightly shortens it */
|
||||
margin-bottom: 0.25in;
|
||||
}
|
||||
|
||||
/***** fine-tunes on the details block where the real juice is *****/
|
||||
|
||||
.details{
|
||||
flex: 1 0 0;
|
||||
padding-left: var(--decorator-horizontal-margin);
|
||||
}
|
||||
|
||||
.details header{
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.details h3{
|
||||
font-size: 9pt;
|
||||
}
|
||||
|
||||
.main-block:not(.concise) .details div{
|
||||
margin: 0.18in 0 0.1in 0;
|
||||
}
|
||||
|
||||
.main-block:not(.concise) .blocks:last-child .details div{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.main-block.concise .details div:not(.concise){
|
||||
/* use padding to work around the fact that margin doesn't affect floated
|
||||
neighboring elements */
|
||||
padding: 0.05in 0 0.07in 0;
|
||||
}
|
||||
|
||||
.details .place{
|
||||
float: left;
|
||||
font-size: 7.5pt;
|
||||
}
|
||||
|
||||
.details .location{
|
||||
float: right;
|
||||
}
|
||||
|
||||
.details div{
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.details .location::before{
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
right: 3pt;
|
||||
top: 0.25pt;
|
||||
font-family: FontAwesome;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
text-decoration: inherit;
|
||||
content: "\f041";
|
||||
}
|
||||
|
||||
/***** fine-tunes on the lists... *****/
|
||||
|
||||
#main ul{
|
||||
padding-left: 0.07in;
|
||||
margin: 0.08in 0;
|
||||
}
|
||||
|
||||
#main li{
|
||||
margin: 0 0 0.025in 0;
|
||||
}
|
||||
|
||||
/****** customize list symbol style ******/
|
||||
#main li::before{
|
||||
position: relative;
|
||||
margin-left: -4.25pt;
|
||||
content: '• ';
|
||||
}
|
||||
|
||||
.details .concise ul{
|
||||
margin: 0 !important;
|
||||
-webkit-columns: 2;
|
||||
-moz-columns: 2;
|
||||
columns: 2;
|
||||
}
|
||||
|
||||
.details .concise li{
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.details .concise li{
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* sidebar */
|
||||
|
||||
#sidebar h1{
|
||||
font-weight: 400;
|
||||
font-size: 11pt;
|
||||
}
|
||||
|
||||
.side-block{
|
||||
margin-top: 0.5in;
|
||||
}
|
||||
|
||||
#contact ul{
|
||||
margin-top: 0.05in;
|
||||
padding-left: 0;
|
||||
font-family: "Source Code Pro";
|
||||
font-weight: 400;
|
||||
line-height: 1.75;
|
||||
}
|
||||
|
||||
#contact li > i{
|
||||
width: 9pt; /* for text alignment */
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
#skills{
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
#skills ul{
|
||||
margin: 0.05in 0 0.15in;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#disclaimer{
|
||||
position: absolute;
|
||||
bottom: var(--sidebar-horizontal-padding);
|
||||
right: var(--sidebar-horizontal-padding);
|
||||
font-size: 7.5pt;
|
||||
font-style: italic;
|
||||
line-height: 1.1;
|
||||
text-align: right;
|
||||
color: #777;
|
||||
}
|
||||
|
||||
#disclaimer code{
|
||||
color: #666;
|
||||
font-family: "Source Code Pro";
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
Loading…
Reference in a new issue