🎨 it's been 20 days now

jamerrq · Jan 20, 2024 · 1788890 · 1788890
1 parent bfd6a81
commit 1788890
Show file tree

Hide file tree

Showing 31 changed files with 476 additions and 241 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -5,6 +5,9 @@
   "[astro]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
   "yaml.schemas": {
     "https://json.schemastore.org/github-workflow.json": "file:///home/jamerrq/dev/astro/jamerrq.dev/.github/workflows/deploy.yml"
   },

diff --git a/.vscode/tasks.json b/.vscode/tasks.json
@@ -5,15 +5,15 @@
       "type": "npm",
       "script": "lint",
       "problemMatcher": [],
-      "label": "pnpm: lint",
+      "label": "bun: lint",
       "detail": "eslint --ext .js,.astro src"
     },
     {
       "type": "npm",
       "script": "dev",
       "problemMatcher": [],
-      "label": "dev 🖌️",
-      "detail": "astro dev"
+      "label": "astro: dev",
+      "detail": "astro dev --host"
     },
     {
       "type": "npm",

diff --git a/package.json b/package.json
@@ -16,7 +16,7 @@
     "typescript": "^5.3.3"
   },
   "scripts": {
-    "dev": "astro dev",
+    "dev": "astro dev --host",
     "start": "astro dev",
     "build": "astro check && astro build",
     "preview": "deno run --allow-net --allow-read --allow-env ./dist/server/entry.mjs",

diff --git a/public/docs/cv_en.pdf b/public/docs/cv_en.pdf
diff --git a/public/docs/cv_es.pdf b/public/docs/cv_es.pdf
diff --git a/src/components/blog/last-entries.tsx b/src/components/blog/last-entries.tsx
@@ -38,10 +38,10 @@ export default function LastEntries() {
         {entries.map((entry, index) => {
           return (
             <Fragment key={index}>
-              <li class='font-merriweather responsive-text-xxs'>
+              <li class='font-merriweather text-sm xl:text-base'>
                 {entry.date}
               </li>
-              <li class='font-merriweather responsive-text-xxs dark:bg-emerald-900 bg-emerald-300 py-1 px-2 rounded-sm cursor-pointer hover:scale-105 transition-all duration-200'>
+              <li class='font-merriweather text-sm xl:text-base dark:bg-emerald-900 bg-emerald-300 py-1 px-2 rounded-sm cursor-pointer hover:scale-105 transition-all duration-200'>
                 <a href={`/blog/${entry.href}`}>
                   {entry.title} / {entry.título}
                 </a>

diff --git a/src/components/featured-and-projects/featured-projects-bento.astro b/src/components/featured-and-projects/featured-projects-bento.astro
@@ -13,6 +13,6 @@ const { lang = 'en' }: Props = Astro.props
 <Bento>
   <About lang={lang} />
   <Buttons href={lang === 'en' ? '/es/destacados-y-proyectos' : '/featured'} />
-  <ProjectsPreact lang={lang} client:load />
-  <ResourcesPreact client:load />
+  <ProjectsPreact lang={lang} client:visible />
+  <ResourcesPreact client:visible />
 </Bento>
diff --git a/src/components/featured-and-projects/icons.tsx b/src/components/featured-and-projects/icons.tsx
@@ -2,7 +2,7 @@ export function WebIcon() {
   return (
     <svg
       viewBox='0 0 24 24'
-      class='w-8 h-8 inline-flex fill-slate-950 dark:fill-emerald-300'
+      class='w-6 h-6 xl:w-8 xl:h-8 inline-flex fill-slate-950 dark:fill-emerald-300'
       xmlns='http://www.w3.org/2000/svg'
     >
       <title />
@@ -15,7 +15,7 @@ export function WebIcon() {
 
 export function GithubIcon() {
   return (
-    <svg class='w-8 h-8 inline-flex fill-slate-950 dark:fill-emerald-300'>
+    <svg class='w-6 h-6 xl:w-8 xl:h-8 inline-flex fill-slate-950 dark:fill-emerald-300'>
       <svg role='img' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>
         <title>GitHub</title>
         <path d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12' />
@@ -24,6 +24,51 @@ export function GithubIcon() {
   )
 }
 
+export const YoutubeIcon = () => (
+  <svg
+    class='w-6 h-6 xl:w-8 xl:h-8 inline-flex fill-slate-950 dark:fill-emerald-300'
+    viewBox='0 0 512 512'
+    width='100%'
+  >
+    <path
+      d='M501.303,132.765c-5.887,-22.03 -23.235,-39.377 -45.265,-45.265c-39.932,-10.7 -200.038,-10.7 -200.038,-10.7c0,0 -160.107,0 -200.039,10.7c-22.026,5.888 -39.377,23.235 -45.264,45.265c-10.697,39.928 -10.697,123.238 -10.697,123.238c0,0 0,83.308 10.697,123.232c5.887,22.03 23.238,39.382 45.264,45.269c39.932,10.696 200.039,10.696 200.039,10.696c0,0 160.106,0 200.038,-10.696c22.03,-5.887 39.378,-23.239 45.265,-45.269c10.696,-39.924 10.696,-123.232 10.696,-123.232c0,0 0,-83.31 -10.696,-123.238Zm-296.506,200.039l0,-153.603l133.019,76.802l-133.019,76.801Z'
+      style='fill-rule:nonzero;'
+    />
+  </svg>
+)
+
+export const TwitchIcon = () => (
+  <svg
+    role='img'
+    class='w-6 h-6 xl:w-8 xl:h-8 inline-flex fill-slate-950 dark:fill-emerald-300'
+    viewBox='0 0 24 24'
+  >
+    <title />
+    <path d='M2.089 0L.525 4.175v16.694h5.736V24h3.132l3.127-3.132h4.695l6.26-6.258V0H2.089zm2.086 2.085H21.39v11.479l-3.652 3.652H12l-3.127 3.127v-3.127H4.175V2.085zM9.915 12.522H12v-6.26H9.915v6.26zm5.735 0h2.086v-6.26H15.65v6.26z' />
+  </svg>
+)
+
+export const TwitterIcon = () => (
+  <svg
+    class='w-6 h-6 xl:w-8 xl:h-8 inline-flex fill-slate-950 dark:fill-emerald-300'
+    viewBox='0 0 512 512'
+  >
+    <path
+      d='M161.014,464.013c193.208,0 298.885,-160.071 298.885,-298.885c0,-4.546 0,-9.072 -0.307,-13.578c20.558,-14.871 38.305,-33.282 52.408,-54.374c-19.171,8.495 -39.51,14.065 -60.334,16.527c21.924,-13.124 38.343,-33.782 46.182,-58.102c-20.619,12.235 -43.18,20.859 -66.703,25.498c-19.862,-21.121 -47.602,-33.112 -76.593,-33.112c-57.682,0 -105.145,47.464 -105.145,105.144c0,8.002 0.914,15.979 2.722,23.773c-84.418,-4.231 -163.18,-44.161 -216.494,-109.752c-27.724,47.726 -13.379,109.576 32.522,140.226c-16.715,-0.495 -33.071,-5.005 -47.677,-13.148l0,1.331c0.014,49.814 35.447,93.111 84.275,102.974c-15.464,4.217 -31.693,4.833 -47.431,1.802c13.727,42.685 53.311,72.108 98.14,72.95c-37.19,29.227 -83.157,45.103 -130.458,45.056c-8.358,-0.016 -16.708,-0.522 -25.006,-1.516c48.034,30.825 103.94,47.18 161.014,47.104'
+      style='fill-rule:nonzero;'
+    />
+  </svg>
+)
+
+export const DiscordServerIcon = () => (
+  <svg
+    viewBox='0 0 640 512'
+    class='w-6 h-6 xl:w-8 xl:h-8 inline-flex fill-slate-950 dark:fill-emerald-300'
+  >
+    <path d='M524.531,69.836a1.5,1.5,0,0,0-.764-.7A485.065,485.065,0,0,0,404.081,32.03a1.816,1.816,0,0,0-1.923.91,337.461,337.461,0,0,0-14.9,30.6,447.848,447.848,0,0,0-134.426,0,309.541,309.541,0,0,0-15.135-30.6,1.89,1.89,0,0,0-1.924-.91A483.689,483.689,0,0,0,116.085,69.137a1.712,1.712,0,0,0-.788.676C39.068,183.651,18.186,294.69,28.43,404.354a2.016,2.016,0,0,0,.765,1.375A487.666,487.666,0,0,0,176.02,479.918a1.9,1.9,0,0,0,2.063-.676A348.2,348.2,0,0,0,208.12,430.4a1.86,1.86,0,0,0-1.019-2.588,321.173,321.173,0,0,1-45.868-21.853,1.885,1.885,0,0,1-.185-3.126c3.082-2.309,6.166-4.711,9.109-7.137a1.819,1.819,0,0,1,1.9-.256c96.229,43.917,200.41,43.917,295.5,0a1.812,1.812,0,0,1,1.924.233c2.944,2.426,6.027,4.851,9.132,7.16a1.884,1.884,0,0,1-.162,3.126,301.407,301.407,0,0,1-45.89,21.83,1.875,1.875,0,0,0-1,2.611,391.055,391.055,0,0,0,30.014,48.815,1.864,1.864,0,0,0,2.063.7A486.048,486.048,0,0,0,610.7,405.729a1.882,1.882,0,0,0,.765-1.352C623.729,277.594,590.933,167.465,524.531,69.836ZM222.491,337.58c-28.972,0-52.844-26.587-52.844-59.239S193.056,219.1,222.491,219.1c29.665,0,53.306,26.82,52.843,59.239C275.334,310.993,251.924,337.58,222.491,337.58Zm195.38,0c-28.971,0-52.843-26.587-52.843-59.239S388.437,219.1,417.871,219.1c29.667,0,53.307,26.82,52.844,59.239C470.715,310.993,447.538,337.58,417.871,337.58Z' />
+  </svg>
+)
+
 export function Left() {
   return (
     <svg

diff --git a/src/components/featured-and-projects/link.tsx b/src/components/featured-and-projects/link.tsx
@@ -7,23 +7,42 @@ const ANCHOR_STYLES = [
 
 type LinkProps = {
   href: string
-  text: string
+  title: string
 }
 
-import { WebIcon, GithubIcon } from './icons'
+import {
+  WebIcon,
+  GithubIcon,
+  TwitterIcon,
+  TwitchIcon,
+  YoutubeIcon,
+  DiscordServerIcon
+} from './icons'
 
-export default function Link({ href, text }: LinkProps) {
+export default function Link({ href, title }: LinkProps) {
   return (
     <a
       href={href}
       target='_blank'
       rel='noopener noreferrer'
       class={ANCHOR_STYLES}
-      title={
-        text === '' ? 'Github Repository' : text === '󰖟' ? 'Website' : 'Link'
-      }
+      title={title}
     >
-      {text === '' ? <GithubIcon /> : <WebIcon />}
+      {title === 'Website' ? (
+        <WebIcon />
+      ) : title === 'Repository' ? (
+        <GithubIcon />
+      ) : title === 'Twitter Account' ? (
+        <TwitterIcon />
+      ) : title === 'Twitch Channel' ? (
+        <TwitchIcon />
+      ) : title === 'Youtube Channel' ? (
+        <YoutubeIcon />
+      ) : title === 'Discord Server' ? (
+        <DiscordServerIcon />
+      ) : (
+        <WebIcon />
+      )}
     </a>
   )
 }
diff --git a/src/components/featured-and-projects/projects.tsx b/src/components/featured-and-projects/projects.tsx
@@ -1,9 +1,9 @@
-import { data, logos } from '@data/projects.json'
-
-import Link from './link'
+import { data } from '@data/projects.json'
 
 import { shuffle } from '@utils'
 
+const shuffledData = shuffle(data)
+
 const PROJECT_STYLES: string = [
   'col-span-6',
   'row-span-4',
@@ -19,7 +19,7 @@ const PROJECT_STYLES: string = [
   'font-bold',
   'font-rubik-doodle',
   'w-full',
-  'h-[300px]',
+  'xl:h-[400px] h-[300px]',
   'xl:h-full',
   'transition-all',
   'border-2',
@@ -29,35 +29,32 @@ const PROJECT_STYLES: string = [
   'dark:bg-emerald-900',
   'responsive-text-xs',
   'p-2',
-  'pb-5',
+  'pb-4',
   'relative'
 ].join(' ')
 
 import { signal } from '@preact/signals'
 const index = signal(0)
 
-interface ResourceProps {
-  tech: string
-}
-
-function Tech({ tech }: ResourceProps) {
-  const { name, url, ref } = logos.find((logo) => logo.name === tech)!
-  return (
-    <li>
-      <a href={ref} target='_blank' rel='noopener noreferrer'>
-        <img src={url} alt={name} />
-      </a>
-    </li>
-  )
-}
-
 type ResourcesProps = {
   n?: number
   lang?: string
 }
 
 import { DoubleLeft, DoubleRight } from './icons'
 
+import simpleIcons, { type toExportType } from '@components/icons/simple-icon'
+
+import { h } from 'preact'
+
+function SimpleIcon(key: string) {
+  const Icon = simpleIcons[key as keyof toExportType]
+  if (typeof Icon === 'function') {
+    return <Icon />
+  }
+  return h('fragment', {})
+}
+
 const BUTTONS_STYLES = [
   'absolute',
   'bg-cyan-300',
@@ -97,25 +94,41 @@ export default function Resources({ n = 1, lang = 'en' }: ResourcesProps) {
     <>
       {/* <DoubleLeftButton _f={goLeft} /> */}
       {Array.from(Array(n).keys()).map((i) => {
-        const project = shuffle(data).at((i + index.value) % data.length)!
+        const project = shuffledData.at((i + index.value) % data.length)!
         return (
           <article class={PROJECT_STYLES} key={i}>
             {i === 0 && <DoubleLeftButton _f={goLeft} />}
-            <h1 class='text-2xl'>{project.title}</h1>
-            <p class='font-bold responsive-text-xxs font-merriweather dark:text-slate-200'>
+            <h1 class='xl:text-3xl text-xl'>{project.title}</h1>
+            <p class='font-bold font-merriweather dark:text-slate-200 text-xs xl:text-base'>
               {project.description[lang as 'es' | 'en']}
             </p>
             {/* <span class='responsive-text-xs font-semibold'>Stack</span> */}
             <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) => (
-                <Tech key={index} tech={tech} />
+                <li key={index}>{SimpleIcon(tech)}</li>
               ))}
             </ul>
             <div class='flex gap-2'>
               {project?.repository && (
-                <Link href={project.repository} text='' />
+                <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>
               )}
-              {project?.demo && <Link href={project.demo} text='󰖟' />}
             </div>
             {i === n - 1 && <DoubleRightButton _f={goRight} />}
           </article>

diff --git a/src/components/featured-and-projects/resources.tsx b/src/components/featured-and-projects/resources.tsx
@@ -6,7 +6,7 @@ const RESOURCE_STYLES: string = [
   'rounded-sm',
   'shadow-[0_0_0.3rem_rgb(8_51_68)]', // rgb(8, 51, 68)
   'flex',
-  'flex-row',
+  'flex-col',
   'gap-2',
   'items-center',
   'justify-center',
@@ -22,7 +22,7 @@ const RESOURCE_STYLES: string = [
   'dark:text-cyan-300',
   'bg-slate-300',
   'dark:bg-slate-900',
-  'text-xl',
+  'text-base xl:text-2xl',
   'p-2',
   'relative'
 ].join(' ')
@@ -45,22 +45,27 @@ const BUTTONS_STYLES = [
   'bg-cyan-300',
   'rounded-sm',
   'flex',
+  'flex-wrap',
   'items-center',
   'justify-center',
   'py-1',
   'px-0.5'
 ].join(' ')
 
+import { shuffle } from '@utils'
+
+const shuffleData = shuffle(data)
+
 const DoubleUpButton = ({ _f }: { _f: () => void }) => (
-  <div class={`left-1 ${BUTTONS_STYLES} xl:hidden`}>
+  <div class={`-left-3 ${BUTTONS_STYLES} xl:hidden`}>
     <button onClick={_f} title={'iterate over'}>
       <DoubleUp />
     </button>
   </div>
 )
 
 const DoubleDownButton = ({ _f }: { _f: () => void }) => (
-  <div class={`right-1 ${BUTTONS_STYLES} xl:hidden`}>
+  <div class={`-right-3 ${BUTTONS_STYLES} xl:hidden`}>
     <button onClick={_f} title={'iterate over'}>
       <DoubleDown />
     </button>
@@ -97,16 +102,26 @@ export default function Resources({ n = 3 }: ResourceProps) {
     <Fragment>
       {Array.from(Array(n).keys()).map((i) => {
         // Array.from(Array(n).keys())
-        const resource = data.at((i + index.value) % data.length)
+        const resource = shuffleData.at((i + index.value) % data.length)
         return (
-          <article class={RESOURCE_STYLES} key={i}>
+          <article
+            class={`${RESOURCE_STYLES} ${i === 1 ? 'px-5' : ''}`}
+            key={i}
+          >
             {i === 0 && <DoubleLeftButton _f={goLeft} />}
             {i === 1 && <DoubleUpButton _f={goLeft} />}
             <span>{resource?.title}</span>
-            {resource?.repository && (
-              <Link href={resource.repository} text='' />
-            )}
-            {resource?.website && <Link href={resource.website} text='󰖟' />}
+            <div class='flex gap-2'>
+              {resource?.repository && (
+                <Link href={resource.repository} title='Repository' />
+              )}
+              {resource?.website && (
+                <Link href={resource.website} title='Website' />
+              )}
+              {resource?.links?.map((link, _i) => (
+                <Link href={link.url} title={link.site} key={_i} />
+              ))}
+            </div>
             {i === 1 && <DoubleDownButton _f={goRight} />}
             {i === 2 && <DoubleRightButton _f={goRight} />}
           </article>