From 9e8b8489a2019dfc6082e35c60928d172a4d824b Mon Sep 17 00:00:00 2001
From: cyphersept <95666934+cyphersept@users.noreply.github.com>
Date: Fri, 28 Jun 2024 03:04:00 -0400
Subject: [PATCH] add iframes

---
 index.html         |  63 +++++++++---------
 src/input.css      |  63 ++++++++++++++++--
 src/output.css     |  84 ++++++++++++++++++++----
 tailwind.config.js | 155 ++++++++++++++++++++++++++-------------------
 4 files changed, 252 insertions(+), 113 deletions(-)

diff --git a/index.html b/index.html
index d1a091f..21bf8c5 100644
--- a/index.html
+++ b/index.html
@@ -34,7 +34,7 @@ <h3 class="tagline text-xl text-zinc-800 mb-8"></h2>
         </nav>
     </aside>
 
-    <main class="right h-[80vh] px-8 snap-x snap-mandatory overflow-auto no-scrollbar">
+    <main class="right h-[80vh] px-8 snap-y snap-mandatory scroll-smooth overflow-auto no-scrollbar">
         <section id="about" class="min-h-[80vh] p-8">
             <h2 class="text-3xl font-bold mb-8 text-r-red-2">About</h2>
         </section>
@@ -60,8 +60,8 @@ <h3 class="">Others</h3>
                 <li>Some proficiency in French</li>
             </ul>
         </section>
-        <section id="projects" class="min-h-[80vh] p-8">
-            <nav>
+        <section id="projects" class="min-h-[80vh] h-[80vh] p-8 relative">
+            <nav class="absolute">
                 <ul class="flex gap-2">
                     <li>
                     <a href="#repalette" onclick="showSection(this, 'repalette')" class="rounded-xl text-r-gray-5 pt-1 pb-2 hover:underline decoration-4 underline-offset-[1em] decoration-r-teal-3 bg-r-teal-3 selected">&nbsp;&nbsp;&nbsp;repalette&nbsp;&nbsp;&nbsp;</a>
@@ -83,32 +83,34 @@ <h3 class="">Others</h3>
                     </li>
                 </ul>
             </nav>
-            
-            <h2 class="text-3xl font-bold my-8 text-r-teal-2">Projects</h2>
 
-            <section id="repalette" class="not-hidden scroll-mt-36">
-                <h3>Repalette</h3>
-                <div class="text-xl text-zinc-800">One-page pixel art bulk recolouring tool</div>
+            <section id="repalette" class="flex scroll-mt-36 h-full flex-col">
+                <h2 class="text-3xl font-bold mt-14 text-r-teal-2">Projects — Repalette</h2>
+                <h3 class="text-xl my-2">One-page pixel art bulk recolouring tool</h3>
             </section>
-            <section id="doodle" class="hidden scroll-mt-36">
-                <h3>Etch-a-Sketch</h3>
-                <div class="text-xl">Digital doodling</div>
+            <section id="doodle" class="hidden scroll-mt-36 h-full flex-col">
+                <h2 class="text-3xl font-bold mt-14 text-r-teal-2">Projects — Etch-a-Sketch</h2>
+                <h3 class="text-xl my-2">Digital doodling</h3>
+                <div class="grow"><iframe src="https://cyphersept.github.io/small-projects/etch" sandbox="allow-scripts" loading="lazy" style="--scalar: 0.8" class="rounded-xl"></iframe></div>
             </section>
-            <section id="rps" class="hidden scroll-mt-36">
-                <h3>Rock Paper Scissors</h3>
-                <div class="text-xl">Best of three</div>
+            <section id="rps" class="hidden scroll-mt-36 h-full flex-col">
+                <h2 class="text-3xl font-bold mt-14 text-r-teal-2">Projects — Rock Paper Scissors</h2>
+                <h3 class="text-xl my-2">Best of three</h3>
+                <div class="grow"><iframe src="https://cyphersept.github.io/small-projects/rps" sandbox="allow-scripts" loading="lazy" style="--scalar: 0.8" class="rounded-xl"></iframe></div>
             </section>
-            <section id="calculate" class="hidden scroll-mt-36">
-                <h3>Calculator</h3>
-                <div class="text-xl">Classic four function calculator, like you used to have</div>
+            <section id="calculate" class="hidden scroll-mt-36 h-full flex-col">
+                <h2 class="text-3xl font-bold mt-14 text-r-teal-2">Projects — Calculator</h2>
+                <h3 class="text-xl my-2">Classic four function calculator, like you used to have</h3>
+                <div class="grow"><iframe src="https://cyphersept.github.io/small-projects/calculator" sandbox="allow-scripts" loading="lazy" style="--scalar: 0.8" class="rounded-xl"></iframe></div>
             </section>
