updated resume

iguannalin · Aug 28, 2024 · 157fa6b · 157fa6b
1 parent 8ce3ef2
commit 157fa6b
Showing 6 changed files with 71 additions and 47 deletions.
diff --git a/index.css b/index.css
@@ -1,6 +1,6 @@
 @import url(background.css) (min-width: 0px);
 @import url(small.css) (min-width: 0px);
-@import url(large.css) (min-width: 900px);
+@import url(large.css) (min-width: 800px);
 
 :root {
   --default-bg: #fdfaf6;
@@ -12,6 +12,7 @@
   --default-clip-path: circle(44% at 49% 56%);
   --default-wallpaper-width: 100%;
   --default-dot: green;
+  --default-link: rgb(0, 0, 255);
 }
 
 .theme {
@@ -23,8 +24,8 @@
   .theme {
     --default-bg: rgb(35, 35, 35);
     --default-text: rgb(89 255 66);
-    --default-border: blue;
-    --default-dot: #ff5722;;
+    --default-border: rgb(0, 0, 255);
+    --default-link: #fff;
   }
   #wallpaper {
     --default-wallpaper: url(public/wallpaper_dark.png);
@@ -46,6 +47,15 @@ body {
   text-shadow: #acb5bd 1px 1px 6px;
 }
 
+h1, h2, h3, h4, h5, h6 {
+  text-align: left;
+}
+
+.aria-hidden {
+  position: absolute;
+  visibility: hidden;
+}
+
 #container {
   height: 100vh;
   width: 100vw;
@@ -116,8 +126,9 @@ span > p {
   flex-flow: column wrap;
 }
 
-a {
-  text-shadow: 1px 0px 1px #4CAF50;
+a, a:visited, a:active {
+  color: var(--default-link);
+  text-shadow: 1px 1px 6px #00985c;
 }
 
 .film-button {

diff --git a/index.html b/index.html
@@ -10,14 +10,14 @@
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <meta name="robots" content="index,follow">
         <meta name="author" content="anna y lin">
-        <meta name="description" content="the website of anna y lin. anna is a creative technologist currently pursuing a masters at NYU ITP. this is a work in progress">
+        <meta name="description" content="the website of anna y lin. anna is a cantonese american creative technology enthusiast currently based in brooklyn. this is a work in progress">
         <meta name="twitter:card" content="summary_large_image">
         <meta name="twitter:title" content="anna y lin">
-        <meta name="twitter:description" content="the website of anna y lin. anna is a creative technologist currently pursuing a masters at NYU ITP. this is a work in progress">
+        <meta name="twitter:description" content="the website of anna y lin. anna is a cantonese american creative technology enthusiast currently based in brooklyn. this is a work in progress">
         <meta name="twitter:image" content="annaylin.com/public/wallpaper.png">
         <meta property="og:locale" content="en_US">
         <meta property="og:title" content="anna y lin">
-        <meta property="og:description" content="the website of anna y lin. anna is a creative technologist currently pursuing a masters at NYU ITP. this is a work in progress">
+        <meta property="og:description" content="the website of anna y lin. anna is a cantonese american creative technology enthusiast currently based in brooklyn. this is a work in progress">
         <meta property="og:url" content="annaylin.com">
         <meta property="og:image" content="annaylin.com/public/wallpaper.png">
         <meta property="og:type" content="website">
@@ -27,7 +27,7 @@
 </head>
     <body>
         <div class="theme" id="container">
-            <div id="main">
+            <div id="main" role="main">
                 <div id="top">
                     <h1>anna y lin</h1>
                     <label for="select">select the page you would like to visit:</label>
@@ -42,9 +42,10 @@ <h1>anna y lin</h1>
                     </select>
                 </div>
                 <div id="left">
+                    <h1 class="aria-hidden">anna y lin</h1>
                     <table>
                         <thead>
-                            <tr><th>projects</th></tr>
+                            <tr><th><h2>projects</h2></th></tr>
                         </thead>
                         <tbody id="projects-table">
                             <tr>
@@ -56,14 +57,14 @@ <h1>anna y lin</h1>
                             <tr><td>⇱ <a href="https://taper.badquar.to/11/diaspora_radicals.html">diaspora radicals, Taper #11</a></td></tr>
                             <tr><td>⇱ <a href="https://www.instagram.com/badwatercolor/">badwatercolor</a></td></tr>
                             <tr><td>⇱ <a href="https://codepen.io/annamakestuff/">creative coding</a></td></tr>
-                            <tr><td>workshop</td></tr>
+                            <tr><td><h3>workshop</h2></td></tr>
                             <tr>
                                 <td>⇱ <a title="external link to hacking with the browser workshop on notion" target="_blank" href="https://annaylin.notion.site/April-4th-Hacking-with-the-Browser-Workshop-a89fc8556f3a43d4acd27af132b8c8a8?pvs=4">hacking with the browser</a></td>
                             </tr>
                         </tbody>
                     </table>
                     <div style="line-height: 16px;">
-                        <h4>about this website</h3>
+                        <h4>about this website</h4>
                         <p>the last time i completely changed my website was in 2018.</p>
                         <p>websites are always a work in progress; this change has been due for a long time--when my old website no longer reflected my thoughts and aesthetic as a person who both continues to work in, and have a love-hate relationship with technology.</p>
                         <p>if the old website described me as a person, it would paint this picture: someone getting into complex javascript libraries, server-side bundling, and a bit of a code-hoarder for fear of needing it later in the future.</p>
@@ -433,17 +434,18 @@ <h2 class="heading">East Coast</h2>
                 <div id="right">
                     <table>
                         <thead>
-                            <tr><th>about</th></tr>
+                            <tr><th><h2>about</h2></th></tr>
                         </thead>
                         <tbody>
-                            <tr><td>hiya, i'm anna (she/her)--a creative technologist and fullstack developer, making interfaces in both the physical and the digital world.
-                                currently, i'm exploring yarn in the <a href="https://tisch.nyu.edu/itp/ITPFAQ">NYU ITP</a> masters program.</td></tr>
-                            <!-- <tr><td>i love many things, and they have always led me to good places. my first loves are art & psychology, which led me to a love of computer science.</td></tr> -->
+                            <tr><td>hiya, i'm anna (she/her)--a cantonese american creative technology enthusiast + fullstack developer, making interfaces in both the physical and the digital world.
+                            <br/>currently based in brooklyn.
+                            <br/>this is a work in progress
+                            </td></tr>
+                            <tr><td>most recently, i was <a href="https://vimeo.com/949955128#t=10s">exploring yarn as a speculative redesign of computer networks</a> for my masters thesis at <a href="https://tisch.nyu.edu/itp/ITPFAQ">ITP</a></td></tr>.
                             <tr><td>previously, i built interfaces to help people access data at <a href="https://www.mitre.org/">MITRE</a> and <a href="https://www.schwab.com/">Schwab</a> as a fullstack UX engineer in the realms of cybersecurity, policy, finance, and briefly in data-vis with the wonderful people at <a href="https://stamen.com/">Stamen Design</a></td></tr>
                             <tr><td>this winter, i finished: <a href="https://annaylin.com/100-days">100 days of websites</a></td></tr>
-                            <tr><td>besides making things on the internet i also like to make things with my hands and <a href="https://www.are.na/anna-y-lin">read</a></td></tr>
+                            <tr><td>besides making things on the internet i also like to <a href="https://www.instagram.com/iguannalin/">make things with my hands</a> and <a href="https://www.are.na/anna-y-lin">read</a></td></tr>
                             <tr><td><a href="mailto:anna@annaylin.com?subject=there's%20a%20pizza%20party%20in%20rm%20370" target="_top">say hi</a></td></tr>
-                            <!-- <tr><td>you can find my <a href="public/resume.pdf">resume here</a></td></tr> -->
                             <tr><td>you can find a <a id="oops" href="#">photo of me here</a></td></tr>
                             <tr><td><a href="https://github.com/iguannalin">github</a>, <a href="https://www.instagram.com/iguannalin/reels/">instagram</a>, <a href="https://twitter.com/iguannalin">twitter</a></td></tr>
                         </tbody>

diff --git a/index.js b/index.js
@@ -12,8 +12,8 @@ window.addEventListener("load", () => {
   let previousElement = center;
   let previousElementSub = greeting;
 
-  const codeProjects = ["handhold mouse", "eeg cloud", "ai loves horror", "text me smth nice"];
-  const printProjects = ["tableware", "filmotography", "reveries"]; // "generative riso poster"
+  const physicalProjects = ["handhold mouse", "eeg cloud", "ai loves horror", "text me smth nice"];
+  const analogProjects = ["tableware", "filmotography", "reveries"]; // "generative riso poster"
 
   const titles = ["yosemite", "alaska", "eastcoast", "tableware", "reveries"];
   function switchFilmView(e = {target:{title:""}}) {
@@ -78,8 +78,10 @@ window.addEventListener("load", () => {
 
   function loadProjects(projects, label) {
     const ptr = document.createElement('tr');
-    const th = document.createElement('td');
-    th.innerText = label;
+    const th = document.createElement('th');
+    const th3 = document.createElement('h3');
+    th3.innerText = label;
+    th.appendChild(th3);
     ptr.appendChild(th);
     table.appendChild(ptr);
     projects.forEach((p) => {
@@ -133,8 +135,9 @@ window.addEventListener("load", () => {
     }, 350);
   }
 
-  loadProjects(codeProjects, "code");
-  loadProjects(printProjects, "print");
+  loadProjects(physicalProjects, "physical");
+  loadProjects(analogProjects, "analog");
+  loadProjects([], "digital");
 
   select.onchange = (e) => onSelect(e);
   oopsies.onclick = (ev) => oops(ev);

diff --git a/public/resume.pdf b/public/resume.pdf
diff --git a/public/resume/index.css b/public/resume/index.css
@@ -29,7 +29,7 @@ html {
     font-style: italic;
   }
   td * {
-    max-width: 45ch;
+    max-width: 50ch;
   }
 }
 
@@ -38,7 +38,7 @@ html {
     font-size: 14px;
   }
   td * {
-    max-width: 60ch;
+    max-width: 70ch;
   }
 }
 
@@ -47,7 +47,7 @@ html {
     font-size: 16px;
   }
   td * {
-    max-width: 50ch;
+    max-width: 60ch;
   }
 }
 
@@ -77,11 +77,18 @@ td {
   padding: 0.75em;
   display: flex;
   flex-flow: column;
-  flex: 1;
   overflow-y: scroll;
   padding: 1.5em 1em;
 }
 
+#left {
+  flex: 1;
+}
+
+#right {
+  flex: 1.25;
+}
+
 h1 {
   font-size: 2em;
   margin: 0em 0 0.25em;
@@ -122,7 +129,7 @@ h3 {
 h4 {
   font-size: 1em;
   margin: 1em 0 0.25em;
-  text-shadow: black 0px 0px 0px;
+  text-shadow: #00000087 0px 0px 0.5px;
   text-transform: initial;
 }
 

diff --git a/public/resume/index.html b/public/resume/index.html
@@ -9,7 +9,7 @@
     <body>
         <table>
           <tr>
-            <td colspan="1" rowspan="1">
+            <td colspan="1" rowspan="1" id="left">
               <div class="header">
                 <h1>anna y lin</h1>
                 <p><a href="https://annaylin.com">annaylin.com</a></p>
@@ -18,10 +18,8 @@ <h1>anna y lin</h1>
               </div>
 
               <h2>Education</h2>
-              <h3>2022 - 2024</h3>
               <h4>M.P.S. | <span class="location"> Interactive Telecommunications Program, NYU Tisch</span></h4>
               <p class="indent">Activities: Lead Coding Lab Mentor, Graduate Assistant, ITP Fall & Spring Showcase</p>
-              <h3>2013 - 2017</h3>
               <h4>B.A. Psychology | <span class="location"> University of California, Santa Cruz</span></h4>
               <p class="indent">Awards: Dean's Honor</p>
               <p class="indent">Activities: Psychology Teaching Assistant, Girls in Engineering Summer Camp Teacher</p>
@@ -39,36 +37,39 @@ <h3>Languages</h3>
               <p class="tags">Cantonese & Mandarin</p>
 
             </td>
-            <td colspan="1" rowspan="1">
+            <td colspan="1" rowspan="1" id="right">
+
               <h2>Work</h2>
-              <!-- <h3>2022 - 2024</h3> -->
+              <h3>projects</h3>
+              <h4>2024 – building the digital experience for the <a href="https://healingjusticelineages.com/">Healing Justice Lineages Website</a> | <a href="https://www.instagram.com/hjlineages">HJL</a>, Brooklyn (remote)</h4>
+              <p class="tags">Wordpress, PHP, Javascript, HTML, CSS</p>
+
+              <h4>2018 – built a website in react for <a href="https://iguannalin.github.io/private-work/#superdiversity">Superdiversity</a> | <a href="https://stamen.com/">Stamen Design</a>, San Francisco</h4>
+              <p class="tags">HTML, CSS, Javascript, React, D3.js</p>
+
+              <h4>2017 – built a LMS for <a href="https://iguannalin.github.io/private-work/#pwu">legal workers</a> | <a href="https://www.pacificworkers.com/">Farber & Co.</a>, Oakland</h4>
+              <p class="tags">Wordpress, Javascript, HTML, CSS, PHP</p>
+
+
+              <h3>2022 - 2024</h3>
               <h4>Lead Code Mentor | <span class="location"> <a href="https://codinglab.itp.io/">The Coding Lab</a>, Brooklyn</span></h4>
               <p class="indent">Organized and hosted 4 artist talks; invited professionals from the creative coding community to engage the student community with their work.</p>
-              <p class="indent">Led and designed the curriculum for the <a href="https://annaylin.notion.site/April-4th-Hacking-with-the-Browser-Workshop-a89fc8556f3a43d4acd27af132b8c8a8?pvs=4">Hacking with the Browser</a> workshop every semester, introducing undergraduate and graduate students to APIs, how to use them, and how to hack websites using the browser developer tools.</p>
+              <p class="indent">Led and designed the curriculum for the <a href="https://annaylin.notion.site/April-4th-Hacking-with-the-Browser-Workshop-a89fc8556f3a43d4acd27af132b8c8a8?pvs=4">Hacking with the Browser</a> workshop every semester, introducing undergraduate and graduate students to <span style="text-transform: uppercase;">API</span>s, how to use them, and how to hack websites using the browser developer tools.</p>
 
-              <!-- <h3>2021 - 2022</h3> -->
+              <h3>2021 - 2022</h3>
               <h4>UX Engineer | <span class="location"><a href="https://www.mitre.org/">MITRE</a>, Boston</span></h4>
               <p class="tags">HTML, CSS, Typescript, Javascript, Angular, Python, Vue.js, Alpine.js, Tailwind</p>
-              <p class="indent">Worked on 4 projects cross-collaborating with multiple teams, consulting on UX from the design to the development of multiple responsive web applications.</p>
+              <p class="indent">Worked on 4 projects cross-collaborating with multiple teams, consulting on <span style="text-transform: uppercase;">UX</span>—from design to development—for fullstack web applications.</p>
               <p class="indent">Responsible for <a href="https://iguannalin.github.io/private-work/#caldera">frontend architecture design for a new web application working with Python RESTful APIs</a> to be used by cybersecurity professionals and researchers.</p>
               <p class="indent">Built the <a href="https://iguannalin.github.io/private-work/#navigator">dark mode, search, and filter features for the ATT&CK&reg; Navigator</a>, an open-source cybersecurity knowledge database of adversary tactics and techniques.</p>
 
-              <!-- <h3>2018 - 2020</h3> -->
+              <h3>2018 - 2020</h3>
               <h4>Frontend Engineer | <span class="location"><a href="https://www.schwab.com/">Charles Schwab</a> (Digital Accelerator), San Francisco</span></h4>
               <p class="tags">HTML, CSS, Typescript, Javascript, Angular, Node.js, Jasmine</p>
               <p class="indent">Built high-fidelity Angular prototypes for user research tests.</p>
               <p class="indent">Iterated with the design and accessibility teams to build a <a href="https://iguannalin.github.io/private-work/#RMD">WCAG-compatible web application used by 150,000+ clients</a>.</p>
               <p class="indent">Developed features and wrote tests for a robust, <a href="https://iguannalin.github.io/private-work/#inheritance">full-stack web application in Angular</a>.</p>
 
-              <h3>contract projects</h3>
-              <h4><a href="https://healingjusticelineages.com/">Healing Justice Lineages Website</a> | <a href="https://www.instagram.com/hjlineages">HJL</a>, Brooklyn (remote)</h4>
-              <p class="tags">Wordpress, PHP, Javascript, HTML, CSS</p>
-
-              <h4><a href="https://iguannalin.github.io/private-work/#superdiversity">Superdiversity</a> | <a href="https://stamen.com/">Stamen Design</a>, San Francisco</h4>
-              <p class="tags">HTML, CSS, Javascript, React, D3.js</p>
-
-              <h4><a href="https://iguannalin.github.io/private-work/#pwu">Internal LMS</a> | <a href="https://www.pacificworkers.com/">Farber & Co.</a>, Oakland</h4>
-              <p class="tags">Wordpress, Javascript, HTML, CSS, PHP</p>
             </td>
           </tr>
         </table>