Dockerize new sveltekit app

2024-09-26 15:07:17 +02:00
parent ff38392aea
commit d1006742ea
58 changed files with 6355 additions and 69 deletions
--- a/packages/web/.env.example
+++ b/packages/web/.env.example
@@ -0,0 +1,4 @@
+# Update these with your Supabase details from your project settings > API
+# https://app.supabase.com/project/_/settings/api
+NEXT_PUBLIC_SUPABASE_URL=your-project-url
+NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
--- a/packages/web/.gitignore
+++ b/packages/web/.gitignore
@@ -0,0 +1,37 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+bun.lockb
--- a/packages/web/Dockerfile
+++ b/packages/web/Dockerfile
--- a/packages/web/README.md
+++ b/packages/web/README.md
@@ -0,0 +1,93 @@
+<a href="https://demo-nextjs-with-supabase.vercel.app/">
+  <img alt="Next.js and Supabase Starter Kit - the fastest way to build apps with Next.js and Supabase" src="https://demo-nextjs-with-supabase.vercel.app/opengraph-image.png">
+  <h1 align="center">Next.js and Supabase Starter Kit</h1>
+</a>
+
+<p align="center">
+ The fastest way to build apps with Next.js and Supabase
+</p>
+
+<p align="center">
+  <a href="#features"><strong>Features</strong></a> ·
+  <a href="#demo"><strong>Demo</strong></a> ·
+  <a href="#deploy-to-vercel"><strong>Deploy to Vercel</strong></a> ·
+  <a href="#clone-and-run-locally"><strong>Clone and run locally</strong></a> ·
+  <a href="#feedback-and-issues"><strong>Feedback and issues</strong></a>
+  <a href="#more-supabase-examples"><strong>More Examples</strong></a>
+</p>
+<br/>
+
+## Features
+
+- Works across the entire [Next.js](https://nextjs.org) stack
+  - App Router
+  - Pages Router
+  - Middleware
+  - Client
+  - Server
+  - It just works!
+- supabase-ssr. A package to configure Supabase Auth to use cookies
+- Styling with [Tailwind CSS](https://tailwindcss.com)
+- Optional deployment with [Supabase Vercel Integration and Vercel deploy](#deploy-your-own)
+  - Environment variables automatically assigned to Vercel project
+
+## Demo
+
+You can view a fully working demo at [demo-nextjs-with-supabase.vercel.app](https://demo-nextjs-with-supabase.vercel.app/).
+
+## Deploy to Vercel
+
+Vercel deployment will guide you through creating a Supabase account and project.
+
+After installation of the Supabase integration, all relevant environment variables will be assigned to the project so the deployment is fully functioning.
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fnext.js%2Ftree%2Fcanary%2Fexamples%2Fwith-supabase&project-name=nextjs-with-supabase&repository-name=nextjs-with-supabase&demo-title=nextjs-with-supabase&demo-description=This%20starter%20configures%20Supabase%20Auth%20to%20use%20cookies%2C%20making%20the%20user's%20session%20available%20throughout%20the%20entire%20Next.js%20app%20-%20Client%20Components%2C%20Server%20Components%2C%20Route%20Handlers%2C%20Server%20Actions%20and%20Middleware.&demo-url=https%3A%2F%2Fdemo-nextjs-with-supabase.vercel.app%2F&external-id=https%3A%2F%2Fgithub.com%2Fvercel%2Fnext.js%2Ftree%2Fcanary%2Fexamples%2Fwith-supabase&demo-image=https%3A%2F%2Fdemo-nextjs-with-supabase.vercel.app%2Fopengraph-image.png&integration-ids=oac_VqOgBHqhEoFTPzGkPd7L0iH6)
+
+The above will also clone the Starter kit to your GitHub, you can clone that locally and develop locally.
+
+If you wish to just develop locally and not deploy to Vercel, [follow the steps below](#clone-and-run-locally).
+
+## Clone and run locally
+
+1. You'll first need a Supabase project which can be made [via the Supabase dashboard](https://database.new)
+
+2. Create a Next.js app using the Supabase Starter template npx command
+
+   ```bash
+   npx create-next-app -e with-supabase
+   ```
+
+3. Use `cd` to change into the app's directory
+
+   ```bash
+   cd name-of-new-app
+   ```
+
+4. Rename `.env.local.example` to `.env.local` and update the following:
+
+   ```
+   NEXT_PUBLIC_SUPABASE_URL=[INSERT SUPABASE PROJECT URL]
+   NEXT_PUBLIC_SUPABASE_ANON_KEY=[INSERT SUPABASE PROJECT API ANON KEY]
+   ```
+
+   Both `NEXT_PUBLIC_SUPABASE_URL` and `NEXT_PUBLIC_SUPABASE_ANON_KEY` can be found in [your Supabase project's API settings](https://app.supabase.com/project/_/settings/api)
+
+5. You can now run the Next.js local development server:
+
+   ```bash
+   npm run dev
+   ```
+
+   The starter kit should now be running on [localhost:3000](http://localhost:3000/).
+
+> Check out [the docs for Local Development](https://supabase.com/docs/guides/getting-started/local-development) to also run Supabase locally.
+
+## Feedback and issues
+
+Please file feedback and issues over on the [Supabase GitHub org](https://github.com/supabase/supabase/issues/new/choose).
+
+## More Supabase examples
+
+- [Next.js Subscription Payments Starter](https://github.com/vercel/nextjs-subscription-payments)
+- [Cookie-based Auth and the Next.js 13 App Router (free course)](https://youtube.com/playlist?list=PL5S4mPUpp4OtMhpnp93EFSo42iQ40XjbF)
+- [Supabase Auth and the Next.js App Router](https://github.com/supabase/supabase/tree/master/examples/auth/nextjs)
--- a/packages/web/app/cokno/page.tsx
+++ b/packages/web/app/cokno/page.tsx
@@ -0,0 +1,15 @@
+export default async function Page() {
+  return (
+    <div className="flex flex-col items-center">
+      <h1 className="text-4xl my-5">The Collective Knowledge of Stan Runge</h1>
+
+      <p className="my-5">
+        <i>"The Collective Knowledge of Stan Runge"</i> (CoKno) is a project
+        designed to serve as a personal Zettelkast system, similiar to
+        Wikipedia.
+      </p>
+
+      <h2 className="text-2xl my-5">Topics { }</h2>
+    </div>
+  );
+}
--- a/packages/web/app/globals.css
+++ b/packages/web/app/globals.css
@@ -0,0 +1,76 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+ 
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 240 10% 3.9%;
+
+    --card: 0 0% 100%;
+    --card-foreground: 240 10% 3.9%;
+ 
+    --popover: 0 0% 100%;
+    --popover-foreground: 240 10% 3.9%;
+ 
+    --primary: 240 5.9% 10%;
+    --primary-foreground: 0 0% 98%;
+ 
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
+ 
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+ 
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
+ 
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+
+    --border: 240 5.9% 90%;
+    --input: 240 5.9% 90%;
+    --ring: 240 10% 3.9%;
+ 
+    --radius: 0.5rem;
+  }
+ 
+  .dark {
+    --background: 240 10% 3.9%;
+    --foreground: 0 0% 98%;
+ 
+    --card: 240 10% 3.9%;
+    --card-foreground: 0 0% 98%;
+ 
+    --popover: 240 10% 3.9%;
+    --popover-foreground: 0 0% 98%;
+ 
+    --primary: 0 0% 98%;
+    --primary-foreground: 240 5.9% 10%;
+ 
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+ 
+    --muted: 240 3.7% 15.9%;
+    --muted-foreground: 240 5% 64.9%;
+ 
+    --accent: 240 3.7% 15.9%;
+    --accent-foreground: 0 0% 98%;
+ 
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+ 
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+    --ring: 240 4.9% 83.9%;
+  }
+}
+ 
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
--- a/packages/web/app/layout.tsx
+++ b/packages/web/app/layout.tsx
@@ -0,0 +1,88 @@
+import { GeistSans } from "geist/font/sans";
+import "./globals.css";
+import TabItem from "@/components/TabItem";
+import { Icon } from "../components/Icon";
+import { Analytics } from "@vercel/analytics/react";
+
+const defaultUrl = process.env.VERCEL_URL
+  ? `https://${process.env.VERCEL_URL}`
+  : "http://localhost:3000";
+
+export const metadata = {
+  metadataBase: new URL(defaultUrl),
+  title: "Stan Runge",
+  description: "Stan Runge's Website",
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en" className={GeistSans.className}>
+      <body
+        style={{
+          position: "relative",
+          color: "white",
+          backgroundColor: "rgba(0, 0, 0, 1)",
+        }}
+      >
+        <div
+          style={{
+            backgroundImage: `url(moon.jpg)`,
+            backgroundSize: "cover",
+            backgroundPosition: "center",
+            filter: "blur(5px)",
+            position: "fixed",
+            top: 0,
+            left: -46,
+            width: "100%",
+            height: "100%",
+            zIndex: -1,
+          }}
+        />
+        <div className="flex justify-between my-5 mx-5">
+          <div className="flex-1">
+            <h1 className="text-2xl">
+              <a href="/">Stan Runge</a>
+            </h1>
+          </div>
+          <div className="flex-1 flex justify-center">
+            <div className="flex gap-5">
+              <TabItem targetPath="/projects" text="Projects" />
+              <TabItem targetPath="/publications" text="Publications" />
+              <TabItem targetPath="/cokno" text="CoKno" />
+            </div>
+          </div>
+          <div className="flex-1 flex justify-end">
+            <div className="flex gap-5">
+              <a href="https://github.com/stanrunge">
+                <Icon d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33s1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2" />
+              </a>
+              <a href="https://linkedin.com/in/stanrunge">
+                <Icon d="M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2zm-.5 15.5v-5.3a3.26 3.26 0 0 0-3.26-3.26c-.85 0-1.84.52-2.32 1.3v-1.11h-2.79v8.37h2.79v-4.93c0-.77.62-1.4 1.39-1.4a1.4 1.4 0 0 1 1.4 1.4v4.93zM6.88 8.56a1.68 1.68 0 0 0 1.68-1.68c0-.93-.75-1.69-1.68-1.69a1.69 1.69 0 0 0-1.69 1.69c0 .93.76 1.68 1.69 1.68m1.39 9.94v-8.37H5.5v8.37z" />
+              </a>
+              <a href="https://x.com/stanrunge">
+                <Icon d="M18.205 2.25h3.308l-7.227 8.26l8.502 11.24H16.13l-5.214-6.817L4.95 21.75H1.64l7.73-8.835L1.215 2.25H8.04l4.713 6.231zm-1.161 17.52h1.833L7.045 4.126H5.078z" />
+              </a>
+              <a href="https://www.youtube.com/channel/UC12PhJmU6hhj_-EbTAdgHvw">
+                <Icon d="m10 15l5.19-3L10 9zm11.56-7.83c.13.47.22 1.1.28 1.9c.07.8.1 1.49.1 2.09L22 12c0 2.19-.16 3.8-.44 4.83c-.25.9-.83 1.48-1.73 1.73c-.47.13-1.33.22-2.65.28c-1.3.07-2.49.1-3.59.1L12 19c-4.19 0-6.8-.16-7.83-.44c-.9-.25-1.48-.83-1.73-1.73c-.13-.47-.22-1.1-.28-1.9c-.07-.8-.1-1.49-.1-2.09L2 12c0-2.19.16-3.8.44-4.83c.25-.9.83-1.48 1.73-1.73c.47-.13 1.33-.22 2.65-.28c1.3-.07 2.49-.1 3.59-.1L12 5c4.19 0 6.8.16 7.83.44c.9.25 1.48.83 1.73 1.73" />
+              </a>
+              <a href="https://twitch.com/stanrunge_">
+                <Icon d="M11.64 5.93h1.43v4.28h-1.43m3.93-4.28H17v4.28h-1.43M7 2L3.43 5.57v12.86h4.28V22l3.58-3.57h2.85L20.57 12V2m-1.43 9.29l-2.85 2.85h-2.86l-2.5 2.5v-2.5H7.71V3.43h11.43Z" />
+              </a>
+              <a href="https://instagram.com/stan_runge">
+                <Icon d="M7.8 2h8.4C19.4 2 22 4.6 22 7.8v8.4a5.8 5.8 0 0 1-5.8 5.8H7.8C4.6 22 2 19.4 2 16.2V7.8A5.8 5.8 0 0 1 7.8 2m-.2 2A3.6 3.6 0 0 0 4 7.6v8.8C4 18.39 5.61 20 7.6 20h8.8a3.6 3.6 0 0 0 3.6-3.6V7.6C20 5.61 18.39 4 16.4 4zm9.65 1.5a1.25 1.25 0 0 1 1.25 1.25A1.25 1.25 0 0 1 17.25 8A1.25 1.25 0 0 1 16 6.75a1.25 1.25 0 0 1 1.25-1.25M12 7a5 5 0 0 1 5 5a5 5 0 0 1-5 5a5 5 0 0 1-5-5a5 5 0 0 1 5-5m0 2a3 3 0 0 0-3 3a3 3 0 0 0 3 3a3 3 0 0 0 3-3a3 3 0 0 0-3-3" />
+              </a>
+              <a href="https://osu.ppy.sh/users/11212255">
+                <Icon d="M7.698 10.362a1.94 1.94 0 0 0-.7-.516q-.421-.189-.988-.189c-.567 0-.704.063-.982.189s-.51.298-.692.516q-.273.328-.413.777q-.139.448-.139.96q0 .511.14.952q.139.44.412.767q.274.329.692.512t.982.184c.565 0 .707-.062.988-.184q.422-.184.7-.512q.279-.327.413-.767q.135-.44.135-.952a3.3 3.3 0 0 0-.135-.96a2.1 2.1 0 0 0-.413-.777m-.965 2.81q-.22.372-.723.372q-.494 0-.713-.372q-.22-.373-.22-1.073c0-.7.073-.824.22-1.073q.22-.372.713-.372q.503 0 .723.372q.22.373.22 1.073t-.22 1.073m11.89-.83l-.09-4.39a4.5 4.5 0 0 1 .69-.054q.351 0 .701.054l-.09 4.39q-.315.053-.601.053a3.5 3.5 0 0 1-.61-.054m1.319 1.4q0 .332-.054.664a4 4 0 0 1-.655.054a4 4 0 0 1-.664-.054a4 4 0 0 1-.054-.655q0-.323.054-.665a4 4 0 0 1 .655-.054q.323 0 .664.054q.054.341.054.656m-3.223-4.03q.315 0 .638.053v4.461q-.288.099-.759.193a5.3 5.3 0 0 1-1.863.023a1.7 1.7 0 0 1-.74-.305q-.32-.234-.507-.683q-.189-.449-.189-1.193V9.765a4 4 0 0 1 .638-.054q.313 0 .637.054v2.46q0 .367.058.606a.9.9 0 0 0 .18.377a.66.66 0 0 0 .3.197q.18.058.422.058q.332 0 .557-.062V9.765a4 4 0 0 1 .628-.054m-4.362 2.683q.08.225.08.548a1.4 1.4 0 0 1-.542 1.117q-.265.212-.642.333q-.378.12-.853.12a5 5 0 0 1-.395-.013a3 3 0 0 1-.346-.045a4 4 0 0 1-.327-.076a4 4 0 0 1-.35-.116a2.6 2.6 0 0 1 .085-.49a3 3 0 0 1 .175-.48q.296.117.561.175q.265.06.552.059q.126 0 .274-.023a1 1 0 0 0 .274-.08a.7.7 0 0 0 .21-.153a.35.35 0 0 0 .086-.247q0-.216-.13-.31a1.3 1.3 0 0 0-.364-.166l-.556-.162q-.503-.143-.786-.426q-.282-.283-.283-.848q0-.682.49-1.068q.489-.386 1.332-.386q.35 0 .692.062q.341.063.691.189a2.5 2.5 0 0 1-.09.485a2.3 2.3 0 0 1-.17.44a4 4 0 0 0-.476-.158a2.2 2.2 0 0 0-.548-.067q-.305 0-.476.094a.32.32 0 0 0-.17.301q0 .197.121.278t.346.153l.511.153q.252.072.454.175t.345.255t.225.377M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12c6.628 0 12-5.373 12-12S18.628 0 12 0m0 22.8C6.035 22.8 1.2 17.965 1.2 12S6.035 1.2 12 1.2S22.8 6.035 22.8 12S17.965 22.8 12 22.8" />
+              </a>
+            </div>
+          </div>
+        </div>
+        {children}
+      </body>
+    </html>
+  );
+}
--- a/packages/web/app/page.tsx
+++ b/packages/web/app/page.tsx
@@ -0,0 +1,34 @@
+export default async function Index() {
+  return (
+    <div>
+      <div className="flex items-center place-content-center gap-10 py-10">
+        <img src="stan.jpg" alt="Stan Runge" className="rounded-xl size-64" />
+        <div className="text-center">
+          <h1 className="text-5xl my-3">Stan Runge</h1>
+          <a href="mailto:stan@stanrunge.dev">stan@stanrunge.dev</a>
+          <p>The Hague, Netherlands</p>
+        </div>
+      </div>
+
+      <div className="text-center my-10">
+        <h2 className="text-3xl">Experience</h2>
+        <b>Founder</b>
+        <p>Vash Software</p>
+      </div>
+      <div className="text-center my-10">
+        <b>Software Engineer Intern</b>
+        <p>H5mag</p>
+      </div>
+      <div className="text-center my-10">
+        <b>Junior IT Specialist</b>
+        <p>Finance Plus</p>
+      </div>
+      <div className="text-center my-10">
+        <h2 className="text-3xl">Education</h2>
+        <b>The Hague University of Applied Sciences</b>
+        <p>BSc Software Engineering</p>
+        <p>Minor: Deep Learning</p>
+      </div>
+    </div>
+  );
+}
--- a/packages/web/app/projects/page.tsx
+++ b/packages/web/app/projects/page.tsx
@@ -0,0 +1,62 @@
+import { Icon } from "@/components/Icon";
+import { ProjectCard } from "@/components/ProjectCard";
+
+export default async function Page() {
+  return (
+    <div className="flex flex-col items-center">
+      <h1 className="text-4xl my-5">Projects</h1>
+      <div
+        className="my-5 rounded-xl"
+        style={{
+          backgroundColor: "gray",
+        }}
+      >
+        <h2 className="text-2xl font-bold">Vash Software</h2>
+        <p>A global, asynchronic software company.</p>
+
+        <div>
+          <h3 className="text-xl font-semibold">Vash Esports (Pre-Alpha)</h3>
+          <p>The best way to play games competitively.</p>
+
+          <div>
+            <h4 className="text-l font-semibold">Web App</h4>
+          </div>
+
+          <div>
+            <h4 className="text-l font-semibold">iOS App</h4>
+          </div>
+
+          <div>
+            <h4 className="text-l font-semibold">Vash Gaming Network</h4>
+          </div>
+
+          <div>
+            <h4 className="text-l font-semibold">osu! Match Streamer</h4>
+          </div>
+        </div>
+      </div>
+
+      <div className="my-5">
+        <h2 className="text-2xl my-5">Personal Projects (3)</h2>
+        <div className="grid grid-cols-2 gap-4">
+          <ProjectCard
+            title="This Website"
+            description="Despite being a simple, mostly static website, there's a lot
+                more behind the scenes."
+            link="https://github.com/stanrunge/personal-website"
+          />
+          <ProjectCard
+            title="Spotify osu! Map Finder"
+            description="A tool to find osu! maps based on Spotify playlists."
+            link="https://github.com/stanrunge/spotify-map-finder"
+          />
+          <ProjectCard
+            title="Livvie MC Tournament Plugin"
+            description="A Minecraft plugin to run tournaments on a server."
+            link="https://github.com/stanrunge/livvie-mc-tournament-plugin"
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/packages/web/app/publications/page.tsx
+++ b/packages/web/app/publications/page.tsx
@@ -0,0 +1,433 @@
+export default async function Page() {
+  return (
+    <div className="flex flex-col items-center">
+      <h1 className="text-4xl my-5">Publications</h1>
+      <div className="my-5 text-center">
+        <h2 className="text-2xl underline">Presentations (1)</h2>
+        <ul>
+          <li>
+            <a href="https://www.youtube.com/watch?v=cTi5Amaqf-Q">
+              Quantum Vision Transformer
+            </a>
+
+            <iframe
+              width="560"
+              height="315"
+              src="https://www.youtube.com/embed/cTi5Amaqf-Q?si=JEwSIAzhhqLkjWNf"
+              title="YouTube video player"
+              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+            ></iframe>
+          </li>
+        </ul>
+      </div>
+
+      {/* <div className="my-5">
+        <h2 className="text-2xl text-center underline">
+          Literature Reviews (19)
+        </h2>
+        <ul>
+          <li className="flex m-3">
+            <div className="m-3">
+              <img
+                src="https://learning.oreilly.com/library/cover/9781491935668/250w/"
+                alt=""
+                width="500em"
+              />
+              <h3 className="font-bold">Kubernetes: Up and Running</h3>
+              <h2>Brendan Burns, Joe Beda, and Kelsey Hightower</h2>
+            </div>
+            <div className="m-3">
+              <p>
+                I started reading this book primarily to get started with
+                containers and Kubernetes. I've been having a decent
+                understanding of containers and have worked with Docker before,
+                but in this instance I needed to build a high performing system.
+              </p>
+            </div>
+          </li>
+
+          <li className="flex m-3">
+            <div className="m-3">
+              <img
+                src="https://covers.openlibrary.org/b/id/8390831-L.jpg"
+                alt=""
+                width="500em"
+              />
+              <h3 className="font-bold">
+                Quantum Computation and Quantum Information
+              </h3>
+              <h2>Michael A. Nielsen, Isaac L. Chuang</h2>
+            </div>
+            <div className="m-3">
+              <p>
+                This book provides a comprehensive introduction to the theory
+                and practice of quantum computing and information. It has been
+                crucial in expanding my understanding of quantum mechanics and
+                its computational applications.
+              </p>
+            </div>
+          </li>
+
+          <li className="flex m-3">
+            <div className="m-3">
+              <img
+                src="https://images.penguinrandomhouse.com/cover/9780199678112"
+                alt=""
+                width="500em"
+              />
+              <h3 className="font-bold">Superintelligence</h3>
+              <h2>Nick Bostrom</h2>
+            </div>
+            <div className="m-3">
+              <p>
+                This book explores the future of artificial intelligence and its
+                potential impact on society. It provides deep insights into the
+                challenges and opportunities posed by superintelligent AI.
+              </p>
+            </div>
+          </li>
+
+          <li className="flex m-3">
+            <div className="m-3">
+              <img
+                src="https://images-na.ssl-images-amazon.com/images/I/41oGs8GEEPL._SX329_BO1,204,203,200_.jpg"
+                alt=""
+                width="500em"
+              />
+              <h3 className="font-bold">Deep Utopia</h3>
+              <h2>Nick Bostrom</h2>
+            </div>
+            <div className="m-3">
+              <p>
+                In this thought-provoking book, Bostrom delves into the
+                possibilities of achieving a utopian society through advances in
+                technology and deep thinking about human values.
+              </p>
+            </div>
+          </li>
+
+          <li className="flex m-3">
+            <div className="m-3">
+              <img
+                src="https://covers.oreillystatic.com/images/9780131103627/lrg.jpg"
+                alt=""
+                width="500em"
+              />
+              <h3 className="font-bold">The C Programming Language</h3>
+              <h2>Brian W. Kernighan, Dennis M. Ritchie</h2>
+            </div>
+            <div className="m-3">
+              <p>
+                This classic book is essential for learning the fundamentals of
+                C programming. It has been a valuable resource in mastering the
+                language and understanding system-level programming.
+              </p>
+            </div>
+          </li>
+
+          <li className="flex m-3">
+            <div className="m-3">
+              <img
+                src="https://images-na.ssl-images-amazon.com/images/I/41F9A0XERQL._SX331_BO1,204,203,200_.jpg"
+                alt=""
+                width="500em"
+              />
+              <h3 className="font-bold">
+                The Hitchhiker's Guide to the Galaxy
+              </h3>
+              <h2>Douglas Adams</h2>
+            </div>
+            <div className="m-3">
+              <p>
+                A humorous and imaginative science fiction novel that takes
+                readers on a whimsical journey through the galaxy. It's a
+                delightful read that blends satire, wit, and adventure.
+              </p>
+            </div>
+          </li>
+
+          <li className="flex m-3">
+            <div className="m-3">
+              <img
+                src="https://covers.openlibrary.org/b/id/8379551-L.jpg"
+                alt=""
+                width="500em"
+              />
+              <h3 className="font-bold">Metamorphosis of Prime Intellect</h3>
+              <h2>Roger Williams</h2>
+            </div>
+            <div className="m-3">
+              <p>
+                This novel explores the implications of a superintelligent AI
+                that gains control over the universe. It raises fascinating
+                questions about the nature of power and humanity's place in a
+                technologically advanced world.
+              </p>
+            </div>
+          </li>
+
+          <li className="flex m-3">
+            <div className="m-3">
+              <img
+                src="https://images-na.ssl-images-amazon.com/images/I/51aiK3W-k+L._SX331_BO1,204,203,200_.jpg"
+                alt=""
+                width="500em"
+              />
+              <h3 className="font-bold">Critique of Pure Reason</h3>
+              <h2>Immanuel Kant</h2>
+            </div>
+            <div className="m-3">
+              <p>
+                A foundational work in philosophy, this book provides an
+                in-depth analysis of metaphysics and epistemology. It's a
+                challenging but rewarding read that has greatly influenced my
+                philosophical thinking.
+              </p>
+            </div>
+          </li>
+
+          <li className="flex m-3">
+            <div className="m-3">
+              <img
+                src="https://images-na.ssl-images-amazon.com/images/I/51p3XQPKGEL._SX331_BO1,204,203,200_.jpg"
+                alt=""
+                width="500em"
+              />
+              <h3 className="font-bold">Fundamentals of Astrodynamics</h3>
+              <h2>Roger R. Bate, Donald D. Mueller, Jerry E. White</h2>
+            </div>
+            <div className="m-3">
+              <p>
+                This book provides a comprehensive introduction to the
+                principles of astrodynamics and orbital mechanics. It's an
+                essential resource for anyone interested in space exploration
+                and satellite technology.
+              </p>
+            </div>
+          </li>
+
+          <li className="flex m-3">
+            <div className="m-3">
+              <img
+                src="https://covers.openlibrary.org/b/id/8232002-L.jpg"
+                alt=""
+                width="500em"
+              />
+              <h3 className="font-bold">
+                The History of the Decline and Fall of the Roman Empire
+              </h3>
+              <h2>Edward Gibbon</h2>
+            </div>
+            <div className="m-3">
+              <p>
+                A monumental work of history that chronicles the fall of the
+                Roman Empire. Gibbon's analysis is detailed and insightful,
+                offering valuable lessons on the rise and fall of civilizations.
+              </p>
+            </div>
+          </li>
+
+          <li className="flex m-3">
+            <div className="m-3">
+              <img
+                src="https://images-na.ssl-images-amazon.com/images/I/51uN9ByplRL._SX331_BO1,204,203,200_.jpg"
+                alt=""
+                width="500em"
+              />
+              <h3 className="font-bold">Aap in Pak</h3>
+              <h2>Kader Abdolah</h2>
+            </div>
+            <div className="m-3">
+              <p>
+                A compelling novel that delves into the complexities of cultural
+                identity and migration. Abdolah's storytelling is both poignant
+                and thought-provoking.
+              </p>
+            </div>
+          </li>
+
+          <li className="flex m-3">
+            <div className="m-3">
+              <img
+                src="https://images-na.ssl-images-amazon.com/images/I/51RYbL6K60L._SX331_BO1,204,203,200_.jpg"
+                alt=""
+                width="500em"
+              />
+              <h3 className="font-bold">The Art of War</h3>
+              <h2>Sun Tzu</h2>
+            </div>
+            <div className="m-3">
+              <p>
+                An ancient Chinese military treatise that offers timeless
+                strategies for success in warfare and beyond. Its principles are
+                applicable to various aspects of life, including business and
+                personal development.
+              </p>
+            </div>
+          </li>
+
+          <li className="flex m-3">
+            <div className="m-3">
+              <img
+                src="https://images-na.ssl-images-amazon.com/images/I/51k0qa6QZIL._SX404_BO1,204,203,200_.jpg"
+                alt=""
+                width="500em"
+              />
+              <h3 className="font-bold">Design Patterns</h3>
+              <h2>Erich Gamma, Richard Helm, Ralph Johnson, John Vlissides</h2>
+            </div>
+            <div className="m-3">
+              <p>
+                This book provides a comprehensive guide to software design
+                patterns, offering solutions to common design problems. It's an
+                essential resource for software developers looking to improve
+                their design skills.
+              </p>
+            </div>
+          </li>
+
+          <li className="flex m-3">
+            <div className="m-3">
+              <img
+                src="https://images-na.ssl-images-amazon.com/images/I/51V23uPbFNL._SX379_BO1,204,203,200_.jpg"
+                alt=""
+                width="500em"
+              />
+              <h3 className="font-bold">The Pragmatic Programmer</h3>
+              <h2>Andrew Hunt, David Thomas</h2>
+            </div>
+            <div className="m-3">
+              <p>
+                A classic book that offers practical advice and tips for
+                software developers. It covers a wide range of topics, from
+                coding techniques to project management, making it a must-read
+                for any programmer.
+              </p>
+            </div>
+          </li>
+
+          <li className="flex m-3">
+            <div className="m-3">
+              <img
+                src="https://images-na.ssl-images-amazon.com/images/I/41LOq9BOi9L._SX348_BO1,204,203,200_.jpg"
+                alt=""
+                width="500em"
+              />
+              <h3 className="font-bold">Algorithms</h3>
+              <h2>Robert Sedgewick, Kevin Wayne</h2>
+            </div>
+            <div className="m-3">
+              <p>
+                This book provides a comprehensive introduction to algorithms
+                and data structures. It's an essential resource for anyone
+                looking to deepen their understanding of computer science
+                fundamentals.
+              </p>
+            </div>
+          </li>
+
+          <li className="flex m-3">
+            <div className="m-3">
+              <img
+                src="https://images-na.ssl-images-amazon.com/images/I/41IYx9VMCcL._SX331_BO1,204,203,200_.jpg"
+                alt=""
+                width="500em"
+              />
+              <h3 className="font-bold">Negotiating for Success</h3>
+              <h2>George J. Siedel</h2>
+            </div>
+            <div className="m-3">
+              <p>
+                This book offers practical strategies and techniques for
+                effective negotiation. It's a valuable resource for anyone
+                looking to improve their negotiation skills and achieve better
+                outcomes.
+              </p>
+            </div>
+          </li>
+
+          <li className="flex m-3">
+            <div className="m-3">
+              <img
+                src="https://images-na.ssl-images-amazon.com/images/I/41+8YpKNSqL._SX331_BO1,204,203,200_.jpg"
+                alt=""
+                width="500em"
+              />
+              <h3 className="font-bold">Quantum Computing since Democritus</h3>
+              <h2>Scott Aaronson</h2>
+            </div>
+            <div className="m-3">
+              <p>
+                This book provides an accessible introduction to the principles
+                of quantum computing. Aaronson's writing is engaging and
+                thought-provoking, making complex concepts easier to understand.
+              </p>
+            </div>
+          </li>
+
+          <li className="flex m-3">
+            <div className="m-3">
+              <img
+                src="https://images-na.ssl-images-amazon.com/images/I/41XBlMiwPGL._SX331_BO1,204,203,200_.jpg"
+                alt=""
+                width="500em"
+              />
+              <h3 className="font-bold">Good Strategy Bad Strategy</h3>
+              <h2>Richard P. Rumelt</h2>
+            </div>
+            <div className="m-3">
+              <p>
+                This book explores the difference between good and bad
+                strategies, providing practical advice for developing effective
+                strategies. It's a must-read for anyone involved in strategic
+                planning and decision-making.
+              </p>
+            </div>
+          </li>
+
+          <li className="flex m-3">
+            <div className="m-3">
+              <img
+                src="https://images-na.ssl-images-amazon.com/images/I/41iMyMWsAmL._SX380_BO1,204,203,200_.jpg"
+                alt=""
+                width="500em"
+              />
+              <h3 className="font-bold">Neuroscience: Exploring the Brain</h3>
+              <h2>Mark F. Bear, Barry W. Connors, Michael A. Paradiso</h2>
+            </div>
+            <div className="m-3">
+              <p>
+                This textbook provides a comprehensive introduction to the field
+                of neuroscience. It covers a wide range of topics, from cellular
+                and molecular neuroscience to cognitive and behavioral
+                neuroscience.
+              </p>
+            </div>
+          </li>
+
+          <li className="flex m-3">
+            <div className="m-3">
+              <img
+                src="https://images-na.ssl-images-amazon.com/images/I/41zLC3aJGaL._SX403_BO1,204,203,200_.jpg"
+                alt=""
+                width="500em"
+              />
+              <h3 className="font-bold">Deep Learning with Python</h3>
+              <h2>François Chollet</h2>
+            </div>
+            <div className="m-3">
+              <p>
+                This book offers an accessible introduction to deep learning
+                using Python and Keras. It's a valuable resource for anyone
+                looking to get started with deep learning and understand its
+                practical applications.
+              </p>
+            </div>
+          </li>
+        </ul>
+      </div> */}
+
+      {/* <h2>Blog posts (0)</h2> */}
+    </div>
+  );
+}
--- a/packages/web/components.json
+++ b/packages/web/components.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "app/globals.css",
+    "baseColor": "zinc",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils"
+  }
+}
--- a/packages/web/components/Icon.tsx
+++ b/packages/web/components/Icon.tsx
@@ -0,0 +1,16 @@
+import React from "react";
+import type { SVGProps } from "react";
+
+export function Icon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="2em"
+      height="2em"
+      viewBox="0 0 24 24"
+      {...props}
+    >
+      <path fill="currentColor" d={props.d}></path>
+    </svg>
+  );
+}
--- a/packages/web/components/ProjectCard.tsx
+++ b/packages/web/components/ProjectCard.tsx
@@ -0,0 +1,23 @@
+import React from "react";
+import { Icon } from "./Icon";
+import { link } from "fs";
+
+export function ProjectCard(props: {
+  title: string;
+  description: string;
+  link: string;
+}) {
+  return (
+    <div className="flex">
+      <div>
+        <a href={props.link}>
+          <Icon d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33s1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2" />
+        </a>
+      </div>
+      <div>
+        <h3 className="text-xl font-semibold">{props.title}</h3>
+        <p>{props.description}</p>
+      </div>
+    </div>
+  );
+}
--- a/packages/web/components/TabItem.tsx
+++ b/packages/web/components/TabItem.tsx
@@ -0,0 +1,16 @@
+"use client";
+
+import { usePathname } from "next/navigation";
+
+export default async function TabItem({ targetPath, text }: { targetPath: string, text: string}) {
+  const currentPath = usePathname();
+
+  return (
+    <a
+      href={targetPath}
+      className={currentPath === targetPath ? "underline" : ""}
+    >
+      {text}
+    </a>
+  );
+}
--- a/packages/web/next.config.js
+++ b/packages/web/next.config.js
@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {};
+
+module.exports = nextConfig;
--- a/packages/web/package-lock.json
+++ b/packages/web/package-lock.json
--- a/packages/web/package.json
+++ b/packages/web/package.json
@@ -0,0 +1,29 @@
+{
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "@radix-ui/react-slot": "^1.0.2",
+    "@supabase/ssr": "latest",
+    "@supabase/supabase-js": "latest",
+    "@vercel/analytics": "^1.3.1",
+    "autoprefixer": "10.4.19",
+    "geist": "^1.3.0",
+    "next": "latest",
+    "postcss": "8.4.38",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "tailwindcss": "3.4.3",
+    "tailwindcss-animate": "^1.0.7",
+    "typescript": "5.4.5"
+  },
+  "devDependencies": {
+    "@types/node": "20.14.0",
+    "@types/react": "18.3.3",
+    "@types/react-dom": "18.3.0",
+    "encoding": "^0.1.13"
+  }
+}
--- a/packages/web/postcss.config.js
+++ b/packages/web/postcss.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+  plugins: ["tailwindcss", "autoprefixer"],
+};
--- a/packages/web/public/moon.jpg
+++ b/packages/web/public/moon.jpg
--- a/packages/web/public/stan.jpg
+++ b/packages/web/public/stan.jpg
--- a/packages/web/supabase/server.ts
+++ b/packages/web/supabase/server.ts
@@ -0,0 +1,36 @@
+import { createServerClient, type CookieOptions } from "@supabase/ssr";
+import { cookies } from "next/headers";
+
+export function createClient() {
+  const cookieStore = cookies();
+
+  return createServerClient(
+    process.env.NEXT_PUBLIC_SUPABASE_URL!,
+    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
+    {
+      cookies: {
+        get(name: string) {
+          return cookieStore.get(name)?.value;
+        },
+        set(name: string, value: string, options: CookieOptions) {
+          try {
+            cookieStore.set({ name, value, ...options });
+          } catch (error) {
+            // The `set` method was called from a Server Component.
+            // This can be ignored if you have middleware refreshing
+            // user sessions.
+          }
+        },
+        remove(name: string, options: CookieOptions) {
+          try {
+            cookieStore.set({ name, value: "", ...options });
+          } catch (error) {
+            // The `delete` method was called from a Server Component.
+            // This can be ignored if you have middleware refreshing
+            // user sessions.
+          }
+        },
+      },
+    }
+  );
+}
--- a/packages/web/tailwind.config.js
+++ b/packages/web/tailwind.config.js
@@ -0,0 +1,77 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  darkMode: ["class"],
+  content: [
+    './pages/**/*.{ts,tsx}',
+    './components/**/*.{ts,tsx}',
+    './app/**/*.{ts,tsx}',
+    './src/**/*.{ts,tsx}',
+  ],
+  prefix: "",
+  theme: {
+    container: {
+      center: true,
+      padding: "2rem",
+      screens: {
+        "2xl": "1400px",
+      },
+    },
+    extend: {
+      colors: {
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+      keyframes: {
+        "accordion-down": {
+          from: { height: "0" },
+          to: { height: "var(--radix-accordion-content-height)" },
+        },
+        "accordion-up": {
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: "0" },
+        },
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+      },
+    },
+  },
+  plugins: [require("tailwindcss-animate")],
+}
--- a/packages/web/tsconfig.json
+++ b/packages/web/tsconfig.json
@@ -0,0 +1,33 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": [
+    "stan-website/next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts"
+  ],
+  "exclude": ["node_modules"]
+}
--- a/packages/web_new/.gitignore
+++ b/packages/web_new/.gitignore
@@ -0,0 +1,21 @@
+node_modules
+
+# Output
+.output
+.vercel
+/.svelte-kit
+/build
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Env
+.env
+.env.*
+!.env.example
+!.env.test
+
+# Vite
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*
--- a/packages/web_new/.npmrc
+++ b/packages/web_new/.npmrc
@@ -0,0 +1 @@
+engine-strict=true
--- a/packages/web_new/.prettierignore
+++ b/packages/web_new/.prettierignore
@@ -0,0 +1,4 @@
+# Package Managers
+package-lock.json
+pnpm-lock.yaml
+yarn.lock
--- a/packages/web_new/.prettierrc
+++ b/packages/web_new/.prettierrc
@@ -0,0 +1,8 @@
+{
+	"useTabs": true,
+	"singleQuote": true,
+	"trailingComma": "none",
+	"printWidth": 100,
+	"plugins": ["prettier-plugin-svelte"],
+	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
+}
--- a/packages/web_new/Dockerfile
+++ b/packages/web_new/Dockerfile
@@ -0,0 +1,22 @@
+FROM node:18 AS build
+
+WORKDIR /app
+
+COPY package*.json .
+
+RUN npm ci
+
+COPY . .
+RUN npm run build
+RUN npm prune --production
+
+FROM node:18 AS run
+
+ENV NODE_ENV=production
+
+WORKDIR /app
+COPY --from=build /app/build ./build
+COPY --from=build /app/package.json ./package.json
+COPY --from=build /app/node_modules ./node_modules
+RUN ulimit -c unlimited
+ENTRYPOINT ["node", "build"]
--- a/packages/web_new/README.md
+++ b/packages/web_new/README.md
@@ -0,0 +1,38 @@
+# create-svelte
+
+Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).
+
+## Creating a project
+
+If you're seeing this, you've probably already done this step. Congrats!
+
+```bash
+# create a new project in the current directory
+npm create svelte@latest
+
+# create a new project in my-app
+npm create svelte@latest my-app
+```
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```bash
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+## Building
+
+To create a production version of your app:
+
+```bash
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
--- a/packages/web_new/bun.lockb
+++ b/packages/web_new/bun.lockb
--- a/packages/web_new/drizzle.config.ts
+++ b/packages/web_new/drizzle.config.ts
@@ -0,0 +1,9 @@
+import { defineConfig } from 'drizzle-kit';
+
+export default defineConfig({
+	dialect: 'postgresql',
+	schema: './src/lib/db/schema.ts',
+	out: './drizzle',
+	verbose: true,
+	strict: true
+});
--- a/packages/web_new/eslint.config.js
+++ b/packages/web_new/eslint.config.js
@@ -0,0 +1,33 @@
+import js from '@eslint/js';
+import ts from 'typescript-eslint';
+import svelte from 'eslint-plugin-svelte';
+import prettier from 'eslint-config-prettier';
+import globals from 'globals';
+
+/** @type {import('eslint').Linter.Config[]} */
+export default [
+	js.configs.recommended,
+	...ts.configs.recommended,
+	...svelte.configs['flat/recommended'],
+	prettier,
+	...svelte.configs['flat/prettier'],
+	{
+		languageOptions: {
+			globals: {
+				...globals.browser,
+				...globals.node
+			}
+		}
+	},
+	{
+		files: ['**/*.svelte'],
+		languageOptions: {
+			parserOptions: {
+				parser: ts.parser
+			}
+		}
+	},
+	{
+		ignores: ['build/', '.svelte-kit/', 'dist/']
+	}
+];
--- a/packages/web_new/migrations/0000_famous_random.sql
+++ b/packages/web_new/migrations/0000_famous_random.sql
@@ -0,0 +1,52 @@
+CREATE TABLE IF NOT EXISTS "books" (
+	"id" serial PRIMARY KEY NOT NULL,
+	"name" varchar(256),
+	"progress" integer DEFAULT 0,
+	"created_at" timestamp DEFAULT now(),
+	"updated_at" timestamp DEFAULT now()
+);
+--> statement-breakpoint
+CREATE TABLE IF NOT EXISTS "certificates" (
+	"id" serial PRIMARY KEY NOT NULL,
+	"name" varchar(256),
+	"progress" integer DEFAULT 0,
+	"created_at" timestamp DEFAULT now(),
+	"updated_at" timestamp DEFAULT now()
+);
+--> statement-breakpoint
+CREATE TABLE IF NOT EXISTS "courses" (
+	"id" serial PRIMARY KEY NOT NULL,
+	"name" varchar(256),
+	"university_id" integer,
+	"created_at" timestamp DEFAULT now(),
+	"updated_at" timestamp DEFAULT now()
+);
+--> statement-breakpoint
+CREATE TABLE IF NOT EXISTS "publications" (
+	"id" serial PRIMARY KEY NOT NULL,
+	"name" varchar(256),
+	"created_at" timestamp DEFAULT now(),
+	"updated_at" timestamp DEFAULT now()
+);
+--> statement-breakpoint
+CREATE TABLE IF NOT EXISTS "topics" (
+	"id" serial PRIMARY KEY NOT NULL,
+	"name" varchar(256),
+	"emoji" varchar(256),
+	"created_at" timestamp DEFAULT now(),
+	"updated_at" timestamp DEFAULT now()
+);
+--> statement-breakpoint
+CREATE TABLE IF NOT EXISTS "universities" (
+	"id" serial PRIMARY KEY NOT NULL,
+	"name" varchar(256),
+	"progress" integer DEFAULT 0,
+	"created_at" timestamp DEFAULT now(),
+	"updated_at" timestamp DEFAULT now()
+);
+--> statement-breakpoint
+DO $$ BEGIN
+ ALTER TABLE "courses" ADD CONSTRAINT "courses_university_id_universities_id_fk" FOREIGN KEY ("university_id") REFERENCES "public"."universities"("id") ON DELETE no action ON UPDATE no action;
+EXCEPTION
+ WHEN duplicate_object THEN null;
+END $$;
--- a/packages/web_new/migrations/meta/0000_snapshot.json
+++ b/packages/web_new/migrations/meta/0000_snapshot.json
@@ -0,0 +1,279 @@
+{
+  "id": "95e1c262-0787-412f-bb2f-7db06e20f3a0",
+  "prevId": "00000000-0000-0000-0000-000000000000",
+  "version": "7",
+  "dialect": "postgresql",
+  "tables": {
+    "public.books": {
+      "name": "books",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "serial",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "name": {
+          "name": "name",
+          "type": "varchar(256)",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "progress": {
+          "name": "progress",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "default": 0
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": false,
+          "default": "now()"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": false,
+          "default": "now()"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "public.certificates": {
+      "name": "certificates",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "serial",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "name": {
+          "name": "name",
+          "type": "varchar(256)",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "progress": {
+          "name": "progress",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "default": 0
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": false,
+          "default": "now()"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": false,
+          "default": "now()"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "public.courses": {
+      "name": "courses",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "serial",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "name": {
+          "name": "name",
+          "type": "varchar(256)",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "university_id": {
+          "name": "university_id",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": false,
+          "default": "now()"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": false,
+          "default": "now()"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "courses_university_id_universities_id_fk": {
+          "name": "courses_university_id_universities_id_fk",
+          "tableFrom": "courses",
+          "tableTo": "universities",
+          "columnsFrom": [
+            "university_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "no action",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "public.publications": {
+      "name": "publications",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "serial",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "name": {
+          "name": "name",
+          "type": "varchar(256)",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": false,
+          "default": "now()"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": false,
+          "default": "now()"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "public.topics": {
+      "name": "topics",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "serial",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "name": {
+          "name": "name",
+          "type": "varchar(256)",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "emoji": {
+          "name": "emoji",
+          "type": "varchar(256)",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": false,
+          "default": "now()"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": false,
+          "default": "now()"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "public.universities": {
+      "name": "universities",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "serial",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "name": {
+          "name": "name",
+          "type": "varchar(256)",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "progress": {
+          "name": "progress",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "default": 0
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": false,
+          "default": "now()"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": false,
+          "default": "now()"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    }
+  },
+  "enums": {},
+  "schemas": {},
+  "sequences": {},
+  "_meta": {
+    "columns": {},
+    "schemas": {},
+    "tables": {}
+  }
+}
--- a/packages/web_new/migrations/meta/_journal.json
+++ b/packages/web_new/migrations/meta/_journal.json
@@ -0,0 +1,13 @@
+{
+  "version": "7",
+  "dialect": "postgresql",
+  "entries": [
+    {
+      "idx": 0,
+      "version": "7",
+      "when": 1725668865024,
+      "tag": "0000_famous_random",
+      "breakpoints": true
+    }
+  ]
+}
--- a/packages/web_new/package-lock.json
+++ b/packages/web_new/package-lock.json
--- a/packages/web_new/package.json
+++ b/packages/web_new/package.json
@@ -0,0 +1,45 @@
+{
+  "name": "web-new",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build",
+    "preview": "vite preview",
+    "test": "npm run test:integration && npm run test:unit",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "lint": "prettier --check . && eslint .",
+    "format": "prettier --write .",
+    "test:integration": "playwright test",
+    "test:unit": "vitest",
+    "generate": "drizzle-kit generate",
+    "migrate": "drizzle-kit migrate",
+    "studio": "drizzle-kit studio"
+  },
+  "devDependencies": {
+    "@playwright/test": "1.47.0",
+    "@sveltejs/kit": "2.5.26",
+    "@sveltejs/vite-plugin-svelte": "3.1.2",
+    "@types/eslint": "9.6.1",
+    "drizzle-kit": "^0.24.2",
+    "eslint": "9.10.0",
+    "eslint-config-prettier": "9.1.0",
+    "eslint-plugin-svelte": "2.43.0",
+    "globals": "15.9.0",
+    "prettier": "3.3.3",
+    "prettier-plugin-svelte": "3.2.6",
+    "svelte": "4.2.19",
+    "svelte-check": "4.0.1",
+    "typescript": "5.5.4",
+    "typescript-eslint": "8.4.0",
+    "vite": "5.4.3",
+    "vitest": "2.0.5"
+  },
+  "type": "module",
+  "dependencies": {
+    "@sveltejs/adapter-node": "^5.2.4",
+    "drizzle-orm": "^0.33.0",
+    "postgres": "^3.4.4"
+  }
+}
--- a/packages/web_new/playwright.config.ts
+++ b/packages/web_new/playwright.config.ts
@@ -0,0 +1,12 @@
+import type { PlaywrightTestConfig } from '@playwright/test';
+
+const config: PlaywrightTestConfig = {
+	webServer: {
+		command: 'npm run build && npm run preview',
+		port: 4173
+	},
+	testDir: 'tests',
+	testMatch: /(.+\.)?(test|spec)\.[jt]s/
+};
+
+export default config;
--- a/packages/web_new/src/app.d.ts
+++ b/packages/web_new/src/app.d.ts
@@ -0,0 +1,13 @@
+// See https://kit.svelte.dev/docs/types#app
+// for information about these interfaces
+declare global {
+	namespace App {
+		// interface Error {}
+		// interface Locals {}
+		// interface PageData {}
+		// interface PageState {}
+		// interface Platform {}
+	}
+}
+
+export {};
--- a/packages/web_new/src/app.html
+++ b/packages/web_new/src/app.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<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>
--- a/packages/web_new/src/index.test.ts
+++ b/packages/web_new/src/index.test.ts
@@ -0,0 +1,7 @@
+import { describe, it, expect } from 'vitest';
+
+describe('sum test', () => {
+	it('adds 1 + 2 to equal 3', () => {
+		expect(1 + 2).toBe(3);
+	});
+});
--- a/packages/web_new/src/lib/db/db.server.ts
+++ b/packages/web_new/src/lib/db/db.server.ts
@@ -0,0 +1,6 @@
+import { drizzle } from 'drizzle-orm/postgres-js';
+import postgres from 'postgres';
+import { DATABASE_URL } from '$env/static/private';
+
+const client = postgres(DATABASE_URL);
+export const db = drizzle(client, {});
--- a/packages/web_new/src/lib/db/queries/insert.ts
+++ b/packages/web_new/src/lib/db/queries/insert.ts
--- a/packages/web_new/src/lib/db/queries/select.ts
+++ b/packages/web_new/src/lib/db/queries/select.ts
--- a/packages/web_new/src/lib/db/schema.ts
+++ b/packages/web_new/src/lib/db/schema.ts
@@ -0,0 +1,48 @@
+import { integer, pgTable, serial, timestamp, varchar } from 'drizzle-orm/pg-core';
+
+export const topics = pgTable('topics', {
+	id: serial('id').primaryKey(),
+	name: varchar('name', { length: 256 }),
+	emoji: varchar('emoji', { length: 256 }),
+	createdAt: timestamp('created_at').defaultNow(),
+	updatedAt: timestamp('updated_at').defaultNow()
+});
+
+export const universities = pgTable('universities', {
+	id: serial('id').primaryKey(),
+	name: varchar('name', { length: 256 }),
+	progress: integer('progress').default(0),
+	createdAt: timestamp('created_at').defaultNow(),
+	updatedAt: timestamp('updated_at').defaultNow()
+});
+
+export const courses = pgTable('courses', {
+	id: serial('id').primaryKey(),
+	name: varchar('name', { length: 256 }),
+	universityId: integer('university_id').references(() => universities.id),
+	createdAt: timestamp('created_at').defaultNow(),
+	updatedAt: timestamp('updated_at').defaultNow()
+});
+
+export const certificates = pgTable('certificates', {
+	id: serial('id').primaryKey(),
+	name: varchar('name', { length: 256 }),
+	progress: integer('progress').default(0),
+	createdAt: timestamp('created_at').defaultNow(),
+	updatedAt: timestamp('updated_at').defaultNow()
+});
+
+export const books = pgTable('books', {
+	id: serial('id').primaryKey(),
+	name: varchar('name', { length: 256 }),
+	progress: integer('progress').default(0),
+	createdAt: timestamp('created_at').defaultNow(),
+	updatedAt: timestamp('updated_at').defaultNow()
+});
+
+export const publications = pgTable('publications', {
+	id: serial('id').primaryKey(),
+	name: varchar('name', { length: 256 }),
+	createdAt: timestamp('created_at').defaultNow(),
+	updatedAt: timestamp('updated_at').defaultNow()
+});
--- a/packages/web_new/src/routes/+page.server.ts
+++ b/packages/web_new/src/routes/+page.server.ts
@@ -0,0 +1,10 @@
+// import { db } from '$lib/db/db.server';
+// import { myTable } from '$lib/db/schema';
+import type { PageServerLoad } from './$types';
+
+export const load = (async () => {
+	// const result = await db.select().from(myTable);
+	return {
+		message: 'Hi :3'
+	};
+}) satisfies PageServerLoad;
--- a/packages/web_new/src/routes/+page.svelte
+++ b/packages/web_new/src/routes/+page.svelte
@@ -0,0 +1,8 @@
+<script lang="ts">
+	export let data;
+</script>
+
+<h1>Welcome to SvelteKit</h1>
+<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
+
+<p>Message: {data.message}</p>
--- a/packages/web_new/static/favicon.png
+++ b/packages/web_new/static/favicon.png
--- a/packages/web_new/svelte.config.js
+++ b/packages/web_new/svelte.config.js
@@ -0,0 +1,18 @@
+import adapter from '@sveltejs/adapter-node';
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
+	// for more information about preprocessors
+	preprocess: vitePreprocess(),
+
+	kit: {
+		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
+		// If your environment is not supported, or you settled on a specific environment, switch out the adapter.
+		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
+		adapter: adapter()
+	}
+};
+
+export default config;
--- a/packages/web_new/tests/test.ts
+++ b/packages/web_new/tests/test.ts
@@ -0,0 +1,6 @@
+import { expect, test } from '@playwright/test';
+
+test('home page has expected h1', async ({ page }) => {
+	await page.goto('/');
+	await expect(page.locator('h1')).toBeVisible();
+});
--- a/packages/web_new/tsconfig.json
+++ b/packages/web_new/tsconfig.json
@@ -0,0 +1,19 @@
+{
+	"extends": "./.svelte-kit/tsconfig.json",
+	"compilerOptions": {
+		"allowJs": true,
+		"checkJs": true,
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"strict": true,
+		"moduleResolution": "bundler"
+	}
+	// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
+	// except $lib which is handled by https://kit.svelte.dev/docs/configuration#files
+	//
+	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
+	// from the referenced tsconfig.json - TypeScript does not merge them in
+}
--- a/packages/web_new/vite.config.ts
+++ b/packages/web_new/vite.config.ts
@@ -0,0 +1,9 @@
+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+	plugins: [sveltekit()],
+	test: {
+		include: ['src/**/*.{test,spec}.{js,ts}']
+	}
+});