-            <section id="signup" class="hidden scroll-mt-36">
-                <h3>Signup Page</h3>
-                <div class="text-xl">Create an account for a totally real service</div>
+            <section id="signup" class="hidden scroll-mt-36 h-full flex-col">
+                <h2 class="text-3xl font-bold mt-14 text-r-teal-2">Projects — Signup Page</h2>
+                <h3 class="text-xl my-2">Create an account for a totally real service</h3>
+                <div class="grow"><iframe src="https://cyphersept.github.io/small-projects/signup" sandbox="allow-scripts" loading="lazy" style="--scalar: 0.8" class="rounded-xl"></iframe></div>
             </section>
-            <section id="dressup" class="hidden scroll-mt-36">
-                <h3>Dressup Game Maker (WIP)</h3>
-                <div class="text-xl">Lightweight app for creating HTML paperdolls with zero code</div>                
+            <section id="dressup" class="hidden scroll-mt-36 h-full flex-col">
+                <h2 class="text-3xl font-bold mt-14 text-r-teal-2">Projects — Dressup Game Maker (WIP)</h2>
+                <h3 class="text-xl my-2">Lightweight app for creating HTML paperdolls with zero code</div>            h3 
             </section>
         </section>
         <section id="contact" class="min-h-[80vh] p-8">
