-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
105 lines (99 loc) · 6.79 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ellie Lin - Visual Jounalist</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100;0,9..40,200;0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;0,9..40,800;0,9..40,900;0,9..40,1000;1,9..40,100;1,9..40,200;1,9..40,300;1,9..40,400;1,9..40,500;1,9..40,600;1,9..40,700;1,9..40,800;1,9..40,900;1,9..40,1000&display=swap" rel="stylesheet">
<script type="text/javascript" src="script.js" defer></script>
</head>
<body>
<h1>Ellie Lin</h1>
<h3 style="font-style: italic">Visual journalist</h3>
<main id="content">
<div class="about">
<p>
I'm a news designer at The Minnesota Star Tribune. I like breaking down complex concepts into impactful, visual stories for every audience member, and that allows me to work creatively across a variety of mediums. Whether it is designing charts for a data-driven analysis, motion graphics for social video or laying out stories for a print section, it's my mission to make information accessible to those who need it.
</p>
<p>
Off this site, you can check out what I'm up to on <a href="https://www.linkedin.com/in/ellie-d-lin/">Linkedin</a> or <a href="https://twitter.com/ellielin_">Tw*tter</a>. My full resume is <a href="https://ellie-lin.com/resume.html" >here!</a>
</p>
</div>
<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, JS/Scrollama</p>
</div>
</div>
<br>
<div class="byline">
<div class="img-wrapper">
<img id="autoplayGif" src="media/induction2.gif" alt="An animation of a wok on an induction burner. There is a cross section of how an induction cooker works.">
</div>
<div class="hedder">
<h2 class="hed"><a class="hedlink" href="https://www.sacbee.com/news/politics-government/capitol-alert/article277266813.ece">SoCalGas spends millions to fight bans on restaurant gas use</a></h2>
<h3 class="outlet">Sacramento Bee</h3>
<p class="tools">🔧: After Effects</p>
<p>Read about my process for designing and drafting this story <a href="https://rjionline.org/news/wok-and-scroll-the-process-of-designing-an-animated-information-graphic/">here</a>.</p>
</div>
</div>
<br>
<div class="byline">
<div class="img-wrapper">
<img id="autoplayGif" src="media/census.png" alt="An illustration that includes a chloropleth map of California counties and text that reads 'See how Sacramento has changed since the pandemic in 9 charts'">
</div>
<div class="hedder">
<h2 class="hed"><a class="hedlink" href="https://www.sacbee.com/news/california/article276501901.ece">See how Sacramento area has changed since pandemic in 9 charts based on new Census data</a></h2>
<h3 class="outlet">Sacramento Bee</h3>
<p class="tools">🔧: RStudio/tidycensus, Census Bureau API, Datawrapper, Illustrator</p>
<p>Read about how we worked on this story and a code quickstart for people looking to get into RStudio and the Census Bureau's API <a href="https://rjionline.org/news/making-census-data-accessible-for-reporters-with-varying-data-literacy/">here</a>.</p>
</div>
</div>
<br>
<div class="byline">
<div class="img-wrapper">
<img id="autoplayGif" src="media/hate-crime-chart.png">
<!-- <iframe title="Increase in statewide reported hate crimes after 2020" aria-label="Interactive line chart" id="datawrapper-chart-lZ3oI" src="https://datawrapper.dwcdn.net/lZ3oI/6/" width="150px" height="350px" scrolling="no" frameborder="0" style="border: none;" data-external="1"></iframe> -->
</div>
<div class="hedder">
<h2 class="hed"><a class="hedlink" href="https://www.sacbee.com/news/local/article276809221.ece">Anti-LGBTQ crimes nearly doubled in Sacramento area in 2022, state hate crime report says</a></h2>
<h3 class="outlet">Sacramento Bee</h3>
<p class="tools">🔧: RStudio, Datawrapper</p>
</div>
</div>
<br>
</div>
</main>
<script src="script.js"></script>
</body>
</body>
</html>