styles: transparency

jamerrq · Mar 19, 2024 · 3fe06aa · 3fe06aa
1 parent 3ed99ca
commit 3fe06aa
Show file tree

Hide file tree

Showing 24 changed files with 33 additions and 131 deletions.
diff --git a/public/fonts/FiraMonoNerd/FiraMonoNerdFontMono-Bold.woff2 b/public/fonts/FiraMonoNerd/FiraMonoNerdFontMono-Bold.woff2
diff --git a/public/fonts/FiraMonoNerd/FiraMonoNerdFontMono-Medium.woff b/public/fonts/FiraMonoNerd/FiraMonoNerdFontMono-Medium.woff
diff --git a/public/fonts/FiraMonoNerd/FiraMonoNerdFontMono-Medium.woff2 b/public/fonts/FiraMonoNerd/FiraMonoNerdFontMono-Medium.woff2
diff --git a/public/fonts/FiraMonoNerd/FiraMonoNerdFontMono-Regular.woff2 b/public/fonts/FiraMonoNerd/FiraMonoNerdFontMono-Regular.woff2
diff --git a/public/fonts/FiraMonoNerd/LICENSE b/public/fonts/FiraMonoNerd/LICENSE
diff --git a/public/fonts/FiraMonoNerd/readme.md b/public/fonts/FiraMonoNerd/readme.md
diff --git a/src/components/blog/blog-about.astro b/src/components/blog/blog-about.astro
@@ -2,7 +2,7 @@
 const ABOUT_STYLES = [
   'col-span-4',
   'row-span-1',
-  'bg-slate-300',
+  'bg-slate-300/70',
   'dark:bg-slate-900',
   'dark:text-slate-300',
   'rounded-sm',

diff --git a/src/components/featured-and-projects/about.astro b/src/components/featured-and-projects/about.astro
@@ -2,7 +2,7 @@
 const ABOUT_STYLES = [
   'col-span-1 xl:col-span-4',
   'row-span-1',
-  'bg-slate-300',
+  'bg-slate-300/70',
   'dark:bg-slate-900',
   'dark:text-slate-300',
   'rounded-sm',

diff --git a/src/components/icons/tech-icon.astro b/src/components/icons/tech-icon.astro
@@ -14,7 +14,7 @@ const TECH_ICON_STYLES = [
   'xl:h-10 h-8',
   'hover:scale-110',
   'transition-all',
-  'dark:bg-slate-300',
+  'dark:bg-slate-300/70',
   'bg-slate-900',
   'p-2',
   'rounded-md',

diff --git a/src/components/main/about-me-card.astro b/src/components/main/about-me-card.astro
@@ -8,8 +8,8 @@ const { lang = 'en' }: Props = Astro.props
 const ABOUT_ME_STYLES = [
   'col-span-1 xl:col-span-4',
   'row-span-2',
-  'bg-slate-300',
-  'dark:bg-slate-900',
+  'bg-slate-300/70',
+  'dark:bg-slate-900/95',
   'rounded-sm',
   'shadow-[0_0_0.5rem_rgba(0_0_0_0.5)]',
   'flex',

diff --git a/src/components/main/background.astro b/src/components/main/background.astro
@@ -13,4 +13,4 @@
   }
 </style>
 
-<div class='background blur-sm dark:blur-[1px]'></div>
+<div class='background blur-sm dark:blur-[1.5px]'></div>
diff --git a/src/components/main/blog.astro b/src/components/main/blog.astro
@@ -3,7 +3,7 @@ const BLOG_STYLES = [
   'col-span-1 xl:col-span-1',
   'row-span-2',
   'gap-2',
-  'bg-slate-300',
+  'bg-slate-300/80',
   'rounded-sm',
   // '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)
@@ -22,7 +22,7 @@ const BLOG_STYLES = [
   'dark:transition-all',
   // 'border-2',
   // 'border-amber-500',
-  'dark:bg-slate-900',
+  'dark:bg-slate-900/90',
   'hover:scale-[1.02]',
   'hover:duration-200',
   'hover:ease-in-out',

diff --git a/src/components/main/buttons.astro b/src/components/main/buttons.astro
@@ -23,9 +23,9 @@ const BUTTONS_STYLES = [
   'h-full',
   'transition-all',
   'duration-200',
-  'dark:bg-slate-900',
+  'dark:bg-slate-900/95',
   'dark:text-slate-100',
-  'bg-slate-300',
+  'bg-slate-300/80',
   'p-2'
   // 'animate-blurred-fade-in',
   // 'animate-delay-200'

diff --git a/src/components/main/featured.astro b/src/components/main/featured.astro
@@ -3,7 +3,7 @@ const FEATURED_STYLES = [
   'col-span-1',
   'row-span-2',
   'gap-2',
-  'bg-slate-300',
+  'bg-slate-300/80',
   'rounded-sm',
   // '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)
@@ -24,7 +24,7 @@ const FEATURED_STYLES = [
   'duration-200',
   // 'border-amber-500',
   // 'border-2',
-  'dark:bg-slate-900',
+  'dark:bg-slate-900/80',
   'hover:scale-[1.02]',
   'hover:duration-200',
   'hover:ease-in-out',

diff --git a/src/components/main/socials.astro b/src/components/main/socials.astro
@@ -4,7 +4,7 @@ const SOCIALS_STYLES: string = [
   'col-span-2',
   'row-span-2',
   // 'gap-2',
-  'bg-slate-300',
+  'bg-slate-300/70',
   'rounded-sm',
   'shadow-[0_0_0.5rem_rgba(0_0_0_0.5)]',
   'flex',
@@ -23,7 +23,7 @@ const SOCIALS_STYLES: string = [
   // 'dark:border-emerald-300',
   // 'border-2',
   // 'hover:border-slate-100',
-  'dark:bg-slate-900',
+  'dark:bg-slate-900/95',
   'dark:text-emerald-300',
   // 'hover:scale-[1.02]',
   // 'hover:duration-200',
@@ -66,18 +66,18 @@ interface Props {
 const { lang }: Props = Astro.props
 ---
 
-<article class={SOCIALS_STYLES} title='My Links'>
+<article class={SOCIALS_STYLES}>
   <header class='flex gap-2 justify-center items-center'>
     <p class='font-semibold text-3xl xl:text-4xl'>Contact</p>
     <svg class={ICONS_STYLES} set:html={siMaildotru.svg} />
   </header>
   <div class='flex h-fit w-full items-center justify-center gap-2'>
     <span
-      class='font-merriweather font-bold text-sm xl:text-base text-center dark:text-cyan-100 text-cyan-950 dark:bg-emerald-950 bg-emerald-300 p-2 rounded shadow-sm shadow-black'
+      class='font-bold text-sm xl:text-base text-center dark:text-cyan-100 text-cyan-950 dark:bg-emerald-950 bg-emerald-500 p-2 rounded shadow-sm shadow-black'
     >
       [email protected]
     </span>
-    <button id='copyMailButton' aria-label='copy mail button'>
+    <button id='copyMailButton' aria-label='copy mail button' title='copy mail'>
       <Copy
         class='w-8 h-8 dark:bg-slate-300 bg-slate-950 fill-slate-300 dark:fill-slate-950 p-1.5 rounded-full cursor-pointer hover:scale-110 transition-all shadow-sm shadow-black'
       />

diff --git a/src/components/main/tech-stack.astro b/src/components/main/tech-stack.astro
@@ -2,7 +2,7 @@
 const TECH_STACK_STYLES: string = [
   'col-span-2',
   'row-span-3',
-  'bg-slate-300',
+  'bg-slate-300/80',
   'rounded-sm',
   // '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)
@@ -19,10 +19,10 @@ const TECH_STACK_STYLES: string = [
   // 'border-amber-500',
   'text-amber-950',
   'dark:text-amber-300',
-  'dark:bg-slate-900',
+  'dark:bg-slate-900/95',
   'hover:scale-[1.02]',
   'hover:transition-all',
-  'text-2xl',
+  'text-2xl'
   // 'animate-blurred-fade-in',
   // 'animate-delay-300'
 ].join(' ')

diff --git a/src/components/main/title.astro b/src/components/main/title.astro
@@ -6,7 +6,7 @@ const { lang = 'en' }: Props = Astro.props
 ---
 
 <div
-  class='row-span-2 col-span-1 xl:col-span-2 title dark:bg-emerald-900 text-emerald-300 bg-emerald-400 p-2 rounded-sm w-full flex items-center flex-row animate-fade-in-up relative'
+  class='row-span-2 col-span-1 xl:col-span-2 title dark:bg-emerald-900/90 text-emerald-300 bg-emerald-400/50 p-2 rounded-sm w-full flex items-center flex-row animate-blurred-fade-in relative'
 >
   <div class='flex flex-col animate-fade-in z-10'>
     <a href={lang !== 'en' ? '/' : 'es'}>
@@ -21,7 +21,10 @@ const { lang = 'en' }: Props = Astro.props
   <div
     class='fixed -z-10 top-0 left-0 origin-top-left w-full flex place-content-center'
   >
-    <canvas id='c' class='grow' style='display: flex; align-items: center;'
+    <canvas
+      id='c'
+      class='grow'
+      style='display: flex; align-items: center; overflow: hidden;'
       ><svg
         class='grow'
         style=''

diff --git a/src/components/main/working-on.astro b/src/components/main/working-on.astro
@@ -3,7 +3,7 @@ const EXPERIENCE_STYLES = [
   'col-span-1 xl:col-span-2',
   'row-span-4',
   'gap-2',
-  'bg-slate-300',
+  'bg-slate-300/70',
   'rounded-sm',
   'shadow-[0_0_0.5rem_rgba(0_0_0_0.5)]',
   'flex',
@@ -18,7 +18,7 @@ const EXPERIENCE_STYLES = [
   // 'border-2',
   // 'dark:border-emerald-300',
   // 'border-emerald-950',
-  'dark:bg-slate-800',
+  'dark:bg-slate-900/95',
   'dark:text-slate-200',
   'flex',
   'flex-col',

diff --git a/src/components/tech-stack/about-tech.astro b/src/components/tech-stack/about-tech.astro
@@ -2,7 +2,7 @@
 const ABOUT_STYLES = [
   'col-span-4',
   'row-span-2',
-  'bg-slate-300',
+  'bg-slate-300/70',
   'dark:bg-slate-900',
   'dark:text-slate-300',
   'rounded-sm',

diff --git a/src/components/tech-stack/dev-tools.astro b/src/components/tech-stack/dev-tools.astro
@@ -2,7 +2,7 @@
 const DEV_TOOLS_STYLES = [
   'col-span-2',
   'row-span-3',
-  'bg-slate-300',
+  'bg-slate-300/70',
   'rounded-sm',
   'shadow-[0_0_0.5rem_rgba(0_0_0_0.5)]',
   'flex',

diff --git a/src/components/tech-stack/languages.astro b/src/components/tech-stack/languages.astro
@@ -3,7 +3,7 @@ const SOCIALS_STYLES: string = [
   'col-span-1 xl:col-span-2',
   'row-span-2',
   'gap-2',
-  'bg-slate-300',
+  'bg-slate-300/70',
   'rounded-sm',
   'shadow-[0_0_0.5rem_rgba(0_0_0_0.5)]',
   'flex',

diff --git a/src/components/tech-stack/os.astro b/src/components/tech-stack/os.astro
@@ -3,7 +3,7 @@ const OS_STYLES = [
   'col-span-1 xl:col-span-1',
   'row-span-2',
   'gap-2',
-  'bg-slate-300',
+  'bg-slate-300/70',
   'rounded-sm',
   'shadow-[0_0_0.5rem_rgba(0_0_0_0.5)]',
   'flex',

diff --git a/src/components/tech-stack/testing.astro b/src/components/tech-stack/testing.astro
@@ -3,7 +3,7 @@ const TESTING_STYLES = [
   'col-span-1 xl:col-span-1',
   'row-span-2',
   'gap-2',
-  'bg-slate-300',
+  'bg-slate-300/70',
   'rounded-sm',
   'shadow-[0_0_0.5rem_rgba(0_0_0_0.5)]',
   'flex',

diff --git a/src/components/tech-stack/web-dev.astro b/src/components/tech-stack/web-dev.astro
@@ -3,7 +3,7 @@ const WEB_DEV_STYLES = [
   'col-span-1 xl:col-span-2',
   'row-span-4',
   'gap-1',
-  'bg-slate-300',
+  'bg-slate-300/70',
   'rounded-sm',
   'shadow-[0_0_0.5rem_rgba(0_0_0_0.5)]',
   'flex',