Started "About" page

Replaced color names longer than 4 characters with corresponding hex codes
hopperelec · Jun 30, 2024 · 8ebcfac · 8ebcfac
1 parent abe0318
commit 8ebcfac
Show file tree

Hide file tree

Showing 12 changed files with 141 additions and 49 deletions.
diff --git a/src/lib/components/CameronFace.svelte b/src/lib/components/CameronFace.svelte
@@ -0,0 +1,9 @@
+<enhanced:img class:cameron-face={true} src="$lib/media/hero/cameron-smile.webp?w=718&h=1000&effort=max" alt="Cameron smiling"/>
+
+<style>
+.cameron-face {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+}
+</style>
diff --git a/src/routes/NavBar.svelte → src/lib/components/NavBar.svelte b/src/routes/NavBar.svelte → src/lib/components/NavBar.svelte
@@ -2,7 +2,7 @@
   <nav>
     <ul>
       <li><a href="/#hero">Home</a></li>
-      <li><a href="/about">About Me</a></li>
+      <li><a href="/about/">About</a></li>
       <li><a href="/#projects">Projects</a></li>
       <li><a href="/#contact">Contact</a></li>
     </ul>
@@ -11,19 +11,19 @@
 
 <style>
 #nav-container {
-  position: fixed;
+  position: sticky;
   top: 0;
   width: 100%;
   z-index: 99999;
 }
 
 a {
-  color: white;
+  color: #fff;
   text-decoration: none;
 }
 
 nav {
-  --nav-border: 0.2em solid white;
+  --nav-border: 0.2em solid #ffff;
 
   border-bottom: var(--nav-border);
   background-color: #646464;
@@ -58,7 +58,7 @@ li {
       /* Dividing line */
       content: '';
       height: 80%;
-      border-left: 0.1em solid white;
+      border-left: 0.1em solid #fff;
       padding-left: 0.5em;
     }
   }

