wip

index.html

@@ -6,6 +6,7 @@
 <meta name="description" content="CV">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Curriculum Vitæ</title>
+<link rel="stylesheet" href="styles/reset.css">
 <link rel="stylesheet" href="styles/light.css">
 
 </head>
@@ -14,12 +15,48 @@
 <header>
 </header>
 
-<main>
+<!-- columns / start -->
-</main>
+<div class="columns">
 
 <aside>
+
+<img class="photo" src="" alt="Me in front">
+
+<p>Marc Beninca</p>
+
+<section>Contact
+<table>
+<tr>
+<td>E-mail</td>
+<td>cv<img class="inline" src="images/at.svg" alt="at">marc.beninca.link</td>
+</tr>
+<tr>
+<td>Mobile</td>
+<td>+33 6 07 47 84 34</td>
+</tr>
+</table>
+</section>
+
+<ul>
+<li><a href="https://linkedin.com/in/marc-beninca">Forge</a></li>
+<li><a href="https://forge.rwx.work">Forge</a></li>
+</ul>
+
 </aside>
 
+<main>
+
+<section>Experience
+</section>
+
+<section>Education
+</section>
+
+</main>
+
+<!-- columns / end -->
+</div>
+
 <footer>
 </footer>
 

styles/light.css

@@ -2,25 +2,26 @@ html {
     font-family: DejaVu Sans Mono, monospace;
 }
 
+img.inline {
+    block-size: 1.5em;
+    vertical-align: middle;
+}
+
 .columns {
     display: grid;
     grid-template-columns: 1fr;
 }
 
 @media (width > 80ch) {
-    .columns {
+    .columns { grid-template-columns: 2fr 1fr; }
-        grid-template-columns: 1fr 2fr;
+    aside { order: 2; }
-    }
+    main { order: 1; }
 }
 
 @media print {
-    @page {
+    @page { size: A4; }
-        size: A4;
+    html { font-size: 4mm; }
-    }
+    .columns { grid-template-columns: 2fr 1fr; }
-    html {
+    aside { order: 2; }
-        font-size: 4mm;
+    main { order: 1; }
-    }
-    .columns {
-        grid-template-columns: 1fr 2fr;
-    }
 }