Initial progress

Read: sveltejs/kit#6174

src/routes/portfolio/demo/+layout.svelte

@@ -0,0 +1,22 @@
+<script>
+  import NavBar from './navbar.svelte';
+</script>
+
+<svelte:head>
+  <title>Frank's Portfolio</title>
+  <link rel="stylesheet" href="/global.css" />
+  <link rel="stylesheet" href="/portfolio/demo/portfolio.css" />
+</svelte:head>
+
+<NavBar />
+
+<main>
+  <slot />
+</main>
+
+<style>
+  main {
+    margin: 1rem;
+    font-size: 1.25rem;
+  }
+</style>

src/routes/portfolio/demo/+page.svelte

@@ -0,0 +1,11 @@
+<!-- Code copied mostly as-is from Dev workshop.
+  See: https://github.com/acmCSUFDev/intro-to-web-dev -->
+<script>
+  import About from './about.svelte';
+  import Experiences from './experiences.svelte';
+  import Projects from './projects.svelte';
+</script>
+
+<About name={'Frank'} />
+<Experiences />
+<Projects />

src/routes/portfolio/demo/about.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  export let name: string;
+</script>
+
+<section>
+  <div class="container__about" id="About">
+    <img width={180} height={123} src="/assets/portfolio/demo/frank.svg" alt="" />
+    <p class="header--small">Hi, I'm {name}</p>
+    <p class="header--big">WELCOME TO MY PORTFOLIO</p>
+  </div>
+</section>
+
+<style>
+  .container__about {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-top: 10rem;
+  }
+
+  .header--small {
+    font-size: 1.5rem;
+    margin: 2rem 0 0 0;
+    font-weight: 600;
+  }
+
+  .header--big {
+    font-size: 2rem;
+    color: #2c91c6;
+    font-weight: 700;
+  }
+</style>

src/routes/portfolio/demo/experiences.svelte

@@ -0,0 +1,55 @@
+<script>
+  const exps = [
+    {
+      title: 'Shark Gang Lead',
+      duration: 'Jan 2022 - Present',
+    },
+    {
+      title: 'Vegan Shark',
+      duration: 'Jan 2021 - Jan 2022',
+    },
+    {
+      title: 'Junior Shark',
+      duration: 'Jan 2020 - Jan 2021',
+    },
+    {
+      title: 'Baby Shark',
+      duration: 'Jan 2019 - Jan 2020',
+    },
+  ];
+</script>
+
+<section class="container__exps" id="Experiences">
+  <p class="header--big">Experiences</p>
+  {#each exps as { title, duration }}
+    <div class="container__exp">
+      <p class="header__title">{title}</p>
+      <p class="header__duration">{duration}</p>
+    </div>
+  {/each}
+</section>
+
+<style>
+  .container__exps {
+    margin-top: 10rem;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+  }
+
+  .header--big {
+    font-size: 2.5rem;
+    font-weight: 780;
+  }
+
+  .container__exp {
+    background-color: #2c91c6;
+    border-radius: 2rem;
+    margin: 1rem;
+  }
+
+  .header__title {
+    font-size: 1.5rem;
+    font-weight: 600;
+  }
+</style>

src/routes/portfolio/demo/navbar.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+
+  const navItems = [
+    { title: 'About', url: '#About' },
+    { title: 'Experiences', url: '#Experiences' },
+    { title: 'Projects', url: '#Projects' },
+  ];
+  let time = new Date(Date.now());
+  const options = {
+    weekday: 'long',
+  } as const;
+
+  // Prevent automatic scrolling
+  onMount(() => (history.scrollRestoration = 'manual'));
+</script>
+
+<nav>
+  <section class="container__nav" id="/">
+    {#each navItems as { title, url }}
+      <a href={url} class="nav__item">
+        {title}
+      </a>
+    {/each}
+    <p class="time">{time.toLocaleDateString(undefined, options)}</p>
+  </section>
+</nav>
+
+<style>
+  .container__nav {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: row;
+  }
+
+  .nav__item {
+    color: white;
+    font-weight: 600;
+    font-size: 2rem;
+    margin: 0 2rem;
+    transition: all 400ms;
+  }
+
+  .nav__item:hover {
+    color: rgb(0, 157, 255);
+  }
+
+  .time {
+    color: #1a1a1a;
+    font-weight: 700;
+    background-color: #2c91c6;
+    padding: 0.35rem;
+    margin: 0 2rem;
+    border-radius: 12px;
+  }
+</style>

src/routes/portfolio/demo/projects.svelte

@@ -0,0 +1,65 @@
+<script>
+  const projects = [
+    {
+      title: 'acmcsuf.com',
+      description: 'Developed acmcsuf.com website',
+      url: 'https://github.com/EthanThatOneKid/acmcsuf.com',
+    },
+    {
+      title: 'Intro to Web Dev',
+      description: 'Beginner friendly Web Dev series by acmDev',
+      url: 'https://github.com/acmCSUFDev/intro-to-web-dev',
+    },
+    {
+      title: 'ICON',
+      description: 'Notion Canvas integration for students',
+      url: 'https://github.com/acmCSUFDev/ICON',
+    },
+    {
+      title: 'Food Tinder',
+      description: 'tinder for matching people by food places',
+      url: 'https://github.com/acmCSUFDev/Food-Tinder',
+    },
+  ];
+</script>
+
+<section class="container__projects" id="Projects">
+  <p class="header--big">Projects</p>
+  {#each projects as { title, description, url }}
+    <div class="container__project">
+      <a href={url} target="_blank">
+        <p class="header__title">{title}</p>
+      </a>
+      <p>{description}</p>
+    </div>
+  {/each}
+</section>
+
+<style>
+  .container__projects {
+    margin-top: 10rem;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+  }
+
+  .header--big {
+    font-size: 2.5rem;
+    font-weight: 780;
+  }
+
+  .container__project {
+    margin: 1rem;
+  }
+
+  .header__title {
+    color: white;
+    font-size: 1.5rem;
+    font-weight: 600;
+    transition: 400ms all;
+  }
+
+  .header__title:hover {
+    color: #2c91c6;
+  }
+</style>

static/assets/portfolio/demo/portfolio.css

@@ -0,0 +1,86 @@
+/* SAME AS ORIGINAL */
+:root {
+  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+/* NEW */
+html {
+  scroll-behavior: smooth;
+}
+/* SAME AS ORIGINAL */
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  /* place-items: center; */
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+.card {
+  padding: 2em;
+}
+
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}