feat: styles & enhancement

package.json

@@ -48,6 +48,7 @@
     "eslint-plugin-jsx-a11y": "^6.8.0",
     "husky": "^8.0.3",
     "jest": "^29.7.0",
+    "postcss-nesting": "^12.1.1",
     "prettier": "^3.1.1",
     "prettier-config-standard": "^7.0.0",
     "prettier-plugin-astro": "^0.12.3",

postcss.config.mjs

@@ -1,6 +1,6 @@
 export default {
     plugins: {
-        // "tailwindcss/nesting": "postcss-nesting",
+        "tailwindcss/nesting": "postcss-nesting",
         tailwindcss: {},
         autoprefixer: {},
     },

src/components/featured-and-projects/projects.tsx

@@ -9,6 +9,9 @@ const featured = shuffledData.filter((project) => project.featured)
 const notFeatured = shuffledData.filter((project) => !project.featured)
 const concatedData = featured.concat(notFeatured)
 
+const screenWidth = window.innerWidth
+const isScreenWidthEnough = screenWidth >= 1024
+
 const PROJECT_STYLES: string = [
   'col-span-6',
   'row-span-4',
@@ -22,7 +25,7 @@ const PROJECT_STYLES: string = [
   'font-bold',
   'font-rubik-doodle',
   'w-full',
-  'h-80',
+  'h-72',
   'xl:h-full',
   'transition-all',
   'text-emerald-950',
@@ -35,7 +38,8 @@ const PROJECT_STYLES: string = [
   'text-center'
 ].join(' ')
 
-import { signal } from '@preact/signals'
+import { signal, effect } from '@preact/signals'
+
 const index = signal(0)
 const imagesIndex = signal(0)
 
@@ -56,7 +60,15 @@ function SimpleIcon(key: string) {
   }
   const Icon = simpleIcons[key as keyof toExportType]
   if (typeof Icon === 'function') {
-    return <Icon />
+    // return icon with title
+    return (
+      <div className='flex flex-col items-center gap-1 mx-2'>
+        <Icon />
+        <span className='text-xs font-averia font-bold lowercase'>
+          {key.split(' ').at(0)}
+        </span>
+      </div>
+    )
   }
   return h('fragment', {})
 }
@@ -65,7 +77,7 @@ const BUTTONS_STYLES = [
   'absolute',
   'bg-cyan-300',
   'rounded-md',
-  'flex',
+  'hidden xl:flex',
   'items-center',
   'p-1',
   'shadow-md shadow-black/90'
@@ -203,16 +215,39 @@ function ResourceCard({
           )}
         </div>
       </div>
-      <div className='w-1/2 h-full hidden lg:block xl:block'>
-        {/* <h1>Images</h1> */}
-        {project?.images && <ImageCarousel images={project.images} />}
-      </div>
+      {isScreenWidthEnough && (
+        <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>
   )
 }
 
+const n = concatedData.length
+
+effect(() => {
+  let mainInterval = setInterval(() => {
+    index.value++
+    if (index.value >= n) {
+      index.value = 0
+    }
+  }, 21000)
+  let imagesInterval = setInterval(() => {
+    imagesIndex.value++
+    if (imagesIndex.value >= concatedData[index.value].images.length) {
+      imagesIndex.value = 0
+    }
+  }, 7000)
+  return function () {
+    clearInterval(mainInterval)
+    clearInterval(imagesInterval)
+  }
+})
+
 export default function Resources({ n = 1, lang = 'en' }: ResourcesProps) {
   return (
     <>

src/components/featured-and-projects/resources.tsx

@@ -6,15 +6,15 @@ const RESOURCE_STYLES: string = [
   'rounded-sm',
   'shadow-[0_0_0.1rem_rgb(8_51_68)]', // rgb(8, 51, 68)
   'flex',
-  'flex-col',
-  'gap-0',
+  'xl:flex-col',
+  'gap-5',
   'items-center',
   'justify-center',
   'font-bold',
   'font-rubik-doodle',
   'w-full',
   'xl:h-full',
-  'h-[15%]',
+  'h-16',
   'transition-all',
   'text-cyan-950',
   'dark:text-cyan-300',
@@ -25,7 +25,7 @@ const RESOURCE_STYLES: string = [
   'relative'
 ].join(' ')
 
-import { signal } from '@preact/signals'
+import { signal, effect } from '@preact/signals'
 const index = signal(0)
 
 import { Fragment } from 'preact/jsx-runtime'
@@ -87,6 +87,20 @@ const DoubleRightButton = ({ _f }: { _f: () => void }) => (
   </div>
 )
 
+const n = data.length
+
+effect(() => {
+  let interval = setInterval(() => {
+    index.value++
+    if (index.value >= n) {
+      index.value = 0
+    }
+  }, 14000)
+  return function () {
+    clearInterval(interval)
+  }
+})
+
 export default function Resources({ n = 3 }: ResourceProps) {
   const goRight = () => {
     index.value++

src/components/icons/icon.astro

@@ -23,6 +23,9 @@ const { svg, hex = '#000', href = '', title = 'Generic Icon' } = Astro.props
         set:html={svg}
         fill={hex}
       />
+      <span class='text-xs font-averia'>
+        {title === 'Curriculum Vitae' ? 'CV' : title}
+      </span>
     </a>
   ) : (
     <svg

src/components/icons/simple-icon.tsx

@@ -181,7 +181,7 @@ const toExport = {
   '.NET': DotnetLogo,
   Express: ExpressLogo,
   Sequelize: SequelizeLogo,
-  PostgresSql: PostgreSQLLogo,
+  PostgreSQL: PostgreSQLLogo,
   Python: PythonLogo,
   'Jupyter Notebook': JupyterLogo,
   LaTeX: LatexLogo,

src/components/main/about-me-card.astro

@@ -69,8 +69,8 @@ const { lang = 'en' }: Props = Astro.props
         <p class='phrase dark:text-emerald-200'>
           {
             lang === 'en'
-              ? 'The best way to achieve something is by starting it'
-              : 'La mejor forma de lograr algo es comenzándolo'
+              ? 'The best (and only) way to achieve something is by starting it'
+              : 'La mejor (y única) forma de lograr algo es comenzándolo'
           }
         </p>
       </li>

src/components/main/container.astro

@@ -8,8 +8,8 @@
     justify-items: center;
     color: white;
     border-radius: 0.5rem;
-    background-color: #1b383c;
-    font-family: 'Rubik Doodle Shadow', sans-serif;
+    background-color: #1b383c66;
+    font-family: 'Rubik Doodle Subset', sans-serif;
     text-align: center;
     padding: 1rem;
     box-shadow: 0 0.05rem 0 0.1rem #000;

src/components/main/project.astro

@@ -27,8 +27,8 @@ const project = projects.at(index) as Project
 const SVGS_STYLES = [
   'w-5',
   'h-5',
-  'xl:w-8',
-  'xl:h-8',
+  'xl:w-7',
+  'xl:h-7',
   'hover:scale-110',
   'shadow bg-white/50 p-1 rounded dark:bg-slate-900/80'
 ].join(' ')
@@ -58,7 +58,7 @@ import { Image } from 'astro:assets'
       loading='eager'
       class='aspect-[4/3] w-40'
     />
-    <aside class='flex flex-col items'>
+    <aside class='flex flex-row items-center'>
       <div class='flex gap-2 items-center justify-center'>
         {
           project.technologies.map((t) => {

src/components/main/socials.astro

@@ -16,11 +16,11 @@ import getIconsFn from '@data/socials.ts'
 const socials = getIconsFn(lang)
 ---
 
-<Box title='Contact Section' otherStyles='xl:col-span-2 xl:row-span-2 gap-6'>
+<Box title='Contact Section' otherStyles='xl:col-span-2 xl:row-span-2 gap-3'>
   <header
     class='flex gap-2 justify-center items-center dark:text-emerald-300 text-slate-950'
   >
-    <p class='font-semibold text-3xl xl:text-4xl'>Contact</p>
+    <p class='font-semibold text-3xl xl:text-4xl'>Contact Links</p>
     <GenericIcon svg={siMaildotru.svg} />
   </header>
   <div class='flex h-fit w-full items-center justify-center gap-2'>

src/components/main/working-on.tsx

@@ -43,15 +43,16 @@ interface ProjectCardProps {
   }
 }
 
-function getIndexBasedOnDay() {
-  const date = new Date().toLocaleString('es-CO', {
-    timeZone: 'America/Bogota'
-  })
-  const day = +(date.replace(/,(.*)/g, '')?.split('/')?.at(0) ?? 0)
-  return day % projects.length
-}
+// function getIndexBasedOnMonth() {
+//   const date = new Date().toLocaleString('es-CO', {
+//     timeZone: 'America/Bogota'
+//   })
+//   const month = +(date.replace(/,(.*)/g, '')?.split('/')?.at(1) ?? 0)
+//   const index = month % projects.length
+//   return index
+// }
 
-const index = signal(getIndexBasedOnDay())
+const index = signal(0)
 const n = projects?.length ?? 0
 
 import { IndexPicker } from '@components/featured-and-projects/projects'
@@ -65,19 +66,20 @@ function ProjectCard({ lang = 'en', project }: ProjectCardProps) {
       <div class='absolute bottom-0 right-2 font-averia text-xs dark:bg-emerald-700 bg-emerald-500 dark:text-emerald-100 text-emerald-950 px-1 shadow shadow-black/90'>
         {days}+ {lang === 'en' ? 'days' : 'días'}
       </div>
+
       <h1 class='text-sm xl:text-base font-rubik-doodle dark:text-emerald-100 text-emerald-950 bg-emerald-500 dark:bg-emerald-900 px-2 py-1 shadow shadow-black/90'>
         {lang === 'en' ? project?.title.en : project?.title.es}
       </h1>
-      <section class='bg-transparent w-full flex items-center'>
+      <section class='bg-transparent w-full flex'>
         <img
           src={project?.image}
           alt={`snap for ${project?.title.en}`}
           width='960'
           height='720'
           loading='lazy'
-          class='aspect-[4/3] w-40'
+          class='aspect-[4/3] w-32'
         />
-        <aside class='flex flex-col gap-2 items-center'>
+        <aside class='flex flex-col xl:flex-row text-sm gap-4 items-center justify-center'>
           <div class='flex gap-2 items-center justify-center'>
             {project.technologies.map((t) => {
               const a =
@@ -107,20 +109,22 @@ function ProjectCard({ lang = 'en', project }: ProjectCardProps) {
               )
             })}
           </div>
-          <span class='font-averia hover:scale-105 ease-in-out transition-transform text-emerald-950 bg-white/50 dark:bg-white/10 px-2 py-1 rounded dark:text-emerald-300'>
-            {project?.preview ? (
-              <a
-                href={project.preview}
-                target='_blank'
-                rel='noopener noreferrer'
-                class=''
-                aria-label={`Preview for ${project.title.en}`}
-                title={`Preview for ${project.title.en}`}
-              >
-                {lang === 'en' ? 'Project Preview' : 'Demo del Proyecto'}
-              </a>
-            ) : null}
-          </span>
+          {project.preview && (
+            <span class='font-averia hover:scale-105 ease-in-out transition-transform text-emerald-950 bg-white/50 dark:bg-white/10 px-2 py-1 rounded dark:text-emerald-300'>
+              {project?.preview ? (
+                <a
+                  href={project.preview}
+                  target='_blank'
+                  rel='noopener noreferrer'
+                  class=''
+                  aria-label={`Preview for ${project.title.en}`}
+                  title={`Preview for ${project.title.en}`}
+                >
+                  {lang === 'en' ? 'Project Preview' : 'Demo del Proyecto'}
+                </a>
+              ) : null}
+            </span>
+          )}
         </aside>
       </section>
     </li>

src/data/projects.json

@@ -186,7 +186,7 @@
         "React",
         "Tailwind CSS",
         "Express",
-        "PostgresSql",
+        "PostgreSQL",
         "NodeJS"
       ],
       "private": true,
@@ -215,7 +215,8 @@
       "demo": "https://www.freecodecamp.org/certification/jamerrq/foundational-c-sharp-with-microsoft",
       "repository": "https://github.com/jamerrq/Foundational-CSharp-with-Microsoft",
       "images": [
-        "foundational-csharp-microsoft.webp"
+        "foundational-csharp-microsoft.webp",
+        "foundational-csharp-microsoft-2.webp"
       ]
     },
     {

src/data/working-on.json

@@ -51,8 +51,7 @@
       },
       "image": "/img/working-on/leetcode.webp",
       "technologies": [
-        "Python",
-        "JavaScript"
+        "Python"
       ],
       "private": "false",
       "time": "2",

src/pages/404.astro

@@ -50,7 +50,7 @@ import Container from '@components/main/container.astro'
 
   a,
   button {
-    font-family: 'Rubik Doodle Shadow', sans-serif;
+    font-family: 'Rubik Doodle Subset', sans-serif;
   }
 </style>
 

src/pages/blog/convert-astro-app-to-pwa.mdx

@@ -9,9 +9,8 @@ import Code from '@components/main/code.astro'
 import { pwaSeoConfig } from '@data/codes.ts'
 
 import CityInABottle from '@movies/city-in-a-bottle.astro'
-import Magic3d from '@components/ascii/magic3d.astro'
 
-<Magic3d />
+<CityInABottle />
 
 ## First of all, what is a PWA?
 

src/pages/es/blog/convertir-astro-app-en-pwa.mdx

@@ -8,6 +8,10 @@ import { Image } from 'astro:assets'
 import Code from '@components/main/code.astro'
 import { pwaSeoConfig } from '@data/codes.ts'
 
+import CityInABottle from '@movies/city-in-a-bottle.astro'
+
+<CityInABottle />
+
 ## Antes que nada ¿Qué es una PWA?
 
 Si has navegado con frequencia recientemente por la web, te habrás encontrado el

src/styles/index.css

@@ -29,7 +29,7 @@ p {
 }
 
 @font-face {
-    font-family: 'Rubik Doodle Subset', sans-serif;
+    font-family: 'Rubik Doodle Subset';
     src: url('/fonts/rubik-doodle-shadow-latin-400-patched.woff2') format('woff2');
     font-weight: 400;
     font-style: normal;