🐭 feat: responsive design, more peeps, fix at view transitions

jamerrq · Jan 10, 2024 · 9413e9f · 9413e9f
1 parent 2707101
commit 9413e9f
Show file tree

Hide file tree

Showing 24 changed files with 249 additions and 63 deletions.
diff --git a/package.json b/package.json
@@ -13,7 +13,7 @@
   "scripts": {
     "dev": "astro dev",
     "start": "astro dev",
-    "build": "astro check && astro build",
+    "build": "bun run lint && astro check && astro build",
     "preview": "deno run --allow-net --allow-read --allow-env ./dist/server/entry.mjs",
     "astro": "astro",
     "lint": "prettier --write \"**/*.{js,jsx,ts,tsx,md,mdx,astro}\" && eslint --fix \"src/**/*.{js,ts,jsx,tsx,astro}\""

diff --git a/src/components/about-me-card.astro b/src/components/about-me-card.astro
@@ -75,7 +75,7 @@ const ABOUT_ME_STYLES = [
       </p>
       <p>
         <p class='font-fira inline'>󰛓</p>
-        The best way to get something done is to begin.
+        I strongly believe that the best way to achieve something is to start it
       </p>
     </div>
     <!-- <img

diff --git a/src/components/bento.astro b/src/components/bento.astro
@@ -10,7 +10,8 @@ import Socials from './socials.astro'
 
 const BENTO_STYLES = [
   'bg-[#1b383c]',
-  'grid',
+  'hidden',
+  'xl:grid',
   'items-center',
   'justify-center',
   'w-[95dvw]',

diff --git a/src/components/blog.astro b/src/components/blog.astro
@@ -5,8 +5,8 @@ const BLOG_STYLES = [
   'gap-2',
   'bg-slate-300',
   'rounded-sm',
-  // 'shadow-[0_0_0.5rem_rgba(0_0_0_0.5)]',
-  'shadow-[0_0_0.5rem_rgb(0_0_0)]',
+  'shadow-[0_0_0.3rem_rgb(69_26_3)]', // rgb(69, 26, 3)
+  'dark:shadow-[0_0_0.3rem_rgb(253_230_138)]', // rgb(253, 230, 138)
   'flex',
   'items-center',
   'justify-center',

diff --git a/src/components/buttons.astro b/src/components/buttons.astro
@@ -153,4 +153,5 @@ const BUTTON_STYLES = [
 
   setHomeRandomButton()
   document.addEventListener('astro:after-preparation', setHomeRandomButton)
+  document.addEventListener('astro:after-swap', setHomeRandomButton)
 </script>
diff --git a/src/components/css-peeps/404-peep.astro b/src/components/css-peeps/404-peep.astro
@@ -0,0 +1,22 @@
+<div class='css-peeps'></div>
+<style>
+  @import url(https://unpkg.com/css-peeps@1/css-peeps.css);
+
+  .css-peeps {
+    --peep-head: twists1;
+    --peep-face: gasp;
+    --peep-body: coffee;
+
+    --peep-hat-color: #fc03c2;
+    --peep-hair-color: #7300e6;
+    --peep-skin-color: #96634e;
+    --peep-accessory-color: #00ff00;
+    --peep-facial-hair-color: #ffd700;
+    --peep-object-color: #3178c6;
+    --peep-clothes-color: #000;
+
+    width: 125px;
+    height: 125px;
+    border-radius: 10px;
+  }
+</style>
diff --git a/src/components/css-peeps/calm-laptop.astro b/src/components/css-peeps/calm-laptop.astro
@@ -11,8 +11,8 @@
     --peep-object-color: #ffa500;
     --peep-clothes-color: #000000;
 
-    width: 125px;
-    height: 125px;
+    width: 135px;
+    height: 135px;
     border-radius: 10px;
   }
 </style>
diff --git a/src/components/css-peeps/responsive-peep.astro b/src/components/css-peeps/responsive-peep.astro
@@ -0,0 +1,23 @@
+<div class='css-peeps'></div>
+<style>
+  @import url(https://unpkg.com/css-peeps@1/css-peeps.css);
+
+  .css-peeps {
+    --peep-head: twists1;
+    --peep-face: cute;
+    --peep-facial-hair: mustache1;
+    --peep-body: phone;
+
+    --peep-hat-color: #fc03c2;
+    --peep-hair-color: #7300e6;
+    --peep-skin-color: #96634e;
+    --peep-accessory-color: #00ff00;
+    --peep-facial-hair-color: #ffd700;
+    --peep-object-color: #ffa500;
+    --peep-clothes-color: #34d399;
+
+    width: 125px;
+    height: 125px;
+    border-radius: 10px;
+  }
+</style>
diff --git a/src/components/css-peeps/striped-pocket-tee-light.astro b/src/components/css-peeps/striped-pocket-tee-light.astro
@@ -0,0 +1,22 @@
+<div class='css-peeps dark:hidden'></div>
+<style>
+  @import url(https://unpkg.com/css-peeps@1/css-peeps.css);
+
+  .css-peeps {
+    --peep-head: twists1;
+    --peep-face: suspicious;
+    --peep-body: sweater-crossed;
+
+    --peep-hat-color: #fc03c2;
+    --peep-hair-color: #7300e6;
+    --peep-skin-color: #96634e;
+    /* --peep-accessory-color: #00ff00; */
+    /* --peep-facial-hair-color: #ffd700; */
+    --peep-object-color: #ffa500;
+    --peep-clothes-color: #fff;
+
+    width: 135px;
+    height: 135px;
+    border-radius: 10px;
+  }
+</style>
diff --git a/src/components/css-peeps/striped-pocket-tee.astro b/src/components/css-peeps/striped-pocket-tee.astro
@@ -1,4 +1,4 @@
-<div class='css-peeps'></div>
+<div class='css-peeps hidden dark:block'></div>
 <style>
   @import url(https://unpkg.com/css-peeps@1/css-peeps.css);
 
@@ -15,8 +15,8 @@
     --peep-object-color: #ffa500;
     --peep-clothes-color: #34d399;
 
-    width: 125px;
-    height: 125px;
+    width: 135px;
+    height: 135px;
     border-radius: 10px;
   }
 </style>
diff --git a/src/components/css-peeps/tech-peep-light.astro b/src/components/css-peeps/tech-peep-light.astro
@@ -0,0 +1,23 @@
+<div>
+  <div
+    class='peepo dark:hidden'
+    data-css-peeps='twists1 suspicious laptop glasses1'
+  >
+  </div>
+  <style>
+    @import url(https://unpkg.com/css-peeps@1/css-peeps.css);
+
+    .peepo {
+      --peep-hat-color: #fc03c2;
+      --peep-skin-color: #96634e;
+      --peep-hair-color: #7300e6;
+      --peep-accessory-color: #00ff00;
+      --peep-facial-hair-color: #ffd700;
+      --peep-object-color: #d97706;
+      --peep-clothes-color: #fff;
+
+      width: 135px;
+      height: 135px;
+    }
+  </style>
+</div>
diff --git a/src/components/css-peeps/tech-peep.astro b/src/components/css-peeps/tech-peep.astro
@@ -0,0 +1,23 @@
+<div>
+  <div
+    class='peepo hidden dark:block'
+    data-css-peeps='twists1 calm laptop glasses1'
+  >
+  </div>
+  <style>
+    @import url(https://unpkg.com/css-peeps@1/css-peeps.css);
+
+    .peepo {
+      --peep-hat-color: #fc03c2;
+      --peep-skin-color: #96634e;
+      --peep-hair-color: #7300e6;
+      --peep-accessory-color: #00ff00;
+      --peep-facial-hair-color: #ffd700;
+      --peep-object-color: #d97706;
+      --peep-clothes-color: #000000;
+
+      width: 135px;
+      height: 135px;
+    }
+  </style>
+</div>
diff --git a/src/components/featured.astro b/src/components/featured.astro
@@ -6,7 +6,8 @@ const FEATURED_STYLES = [
   'gap-2',
   'bg-slate-300',
   'rounded-sm',
-  'shadow-[0_0_0.5rem_rgb(0_0_0)]',
+  'shadow-[0_0_0.3rem_rgb(69_26_3)]', // rgb(69, 26, 3)
+  'dark:shadow-[0_0_0.3rem_rgb(253_230_138)]', // rgb(253, 230, 138)
   'flex',
   'flex-col',
   'items-center',

diff --git a/src/components/responsive-container.astro b/src/components/responsive-container.astro
@@ -0,0 +1,50 @@
+---
+import ResponsivePeep from './css-peeps/responsive-peep.astro'
+---
+
+<style>
+  .container {
+    width: 50dvw;
+    min-height: 50dvh;
+    display: grid;
+    align-items: center;
+    justify-items: center;
+    color: white;
+    border-radius: 0.5rem;
+    background-color: #1b383c;
+    font-family: 'Rubik Doodle Shadow', fira, sans-serif;
+    /* font-size: 2rem; */
+    text-align: center;
+    padding: 0.5rem;
+    box-shadow: 0 0.05rem 0 0.1rem #000;
+    border: 1px solid white;
+    font-weight: 600;
+    /* gap: 0.25rem; */
+  }
+
+  #blur_background {
+    filter: blur(1px);
+    z-index: -1;
+    width: 100vw;
+    height: 100vh;
+    position: fixed;
+    background-image: url('/pizarra.webp');
+  }
+</style>
+
+<div class='xl:hidden block'>
+  <div id='blur_background'></div>
+  <main class='w-[100dvw] h-[100dvh] grid place-content-center bg-black'>
+    <div class='responsive-text container'>
+      <h1>You caught me</h1>
+      <ResponsivePeep />
+      <p class='responsive-text-xxs font-fira'>
+        The responsive design for this page is still in progress.
+        <br />
+        I invite you to visit it from a computer or a tablet to get the best experience.
+        <br />
+        But don't hesitate! I'm hardly working on this and I'll be done soon 🤘.
+      </p>
+    </div>
+  </main>
+</div>
diff --git a/src/components/socials.astro b/src/components/socials.astro
@@ -35,9 +35,9 @@ const SOCIALS_STYLES: string = [
 
 <article class={SOCIALS_STYLES} title='My Links'>
   <div class='flex gap-2 justify-center text-black'>
-    <p class='font-fira'></p>
+    <!-- <p class='font-fira'></p> -->
     <p class='font-semibold'>Contact</p>
-    <p class='font-fira'></p>
+    <p class='font-fira'>󰶈</p>
   </div>
   <div class='flex justify-around [&>a]:font-fira'>
     <!-- GitHub -->

diff --git a/src/components/tech-stack.astro b/src/components/tech-stack.astro
@@ -1,11 +1,12 @@
 ---
-const TECH_STACK_STYLES = [
+const TECH_STACK_STYLES: string = [
   'col-span-2',
   'row-span-3',
   'bg-slate-300',
   'rounded-sm',
   // 'shadow-[0_0_0.5rem_rgba(0_0_0_0.5)]',
-  'shadow-[0_0_0.5rem_rgb(0_0_0)]',
+  'shadow-[0_0_0.3rem_rgb(69_26_3)]', // rgb(69, 26, 3)
+  'dark:shadow-[0_0_0.3rem_rgb(253_230_138)]', // rgb(253, 230, 138)
   'flex',
   'flex-col',
   'gap-2',

diff --git a/src/components/tech-stack/bento.astro b/src/components/tech-stack/bento.astro
@@ -10,7 +10,8 @@ import Languages from './languages.astro'
 
 const BENTO_STYLES = [
   'bg-[#1b383c]',
-  'grid',
+  'hidden',
+  'xl:grid',
   'items-center',
   'justify-center',
   'w-[95dvw]',

diff --git a/src/components/tech-stack/title.astro b/src/components/tech-stack/title.astro
@@ -1,5 +1,6 @@
 ---
-import CalmPeep from '../css-peeps/calm-laptop.astro'
+import TechPeep from '../css-peeps/tech-peep.astro'
+import TechPeepLight from '../css-peeps/tech-peep-light.astro'
 const TITLE_STYLES: string = [
   'row-span-2',
   'col-span-2',
@@ -16,14 +17,17 @@ const TITLE_STYLES: string = [
   'justify-center',
   'flex-row',
   'font-rubik-doodle',
-  'shadow-[0_0_0.5rem_rgba(0_0_0)]'
+  // 'shadow-[0_0_0.5rem_rgba(0_0_0)]'
+  'shadow-[0_0_0.3rem_rgb(69_26_3)]', // rgb(69, 26, 3)
+  'dark:shadow-[0_0_0.3rem_rgb(253_230_138)]' // rgb(253, 230, 138)
 ].join(' ')
 ---
 
 <a class={TITLE_STYLES} transition:name='tech-stack' href='/'>
   <div class='flex flex-col'>
     <p class='font-semibold responsive-text-xs'>Tech Stack </p>
-    <p class='font-semibold'>Artists have brushes, <br /> I got these.</p>
+    <p class='font-semibold'>Painters have brushes, <br /> I got these.</p>
   </div>
-  <CalmPeep />
+  <TechPeep />
+  <TechPeepLight />
 </a>
diff --git a/src/components/tech-stack/web-dev.astro b/src/components/tech-stack/web-dev.astro
@@ -2,7 +2,7 @@
 const WEB_DEV_STYLES = [
   'col-span-2',
   'row-span-4',
-  'gap-2',
+  'gap-1',
   'bg-slate-300',
   'rounded-sm',
   'shadow-[0_0_0.5rem_rgba(0_0_0_0.5)]',
@@ -43,7 +43,7 @@ const WEB_DEV_STYLES = [
     <h1 class=''>Web Development</h1>
     <p class='font-thin'>󰜫</p>
   </header>
-  <ul class='responsive-text-sm p-4 w-full flex flex-col gap-1'>
+  <ul class='responsive-text-xxs p-1 w-full flex flex-col gap-1'>
     <li>
       <header class='flex gap-2'>
         <h2>Backend</h2>
@@ -214,8 +214,8 @@ const WEB_DEV_STYLES = [
             />
           </a>
         </li>
+        <!-- SASS -->
         <li>
-          <!-- SASS -->
           <a
             href='https://sass-lang.com/'
             target='_blank'
@@ -228,8 +228,8 @@ const WEB_DEV_STYLES = [
             />
           </a>
         </li>
+        <!-- CSS -->
         <li>
-          <!-- CSS -->
           <a
             href='https://developer.mozilla.org/en-US/docs/Web/CSS'
             target='_blank'
@@ -242,8 +242,8 @@ const WEB_DEV_STYLES = [
             />
           </a>
         </li>
+        <!-- HTML -->
         <li>
-          <!-- HTML -->
           <a
             href='https://developer.mozilla.org/en-US/docs/Web/HTML'
             target='_blank'