Browse Source

Ready to ship

Phyks (Lucas Verney) 5 years ago
parent
commit
62e6f1584f
6 changed files with 277 additions and 82 deletions
  1. 25
    6
      css/design.css
  2. 153
    0
      css/print.css
  3. 8
    8
      img/diy.svg
  4. 12
    12
      img/programming.svg
  5. 51
    50
      index.html
  6. 28
    6
      js/main.js

+ 25
- 6
css/design.css View File

@@ -1,15 +1,25 @@
1 1
 html, body {
2 2
     height: 100%;
3
+    overflow: hidden;
3 4
 }
4 5
 
5 6
 body {
6
-    font-family: "Open Sans";
7
+    font-family: "Open Sans", sans-serif;
7 8
     background-color: rgba(85, 66, 54, 1);
8 9
     color: white;
9 10
 }
10 11
 
11 12
 a {
12 13
     color: white;
14
+    text-decoration: underline;
15
+}
16
+
17
+span.changeDirection {
18
+    unicode-bidi: bidi-override;
19
+    direction: rtl;
20
+}
21
+
22
+nav a {
13 23
     text-decoration: none;
14 24
 }
15 25
 
@@ -45,6 +55,10 @@ dt:not(:first-child) {
45 55
 /**
46 56
  * Home screen
47 57
  */
58
+.home a {
59
+    text-decoration: none;
60
+}
61
+
48 62
 .home--header {
49 63
     display: flex;
50 64
     width: calc(100vw - 4em);
@@ -147,7 +161,7 @@ nav li:last-child:hover {
147 161
  * Details for cells in home screen, and their dedicated screens.
148 162
  */
149 163
 .whoami {
150
-    background-color: rgba(211, 206, 61, 1);
164
+    background-color: rgba(188, 184, 58, 1);
151 165
 }
152 166
 
153 167
 .skills {
@@ -183,11 +197,11 @@ nav li:last-child:hover {
183 197
 }
184 198
 
185 199
 .education {
186
-    background-color: rgba(211, 206, 61, 1);
200
+    background-color: rgba(188, 184, 58, 1);
187 201
 }
188 202
 
189 203
 .hobbies {
190
-    background-color: rgba(211, 206, 61, 1);
204
+    background-color: rgba(188, 184, 58, 1);
191 205
     width: calc(33.3% - 1.33em);
192 206
 }
193 207
 
@@ -272,8 +286,13 @@ nav li:last-child:hover {
272 286
 }
273 287
 
274 288
 
289
+@media screen and (max-height: 850px) {
290
+    .home {
291
+        font-size: calc(1.9vmin);
292
+    }
293
+}
275 294
 
276
-@media screen and (min-width: 900px) and (min-height: 850px) {
295
+@media screen and (min-width: 901px) and (min-height: 701px) {
277 296
     .main {
278 297
         position: absolute;
279 298
         top: 100vh;
@@ -469,7 +488,7 @@ nav li:last-child:hover {
469 488
 /**
470 489
  * Responsiveness
471 490
  */
472
-@media screen and (max-width: 900px), screen and (max-height: 850px) {
491
+@media screen and (max-width: 900px), screen and (max-height: 700px) {
473 492
     .home .table {
474 493
         display: none;
475 494
     }

+ 153
- 0
css/print.css View File

@@ -0,0 +1,153 @@
1
+html, body {
2
+   height: 100%;
3
+   width: 100%;
4
+   font-size: 0.8em;
5
+}
6
+
7
+body {
8
+    font-family: "Open Sans";
9
+    background-color: white;
10
+    margin: 0;
11
+}
12
+
13
+a {
14
+    text-decoration: none;
15
+    color: black;
16
+}
17
+
18
+/**
19
+ * General classes
20
+ */
21
+.hint {
22
+    border-bottom: 1px dotted;
23
+    cursor: pointer;
24
+}
25
+
26
+.right {
27
+    text-align: right;
28
+}
29
+
30
+.icon {
31
+    width: 4.5em;  /** TODO */
32
+}
33
+
34
+a abbr[title] {
35
+    border: none;
36
+}
37
+
38
+dt:not(:first-child) {
39
+    margin-top: 1em;
40
+}
41
+
42
+nav, .table, .flex-row, .modal {
43
+    display: none;
44
+}
45
+
46
+
47
+/**
48
+ * Home screen
49
+ */
50
+.home--header {
51
+    display: flex;
52
+    width: calc(100% - 4em);
53
+    padding-left: 2em;
54
+    padding-right: 2em;
55
+    height: 4em;
56
+}
57
+
58
+.home--header h1 {
59
+    margin: auto;
60
+    margin-top: 0.5em;
61
+}
62
+
63
+.details {
64
+    margin-top: 0;
65
+    font-size: 0.9em;
66
+    margin-bottom: 0.5em;
67
+}
68
+
69
+.short {
70
+    text-align: center;
71
+}
72
+
73
+.short h3 {
74
+    margin-bottom: 0;
75
+    margin-top: 0;
76
+}
77
+
78
+/**
79
+ * Details for cells in home screen, and their dedicated screens.
80
+ */
81
+.whoami {
82
+    display: none;
83
+}
84
+
85
+.skills {
86
+    background-color: rgba(247, 140, 70, 1);
87
+}
88
+
89
+.skills.item {
90
+    position: absolute;
91
+    top: 2em;
92
+    bottom: 2em;
93
+    margin-left: 2em;
94
+    margin-right: 2em;
95
+    left: calc(33.3% - 0.67em);
96
+    right: calc(33.3% - 0.67em);
97
+}
98
+
99
+.skills h3 {
100
+    text-align: left;
101
+}
102
+
103
+.skills h3 img {
104
+    height: 1em;
105
+    width: 1em;
106
+    vertical-align: middle;
107
+}
108
+
109
+.work {
110
+    background-color: rgba(96, 185, 154, 1);
111
+}
112
+
113
+.experience {
114
+    background-color: rgba(96, 185, 154, 1);
115
+}
116
+
117
+.education {
118
+    background-color: rgba(211, 206, 61, 1);
119
+}
120
+
121
+.hobbies {
122
+    background-color: rgba(211, 206, 61, 1);
123
+    width: calc(33.3% - 1.33em);
124
+}
125
+
126
+.findme {
127
+    display: none;
128
+}
129
+
130
+.contact {
131
+    display: none;
132
+}
133
+
134
+
135
+/**
136
+ * Full screens for each cells.
137
+ */
138
+.full {
139
+    box-sizing: border-box;
140
+    width: 100%;
141
+}
142
+
143
+.full>h2 {
144
+    max-width: 1100px;
145
+    margin-left: auto;
146
+    margin-right: auto;
147
+    margin-top: 0;
148
+}
149
+
150
+.full .icon {
151
+    width: 2em;
152
+    vertical-align: middle;
153
+}

+ 8
- 8
img/diy.svg View File

@@ -13,7 +13,7 @@
13 13
    width="512"
14 14
    height="512"
15 15
    id="svg2"
16
-   inkscape:version="0.48.5 r10040"
16
+   inkscape:version="0.91 r13725"
17 17
    sodipodi:docname="diy.svg">
18 18
   <sodipodi:namedview
19 19
      pagecolor="#ff0000"
@@ -24,15 +24,15 @@
24 24
      guidetolerance="10"
25 25
      inkscape:pageopacity="1"
26 26
      inkscape:pageshadow="2"
27
-     inkscape:window-width="1920"
28
-     inkscape:window-height="1080"
27
+     inkscape:window-width="796"
28
+     inkscape:window-height="865"
29 29
      id="namedview7675"
30 30
      showgrid="false"
31 31
      inkscape:zoom="1.84375"
32
-     inkscape:cx="135.47277"
33
-     inkscape:cy="264.17046"
34
-     inkscape:window-x="0"
35
-     inkscape:window-y="0"
32
+     inkscape:cx="223.33718"
33
+     inkscape:cy="220.78063"
34
+     inkscape:window-x="800"
35
+     inkscape:window-y="33"
36 36
      inkscape:window-maximized="0"
37 37
      inkscape:current-layer="svg2" />
38 38
   <defs
@@ -145,5 +145,5 @@
145 145
        x="131.04883"
146 146
        y="309.54004"
147 147
        id="tspan7099"
148
-       style="font-size:150px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;fill:#ffffff;font-family:Open Sans;-inkscape-font-specification:Open Sans">DIY</tspan></text>
148
+       style="font-size:150px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;fill:#ffffff;font-family:sans-serif;-inkscape-font-specification:sans-serif">DIY</tspan></text>
149 149
 </svg>

+ 12
- 12
img/programming.svg View File

@@ -13,7 +13,7 @@
13 13
    width="512"
14 14
    height="512"
15 15
    id="svg2"
16
-   inkscape:version="0.48.5 r10040"
16
+   inkscape:version="0.91 r13725"
17 17
    sodipodi:docname="programming.svg">
18 18
   <sodipodi:namedview
19 19
      pagecolor="#ff00ff"
@@ -24,15 +24,15 @@
24 24
      guidetolerance="10"
25 25
      inkscape:pageopacity="1"
26 26
      inkscape:pageshadow="2"
27
-     inkscape:window-width="1916"
28
-     inkscape:window-height="1041"
27
+     inkscape:window-width="529"
28
+     inkscape:window-height="865"
29 29
      id="namedview7468"
30 30
      showgrid="false"
31
-     inkscape:zoom="1.3037281"
32
-     inkscape:cx="23.571965"
33
-     inkscape:cy="341.04106"
34
-     inkscape:window-x="0"
35
-     inkscape:window-y="37"
31
+     inkscape:zoom="0.65186405"
32
+     inkscape:cx="265.75167"
33
+     inkscape:cy="324.42625"
34
+     inkscape:window-x="1067"
35
+     inkscape:window-y="33"
36 36
      inkscape:window-maximized="0"
37 37
      inkscape:current-layer="svg2" />
38 38
   <defs
@@ -60,7 +60,7 @@
60 60
         <dc:format>image/svg+xml</dc:format>
61 61
         <dc:type
62 62
            rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
63
-        <dc:title></dc:title>
63
+        <dc:title />
64 64
       </cc:Work>
65 65
     </rdf:RDF>
66 66
   </metadata>
@@ -130,14 +130,14 @@
130 130
      style="fill:#ffffff" />
131 131
   <text
132 132
      xml:space="preserve"
133
-     style="font-size:200px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Open Sans;-inkscape-font-specification:Open Sans"
134
-     x="104.97461"
133
+     style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:200px;line-height:125%;font-family:'Open Sans';-inkscape-font-specification:'Open Sans';letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none"
134
+     x="50.974609"
135 135
      y="327.38672"
136 136
      id="text7677"
137 137
      sodipodi:linespacing="125%"><tspan
138 138
        sodipodi:role="line"
139 139
        id="tspan7679"
140
-       x="104.97461"
140
+       x="50.974609"
141 141
        y="327.38672"
142 142
        style="font-size:200px;fill:#ffffff">&lt;/&gt;</tspan></text>
143 143
 </svg>

+ 51
- 50
index.html View File

@@ -5,7 +5,8 @@
5 5
     <title></title>
6 6
     <link href="css/normalize.css" media="screen" rel="stylesheet" type="text/css" />
7 7
     <link href="css/hint.min.css" media="screen" rel="stylesheet" type="text/css" />
8
-    <link href="css/design.css" media="all" rel="stylesheet" type="text/css" />
8
+    <link href="css/design.css" media="screen" rel="stylesheet" type="text/css" />
9
+    <link href="css/print.css" media="print" rel="stylesheet" type="text/css" />
9 10
     <meta name="viewport" content="width=device-width, initial-scale=1">
10 11
 </head>
11 12
 <body>
@@ -90,7 +91,7 @@
90 91
                     <h2><a href="#findme">Find me on</a></h2>
91 92
 
92 93
                     <p>
93
-                        <a href="mailto:lucas+homepage@verney.lv" title="Email"><img class="icon" src="img/email.svg" alt="Email" /></a>
94
+                        <a href="mailto:vl.yenrev@egapemoh+sacul" title="Email"><img class="icon" src="img/email.svg" alt="Email" /></a>
94 95
                         <a href="http://phyks.me" title="WWW"><img class="icon" src="img/www.svg" alt="WWW" /></a>
95 96
                         <a href="http://github.com/phyks/" title="Github"><img class="icon" src="img/github.svg" alt="Github" /></a>
96 97
                     </p>
@@ -109,28 +110,34 @@
109 110
             </nav>
110 111
         </section>
111 112
 
112
-        <section id="skills" class="full skills">
113
-            <h2><img class="icon" src="img/skills.svg" alt="Skills" /> Skills</h2>
113
+        <section id="education" class="education full">
114
+            <h2><img class="icon" src="img/education.svg" alt="Education" /> Education</h2>
114 115
             <div class="content">
115
-                <div>
116
-                    <h3><img src="img/physics.svg">&nbsp;Physics</h3>
117
-                    <p class="right details">Quantum mechanics, Optics, Computational physics</p>
116
+                <dl>
117
+                    <dt>2014-(2015)</dt>
118
+                    <dd>B.Sc. in Computer Science. <em>École normale supérieure (Paris)</em>.</dd>
119
+                    <dd>Algorithms, digital systems, compilation, formal languages, calculability.</dd>
118 120
 
119
-                    <h3><img src="img/laptop.svg">&nbsp;Computer Science</h3>
120
-                    <p class="right details">Compilation, Algorithms, Robotics, Formal languages</p>
121
-                    <p class="right details">Systems and networks, Scientific computation</p>
121
+                    <dt>2014-(2016)</dt>
122
+                    <dd>M.Sc. in Physics. <em>École normale supérieure (Paris)</em>. ENS-<abbr title="International Center for Fundamental Physics">ICFP</abbr> Master “Fundamental Concepts of Physics” obtained with honours.</dd>
123
+                    <dd>Quantum mechanics, computational physics, statistical field theory, general relativity.</dd>
122 124
 
123
-                    <h3><img src="img/code.svg">&nbsp;Programming</h3>
124
-                    <p class="right details">Python, OCaml, Web (HTML / CSS / PHP / JS), C, C++</p>
125
-                    <p class="right details">Linux</p>
125
+                    <dt>2012-2013</dt>
126
+                    <dd>B.Sc. in Physics. <em>École normale supérieure (Paris)</em>.</dd>
127
+                    <dd>Quantum mechanics, optics, statistical physics, experimental physics, relativity, hydrodynamics.</dd>
126 128
 
127
-                    <h3><img src="img/languages.svg">&nbsp;Languages</h3>
128
-                    <p class="right details">French (native), English (fluent), Spanish (B1 European level)</p>
129
-                </div>
129
+                    <dt>2010-2012</dt>
130
+                    <dd><em><abbr title="Classes Préparatoires aux Grandes Écoles">CPGE</abbr></em>, <em>Lycée Sainte-Geneviève</em>.</dd>
131
+                    <dd>Mathematics, Physics, Chemistry.</dd>
132
+
133
+                    <dt>July 2010</dt>
134
+                    <dd><em class="hint hint--bottom hint--bounce hint--info" data-hint="French secondary school diploma">Baccalauréat</em>, <em>Clermont-Ferrand</em>.</dd>
135
+                    <dd>Science major, option mathematics, obtained with first class honours.</dd>
136
+                </dl>
130 137
             </div>
131 138
 
132 139
             <nav>
133
-                <p><a href="#work">➡</a></p>
140
+                <p><a href="#experience">➡</a></p>
134 141
             </nav>
135 142
         </section>
136 143
 
@@ -165,6 +172,31 @@
165 172
             </nav>
166 173
         </section>
167 174
 
175
+        <section id="skills" class="full skills">
176
+            <h2><img class="icon" src="img/skills.svg" alt="Skills" /> Skills</h2>
177
+            <div class="content">
178
+                <div>
179
+                    <h3><img src="img/physics.svg">&nbsp;Physics</h3>
180
+                    <p class="right details">Quantum mechanics, Optics, Computational physics</p>
181
+
182
+                    <h3><img src="img/laptop.svg">&nbsp;Computer Science</h3>
183
+                    <p class="right details">Compilation, Algorithms, Robotics, Formal languages</p>
184
+                    <p class="right details">Systems and networks, Scientific computation</p>
185
+
186
+                    <h3><img src="img/code.svg">&nbsp;Programming</h3>
187
+                    <p class="right details">Python, OCaml, Web (HTML / CSS / PHP / JS), C, C++</p>
188
+                    <p class="right details">Linux</p>
189
+
190
+                    <h3><img src="img/languages.svg">&nbsp;Languages</h3>
191
+                    <p class="right details">French (native), English (fluent), Spanish (B1 European level)</p>
192
+                </div>
193
+            </div>
194
+
195
+            <nav>
196
+                <p><a href="#work">➡</a></p>
197
+            </nav>
198
+        </section>
199
+
168 200
         <section id="experience" class="experience full">
169 201
             <h2><img class="icon" src="img/experience.svg" alt="Experience" /> Experience</h2>
170 202
             <div class="content">
@@ -191,37 +223,6 @@
191 223
             </nav>
192 224
         </section>
193 225
 
194
-        <section id="education" class="education full">
195
-            <h2><img class="icon" src="img/education.svg" alt="Education" /> Education</h2>
196
-            <div class="content">
197
-                <dl>
198
-                    <dt>2014-(2015)</dt>
199
-                    <dd>B.Sc. in Computer Science. <em>École normale supérieure (Paris)</em>.</dd>
200
-                    <dd>Algorithms, digital systems, compilation, formal languages, calculability.</dd>
201
-
202
-                    <dt>2014-(2016)</dt>
203
-                    <dd>M.Sc. in Physics. <em>École normale supérieure (Paris)</em>. ENS-<abbr title="International Center for Fundamental Physics">ICFP</abbr> Master “Fundamental Concepts of Physics” obtained with honours.</dd>
204
-                    <dd>Quantum mechanics, computational physics, statistical field theory, general relativity.</dd>
205
-
206
-                    <dt>2012-2013</dt>
207
-                    <dd>B.Sc. in Physics. <em>École normale supérieure (Paris)</em>.</dd>
208
-                    <dd>Quantum mechanics, optics, statistical physics, experimental physics, relativity, hydrodynamics.</dd>
209
-
210
-                    <dt>2010-2012</dt>
211
-                    <dd><em><abbr title="Classes Préparatoires aux Grandes Écoles">CPGE</abbr></em>, <em>Lycée Sainte-Geneviève</em>.</dd>
212
-                    <dd>Mathematics, Physics, Chemistry.</dd>
213
-
214
-                    <dt>July 2010</dt>
215
-                    <dd><em class="hint hint--bottom hint--bounce hint--info" data-hint="French secondary school diploma">Baccalauréat</em>, <em>Clermont-Ferrand</em>.</dd>
216
-                    <dd>Science major, option mathematics, obtained with first class honours.</dd>
217
-                </dl>
218
-            </div>
219
-
220
-            <nav>
221
-                <p><a href="#experience">➡</a></p>
222
-            </nav>
223
-        </section>
224
-
225 226
         <section id="hobbies" class="hobbies full">
226 227
             <h2><img class="icon" src="img/hobbies.svg" alt="Hobbies" /> Hobbies</h2>
227 228
             <div class="content">
@@ -251,14 +252,14 @@
251 252
             <div class="content">
252 253
                 <p><a href="http://github.com/phyks/" title="Github"><img class="icon" src="img/github.svg" alt="Github" /></a> <a href="http://github.com/phyks/">Github</a></p>
253 254
                 <p><a href="http://phyks.me" title="WWW"><img class="icon" src="img/www.svg" alt="WWW" /></a> <a href="http://phyks.me">http://phyks.me</a></p>
254
-                <p><a href="mailto:lucas+homepage@verney.lv" title="Email"><img class="icon" src="img/email.svg" alt="Email" /></a> <a href="mailto:lucas+homepage@verney.lv">lucas+homepage@verney.lv</a></p>
255
+                <p><a href="mailto:vl.yenrev@egapemoh+sacul" title="Email"><img class="icon" src="img/email.svg" alt="Email" /></a> <a href="mailto:vl.yenrev@egapemoh+sacul"><span class="changeDirection">vl.yenrev@egapemoh+sacul</span></a></p>
255 256
             </div>
256 257
         </section>
257 258
 
258 259
         <section id="contact" class="contact full">
259 260
             <div class="content">
260 261
                 <h2>Feel free to contact me for any further info…</h2>
261
-                <p><a href="mailto:lucas+homepage@verney.lv">lucas+homepage@verney.lv</a></p>
262
+                <p><a href="mailto:vl.yenrev@egapemoh+sacul"><span class="changeDirection">vl.yenrev@egapemoh+sacul</span></a></p>
262 263
             </div>
263 264
         </section>
264 265
     </main>

+ 28
- 6
js/main.js View File

@@ -28,6 +28,20 @@ var dest_y = Math.floor(window.scrollY / y);
28 28
 function setNextPosition(left, top) {
29 29
     window.dest_x += left;
30 30
     window.dest_y += top;
31
+
32
+    if (window.dest_y > 2) {
33
+        window.dest_y = 2;
34
+    }
35
+    else if (window.dest_y < 0) {
36
+        window.dest_y = 0;
37
+    }
38
+
39
+    if (window.dest_x > 2) {
40
+        window.dest_x = 2;
41
+    }
42
+    else if (window.dest_x < 0) {
43
+        window.dest_x = 0;
44
+    }
31 45
 }
32 46
 document.onkeydown = function (ev) {
33 47
     if (ev.keyCode == '38') {  // up arrow
@@ -101,12 +115,6 @@ window.onresize = function() {
101 115
     scrollToId(window.location.hash.substring(1), 1000);
102 116
 };
103 117
 
104
-window.onwheel = function(e) {
105
-    if (window.x > 900 && window.y > 850) {
106
-        return false;
107
-    }
108
-};
109
-
110 118
 
111 119
 var abbrs = document.getElementsByTagName('abbr');
112 120
 [].forEach.call(abbrs, function (el) {
@@ -119,3 +127,17 @@ var abbrs = document.getElementsByTagName('abbr');
119 127
 document.querySelector('#modal .modal-close').onclick = function () {
120 128
     hideModalBox();
121 129
 };
130
+
131
+
132
+// Email address obfuscation
133
+var emails = document.querySelectorAll("a[href^='mailto:']");
134
+[].forEach.call(emails, function (el)
135
+{
136
+    var address = el.getAttribute("href").replace("mailto:", "").split('').reverse().join('');
137
+    el.setAttribute("href", "mailto:" + address);
138
+    var span = el.querySelector("span.changeDirection");
139
+    if (span != null) {
140
+        el.text = address;
141
+        span.setAttribute("class", "");
142
+    }
143
+});