IMPL: Website update

src/lib/FadeInBox.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+    import { onMount } from 'svelte';
+    let primid = Date.now() + Math.random().toString(36).substring(2);;
+    export let tailwind = "";
+    export let delay = 0;
+
+    let inView = false;
+
+        
+    // Callback function for the Intersection Observer
+    const handleIntersection = (entries: any) => {
+        entries.forEach((entry : any) => {
+        if (entry.isIntersecting) {
+            // The div is in the viewport. Set inView to true after delay seconds
+            setTimeout(() => {
+                inView = true;
+            }, delay * 1000);
+        } else {
+            // The div is not in the viewport
+            inView = false;
+        }
+        });
+    };
+
+    onMount(() => {
+        let targetDiv = document.querySelector('#card'+primid);
+        // Initialize the Intersection Observer
+        const options = {
+        root: null, // Use the viewport as the root
+        rootMargin: '0px',
+        threshold: 1.0, // Adjust this threshold as needed
+        };
+
+        const observer = new IntersectionObserver(handleIntersection, options);
+
+        // Start observing the target div
+        observer.observe(targetDiv!);
+    });
+
+</script>
+<div class = {tailwind + (inView ? " animate-fade-in-fast" : " animate-fade-out-fast")} id={"card"+primid}>
+    <slot />
+</div>

src/lib/TypingEffect.svelte

