feat: styles & enhancement

jamerrq · Apr 1, 2024 · 695beed · 695beed
1 parent d45cc0e
commit 695beed
Show file tree

Hide file tree

Showing 74 changed files with 785 additions and 260 deletions.
diff --git a/astro.config.ts b/astro.config.ts
@@ -1,13 +1,17 @@
 import { defineConfig } from 'astro/config'
+
+// PWA Support
+import { VitePWA } from 'vite-plugin-pwa'
+import { manifest } from './src/utils/seoConfig'
+
+// Integrations
 import tailwind from '@astrojs/tailwind'
 import deno from '@astrojs/deno'
 import robotsTxt from 'astro-robots-txt'
 import preact from '@astrojs/preact'
 import pageInsight from 'astro-page-insight'
 import sitemap from '@astrojs/sitemap'
 import compress from 'astro-compress'
-import { VitePWA } from 'vite-plugin-pwa'
-import { manifest } from './src/utils/seoConfig'
 import mdx from '@astrojs/mdx'
 
 // https://astro.build/config
@@ -49,7 +53,7 @@ export default defineConfig({
         manifest,
         workbox: {
           globDirectory: 'dist/client',
-          globPatterns: ['**/*.{js,css,svg,png,jpg,jpeg,gif,webp,woff2,}'],
+          globPatterns: ['**/*.{js,css,woff2}'],
           // Don't fallback on document based (e.g. `/some-page`) requests
           // This removes an errant console.log message from showing up.
           navigateFallback: null

diff --git a/public/img/projects b/public/img/projects
@@ -0,0 +1 @@
+../../src/imgs/projects
diff --git a/public/img/src/env.d.ts b/public/img/src/env.d.ts
@@ -0,0 +1 @@
+/// <reference types="astro/client" />
diff --git a/public/img/working-on/aichallenge.png b/public/img/working-on/aichallenge.png
diff --git a/public/img/working-on/leetcode.png b/public/img/working-on/leetcode.png
diff --git a/public/img/working-on/roadmap.png b/public/img/working-on/roadmap.png
diff --git a/src/components/ascii/magic3d.astro b/src/components/ascii/magic3d.astro
@@ -0,0 +1,8 @@
+<div>
+  <div
+    id='output'
+    style='padding:10px; background: #000000ee; overflow:auto;width:90%; font-size:0.25rem; font-family: monospace; color: #0f0; line-height: 0.45rem; margin: 0 auto;'
+  >
+  </div>
+</div>
+<script src='../../scripts/ascii/magic3d.ts'></script>
diff --git a/src/components/badges/badge.astro b/src/components/badges/badge.astro
@@ -1,3 +1,11 @@
+---
+interface Props {
+  class: string
+}
+
+const { props } = Astro
+---
+
 <style>
   .badge {
     --timing: linear(0, 0.3, 0.75, 1);
@@ -23,8 +31,6 @@
       border-image-slice: 1 1 1 1 fill;
     }
 
-    /* box-shadow: 5px 5px 0 #0006; */
-
     &:active {
       transform: translate(5px, 5px);
       box-shadow: none;
@@ -46,7 +52,9 @@
     initial-value: 0deg;
   }
 </style>
-<div class='xl:absolute top-2 right-2 animate-slide-in-top rounded'>
+<div
+  class=`xl:absolute top-2 right-2 animate-slide-in-top rounded ${props.class}`
+>
   <span class='relative flex overflow-hidden rounded shadow shadow-black'>
     <div
       class='flex items-center h-full w-full cursor-pointer justify-center rounded px-3 py-1 text-sm font-bold text-slate-900 bg-emerald-500 backdrop-blur-3xl shadow shadow-black dark:shadow-gray-300 badge'

diff --git a/src/components/badges/open-to-work.astro b/src/components/badges/open-to-work.astro
@@ -6,23 +6,56 @@ const { lang = 'en' }: Props = Astro.props
 import Badge from './badge.astro'
 ---
 
-<Badge class='animate-fade-in'>
-  <svg
-    class='w-4 h-4 me-2 text-slate-900'
-    aria-hidden='true'
-    xmlns='http://www.w3.org/2000/svg'
-    width='12'
-    height='12'
-    fill='none'
-    viewBox='0 0 24 24'
+<a
+  href='https://www.linkedin.com/in/jamerrq/'
+  target='_blank'
+  rel='noopener noreferrer'
+>
+  <Badge
+    class='animate-fade-in group relative inline-flex h-12 items-center justify-center overflow-hidden rounded-md font-medium text-neutral-200 duration-500'
   >
-    <path
-      stroke='currentColor'
-      stroke-linecap='round'
-      stroke-linejoin='round'
-      stroke-width='2'
-      d='M8 7H5a2 2 0 0 0-2 2v4m5-6h8M8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m0 0h3a2 2 0 0 1 2 2v4m0 0v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-6m18 0s-4 2-9 2-9-2-9-2m9-2h.01'
-    ></path>
-  </svg>
-  {lang === 'en' ? 'Open To Work' : 'Disponible Para Ofertas'}
-</Badge>
+    <div
+      class='translate-x-0 opacity-100 transition group-hover:-translate-x-[150%] group-hover:opacity-0 flex'
+    >
+      {lang === 'en' ? 'Open To Work' : 'Disponible Para Ofertas'}
+      <svg
+        class='w-4 h-4 ml-2 text-slate-900 group'
+        aria-hidden='true'
+        xmlns='http://www.w3.org/2000/svg'
+        width='12'
+        height='12'
+        fill='none'
+        viewBox='0 0 24 24'
+      >
+        <path
+          stroke='currentColor'
+          stroke-linecap='round'
+          stroke-linejoin='round'
+          stroke-width='2'
+          d='M8 7H5a2 2 0 0 0-2 2v4m5-6h8M8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m0 0h3a2 2 0 0 1 2 2v4m0 0v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-6m18 0s-4 2-9 2-9-2-9-2m9-2h.01'
+        ></path>
+      </svg>
+    </div>
+    <div
+      class='absolute translate-x-[150%] opacity-0 transition group-hover:translate-x-0 group-hover:opacity-100 flex items-center text-emerald-950 gap-2'
+    >
+      {lang === 'en' ? "Let's connect!" : 'Conecta conmigo!'}
+      <svg
+        width='15'
+        height='15'
+        viewBox='0 0 15 15'
+        fill='none'
+        xmlns='http://www.w3.org/2000/svg'
+        class='h-6 w-6'
+      >
+        <path
+          d='M8.14645 3.14645C8.34171 2.95118 8.65829 2.95118 8.85355 3.14645L12.8536 7.14645C13.0488 7.34171 13.0488 7.65829 12.8536 7.85355L8.85355 11.8536C8.65829 12.0488 8.34171 12.0488 8.14645 11.8536C7.95118 11.6583 7.95118 11.3417 8.14645 11.1464L11.2929 8H2.5C2.22386 8 2 7.77614 2 7.5C2 7.22386 2.22386 7 2.5 7H11.2929L8.14645 3.85355C7.95118 3.65829 7.95118 3.34171 8.14645 3.14645Z'
+          fill='currentColor'
+          fill-rule='evenodd'
+          clip-rule='evenodd'
+        >
+        </path>
+      </svg>
+    </div>
+  </Badge>
+</a>
diff --git a/src/components/blog/last-entries.tsx b/src/components/blog/last-entries.tsx
@@ -106,7 +106,10 @@ export default function LastEntries({ lang = 'en' }: { lang?: string }) {
                   </span>
                 </li>
                 <li class='font-averia uppercase text-sm xl:text-base py-2 px-2 rounded-sm cursor-pointer hover:bg-emerald-300/40 border-emerald-200 transition-all ease-in-out flex flex-col gap-2'>
-                  <a href={`${lang === 'en' ? entry.href : entry.hrefEs}`}>
+                  <a
+                    href={`${lang === 'en' ? entry.href : entry.hrefEs}`}
+                    class='h-full'
+                  >
                     <div class='flex flex-col xl:flex-row gap-4'>
                       <span>{lang === 'en' ? entry.title : entry.titleEs}</span>
                       <div class='xl:ml-auto'>

diff --git a/src/components/featured-and-projects/icons.tsx b/src/components/featured-and-projects/icons.tsx
@@ -109,7 +109,7 @@ export function DoubleRight() {
   return (
     <svg
       viewBox='0 0 448 512'
-      class='w-6 h-6 fill-cyan-950'
+      class='w-6 h-6 fill-emerald-950'
       xmlns='http://www.w3.org/2000/svg'
     >
       <path d='M246.6 233.4l-160-160c-12.5-12.5-32.75-12.5-45.25 0s-12.5 32.75 0 45.25L178.8 256l-137.4 137.4c-12.5 12.5-12.5 32.75 0 45.25C47.63 444.9 55.81 448 64 448s16.38-3.125 22.62-9.375l160-160C259.1 266.1 259.1 245.9 246.6 233.4zM438.6 233.4l-160-160c-12.5-12.5-32.75-12.5-45.25 0s-12.5 32.75 0 45.25L370.8 256l-137.4 137.4c-12.5 12.5-12.5 32.75 0 45.25C239.6 444.9 247.8 448 256 448s16.38-3.125 22.62-9.375l160-160C451.1 266.1 451.1 245.9 438.6 233.4z' />
@@ -121,7 +121,7 @@ export function DoubleUp() {
   return (
     <svg
       viewBox='0 0 384 512'
-      class='w-6 h-6 fill-cyan-950'
+      class='w-6 h-6 fill-emerald-950'
       xmlns='http://www.w3.org/2000/svg'
     >
       <path d='M54.63 246.6L192 109.3l137.4 137.4C335.6 252.9 343.8 256 352 256s16.38-3.125 22.62-9.375c12.5-12.5 12.5-32.75 0-45.25l-160-160c-12.5-12.5-32.75-12.5-45.25 0l-160 160c-12.5 12.5-12.5 32.75 0 45.25S42.13 259.1 54.63 246.6zM214.6 233.4c-12.5-12.5-32.75-12.5-45.25 0l-160 160c-12.5 12.5-12.5 32.75 0 45.25s32.75 12.5 45.25 0L192 301.3l137.4 137.4C335.6 444.9 343.8 448 352 448s16.38-3.125 22.62-9.375c12.5-12.5 12.5-32.75 0-45.25L214.6 233.4z' />

diff --git a/src/components/featured-and-projects/link.tsx b/src/components/featured-and-projects/link.tsx
@@ -3,7 +3,9 @@ const ANCHOR_STYLES = [
   'responsive-text',
   'dark:text-amber-300',
   'text-amber-950',
-  'flex'
+  'flex',
+  'w-6 h-6',
+  'xl:w-8 xl:h-8'
 ].join(' ')
 
 type LinkProps = {
@@ -13,13 +15,8 @@ type LinkProps = {
 
 import {
   WebIcon,
-  // GithubIcon,
-  // TwitterIcon,
-  // TwitchIcon,
-  // YoutubeIcon,
   YoutubeColorLogo,
   TwitchColorLogo,
-  // DiscordServerIcon,
   DiscordColorLogo,
   FirefoxIcon,
   GithubColorLogo,

diff --git a/src/components/featured-and-projects/projects.tsx b/src/components/featured-and-projects/projects.tsx
@@ -15,14 +15,14 @@ const PROJECT_STYLES: string = [
   'bg-emerald-300/80',
   'rounded-sm',
   'flex',
-  'flex-col',
+  'xl:flex-row ',
   'gap-3',
   'items-center',
   'justify-center',
   'font-bold',
   'font-rubik-doodle',
   'w-full',
-  'h-[50%]',
+  'h-80',
   'xl:h-full',
   'transition-all',
   'text-emerald-950',
@@ -37,6 +37,7 @@ const PROJECT_STYLES: string = [
 
 import { signal } from '@preact/signals'
 const index = signal(0)
+const imagesIndex = signal(0)
 
 type ResourcesProps = {
   n?: number
@@ -70,16 +71,57 @@ const BUTTONS_STYLES = [
   'shadow-md shadow-black/90'
 ].join(' ')
 
+export function IndexPicker({
+  n,
+  reference
+}: {
+  n: number
+  reference: typeof index
+}) {
+  function goToIndex(i: number) {
+    reference.value = i
+  }
+  return (
+    <div className='absolute flex bottom-3 left-1/2 transform -translate-x-1/2'>
+      {Array.from(Array(n).keys()).map((i) => (
+        <button
+          key={i}
+          onClick={() => goToIndex(i)}
+          className={`w-3 h-3 rounded-full mx-1 ${
+            i === reference.value ? 'bg-cyan-300' : 'bg-cyan-950'
+          }`}
+        />
+      ))}
+    </div>
+  )
+}
+
+function ImageCarousel({ images }: { images: string[] }) {
+  return (
+    <div className='relative w-full h-full'>
+      <div className='absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2'>
+        <img
+          src={`/img/projects/${images[imagesIndex.value]}`}
+          alt='project'
+          class='w-full rounded-md border-2 shadow shadow-black'
+          loading='lazy'
+        />
+      </div>
+      <IndexPicker n={images?.length ?? 0} reference={imagesIndex} />
+    </div>
+  )
+}
+
 const DoubleLeftButton = ({ _f }: { _f: () => void }) => (
-  <div class={`bottom-1 left-1 ${BUTTONS_STYLES}`}>
+  <div className={`bottom-1 left-1 ${BUTTONS_STYLES}`}>
     <button onClick={_f} title={'iterate over'}>
       <DoubleLeft />
     </button>
   </div>
 )
 
 const DoubleRightButton = ({ _f }: { _f: () => void }) => (
-  <div class={`bottom-1 right-1 ${BUTTONS_STYLES}`}>
+  <div className={`bottom-1 right-1 ${BUTTONS_STYLES}`}>
     <button onClick={_f} title={'iterate over'}>
       <DoubleRight />
     </button>
@@ -106,6 +148,7 @@ function ResourceCard({
     el?.addEventListener('animationend', () => {
       el?.classList.remove('xl:animate-fade-in-left')
     })
+    imagesIndex.value = 0
   }
   const goLeft = () => {
     index.value--
@@ -116,47 +159,55 @@ function ResourceCard({
     el?.addEventListener('animationend', () => {
       el?.classList.remove('xl:animate-fade-in-left')
     })
+    imagesIndex.value = 0
   }
   return (
-    <article class={PROJECT_STYLES} key={i} id='project-card'>
+    <article className={PROJECT_STYLES} key={i} id='project-card'>
       {i === 0 && <DoubleLeftButton _f={goLeft} />}
-      {project?.featured && (
-        <span class='absolute top-1 right-2 dark:text-amber-300 text-amber-800 underline'>
-          {lang === 'es' ? 'Destacado' : 'Featured'}
-        </span>
-      )}
-      <h1 class='xl:text-3xl text-xl max-w-md'>{project?.title}</h1>
-      <p class='font-bold font-merriweather dark:text-slate-200 text-xs xl:text-base max-w-[400px] text-balance'>
-        {project?.description[lang as 'es' | 'en']}
-      </p>
-      <ul class='flex gap-1 [&>li]:font-thin [&>li>a>img]:border-2 [&>li>a>img]:dark:border-amber-300 [&>li>a>img]:border-amber-950 [&>li>a>img]:rounded-sm flex-wrap'>
-        {project?.stack?.map((tech, index) => (
-          <li key={index}>{SimpleIcon(tech)}</li>
-        ))}
-      </ul>
-      <div class='flex gap-2'>
-        {project?.repository && (
-          <a
-            href={project.repository}
-            class='border-b-2 font-merriweather text-sm xl:text-base'
-            target='_blank'
-            rel='noopener noreferrer'
-          >
-            {lang === 'es' ? 'Repositorio' : 'Repository'}
-          </a>
-        )}
-        {project?.demo && (
-          <a
-            href={project.demo}
-            class='border-b-2 font-merriweather text-sm xl:text-base'
-            target='_blank'
-            rel='noopener noreferrer'
-          >
-            {lang === 'es' ? 'Demo' : 'Preview'}
-          </a>
+      <div className='lg:w-1/2 xl:w-1/2 h-full grid place-content-center justify-items-center gap-4'>
+        <h1 className='xl:text-3xl text-xl max-w-md'>{project?.title}</h1>
+        {project?.featured && (
+          <span className='xl:absolute top-1 right-2 dark:text-amber-300 text-amber-800 underline bg-amber-300/30 px-2 py-1 rounded'>
+            {lang === 'es' ? 'Destacado' : 'Featured'}
+          </span>
         )}
+        <p className='font-bold font-averia dark:text-slate-200 text-xs xl:text-base max-w-[400px] text-balance'>
+          {project?.description[lang as 'es' | 'en']}
+        </p>
+        <ul className='flex gap-1 [&>li]:font-thin [&>li>a>img]:border-2 [&>li>a>img]:dark:border-amber-300 [&>li>a>img]:border-amber-950 [&>li>a>img]:rounded-sm flex-wrap'>
+          {project?.stack?.map((tech, index) => (
+            <li key={index}>{SimpleIcon(tech)}</li>
+          ))}
+        </ul>
+        <div className='flex gap-2'>
+          {project?.repository && (
+            <a
+              href={project.repository}
+              className='border-b-2 font-averia text-sm xl:text-base'
+              target='_blank'
+              rel='noopener noreferrer'
+            >
+              {lang === 'es' ? 'Repositorio' : 'Repository'}
+            </a>
+          )}
+          {project?.demo && (
+            <a
+              href={project.demo}
+              className='border-b-2 font-averia text-sm xl:text-base'
+              target='_blank'
+              rel='noopener noreferrer'
+            >
+              {lang === 'es' ? 'Demo' : 'Preview'}
+            </a>
+          )}
+        </div>
+      </div>
+      <div className='w-1/2 h-full hidden lg:block xl:block'>
+        {/* <h1>Images</h1> */}
+        {project?.images && <ImageCarousel images={project.images} />}
       </div>
       {i === n - 1 && <DoubleRightButton _f={goRight} />}
+      <IndexPicker n={concatedData.length} reference={index} />
     </article>
   )
 }