Browse Source

Add the html, css, and the dependencies

201809
Min-Zhong "John" Lu 3 years ago
parent
commit
4fb227a134
5 changed files with 620 additions and 0 deletions
  1. 6
    0
      .gitmodules
  2. 1
    0
      dep/Font-Awesome
  3. 1
    0
      dep/normalize.css
  4. 244
    0
      resume.html
  5. 368
    0
      style.css

+ 6
- 0
.gitmodules View File

@@ -0,0 +1,6 @@
1
+[submodule "Font-Awesome"]
2
+	path = dep/Font-Awesome
3
+	url = https://github.com/FortAwesome/Font-Awesome
4
+[submodule "normalize.css"]
5
+	path = dep/normalize.css
6
+	url = https://github.com/necolas/normalize.css/

+ 1
- 0
dep/Font-Awesome

@@ -0,0 +1 @@
1
+Subproject commit 1743947b8fff6b727c19ef6ee8bd334d7386b725

+ 1
- 0
dep/normalize.css

@@ -0,0 +1 @@
1
+Subproject commit ab3abb6d36cf3cd66e22faeec65dcef1196ba1c1

+ 244
- 0
resume.html View File

@@ -0,0 +1,244 @@
1
+<!DOCTYPE html>
2
+<html>
3
+  <head>
4
+    <meta charset="utf-8" />
5
+    <link rel="stylesheet" type="text/css" href="dep/normalize.css/normalize.css" />
6
+    <link rel="stylesheet" type="text/css" href="dep/Font-Awesome/css/font-awesome.css" />
7
+    <link rel="stylesheet" type="text/css" href="style.css" />
8
+  </head>
9
+  <body lang="en">
10
+    <section id="main">
11
+      <header id="title">
12
+        <h1>John Doe</h1>
13
+        <span class="subtitle">Plaintiff, defendant &amp; witness</span>
14
+      </header>
15
+      <section class="main-block">
16
+        <h2>
17
+          <i class="fa fa-suitcase"></i> Experiences
18
+        </h2>
19
+        <section class="blocks">
20
+          <div class="date">
21
+            <span>2015</span><span>present</span>
22
+          </div>
23
+          <div class="decorator">
24
+          </div>
25
+          <div class="details">
26
+            <header>
27
+              <h3>Some Position</h3>
28
+              <span class="place">Some Workplace</span>
29
+              <span class="location">(remote)</span>
30
+            </header>
31
+            <div>
32
+              <ul>
33
+                <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
34
+                <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>
35
+              </ul>
36
+              </div>
37
+          </div>
38
+        </section>
39
+        <section class="blocks">
40
+          <div class="date">
41
+            <span>2014</span><span>2015</span>
42
+          </div>
43
+          <div class="decorator">
44
+          </div>
45
+          <div class="details">
46
+            <header>
47
+              <h3>Another Position</h3>
48
+              <span class="place">Some Workplace</span>
49
+              <span class="location">Some City, Some Country</span>
50
+            </header>
51
+            <div>
52
+              <ul>
53
+                <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
54
+                <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
55
+                <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
56
+              </ul>
57
+            </div>
58
+          </div>
59
+        </section>
60
+        <section class="blocks">
61
+          <div class="date">
62
+            <span>2013</span><span>2014</span>
63
+          </div>
64
+          <div class="decorator">
65
+          </div>
66
+          <div class="details">
67
+            <header>
68
+              <h3>Yet Another Job Position</h3>
69
+              <span class="place">Some Workplace</span>
70
+              <span class="location">Some City, Some Country</span>
71
+            </header>
72
+            <div>
73
+              <ul>
74
+                <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec mi ante. Etiam odio eros, placerat eu metus id, gravida eleifend odio</li>
75
+                <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
76
+              </ul>
77
+              </div>
78
+          </div>
79
+        </section>
80
+      </section>
81
+      <section class="main-block">
82
+        <h2>
83
+          <i class="fa fa-folder-open"></i> Selected Projects
84
+        </h2>
85
+        <section class="blocks">
86
+          <div class="date">
87
+            <span>2015</span><span>2016</span>
88
+          </div>
89
+          <div class="decorator">
90
+          </div>
91
+          <div class="details">
92
+            <header>
93
+              <h3>Some Project 1</h3>
94
+              <span class="place">Some workplace</span>
95
+            </header>
96
+            <div>
97
+              <ul>
98
+                <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
99
+                <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>
100
+                <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec mi ante. Etiam odio eros, placerat eu metus id, gravida eleifend odio</li>
101
+              </ul>
102
+            </div>
103
+          </div>
104
+        </section>
105
+        <section class="blocks">
106
+          <div class="date">
107
+            <span>2014</span><span>2015</span>
108
+          </div>
109
+          <div class="decorator">
110
+          </div>
111
+          <div class="details">
112
+            <header>
113
+              <h3>Some Project 2</h3>
114
+              <span class="place">Some workplace</span>
115
+            </header>
116
+            <div>
117
+              <ul>
118
+                <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>
119
+              </ul>
120
+            </div>
121
+          </div>
122
+        </section>
123
+        <section class="blocks">
124
+          <div class="date">
125
+            2014
126
+          </div>
127
+          <div class="decorator">
128
+          </div>
129
+          <div class="details">
130
+            <header>
131
+              <h3>Some Project 3</h3>
132
+              <span class="place">Some workplace</span>
133
+            </header>
134
+            <div>
135
+              <ul>
136
+                <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec mi ante. Etiam odio eros, placerat eu metus id, gravida eleifend odio</li>
137
+              </ul>
138
+            </div>
139
+          </div>
140
+        </section>
141
+      </section>
142
+      <section class="main-block concise">
143
+        <h2>
144
+          <i class="fa fa-graduation-cap"></i> Education
145
+        </h2>
146
+        <section class="blocks">
147
+          <div class="date">
148
+            <span>2009</span><span>2014</span>
149
+          </div>
150
+          <div class="decorator">
151
+          </div>
152
+          <div class="details">
153
+            <header>
154
+              <h3>Ph.D. in Forty-Two Discovery</h3>
155
+              <span class="place">Inexistent University</span>
156
+              <span class="location">Some City, Some Country</span>
157
+            </header>
158
+            <div>Relationship of the number with the answer to life, the universe and everything</div>
159
+          </div>
160
+        </section>
161
+        <section class="blocks">
162
+          <div class="date">
163
+            <span>2005</span><span>2009</span>
164
+          </div>
165
+          <div class="decorator">
166
+          </div>
167
+          <div class="details">
168
+            <header>
169
+              <h3>LL.B. in H&aelig;matophagic Economics</h3>
170
+              <span class="place">Inexistent University</span>
171
+              <span class="location">Some City, Some Country</span>
172
+            </header>
173
+            <div>President's Scholarship</div>
174
+          </div>
175
+        </section>
176
+        <section class="blocks">
177
+          <div class="date">
178
+            <span>2005</span><span>2009</span>
179
+          </div>
180
+          <div class="decorator">
181
+          </div>
182
+          <div class="details">
183
+            <header>
184
+              <h3>B.S. in Existential Science (Double Major)</h3>
185
+              <span class="place">Inexistent University</span>
186
+              <span class="location">Some City, Some Country</span>
187
+            </header>
188
+            <div>President's Scholarship</div>
189
+          </div>
190
+        </section>
191
+        <section class="blocks">
192
+          <div class="date">
193
+          </div>
194
+          <div class="decorator">
195
+          </div>
196
+          <div class="details">
197
+            <header>
198
+              <h3>Massive Online Fee&ndash;Required Course (selective list)</h3>
199
+            </header>
200
+            <div class="concise">
201
+              <ul>
202
+                <li>Introduction to something else</li>
203
+                <li>Introduction to some more useless things</li>
204
+                <li>Impractical philosophy</li>
205
+                <li>Astrology and its effects on astrology</li>
206
+                <li>Artificial politics</li>
207
+              </ul>
208
+            </div>
209
+          </div>
210
+        </section>
211
+      </section>
212
+    </section>
213
+    <aside id="sidebar">
214
+      <div class="side-block" id="contact">
215
+        <h1>
216
+          Contact Info
217
+        </h1>
218
+        <ul>
219
+          <li><i class="fa fa-globe"></i> johndoe.gtld</li>
220
+          <li><i class="fa fa-linkedin"></i> linkedin.com/in/john</li>
221
+          <li><i class="fa fa-envelope"></i> me@johndoe.gtld</li>
222
+          <li><i class="fa fa-phone"></i> 800.000.0000</li>
223
+        </ul>
224
+      </div>
225
+      <div class="side-block" id="skills">
226
+        <h1>
227
+          Skills
228
+        </h1>
229
+        <ul>
230
+          <li>Omnipresence</li>
231
+          <li>Anonymity</li>
232
+        </ul>
233
+        <ul>
234
+        <ul>
235
+          <li>Ordinarity</li>
236
+          <li>No name rights</li>
237
+        </p>
238
+      </div>
239
+      <div class="side-block" id="disclaimer">
240
+        This r&eacute;sum&eacute; was wholly typeset with HTML/CSS &mdash; see <code>git.io/vVSYL</code>
241
+      </div>
242
+    </aside>
243
+  </body>
244
+</html>

