Update project timeline to include AthenaHacks

milkcee12 · Mar 31, 2024 · 11c084e · 11c084e
1 parent 8a9fb6c
commit 11c084e
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 21 deletions.
diff --git a/src/lib/components/common/Metadata.svelte b/src/lib/components/common/Metadata.svelte
@@ -38,6 +38,13 @@
       p {
         margin: 0;
       }
+
+      a {
+        transition: opacity 0.5s;
+        &:hover {
+          opacity: 0.6;
+        }
+      }
     }
   }
 </style>
diff --git a/src/lib/components/timeline/TimeNode.svelte b/src/lib/components/timeline/TimeNode.svelte
@@ -3,12 +3,13 @@
 
   export let project: any;
   export let numProjects: number;
+  export let i: number;
 
   let isCurrentProject: boolean = project.end_date;
   let hasLink: boolean = project.hasOwnProperty("link");
-  let isReverse: boolean = project.id % 2 == 0;
-  let isFirstChild: boolean = project.id == 1;
-  let isLastChild: boolean = project.id == numProjects;
+  let isReverse: boolean = i % 2 != 0;
+  let isFirstChild: boolean = i == 0;
+  let isLastChild: boolean = i == numProjects-1;
 
   let node: HTMLElement;
   let isNodeVisited: boolean = false;

diff --git a/src/lib/components/timeline/Timeline.svelte b/src/lib/components/timeline/Timeline.svelte
@@ -36,8 +36,8 @@
     </Heading>
   </div>
   <div class="timeline-graph" bind:this={timelineGraph}>
-    {#each data.projects as project}
-      <TimeNode {project} {numProjects}>
+    {#each data.projects as project, i}
+      <TimeNode {project} {numProjects} {i}>
         <!-- TimelineFill only created for first node -->
         <TimelineFill {timelineHeight} />
       </TimeNode>

diff --git a/src/lib/data/yml/projects.yml b/src/lib/data/yml/projects.yml
@@ -1,5 +1,17 @@
 # next_id: 5
 projects:
+  - id: 2
+    title: AthenaHacks 2024
+    start_date: Aug 2023
+    end_date: Mar 2024
+    desc: The 2024 website of SoCal's premier women-centric hackathon. Created from scratch with SvelteKit, TypeScript, and Sass. Prototype designed in Figma.
+    tags:
+      tech:
+        - Front-End
+      art:
+        - UI/UX
+    link: https://athenahacks.github.io/AthenaHacks2024/
+    link_text: View the website.
   - id: 1
     title: Google STEP Internship
     start_date: May 2023
@@ -14,22 +26,23 @@ projects:
         - Back-End
       art:
         - UI/UX
-  - id: 2
-    title: Milkcee Studios
-    start_date: Dec 2022
-    end_date:
-    desc:
-      What you're looking at right now! Started as a winter break project and built
-      up little by little. Created from scratch with SvelteKit, TypeScript, and Sass.
-    tags:
-      tech:
-        - Front-End
-        - Back-End
-      art:
-        - UI/UX
-        - Illustration
-    link: https://github.com/milkcee12/milkcee12.github.io/tree/main
-    link_text: View the Github repo
+
+  # - id: 2
+  #   title: Milkcee Studios
+  #   start_date: Dec 2022
+  #   end_date:
+  #   desc:
+  #     What you're looking at right now! Started as a winter break project and built
+  #     up little by little. Created from scratch with SvelteKit, TypeScript, and Sass.
+  #   tags:
+  #     tech:
+  #       - Front-End
+  #       - Back-End
+  #     art:
+  #       - UI/UX
+  #       - Illustration
+  #   link: https://github.com/milkcee12/milkcee12.github.io/tree/main
+  #   link_text: View the Github repo
   - id: 3
     title: Trojan Dining
     start_date: 2021