diff --git a/src/lib/components/hopper-logo/HopperIcon.svelte b/src/lib/components/hopper-logo/HopperIcon.svelte
@@ -104,4 +104,11 @@ $: if (eyes && _padding) {
       {/each}
     {/if}
   </HopperShadowWrapper>
-</svg>
+</svg>
+
+<style>
+svg {
+  max-width: 100%;
+  max-height: 100%;
+}
+</style>
diff --git a/src/lib/components/monaco-viewer/MonacoFolder.svelte b/src/lib/components/monaco-viewer/MonacoFolder.svelte
@@ -58,7 +58,7 @@ ul {
     &::before {
       content: "";
       display: inline-block;
-      border: solid white;
+      border: solid #fff;
       border-width: 1px 1px 0 0;
       height: 6px;
       width: 6px;

diff --git a/src/lib/components/monaco-viewer/MonacoViewer.svelte b/src/lib/components/monaco-viewer/MonacoViewer.svelte
@@ -203,7 +203,7 @@ h3, span {
     }
 
     &.open {
-      color: white;
+      color: #fff;
       border-top-color: #0078d4;
     }
 

diff --git a/src/routes/+error.svelte b/src/routes/+error.svelte
@@ -23,6 +23,6 @@ div {
 h1 {
   font-size: 64px;
   font-weight: bold;
-  color: white;
+  color: #fff;
 }
 </style>
diff --git a/src/routes/+layout.ts b/src/routes/+layout.ts
@@ -0,0 +1 @@
+export const trailingSlash = "always";
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -1,31 +1,25 @@
 <script lang="ts">
+import NavBar from "$lib/components/NavBar.svelte";
 import Contact from "./Contact.svelte";
 import CuttingMatBackground from "./CuttingMatBackground.svelte";
 import Hero from "./Hero.svelte";
-import NavBar from "./NavBar.svelte";
 import Projects from "./Projects.svelte";
 </script>
 
-<NavBar/>
 <CuttingMatBackground>
-  <div id="navbar-padding"></div>
-  <main>
+  <NavBar/>
+  <main class="navbar-padding">
     <Hero/>
     <Projects/>
     <Contact/>
   </main>
 </CuttingMatBackground>
 
-
 <style lang="scss">
 :global(body) {
   overflow-x: hidden;
 }
 
-#navbar-padding {
-  height: 3.75em;
-}
-
 main {
   font-size: max(14px, min(2vw, 2vh));
 }

diff --git a/src/routes/CuttingMatBackground.svelte b/src/routes/CuttingMatBackground.svelte
@@ -15,6 +15,6 @@ import CuttingMat from "$lib/media/cutting-mat.webp?enhanced&effort=max&brightne
   background-size: 2cm;
   width: 100%;
   min-height: 100%;
-  color: white;
+  color: #fff;
 }
 </style>
diff --git a/src/routes/Hero.svelte b/src/routes/Hero.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+import CameronFace from "$lib/components/CameronFace.svelte";
 import CameronText from "$lib/components/CameronText.svelte";
 import HopperIcon from "$lib/components/hopper-logo/HopperIcon.svelte";
 import HopperelecText from "$lib/components/hopper-logo/HopperelecText.svelte";
@@ -31,7 +32,7 @@ const HopperelecRollingText: RollingText[] = [
 	["make", "websites", "with", { text: "Javascript", color: "#f0db4f" }],
 	["make", "websites", "with", { text: "Typescript", color: "#377cc8" }],
 	["make", "websites", "with", { text: "PHP", color: "#7b7fb5" }],
-	["code", "stuff", "with", { text: "Python", color: "yellow" }],
+	["code", "stuff", "with", { text: "Python", color: "#ff0" }],
 	["make", "a Discord bot", "with", { text: "Java", color: "#5382a1" }],
 	["develop", "Minecraft plugins", "with", { text: "Java", color: "#5382a1" }],
 	["contribute to", "open-source"],
@@ -59,7 +60,7 @@ const CameronRollingText: RollingText[] = [
 		`${timeSinceBorn.getFullYear() - 1970} years old`,
 		undefined,
 		timeSinceBorn.getDate() === 1 && timeSinceBorn.getMonth() === 0
-			? { text: "today! 🎉", color: "yellow" } // Emoji is too big, but I'm calling this a feature
+			? { text: "today! 🎉", color: "#ff0" } // Emoji is too big, but I'm calling this a feature
 			: undefined,
 	],
 	["go by", "he/him"],
@@ -100,13 +101,12 @@ function switchMode() {
 }
 </script>
 
-<section
-  id="hero"
-  class:hopperelec-mode={hopperelecMode} class:cameron-mode={!hopperelecMode}
-  bind:clientWidth={width} bind:clientHeight={height}
->
+<section id="hero" bind:clientWidth={width} bind:clientHeight={height}>
   {#key hopperelecMode}
-    <div id="transition-container" transition:fade>
+    <div
+      id="transition-container" transition:fade
+      class:hopperelec-mode={hopperelecMode} class:cameron-mode={!hopperelecMode}
+    >
       <div id="stickers" style:opacity={opacity > 0.1 ? opacity : 0}>
         {#if hopperelecMode}
           <img src={SvelteSticker} alt="Svelte logo" style:top="15%" style:right="20%"/>
@@ -142,7 +142,7 @@ function switchMode() {
           {#if hopperelecMode}
             <HopperIcon fillColor="#646464" outlineColor="#fff" outlineWidth={6} typeOf3D="stroke" padding={{top: 3, right: 3, bottom: 3, left: 3}} scale={null}/>
           {:else}
-            <enhanced:img class:cameron-face={true} src="$lib/media/hero/cameron-smile.webp?effort=max" alt="Cameron smiling"/>
+            <CameronFace/>
             <!-- TODO: bonked face - I already have a frowning face, but wanting a good hammer PNG -->
           {/if}
         </button>
@@ -179,16 +179,6 @@ function switchMode() {
 </section>
 
 <!-- TODO: center images should scale down to fit inside of #transition-container -->
-
-<svelte:head>
-  <style>
-    button > svg {
-      width: 50%;
-      max-height: 20em;
-    }
-  </style>
-</svelte:head>
-
 <style>
 section {
   position: relative;
@@ -211,29 +201,34 @@ section {
 
 /* For aligning text under cameron-face */
 #centered-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
   position: relative;
   width: 100%;
 }
 
 button {
-  width: 100%;
   padding-bottom: min(20px, 3%);
-  filter: drop-shadow(0 0 32px black);
+  filter: drop-shadow(0 0 32px #000);
   cursor: pointer;
-}
 
-.cameron-face {
-  max-height: 40em;
-  width: 80%;
-  height: auto;
-  object-fit: contain;
+  .hopperelec-mode & {
+    height: 20em;
+    width: 50%;
+  }
+
+  .cameron-mode & {
+    height: 40em;
+    width: 80%;
+  }
 }
 
 p {
+  /* These are required for the transition to work */
   display: flex;
   flex-direction: column;
   align-items: center;
-  position: absolute;
   width: 100%;
 
   /* Hide whitespace surrounding name-img */
@@ -257,6 +252,7 @@ p {
   @media (width > 700px) { /* When 2vw is greater than 14px, the minimum font size */
     /* Show text partially over hair of cameron-face */
     .cameron-mode & {
+      position: absolute;
       bottom: 20%;
     }
   }
@@ -282,6 +278,6 @@ p {
   max-height: 25%;
   width: auto;
   height: auto;
-  filter: drop-shadow(0 0 8px black);
+  filter: drop-shadow(0 0 8px #000);
 }
 </style>
diff --git a/src/routes/Projects.svelte b/src/routes/Projects.svelte
@@ -41,7 +41,7 @@ const files: MonacoFile[] = Object.entries(
 <style>
 section {
   height: 90vh;
-  box-shadow: 0 0 10vh 32px black;
+  box-shadow: 0 0 10vh 32px #000;
   margin-top: 10vh;
   z-index: 1;
   position: relative;

diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte
@@ -0,0 +1,85 @@
+<script>
+import { goto } from "$app/navigation";
+import CameronFace from "$lib/components/CameronFace.svelte";
+import CameronText from "$lib/components/CameronText.svelte";
+import NavBar from "$lib/components/NavBar.svelte";
+import HopperIcon from "$lib/components/hopper-logo/HopperIcon.svelte";
+import HopperelecText from "$lib/components/hopper-logo/HopperelecText.svelte";
+</script>
+
+<div id="page-container">
+  <NavBar/>
+  <main>
+    <span>
+      When you refer to "hopperelec", you're actually referring to one of two things. Either:
+      <ul>
+        <li>My online portfolio, primarily from my GitHub</li>
+        <li>Me, Cameron Johnston, and my username</li>
+      </ul>
+      So, this about section is split into two parts, corresponding to each of the above.
+    </span>
+    <div id="buttons">
+      <button id="hopperelec-button" type="button" on:click={() => goto("hopperelec")}>
+        <div class="icon">
+          <HopperIcon fillColor="#646464" outlineColor="#fff" outlineWidth={6} typeOf3D="stroke" padding={{top: 3, right: 3, bottom: 3, left: 3}} scale={null}/>
+        </div>
+        <div class="text">
+          <HopperelecText/>
+        </div>
+      </button>
+      <button id="cameron-button" type="button" on:click={() => goto("cameron")}>
+        <div class="icon">
+          <CameronFace/>
+        </div>
+        <div class="text">
+          <CameronText color="#fff" thickness={100}/>
+        </div>
+      </button>
+    </div>
+  </main>
+</div>
+
+<style>
+#page-container {
+  min-height: 100vh;
+  background: #333;
+  color: #fff;
+}
+
+main {
+  padding: .5em 1em;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+#buttons {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+}
+
+button {
+  font-size: 3em;
+  margin: .25em 1em;
+}
+
+.icon {
+  width: 6em;
+
+  #cameron-button > & {
+    height: 8.4em; /* Hard-coded */
+  }
+}
+
+#cameron-button {
+  position: relative;
+
+  & > .text {
+    width: 100%;
+    position: absolute;
+    bottom: 0.8em;
+  }
+}
+</style>