+ 368
- 0
style.css View File

@@ -0,0 +1,368 @@
1
+@page{
2
+  size: letter portrait;
3
+  margin: 0;
4
+}
5
+
6
+*{
7
+  box-sizing: border-box;
8
+}
9
+
10
+:root{
11
+  --page-width: 8.5in;
12
+  --page-height: 11in;
13
+  --main-width: 6.4in;
14
+  --sidebar-width: calc(var(--page-width) - var(--main-width));
15
+  --decorator-horizontal-margin: 0.2in;
16
+
17
+  --sidebar-horizontal-padding: 0.2in;
18
+
19
+  /* XXX: using px for very good precision control */
20
+  --decorator-outer-offset-top: 10px;
21
+  --decorator-outer-offset-left: -5px;
22
+  --decorator-border-width: 1px;
23
+  --decorator-outer-dim: 9px;
24
+  --decorator-border: 1px solid #ccc;
25
+
26
+  --row-blocks-padding-top: 5pt;
27
+  --date-block-width: 0.6in;
28
+
29
+  --main-blocks-title-icon-offset-left: -19pt;
30
+}
31
+
32
+body{
33
+  width: var(--page-width);
34
+  height: var(--page-height);
35
+  margin: 0;
36
+  font-family: "Open Sans", sans-serif; 
37
+  font-weight: 300;
38
+  line-height: 1.3;
39
+  color: #444;
40
+  hyphens: auto;
41
+}
42
+
43
+h1, h2, h3{
44
+  margin: 0;
45
+  color: #000;
46
+}
47
+
48
+li{
49
+  list-style-type: none;
50
+}
51
+
52
+#main{
53
+  float: left;
54
+  width: var(--main-width);
55
+  padding: 0.25in 0.25in 0 0.25in;
56
+  font-size: 7pt;
57
+}
58
+
59
+#sidebar{
60
+  float: right;
61
+  position: relative; /* for disclaimer */
62
+  width: var(--sidebar-width);
63
+  height: 100%;
64
+  padding: 0.6in var(--sidebar-horizontal-padding);
65
+  background-color: #f2f2f2;
66
+  font-size: 8.5pt;
67
+}
68
+
69
+/* main */
70
+
71
+/** big title **/
72
+#title, h1, h2{
73
+  text-transform: uppercase;
74
+}
75
+
76
+#title{
77
+  position: relative;
78
+  left: 0.55in;
79
+  margin-bottom: 0.3in;
80
+  line-height: 1.2;
81
+}
82
+
83
+#title h1{
84
+  font-weight: 300;
85
+  font-size: 18pt;
86
+  line-height: 1.5;
87
+}
88
+
89
+#title h1 strong{
90
+  margin: auto 2pt auto 4pt;
91
+  font-weight: 600;
92
+}
93
+
94
+.subtitle{
95
+  font-size: 8pt;
96
+}
97
+
98
+/*** categorial blocks ***/
99
+
100
+.main-block{
101
+  margin-top: 0.1in;
102
+}
103
+
104
+#main h2{
105
+  position: relative;
106
+  top: var(--row-blocks-padding-top);
107
+  /* XXX: 0.5px for aligning fx printing */
108
+  left: calc((var(--date-block-width) + var(--decorator-horizontal-margin)));
109
+  font-weight: 400;
110
+  font-size: 11pt;
111
+  color: #555;
112
+}
113
+
114
+#main h2 > i{
115
+  /* use absolute position to prevent icon's width from misaligning title */
116
+  /* assigning a fixed width here is no better due to needing to align decorator
117
+     line too */
118
+  position: absolute;
119
+  left: var(--main-blocks-title-icon-offset-left);
120
+  z-index: 1; /* over decorator line */
121
+  color: #444;
122
+}
123
+
124
+#main h2::after{ /* extends the decorator line */
125
+  height: calc(var(--row-blocks-padding-top) * 2);
126
+  position: relative;
127
+  top: calc(-1 * var(--row-blocks-padding-top));
128
+  /* XXX: 0.5px for aligning fx printing */
129
+  left: calc(-1 * var(--decorator-horizontal-margin));
130
+  display: block;
131
+  border-left: var(--decorator-border);
132
+  z-index: 0;
133
+  line-height: 0;
134
+  font-size: 0;
135
+  content: ' ';
136
+}
137
+
138
+/**** minor tweaks on the icon fonts ****/
139
+#main h2 > .fa-graduation-cap{
140
+  left: calc(var(--main-blocks-title-icon-offset-left) - 2pt);
141
+  top: 2pt;
142
+}
143
+
144
+#main h2 > .fa-suitcase{
145
+  top: 1pt;
146
+}
147
+
148
+#main h2 > .fa-folder-open{
149
+  top: 1.5pt;
150
+}
151
+
152
+/**** individual row blocks (date - decorator - details) ****/
153
+
154
+.blocks{
155
+  display: flex;
156
+  flex-flow: row nowrap;
157
+}
158
+
159
+.blocks > div{
160
+  padding-top: var(--row-blocks-padding-top);
161
+}
162
+
163
+.date{
164
+  flex: 0 0 var(--date-block-width);
165
+  padding-top: calc(var(--row-blocks-padding-top) + 2.5pt) !important;
166
+  padding-right: var(--decorator-horizontal-margin);
167
+  font-size: 7pt;
168
+  text-align: right;
169
+  line-height: 1;
170
+}
171
+
172
+.date span{
173
+  display: block;
174
+}
175
+
176
+.date span:first-child::after{
177
+  position: relative;
178
+  top: 1pt;
179
+  right: 5.5pt;
180
+  display: block;
181
+  height: 10pt;
182
+  content: '|';
183
+}
184
+
185
+.decorator{
186
+  flex: 0 0 0;
187
+  position: relative;
188
+  width: 2pt;
189
+  min-height: 100%;
190
+  border-left: var(--decorator-border);
191
+}
192
+
193
+/*
194
+ * XXX: Use two filled circles to achieve the circle-with-white-border effect.
195
+ * The normal technique of only using one pseudo element and
196
+ * border: 1px solid white; style makes firefox erroneously either:
197
+ * 1) overflows the grayshade background (if no background-clip is set), or
198
+ * 2) shows decorator line which should've been masked by the white border
199
+ *
200
+ */
201
+
202
+.decorator::before{
203
+  position: absolute;
204
+  top: var(--decorator-outer-offset-top);
205
+  left: var(--decorator-outer-offset-left);
206
+  content: ' ';
207
+  display: block;
208
+  width: var(--decorator-outer-dim);
209
+  height: var(--decorator-outer-dim);
210
+  border-radius: calc(var(--decorator-outer-dim) / 2);
211
+  background-color: #fff;
212
+}
213
+
214
+.decorator::after{
215
+  position: absolute;
216
+  top: calc(var(--decorator-outer-offset-top) + var(--decorator-border-width));
217
+  left: calc(var(--decorator-outer-offset-left) + var(--decorator-border-width));
218
+  content: ' ';
219
+  display: block;
220
+  width: calc(var(--decorator-outer-dim) - (var(--decorator-border-width) * 2));
221
+  height: calc(var(--decorator-outer-dim) - (var(--decorator-border-width) * 2));
222
+  border-radius: calc((var(--decorator-outer-dim) - (var(--decorator-border-width) * 2)) / 2);
223
+  background-color: #555;
224
+}
225
+
226
+.blocks:last-child .decorator{ /* slightly shortens it */
227
+  margin-bottom: 0.25in;
228
+}
229
+
230
+/***** fine-tunes on the details block where the real juice is *****/
231
+
232
+.details{
233
+  flex: 1 0 0;
234
+  padding-left: var(--decorator-horizontal-margin);
235
+}
236
+
237
+.details header{
238
+  color: #000;
239
+}
240
+
241
+.details h3{
242
+  font-size: 9pt;
243
+}
244
+
245
+.main-block:not(.concise) .details div{
246
+  margin: 0.18in 0 0.1in 0; 
247
+}
248
+
249
+.main-block:not(.concise) .blocks:last-child .details div{
250
+  margin-bottom: 0;
251
+}
252
+
253
+.main-block.concise .details div:not(.concise){
254
+  /* use padding to work around the fact that margin doesn't affect floated
255
+     neighboring elements */
256
+  padding: 0.05in 0 0.07in 0;
257
+}
258
+
259
+.details .place{
260
+  float: left;
261
+  font-size: 7.5pt;
262
+}
263
+
264
+.details .location{
265
+  float: right;
266
+}
267
+
268
+.details div{
269
+  clear: both;
270
+}
271
+
272
+.details .location::before{
273
+  display: inline-block;
274
+  position: relative;
275
+  right: 3pt;
276
+  top: 0.25pt;
277
+  font-family: FontAwesome;
278
+  font-weight: normal;
279
+  font-style: normal;
280
+  text-decoration: inherit;
281
+  content: "\f041";
282
+}
283
+
284
+/***** fine-tunes on the lists... *****/
285
+
286
+#main ul{
287
+  padding-left: 0.07in;
288
+  margin: 0.08in 0;
289
+}
290
+
291
+#main li{
292
+  margin: 0 0 0.025in 0;
293
+}
294
+
295
+/****** customize list symbol style ******/
296
+#main li::before{
297
+  position: relative;
298
+  margin-left: -4.25pt;
299
+  content: '• ';
300
+}
301
+
302
+.details .concise ul{
303
+  margin: 0 !important;
304
+  -webkit-columns: 2;
305
+  -moz-columns: 2;
306
+  columns: 2;
307
+}
308
+
309
+.details .concise li{
310
+  margin: 0 !important;
311
+}
312
+
313
+.details .concise li{
314
+  margin-left: 0 !important;
315
+}
316
+
317
+
318
+
319
+/* sidebar */
320
+
321
+#sidebar h1{
322
+  font-weight: 400;
323
+  font-size: 11pt;
324
+}
325
+
326
+.side-block{
327
+  margin-top: 0.5in; 
328
+}
329
+
330
+#contact ul{
331
+  margin-top: 0.05in;
332
+  padding-left: 0;
333
+  font-family: "Source Code Pro";
334
+  font-weight: 400;
335
+  line-height: 1.75;
336
+}
337
+
338
+#contact li > i{
339
+  width: 9pt; /* for text alignment */
340
+  text-align: right;
341
+}
342
+
343
+#skills{
344
+  line-height: 1.5;
345
+}
346
+
347
+#skills ul{
348
+  margin: 0.05in 0 0.15in;
349
+  padding: 0;
350
+}
351
+
352
+#disclaimer{
353
+  position: absolute;
354
+  bottom: var(--sidebar-horizontal-padding);
355
+  right: var(--sidebar-horizontal-padding);
356
+  font-size: 7.5pt;
357
+  font-style: italic;
358
+  line-height: 1.1;
359
+  text-align: right;
360
+  color: #777;
361
+}
362
+
363
+#disclaimer code{
364
+  color: #666;
365
+  font-family: "Source Code Pro";
366
+  font-weight: 400;
367
+  font-style: normal;
368
+}

Loading…
Cancel
Save