refactor everything with svelte

azliu0 · Nov 8, 2023 · 477e943 · 477e943
commit 477e943
Show file tree

Hide file tree

Showing 24 changed files with 1,720 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,10 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*
diff --git a/.npmrc b/.npmrc
@@ -0,0 +1 @@
+engine-strict=true
diff --git a/README.md b/README.md
@@ -0,0 +1,3 @@
+# azliu.cc
+
+powered by [SvelteKit](https://kit.svelte.dev/) and [Tailwind CSS](https://tailwindcss.com/)
diff --git a/package.json b/package.json
@@ -0,0 +1,26 @@
+{
+	"name": "azliu",
+	"version": "0.0.1",
+	"private": true,
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build",
+		"preview": "vite preview",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
+	},
+	"devDependencies": {
+		"@sveltejs/adapter-auto": "^2.0.0",
+		"@sveltejs/kit": "^1.20.4",
+		"autoprefixer": "^10.4.16",
+		"postcss": "^8.4.31",
+		"svelte": "^4.0.5",
+		"svelte-check": "^3.4.3",
+		"tailwindcss": "^3.3.5",
+		"tslib": "^2.4.1",
+		"typescript": "^5.0.0",
+		"vite": "^4.4.2"
+	},
+	"type": "module",
+	"dependencies": {}
+}
diff --git a/postcss.config.js b/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/src/app.css b/src/app.css
@@ -0,0 +1,73 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body, body * {
+  background-color: black;
+  font-family: 'Menlo', sans-serif;
+  color: white;
+}
+
+.content {
+  width: 700px;
+}
+
+@media (max-width: 700px) {
+  .content {
+    margin-top: -2rem;
+    margin-bottom: 2rem;
+    padding: 0 10px 0 30px;
+  }
+}
+
+@media (max-width: 600px) {
+  .content {
+    margin-top: -4rem;
+    margin-bottom: 4rem;
+  }
+}
+
+.headbtn {
+  margin: 0 0.2rem;
+  padding: 0.2rem 0.5rem;
+  text-align: center;
+  border-radius: 2px;
+  font-size: 16px;
+}
+
+.headbtn:hover {
+  cursor: pointer;
+  background-color: rgb(45, 45, 45);
+}
+
+.selected {
+  background-color: rgb(45, 45, 45);
+}
+
+.ref {
+  color: rgb(255, 160, 122);
+}
+
+.ref:hover {
+  cursor: pointer;
+  background-color: rgb(255, 160, 122, 0.3)
+}
+
+.refg {
+  color: rgb(173, 216, 230);
+}
+
+.refg:hover {
+  cursor: pointer;
+  background-color: rgba(173, 216, 230, 0.3)
+}
+
+.flex-responsive {
+  display: flex;
+}
+
+@media (max-width: 500px) {
+  .flex-responsive {
+    flex-direction: column-reverse;
+  }
+}
diff --git a/src/app.d.ts b/src/app.d.ts
@@ -0,0 +1,12 @@
+// See https://kit.svelte.dev/docs/types#app
+// for information about these interfaces
+declare global {
+	namespace App {
+		// interface Error {}
+		// interface Locals {}
+		// interface PageData {}
+		// interface Platform {}
+	}
+}
+
+export {};
diff --git a/src/app.html b/src/app.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="%sveltekit.assets%/favicon.ico" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		%sveltekit.head%
+	</head>
+	<body data-sveltekit-preload-data="hover">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>
diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
@@ -0,0 +1,53 @@
+<script lang="ts">
+  import { page } from "$app/stores";
+
+  const pages = [
+    { name: "home", href: "/" },
+    { name: "coursework", href: "/coursework" },
+    { name: "logs", href: "/logs" },
+  ];
+
+  let pageTitle: string | null = null;
+  $: {
+    const link = pages.find(({ href }) => href === $page.url.pathname);
+    if (link) {
+      pageTitle = link.name;
+    } else {
+      pageTitle = null;
+    }
+  }
+</script>
+
+<header class="flex justify-center">
+  <div class="content">
+    <div
+      class="mt-[7.5rem] mb-10 flex justify-between max-[550px]:flex-col-reverse"
+    >
+      <div>
+        {#if pageTitle === "home"}
+          <div class="text-2xl">Andrew Liu</div>
+          <div class="text-lg">azliu [at] mit [dot] edu</div>
+        {:else if pageTitle === "coursework"}
+          <div class="text-2xl">
+            Coursework <span class="text-sm">(*=ongoing)</span>
+          </div>
+        {:else if pageTitle === "logs"}
+          <div class="text-2xl">Logs</div>
+        {:else}
+          <a class="headbtn" href="/">home</a>
+        {/if}
+      </div>
+      <div>
+        <div class="text-lg flex justify-end max-[550px]:mb-5">
+          {#each pages as page (page)}
+            {#if page.name === pageTitle}
+              <a class="headbtn selected" href={page.href}>{page.name}</a>
+            {:else}
+              <a class="headbtn" href={page.href}>{page.name}</a>
+            {/if}
+          {/each}
+        </div>
+      </div>
+    </div>
+  </div>
+</header>
diff --git a/src/lib/index.ts b/src/lib/index.ts
@@ -0,0 +1 @@
+// place files you want to import through the `$lib` alias in this folder.
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -0,0 +1,37 @@
+<script>
+  import "../app.css";
+
+  import { fly } from "svelte/transition";
+
+  import Header from "$lib/components/Header.svelte";
+
+  export let data;
+</script>
+
+<svelte:head>
+  <!-- Google tag (gtag.js) - Google Analytics -->
+  <script
+    async
+    src="https://www.googletagmanager.com/gtag/js?id=G-XN7F4CTMD0"
+  ></script>
+  <script>
+    window.dataLayer = window.dataLayer || [];
+    function gtag() {
+      dataLayer.push(arguments);
+    }
+    gtag("js", new Date());
+
+    gtag("config", "G-XN7F4CTMD0");
+  </script>
+</svelte:head>
+
+<Header />
+
+{#key data.pathname}
+  <main
+    in:fly={{ x: -10, duration: 200, delay: 200 }}
+    out:fly={{ y: 5, duration: 200 }}
+  >
+    <slot />
+  </main>
+{/key}
diff --git a/src/routes/+layout.ts b/src/routes/+layout.ts
@@ -0,0 +1,7 @@
+import type { LayoutLoad } from './$types';
+
+export const prerender = true;
+
+export const load : LayoutLoad = async ({ url }) => {
+  return { pathname: url.pathname };
+};
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -0,0 +1,84 @@
+<div class="flex justify-center">
+  <div class="content">
+    <div class="w-[80%]">
+      <p>
+        Hello! I'm Andrew, a second-year undergraduate studying Computer Science
+        (course 6) and Mathematics (course 18) at MIT.
+      </p>
+
+      <br />
+
+      <p>
+        I'm broadly interested in math, machine learning, and software. Outside
+        of school, I also enjoy poker.
+      </p>
+
+      <br />
+
+      <p>In the past, I've</p>
+      <ul class="list-disc ml-6">
+        <li>
+          researched efficient <a
+            href="https://github.com/chenxuhao/GraphMiner"
+            target="_blank"
+            class="refg">graph mining algorithms</a
+          >
+          with the
+          <a
+            href="http://csg.csail.mit.edu/index.html"
+            target="_blank"
+            class="refg">computation structures group</a
+          >
+        </li>
+        <li>
+          expanded a low-latency trading service at <a
+            href="https://www.belvederetrading.com/"
+            target="_blank"
+            class="refg">belvedere trading</a
+          >
+        </li>
+      </ul>
+
+      <br />
+
+      Currently, I'm
+      <ul class="list-disc ml-6">
+        <li>
+          leading the <a
+            href="https://hackmit.org/"
+            target="_blank"
+            class="refg">hackmit</a
+          > dev team
+        </li>
+        <li>
+          enjoying my <a href="./coursework.html" class="refg">classes</a>
+        </li>
+      </ul>
+
+      <br />
+
+      In the near future, I'll be
+      <ul class="list-disc ml-6">
+        <li>
+          working on QR at <a
+            href="https://www.citadelsecurities.com/"
+            target="_blank"
+            class="refg">citadel securities</a
+          >
+        </li>
+      </ul>
+    </div>
+
+    <br />
+    <div class="flex">
+      <a class="pr-2" href="https://github.com/azliu0" target="_blank">
+        <img src="/images/logos/github.svg" width="25px" alt="githublogo" />
+      </a>
+      <a href="https://www.linkedin.com/in/az-liu/" target="_blank">
+        <img src="/images/logos/linkedin.svg" width="25px" alt="linkedinlogo" />
+      </a>
+    </div>
+
+    <div class="mb-[7.5rem]" />
+  </div>
+</div>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		# azliu.cc

		powered by [SvelteKit](https://kit.svelte.dev/) and [Tailwind CSS](https://tailwindcss.com/)
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		// place files you want to import through the `$lib` alias in this folder.