close enough for government work

elin001 · Oct 2, 2024 · f8dadd6 · f8dadd6
1 parent 806aa92
commit f8dadd6
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 13 deletions.
diff --git a/index.html b/index.html
@@ -26,14 +26,36 @@ <h3 style="font-style: italic">Visual journalist</h3>
 
         <div class="portfolio">
         <h2>Portfolio</h2>
+        <div class="byline">
+            <div class="img-wrapper">
+                <video autoplay muted loop id="autoplayGif" src="media/Hero (opacity)-15fps copy.mp4" width="375px" height="auto" alt="An animation of several blue and red 'I voted' stickers that gradually fade in.">
+            </div>
+            <div class="hedder">
+                <h2 class="hed"><a class="hedlink" href="https://www.startribune.com/minnesota-2024-voters-guide-whos-running-where-they-stand-on-the-issues/601147912/">Minnesota 2024 voter guide: Who’s running, where they stand on the issues</a></h2>
+                <h3 class="outlet">The Minnesota Star Tribune</h3>
+                <p class="tools">🔧: Svelte, Tailwind, AfterEffects</p>
+            </div>
+        </div>
+        <br>
+        <div class="byline">
+            <div class="img-wrapper">
+                <img id="autoplayGif" src="media/mauer.png" alt="A screenshot of a baseball spray chart that plotted every hit off of Joe Mauer's bat.">
+            </div>
+            <div class="hedder">
+                <h2 class="hed"><a class="hedlink" href="https://www2.startribune.com/quite-the-spread-we-plotted-every-hit-joe-mauer-ever-made-in-his-career/600381380/">We plotted every hit Joe Mauer collected in his 15-year career</a></h2>
+                <h3 class="outlet">The Minnesota Star Tribune</h3>
+                <p class="tools">🔧: Rstudio, Datawrapper, Illustrator. Designed the web story and print graphics!</p>
+            </div>
+        </div>
+        <br>
             <div class="byline">
                 <div class="img-wrapper">
                     <img id="autoplayGif" src="media/migrants-journey-scroller.gif" alt="An animated look at the 3D terrain of Caparguná, Colombia. Caparguná is a port city near an entrance to the Darién Gap.">
                 </div>
                 <div class="hedder">
                     <h2 class="hed"><a class="hedlink" href="https://www.sacbee.com/news/equity-lab/article276713191.ece">How this migrant traveled thousands of miles to Sacramento</a></h2>
                     <h3 class="outlet">Sacramento Bee</h3>
-                    <p class="tools">🔧: Google Earth Studio, After Effects, Scrollytelling</p>
+                    <p class="tools">🔧: Google Earth Studio, After Effects, JS/Scrollama</p>
                 </div>
             </div>
             <br>

diff --git a/media/Hero (opacity)-15fps copy.mp4 b/media/Hero (opacity)-15fps copy.mp4
diff --git a/media/mauer.png b/media/mauer.png
diff --git a/resume.html b/resume.html
@@ -11,6 +11,7 @@
 </head>
 <body>
     <h1>Resume</h1>
+    <a href="https://ellie-lin.com/index.html">Back to main page</a>
 <!-- <div class="hamburger-menu">
     <input type="checkbox" id="op" />
     <div class="lower">

diff --git a/style.css b/style.css
@@ -4,13 +4,13 @@ main {
 }
 
 body {
-background-color: #f5f5f5;
-margin: 50px;
-padding: 0;
-display: flex;
-flex-direction: column;
-flex-wrap: nowrap;
-font-family: 'DM Sans', sans-serif, Arial, Helvetica, sans-serif
+  background-color: #f5f5f5;
+  margin: 50px;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  font-family: 'DM Sans', sans-serif, Arial, Helvetica, sans-serif
 }
 
 h1 {
@@ -26,9 +26,10 @@ h2 {
 
 h3 {
     font-family: 'DM Sans', sans-serif, Arial, Helvetica, sans-serif;
-    font-weight: 100;
+    font-weight: 200;
     font-size: 2rem;
     margin: 0px;
+    font-style: italic;
 }
 
 p {
@@ -211,6 +212,7 @@ input:checked ~ span:nth-last-child(2) {
     display: flex;
     flex-direction: column;
     flex-wrap: wrap;
+    width: 700px
   }
 
   .resume {
@@ -245,10 +247,6 @@ input:checked ~ span:nth-last-child(2) {
     font-size: 1em;
   }
 
-  .tools {
-    font-style: italic;
-  }
-
   img {
     width: 100%;
   }
@@ -262,6 +260,12 @@ input:checked ~ span:nth-last-child(2) {
     cursor: pointer;
   }
 
+  video {
+    max-width: 375px;
+    padding-right: 1rem;
+    cursor: pointer;
+  }
+
   .hedlink {
     color: black;
     text-decoration: none;