@@ -0,0 +1,98 @@
+<script context="module" lang="ts">
+/*
+Author: Mike Zeng
+LICENSE: MIT License - 2024
+===============================================
+Where has this been used?
+
+- Light the World website
+- West Computing Club
+===============================================
+Usage: Copypaste this into lib folder of svelte
+Create a typing element as follows:
+<TypingEffect
+            tailwind="text-lg text-gray-300"
+            style=""
+            text="A club at West High School dedicated to providing learning pathways of CS for students."
+            textAnim="animate-breath"
+            textdelay={150}
+/>
+
+For more examples, visit the West Computing Club pages directory.
+*/
+
+
+export interface TypingEffectProps {
+      text: string;
+      tailwind: string;
+      textAnim: string;
+      textdelay: number;
+      style?: string;
+    }
+  </script>
+
+  <script lang="ts">
+    export let  text: string;
+    export let  tailwind: string;
+    export let  textAnim: string;
+    export let  textdelay: number;
+    export let  style: string;
+
+    import { onMount, onDestroy } from 'svelte';
+    import { createEventDispatcher } from 'svelte';
+    
+    const dispatch = createEventDispatcher();
+    let displayText: string[] = [];
+  
+    let currentIndex = 0;
+    let timer: number;
+  
+    onMount(() => {
+        displayText = [];
+  
+      const typeNextCharacter = () => {
+        let currentString = "";
+  
+        // Append word
+        while (currentIndex < text.length) {
+          currentString += text[currentIndex];
+          if (text[currentIndex] === ' ') {
+            currentIndex++;
+            break;
+          }
+          currentIndex++;
+        }
+  
+        // Add it to array
+        if (currentIndex < text.length) {
+          displayText = [...displayText, currentString];
+          timer = setTimeout(typeNextCharacter, textdelay);
+        } else {
+          displayText = [...displayText, currentString];
+        }
+      };
+  
+      // Delay, then start.
+      timer = setTimeout(typeNextCharacter, 100);
+  
+      return () => {
+        clearTimeout(timer);
+      };
+    });
+  
+    onDestroy(() => {
+      dispatch('done');
+    });
+  </script>
+
+  <div class={tailwind}>
+    {#each displayText as text, index}
+      <span
+        class={textAnim}
+        style={style ? style : undefined}
+      >
+        {text}
+      </span>
+    {/each}
+  </div>
+

src/routes/+layout.svelte

@@ -1,7 +1,20 @@
 <script>
     import "../app.css";
 </script>
-
-<div class="py-8 px-64">
-<slot />
+
+<div class = "flex flex-row">
+    <div class="sidebar bg-purple-300 w-1/4 max-w-[250px] min-h-screen p-5">
+        <h2 class="text-xl font-bold text-white mb-4">Mike Zeng</h2>
+        <ul class="space-y-3">
+            <li><a href="/" class="block text-white text-lg py-2 px-4 rounded hover:bg-purple-400">Home</a></li>
+            <li><a href="/research" class="block text-white text-lg py-2 px-4 rounded hover:bg-purple-400">Research</a></li>
+            <li><a href="/education" class="block text-white text-lg py-2 px-4 rounded hover:bg-purple-400">Education</a></li>
+            <li><a href="/projects" class="block text-white text-lg py-2 px-4 rounded hover:bg-purple-400">Projects</a></li>
+            <li><a href="/contact" class="block text-white text-lg py-2 px-4 rounded hover:bg-purple-400">Contact</a></li>
+        </ul>
+    </div>
+
+    <div class="py-4 px-16 w-3/4">
+    <slot />
+    </div>
 </div>

src/routes/+page.svelte

@@ -1,68 +1,26 @@
 <script lang="ts">
     import { base } from '$app/paths'
+    import FadeInBox from '$lib/FadeInBox.svelte';
+    import TypingEffect from '$lib/TypingEffect.svelte'
 </script>
 
-<div class="border-2 border-green-400 p-4 bg-gray-200">
-    <h2 class="text-xl">Mike Zeng</h2>
-    <h4>[email protected]</h4>
-</div>
-
 <div class="">
-    <h1 class = "text-2xl mt-4">My Interests</h1>
-
-    These are things that I am interested in, and are used as project tags.
-    <h2 class="text-xl text-gray-500 mt-4">CS</h2>    
-    <ul class = "ml-8 mb-2">
-        <li> - Web Applications [Django, FastAPI, Svelte, React]    </li>
-        <li> - Machine Learning [Pytorch, Transformers, TensorFlow] </li>
-        <li> - Game Development [Unreal Engine, Unity, Godot]       </li>
-        <li> - Algorithms       [Python, C++, Rust]                 </li>
-    </ul>
-    My primary focus is Computer Science, though there are many fields of computer science that 
-    I am interested in. Mainly, I am trying to get production-ready projects and a meaningful
-    success statistic. I also focus on competitive programming, mainly USACO, CodeForces, and LeetCode.
-
-    <h2 class="text-xl text-gray-500 mt-4">Statistics</h2>    
-    <ul class = "ml-8 mb-2">
-        <li> - Statistic Software   [Python, R, SAS]    </li>
-    </ul>
-    Statistics is one of my focuses, and its something I have been studying extensively. 
-    There aren't an enourmous a lot of competitions for it, so I mostly study theory and
-    do Kaggle occasionally.
-
-    <h2 class="text-xl text-gray-500 mt-4">Art</h2>
-    <ul class = "ml-8 mb-2">
-        <li> - 3D Modeling      [Blender, Substance Painter]    </li>
-        <li> - Drawing          [PhotoShop, Clip Studio Paint]  </li>
-        <li> - Video Editing    [DaVinci Resolve]               </li>
-    </ul>
-
-    I do art in my free time casually whenever I find time for it, and though my art is no where near
-    production quality, I did start a 180-day journey to improve it a lot. Progress is being made
-    however, that I am sure.
-
-    <h2 class="text-xl text-gray-500 mt-4">Misc</h2>
-    <ul class = "ml-8">
-        <li> - Japanese [~N4]</li>
-        <li> - Writing </li>
-	<li> - MLBB [Mythic Glory]</li>
-    </ul>
-
-    <h1 class = "text-2xl mt-4">Projects</h1>
-    <ul>
-        <li><a class="text-blue-400" href="https://github.com/mzen17/Data-Engine">Data Engine</a> | A highly performant data engine written in Rust and Tauri for processing, filtering, or cleaning of mass amounts of data.</li>
-        <li><a class="text-blue-400" href={base + "/"}>Personal Website </a>| A website built from scratch using SvelteKit with TailwindCSS.</li>
-        <li><a class="text-blue-400" href="https://github.com/mzen17/Page-Processor">Page Processor</a> | Web-based word processor with a very niche use case of editing single-page natured documents, where page matters. </li>
+    <div class = "mb-4">
+    <h1 class = "text-2xl">Hello!</h1>
+    I am Mike Zeng, a senior at Iowa City West High and dual-enrolled computer science at University of Iowa. I have 
+    a strong interest in computer networks and artificial intelligence, and particularly their applications in context
+    of society. In the meantime, I enjoy doing art, particularly 3D art with Blender.
+    </div>
+
+    <div>
+    <h1 class = "text-2xl"> About </h1>
+    I have substantial background in computer science, having taken all required undergraduate CS classes at UIowa. I am currently pursuing computer science 
+    further through graduate classes and independent studies, most which concern to fields of networks 
+    and deep learning.
+
+    In addition, I am a researcher at the University of Iowa Hydroinformatics Laboratory, where I contribute to published/will be published 
+    papers on remote sensing software.
+    </div>
 
-    </ul>
 
-    <h1 class="text-2xl mt-4">Site Links</h1>
-    <ul>
-        <li><a class=" text-blue-400" href={base + "/coursework"}>Coursework</a></li>
-        <li><a class=" text-blue-400" href={base + "/portfolios"}>Portfolios</a></li>
-    </ul>
-    <h1 class = "text-2xl mt-4">Other links</h1>
-    <ul>
-        <li><a class=" text-blue-400" href="https://github.com/mzen17">Github</a>
-    </ul>
 </div>

src/routes/contact/+page.svelte

@@ -0,0 +1 @@
+Send an email to [[email protected]].

src/routes/education/+page.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+    let showcourse = false;
+
+    function togglecourse() {
+        showcourse = !showcourse;
+    }
+</script>
+
+<div class="mb-4">
+<h1 class="text-2xl mb-1">Summary</h1>
+Essentially, I have a BS in computer science at the University of Iowa, having satisfied all of the requirements for
+a computer science major. However, I also am a student at West High School and run several clubs. I participate in academic
+competitions such as USACO and AMCs, as well as having online coursework.
+</div>
+
+<div class="mb-4">
+    <h1 class="text-2xl">Organizations</h1>
+    <h2 class="text-xl">West Computing Club</h2>
+    Our club is dedicated to providing learning pathways to motivated students who have a strong interest in computer science.
+    We typically teach concepts in computer science, ranging from artificial intelligence to operating system concepts. Additionally, we have two branches, 
+    competitive coding (USACO, CodeForces, LeetCode), and Cybersecurity (picoCTF, overthewire, etc).
+</div>
+
+<div class="mb-4">
+    <h1 class="text-2xl">Awards</h1>
+    <ul class="mb-4 text-slate-800">
+        <li>USACO Silver (Top 25% Nation)</li>
+        <li>TSA TEAMS National Qualifier, State Champion</li>
+        <li>Codepath TIP102 Participant</li>
+    </ul>
+</div>
+
+<div>
+<h1 class="text-2xl mb-1">Coursework</h1>
+{#if showcourse}
+<h2 class="text-xl">University of Iowa</h2>
+<ul class="mb-4 text-slate-800">
+    <li>ENGR:1300 Introduction to Computer Engineering</li>
+    <li>CS:2210 Discrete Structures</li>
+    <li>CS:2230 Data Structures</li>
+    <li>CS:2630 Computer Organization</li>
+    <li>CS:2820 Introduction to Software Development</li>
+    <li>CS:3330 Algorithms</li>
+    <li>CS:3620 Operating Systems</li>
+    <li>CS:3640 Computer Networks</li>
+    <li>CS:3820 Programming Language Concepts</li>
+    <li>CS:4330 Theory of Computation</li>
+    <li>CS:5610 High Performance Computing and Architecture (Upcoming)</li>
+    <li>CS:5620 Distributed Systems and Algorithms</li>
+    <li>CS:5820 Software Engineering Languages and Tools</li>
+    <li>CS:5830 Software Engineering Project (Upcoming)</li>
+    <li>CS:5990 Individualized Research/Programming Project (Upcoming)</li>
+    <li>STAT:2010 Statistical Methods and Computing</li>
+    <li>STAT:3200 Linear Regression (Upcoming)</li>
+    <li>MATH:2700 Linear Algebra (Upcoming)</li>
+    <li>CHIN:3101 + 3102 Chinese Year 3 (Upcoming)</li>
+</ul>
+
+<h2 class="text-xl">CodePath</h2>
+<ul class="mb-4 text-slate-800">
+    <li>TIP102: Intermediate Technical Interview Prep </li>
+</ul>
+{/if}
+<button on:click={togglecourse} class="text-blue-300">
+    {#if showcourse}
+    Click to collaspe.
+    {:else}
+    Click to expand.
+    {/if}
+    </button>
+</div>