🎨 improving styless

README.md → readme.md

@@ -4,22 +4,33 @@ Source code for my personal website, [jamerrq.dev](https://jamerrq.dev).
 
 ### Dark Mode
 
-![v3_dark](./lib/v3_dark.png)
+![v4_dark](./lib/v4_dark.png)
 
 ### Light Mode
 
-![v3_light](./lib/v3_light.png)
+![v4_light](./lib/v4_light.png)
 
 ### LightHouse Report
 
 ![LightHouse Score](./lib/lighthouse.png)
 
+## Pages 📄
+
+### Tech Stack
+
+![Tech Stack](./lib/pages/tech-stack.png)
+
+### 404
+
+![404](./lib/pages/404.png)
+
+> [!NOTE]
+> Other pages are still under development 🚧. As well as the translations.
+
 ## Stack 🥞
 
 ![Astro](https://img.shields.io/badge/-Astro-000000?style=flat-square&logo=astro&logoColor=white)
-![TypeScript](https://img.shields.io/badge/-TypeScript-007ACC?style=flat-square&logo=typescript&logoColor=white)
-![Tailwind
-CSS](https://img.shields.io/badge/-Tailwind%20CSS-38B2AC?style=flat-square&logo=tailwind-css&logoColor=white)
+![Tailwind CSS](https://img.shields.io/badge/-Tailwind%20CSS-38B2AC?style=flat-square&logo=tailwind-css&logoColor=white)
 
 ### Tooling 🛠️
 
@@ -37,3 +48,5 @@ CSS](https://img.shields.io/badge/-Tailwind%20CSS-38B2AC?style=flat-square&logo=
 - [Nerd Fonts Cheat Sheet](https://www.nerdfonts.com/cheat-sheet)
 - [Tailwind CSS Debug Screens](https://github.com/jorenvanhee/tailwindcss-debug-screens)
 - [Typed CSS](https://typedcss.com/)
+- [CSS Peeps](https://css-peeps.com/)
+- [Tailwind Cheat Sheet](https://tailwindcomponents.com/cheatsheet/)

src/components/about-me-card.astro

@@ -4,25 +4,25 @@ const ABOUT_ME_STYLES = [
   'row-span-2',
   'bg-slate-300',
   'dark:bg-slate-900',
-  'dark:text-slate-300',
   'rounded-sm',
   'shadow-[0_0_0.5rem_rgba(0_0_0_0.5)]',
   'flex',
   'items-center',
   'justify-center',
   'font-bold',
   'text-black',
+  'dark:text-slate-300',
   'font-rubik-doodle',
   'w-full',
   'h-full',
-  'transition-all',
+  // 'transition-all',
   'border-2',
-  'dark:border-slate-300',
-  'border-slate-950',
+  'border-emerald-950',
+  'dark:border-emerald-300',
   // 'hover:bg-slate-900',
   // 'hover:text-slate-300',
-  'hover:scale-[1.02]',
-  'hover:transition-all',
+  // 'hover:scale-[1.02]',
+  // 'hover:transition-all',
   'responsive-text-xs',
   'flex-col',
   '[&>p]:font-fira',
@@ -33,9 +33,9 @@ const ABOUT_ME_STYLES = [
 ---
 
 <article class={ABOUT_ME_STYLES} title='Get to know me'>
-  <h1>About Me</h1>
+  <h1 class='dark:text-emerald-300 text-emerald-950'>About Me</h1>
   <div
-    class='flex items-center p-2 justify-around w-full font-merriweather responsive-text-xxs'
+    class='flex items-center p-2 justify-around w-full font-merriweather responsive-text-xxs relative'
   >
     <div>
       <p class=''>
@@ -74,14 +74,15 @@ const ABOUT_ME_STYLES = [
         they offer.
       </p>
       <p>
-        <p class='font-fira inline'></p>
-        My goal is to build quality software that is secure and scalable.
+        <p class='font-fira inline'>󰛓</p>
+        The best way to get something done is to begin.
       </p>
     </div>
-    <img
+    <!-- <img
       src='/me2.webp'
       alt=''
-      class='w-[15%] h-auto rounded-sm border-2 border-slate-800 dark:border-slate-300 hidden lg:block'
-    />
+      class='w-[15%] h-auto rounded-sm border-2 border-emerald-800 dark:border-emerald-300 hidden lg:block'
+    /> -->
+    <!-- <CalmPeep /> -->
   </div>
 </article>

src/components/blog.astro

@@ -5,24 +5,25 @@ 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_rgba(0_0_0_0.5)]',
+  'shadow-[0_0_0.5rem_rgb(0_0_0)]',
   'flex',
   'items-center',
   'justify-center',
   'responsive-text',
   'font-bold',
-  'text-slate-950',
+  'text-amber-950',
+  'dark:text-amber-300',
   'font-rubik-doodle',
   'w-full',
   'h-full',
   'transition-all',
   'duration-200',
-  'dark: transition-all',
-  'dark:border-slate-300',
+  'dark:transition-all',
+  // 'dark:border-emerald-300',
   'border-2',
-  'border-slate-950',
+  'border-amber-500',
   'dark:bg-slate-900',
-  'dark:text-slate-300',
   'hover:scale-[1.02]',
   'hover:duration-200',
   'hover:ease-in-out'

src/components/buttons.astro

@@ -10,8 +10,8 @@ const BUTTONS_STYLES = [
   'justify-around',
   'responsive-text',
   'border-2',
-  'border-slate-950',
-  'dark:border-slate-300',
+  'border-emerald-950',
+  'dark:border-emerald-300',
   // 'bg-[#1b383c]',
   'text-slate-950',
   'font-rubik-doodle',
@@ -27,8 +27,8 @@ const BUTTONS_STYLES = [
 ].join(' ')
 
 const BUTTON_STYLES = [
-  'dark:hover:text-slate-300',
-  'hover:text-slate-100'
+  'dark:hover:text-emerald-300',
+  'hover:text-emerald-900'
   // 'hover:scale-110',
 ].join(' ')
 ---
@@ -37,7 +37,7 @@ const BUTTON_STYLES = [
   <!-- LANGUAGE SWITCH -->
   <button
     class={BUTTON_STYLES}
-    title='switch language en/es'
+    title='Switch language en/es'
     id='language-toggle'
   >
     
@@ -48,7 +48,7 @@ const BUTTON_STYLES = [
   </button>
   <button
     class={BUTTON_STYLES + ' hidden'}
-    title='go to a random page'
+    title='Go to a random page'
     id='random-place-button'
   >
     󰝮
@@ -57,8 +57,8 @@ const BUTTON_STYLES = [
   <button
     id='theme-toggle'
     type='button'
-    title='switch dark/light theme'
-    class='dark:hover:text-slate-300 hover:text-slate-100'
+    title='Switch dark/light theme'
+    class='dark:hover:text-emerald-300 hover:text-emerald-900'
   >
     <p id='theme-toggle-dark-icon' class='hidden'></p>
     <p id='theme-toggle-light-icon' class='hidden'></p>
@@ -68,8 +68,8 @@ const BUTTON_STYLES = [
     href='https://github.com/jamerrq/jamerrq.dev'
     target='_blank'
     rel='noopener noreferrer'
-    class='dark:hover:text-slate-300 hover:text-slate-100'
-    title='Source Code. Leave a star 🌟 if you like!'
+    class='dark:hover:text-emerald-300 hover:text-emerald-900'
+    title='Source code on GitHub'
   >
     
   </a>

src/components/css-peeps/calm-laptop.astro

@@ -0,0 +1,18 @@
+<div class='peepo' data-css-peeps='twists1 calm laptop'></div>
+<style>
+  @import url(https://unpkg.com/css-peeps@1/css-peeps.css);
+
+  .peepo {
+    --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: #000000;
+
+    width: 125px;
+    height: 125px;
+    border-radius: 10px;
+  }
+</style>

src/components/css-peeps/coffee.astro

@@ -0,0 +1,23 @@
+<div class='peepo' data-css-peeps='twists1 calm laptop'></div>
+<style>
+  @import url(https://unpkg.com/css-peeps@1/css-peeps.css);
+
+  .peepo {
+    --peep-head: twists1;
+    --peep-face: smile;
+    --peep-accessory: glasses1;
+    --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: #ffa500;
+    --peep-clothes-color: #000000;
+
+    width: 125px;
+    height: 125px;
+    border-radius: 10px;
+  }
+</style>

src/components/css-peeps/striped-pocket-tee.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: calm;
+    --peep-body: striped-pocket-tee;
+
+    --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>

src/components/experience.astro

@@ -16,38 +16,40 @@ const EXPERIENCE_STYLES = [
   'font-rubik-doodle',
   'w-full',
   'h-full',
-  'transition-all',
+  // 'transition-all',
   'border-2',
-  'dark:border-slate-300',
-  'border-slate-950',
+  'dark:border-emerald-300',
+  'border-emerald-950',
   'dark:bg-slate-800',
   'dark:text-slate-200',
-  'hover:scale-[1.02]',
-  'hover:transition-all',
+  // 'hover:scale-[1.02]',
+  // 'hover:transition-all',
   'flex',
   'flex-col',
   'p-1',
-  '[&>div>ul>li]:bg-emerald-200',
-  '[&>div>ul>li]:dark:bg-slate-900',
+  // '[&>div>ul>li]:bg-emerald-300',
+  // '[&>div>ul>li]:dark:bg-slate-900',
   '[&>div>ul>li]:dark:text-slate-200',
-  '[&>div>ul>li>a]:bg-emerald-400',
+  '[&>div>ul>li>a]:bg-emerald-500',
   '[&>div>ul>li>a]:dark:bg-emerald-400',
   '[&>div>ul>li>a]:dark:text-emerald-950',
   '[&>div>ul>li>a]:text-slate-950'
 ].join(' ')
 ---
 
-<article class={EXPERIENCE_STYLES} title="Projects I've worked on">
+<article class={EXPERIENCE_STYLES} title="Projects I'm working on">
   <a href='/projects'>
-    <div class='responsive-text-xs flex gap-2'>
+    <div
+      class='responsive-text-xs flex gap-2 text-emerald-950 dark:text-emerald-300'
+    >
       <p>Working on</p>
       <p class='font-fira font-thin'></p>
     </div>
   </a>
   <div class='h-full w-full gap-2'>
     <ul class='flex gap-2 flex-col justify-around h-full font-roboto-slab'>
       <li
-        class='grid grid-rows-2 grid-cols-2 justify-items-center [&>*]:border-2 [&>*]:border-slate-300 [&>*]:dark:border-slate-800 [&>*]:w-full [&>*]:text-center [&>*]:rounded-sm'
+        class='grid grid-rows-2 grid-cols-2 justify-items-center gap-1 [&>*]:w-full [&>*]:text-center [&>*]:rounded-sm'
       >
         <a
           class='col-span-2'
@@ -130,7 +132,7 @@ const EXPERIENCE_STYLES = [
         </div>
       </li>
       <li
-        class='grid grid-rows-2 grid-cols-2 justify-items-center [&>*]:border-2 [&>*]:border-slate-300 [&>*]:dark:border-slate-800 [&>*]:w-full [&>*]:text-center [&>*]:rounded-sm'
+        class='grid grid-rows-2 grid-cols-2 justify-items-center gap-1 [&>*]:w-full [&>*]:text-center [&>*]:rounded-sm'
       >
         <a
           href='https://pinturas-app-front.vercel.app/'

src/components/featured.astro

@@ -6,24 +6,26 @@ const FEATURED_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)]',
   'flex',
   'flex-col',
   'items-center',
   'justify-center',
   'responsive-text-sm',
   'font-bold',
-  'text-slate-950',
+  'text-amber-950',
+  'dark:text-amber-300',
   'font-rubik-doodle',
   'w-full',
   'h-full',
   'transition-all',
+  'dark:transition-all',
+  'ease-in-out',
   'duration-200',
-  'border-slate-950',
-  'dark:border-slate-300',
+  'border-amber-500',
+  // 'dark:border-amber-500',
   'border-2',
   'dark:bg-slate-900',
-  'dark:text-slate-300',
   'hover:scale-[1.02]',
   'hover:duration-200',
   'hover:ease-in-out'