@@ -129,13 +131,13 @@ <h2 class="text-3xl font-bold mb-8 text-r-orange-4">Contact Me</h2>
 <script>
     function showSection(nav, id, ancestorId="projects") {
         const ancestor = document.getElementById(ancestorId);
-        const prev = ancestor.querySelector(".not-hidden");
+        const prev = ancestor.querySelector("section.flex");
         const next = document.getElementById(id);
 
         // Hides all but selected section
-        prev.classList.remove("not-hidden");
+        prev.classList.remove("flex");
         prev.classList.add("hidden");
-        next.classList.add("not-hidden");
+        next.classList.add("flex");
         next.classList.remove("hidden");
 
         // Selects element in nav
@@ -152,15 +154,16 @@ <h2 class="text-3xl font-bold mb-8 text-r-orange-4">Contact Me</h2>
     // });
 
 /*  TO-DO:
-    - setup jquery
-    - smooth scroll animations
+    - https://www.youtube.com/watch?v=UmzFk68Bwdk use for scroll animations? else jquery
 
     - record demo gifs
     - add and style links to page and source code, lazy embed??
 
-    - host old projects
-
     - create illustrations
+
+    FINISHED:
+    - smooth scroll animations
+    - host old projects
 */
 </script>
 </html>
\ No newline at end of file
diff --git a/src/input.css b/src/input.css
index b1cc4b9..218f0a4 100644
--- a/src/input.css
+++ b/src/input.css
@@ -2,6 +2,15 @@
 @tailwind components;
 @tailwind utilities;
 
+@layer base {
+    iframe {
+        --scalar: 1;
+        transform: scale(var(--scalar));
+        transform-origin: top left;
+        width: calc(1/var(--scalar) * 100%);
+        height: calc(1/var(--scalar) * 100%);
+    }
+}
 @layer components {
     aside a {
         @apply inline-block w-36 ml-4 align-middle py-1.5 text-center text-lg rounded-xl text-r-gray-5;
@@ -9,9 +18,6 @@
     main > section {
         @apply snap-center snap-always text-zinc-950;
     }
-    main h3 {
-        @apply text-2xl font-bold my-4;
-    }
     main li {
         margin-bottom: 4px;
     }
@@ -25,14 +31,59 @@
         background-size: cover;
         vertical-align: bottom;
     }
+
     .selected {
         text-decoration-line: underline;
     }
+
     .no-scrollbar::-webkit-scrollbar {
         display: none;
+        }
+        .no-scrollbar {
+            -ms-overflow-style: none; 
+            scrollbar-width: none;
+    }
+
+    .hoverline {
+        position: relative;
+        }
+        
+        .hoverline::before {
+        content: "";
+        position: absolute;
+        display: block;
+        width: 100%;
+        height: 4px;
+        bottom: 0;
+        left: 0;
+        background-color: inherit;
+        transform: scaleX(0);
+        transition: transform 0.3s ease;
+        }
+        
+        .hoverline:hover::before {
+        transform: scaleX(1);
+    }
+    
+    .skinny-scroll {
+        scrollbar-width: thin;
+        scrollbar-color: var(--c2) var(--c1);
+    }
+    
+    /* Chrome, Edge, and Safari */
+    .skinny-scroll::-webkit-scrollbar {
+        width: 10px;
+        border-radius: 5px;
+    }
+    
+    .skinny-scroll::-webkit-scrollbar-track {
+        background: var(--c1);
+        border-radius: 5px;
     }
-    .no-scrollbar {
-        -ms-overflow-style: none; 
-        scrollbar-width: none;
+    
+    .skinny-scroll::-webkit-scrollbar-thumb {
+        background-color: var(--c2);
+        border-radius: 5px;
     }
+      
 }
\ No newline at end of file
diff --git a/src/output.css b/src/output.css
index 34f08b2..6c6f446 100644
--- a/src/output.css
+++ b/src/output.css
@@ -446,6 +446,14 @@ video {
   display: none;
 }
 
+iframe {
+  --scalar: 1;
+  transform: scale(var(--scalar));
+  transform-origin: top left;
+  width: calc(1/var(--scalar) * 100%);
+  height: calc(1/var(--scalar) * 100%);
+}
+
 *, ::before, ::after {
   --tw-border-spacing-x: 0;
   --tw-border-spacing-y: 0;
@@ -576,14 +584,6 @@ main > section {
   color: rgb(9 9 11 / var(--tw-text-opacity));
 }
 
-main h3 {
-  margin-top: 1rem;
-  margin-bottom: 1rem;
-  font-size: 1.5rem;
-  line-height: 2rem;
-  font-weight: 700;
-}
-
 main li {
   margin-bottom: 4px;
 }
@@ -612,9 +612,19 @@ main li {
   scrollbar-width: none;
 }
 
-.my-8 {
-  margin-top: 2rem;
-  margin-bottom: 2rem;
+/* Chrome, Edge, and Safari */
+
+.absolute {
+  position: absolute;
+}
+
+.relative {
+  position: relative;
+}
+
+.my-2 {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
 }
 
 .mb-4 {
@@ -633,6 +643,26 @@ main li {
   margin-right: 1rem;
 }
 
+.mt-8 {
+  margin-top: 2rem;
+}
+
+.mt-9 {
+  margin-top: 2.25rem;
+}
+
+.mt-10 {
+  margin-top: 2.5rem;
+}
+
+.mt-16 {
+  margin-top: 4rem;
+}
+
+.mt-14 {
+  margin-top: 3.5rem;
+}
+
 .inline {
   display: inline;
 }
@@ -653,6 +683,18 @@ main li {
   height: 100vh;
 }
 
+.h-\[calc\(100\%-\)\] {
+  height: calc(100% - );
+}
+
+.h-\[calc\(100\%-9rem\)\] {
+  height: calc(100% - 9rem);
+}
+
+.h-full {
+  height: 100%;
+}
+
 .min-h-\[80vh\] {
   min-height: 80vh;
 }
@@ -661,8 +703,16 @@ main li {
   width: 100vw;
 }
 
-.snap-x {
-  scroll-snap-type: x var(--tw-scroll-snap-strictness);
+.w-full {
+  width: 100%;
+}
+
+.grow {
+  flex-grow: 1;
+}
+
+.snap-y {
+  scroll-snap-type: y var(--tw-scroll-snap-strictness);
 }
 
 .snap-mandatory {
@@ -685,6 +735,10 @@ main li {
   justify-content: center;
 }
 
+.justify-between {
+  justify-content: space-between;
+}
+
 .gap-2 {
   gap: 0.5rem;
 }
@@ -697,6 +751,10 @@ main li {
   overflow: auto;
 }
 
+.scroll-smooth {
+  scroll-behavior: smooth;
+}
+
 .rounded-xl {
   border-radius: 0.75rem;
 }
diff --git a/tailwind.config.js b/tailwind.config.js
index 5776199..fe2a485 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -10,70 +10,97 @@ module.exports = {
       transparent: 'transparent',
       current: 'currentColor',
       zinc: colors.zinc,
-      'r-brown-1': '#2e222f',
-      'r-brown-2': '#3e3546',
-      'r-brown-3': '#625565',
-      'r-brown-4': '#966c6c',
-      'r-brown-5': '#ab947a',
-      'r-gray-1': '#694f62',
-      'r-gray-2': '#7f708a',
-      'r-gray-3': '#9babb2',
-      'r-gray-4': '#c7dcd0',
-      'r-gray-5': '#ffffff',
-      'r-red-1': '#6e2727',
-      'r-red-2': '#b33831',
-      'r-red-3': '#ea4f36',
-      'r-red-4': '#f57d4a',
-      'r-orange-1': '#ae2334',
-      'r-orange-2': '#e83b3b',
-      'r-orange-3': '#fb6b1d',
-      'r-orange-4': '#f79617',
-      'r-orange-5': '#f9c22b',
-      'r-yellow-1': '#7a3045',
-      'r-yellow-2': '#9e4539',
-      'r-yellow-3': '#cd683d',
-      'r-yellow-4': '#e6904e',
-      'r-yellow-5': '#fbb954',
-      'r-lime-1': '#4c3e24',
-      'r-lime-2': '#676633',
-      'r-lime-3': '#a2a947',
-      'r-lime-4': '#d5e04b',
-      'r-lime-5': '#fbff86',
-      'r-green-1': '#165a4c',
-      'r-green-2': '#239063',
-      'r-green-3': '#1ebc73',
-      'r-green-4': '#91db69',
-      'r-green-5': '#cddf6c',
-      'r-evergreen-1': '#313638',
-      'r-evergreen-2': '#374e4a',
-      'r-evergreen-3': '#547e64',
-      'r-evergreen-4': '#92a984',
-      'r-evergreen-5': '#b2ba90',
-      'r-teal-1': '#0b5e65',
-      'r-teal-2': '#0b8a8f',
-      'r-teal-3': '#0eaf9b',
-      'r-teal-4': '#30e1b9',
-      'r-teal-5': '#8ff8e2',
-      'r-blue-1': '#323353',
-      'r-blue-2': '#484a77',
-      'r-blue-3': '#4d65b4',
-      'r-blue-4': '#4d9be6',
-      'r-blue-5': '#8fd3ff',
-      'r-purple-1': '#45293f',
-      'r-purple-2': '#6b3e75',
-      'r-purple-3': '#905ea9',
-      'r-purple-4': '#a884f3',
-      'r-purple-5': '#eaaded',
-      'r-mauve-1': '#753c54',
-      'r-mauve-2': '#a24b6f',
-      'r-mauve-3': '#cf657f',
-      'r-mauve-4': '#ed8099',
-      'r-pink-1': '#831c5d',
-      'r-pink-2': '#c32454',
-      'r-pink-3': '#f04f78',
-      'r-pink-4': '#f68181',
-      'r-pink-5': '#fca790',
-      'r-pink-6': '#fdcbb0',
+      'white': '#ffffff',
+      'r-brown': {
+        1: '#2e222f',
+        2: '#3e3546',
+        3: '#625565',
+        4: '#966c6c',
+        5: '#ab947a'
+      },
+      'r-gray': {
+        1: '#694f62',
+        2: '#7f708a',
+        3: '#9babb2',
+        4: '#c7dcd0',
+        5: '#ffffff'
+      },
+      'r-red': {
+        1: '#6e2727',
+        2: '#b33831',
+        3: '#ea4f36',
+        4: '#f57d4a'
+      },
+      'r-orange': {
+        1: '#ae2334',
+        2: '#e83b3b',
+        3: '#fb6b1d',
+        4: '#f79617',
+        5: '#f9c22b'
+      },
+      'r-yellow': {
+        1: '#7a3045',
+        2: '#9e4539',
+        3: '#cd683d',
+        4: '#e6904e',
+        5: '#fbb954'
+      },
+      'r-lime': {
+        1: '#4c3e24',
+        2: '#676633',
+        3: '#a2a947',
+        4: '#d5e04b',
+        5: '#fbff86'
+      },
+      'r-green': {
+        1: '#165a4c',
+        2: '#239063',
+        3: '#1ebc73',
+        4: '#91db69',
+        5: '#cddf6c'
+      },
+      'r-evergreen': {
+        1: '#313638',
+        2: '#374e4a',
+        3: '#547e64',
+        4: '#92a984',
+        5: '#b2ba90'
+      },
+      'r-teal': {
+        1: '#0b5e65',
+        2: '#0b8a8f',
+        3: '#0eaf9b',
+        4: '#30e1b9',
+        5: '#8ff8e2'
+      },
+      'r-blue': {
+        1: '#323353',
+        2: '#484a77',
+        3: '#4d65b4',
+        4: '#4d9be6',
+        5: '#8fd3ff'
+      },
+      'r-purple': {
+        1: '#45293f',
+        2: '#6b3e75',
+        3: '#905ea9',
+        4: '#a884f3',
+        5: '#eaaded'
+      },
+      'r-mauve': {
+        1: '#753c54',
+        2: '#a24b6f',
+        3: '#cf657f',
+        4: '#ed8099'
+      },
+      'r-pink': {
+        1: '#831c5d',
+        2: '#c32454',
+        3: '#f04f78',
+        4: '#f68181',
+        5: '#fca790',
+        6: '#fdcbb0',
+      }
     }
   },
   plugins: [],