🥓 feat: blog page

src/components/blog/blog-bento.astro

@@ -2,9 +2,11 @@
 import Bento from '../main/bento.astro'
 import Buttons from '@components/main/buttons.astro'
 import BlogAbout from '@components/blog/blog-about.astro'
+import LastEntries from './last-entries'
 ---
 
 <Bento>
   <Buttons />
   <BlogAbout />
+  <LastEntries client:visible />
 </Bento>

src/components/blog/last-entries.tsx

@@ -0,0 +1,54 @@
+const LAST_ENTRIES_STYLES = [
+  'col-span-6',
+  'row-span-5',
+  'bg-slate-300',
+  'dark:bg-slate-900',
+  'dark:text-slate-300',
+  'rounded-sm',
+  'flex',
+  'flex-col',
+  'p-4',
+  'font-bold',
+  'text-black',
+  'font-rubik-doodle',
+  'w-full',
+  'h-full',
+  'transition-all',
+  'border-2',
+  'dark:border-slate-300',
+  'border-slate-950',
+  'responsive-text-xs',
+  'gap-2',
+  'text-slate-900',
+  'dark:text-slate-300'
+].join(' ')
+
+import { entries } from '@data/blog.json'
+
+import { h, Fragment } from 'preact'
+
+export default function LastEntries() {
+  return (
+    <article class={LAST_ENTRIES_STYLES}>
+      <h1 class='dark:text-emerald-300 text-emerald-950'>- Last Entries -</h1>
+      <ul class='grid grid-cols-[1fr_5fr] gap-2 w-full p-2 responsive-text-sm'>
+        <li class='dark:text-cyan-300 text-cyan-950'>Date</li>
+        <li class='dark:text-cyan-300 text-cyan-950'>Title / Título</li>
+        {entries.map((entry, index) => {
+          return (
+            <Fragment key={index}>
+              <li class='font-merriweather responsive-text-xxs'>
+                {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'>
+                <a href={`/blog/${entry.href}`}>
+                  {entry.title} / {entry.título}
+                </a>
+              </li>
+            </Fragment>
+          )
+        })}
+      </ul>
+    </article>
+  )
+}

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

@@ -1,25 +1,63 @@
-export function WebIcon (){
-    return (
-        <svg viewBox="0 0 24 24" class="w-8 h-8 inline-flex fill-slate-950 dark:fill-emerald-300" xmlns="http://www.w3.org/2000/svg"><title /><path d="M17.3,13.35a1,1,0,0,1-.7-.29,1,1,0,0,1,0-1.41l2.12-2.12a2,2,0,0,0,0-2.83L17.3,5.28a2.06,2.06,0,0,0-2.83,0L12.35,7.4A1,1,0,0,1,10.94,6l2.12-2.12a4.1,4.1,0,0,1,5.66,0l1.41,1.41a4,4,0,0,1,0,5.66L18,13.06A1,1,0,0,1,17.3,13.35Z"  /><path d="M8.11,21.3a4,4,0,0,1-2.83-1.17L3.87,18.72a4,4,0,0,1,0-5.66L6,10.94A1,1,0,0,1,7.4,12.35L5.28,14.47a2,2,0,0,0,0,2.83L6.7,18.72a2.06,2.06,0,0,0,2.83,0l2.12-2.12A1,1,0,1,1,13.06,18l-2.12,2.12A4,4,0,0,1,8.11,21.3Z"  /><path d="M8.82,16.18a1,1,0,0,1-.71-.29,1,1,0,0,1,0-1.42l6.37-6.36a1,1,0,0,1,1.41,0,1,1,0,0,1,0,1.42L9.52,15.89A1,1,0,0,1,8.82,16.18Z"  /></svg>
-    )
+export function WebIcon() {
+  return (
+    <svg
+      viewBox='0 0 24 24'
+      class='w-8 h-8 inline-flex fill-slate-950 dark:fill-emerald-300'
+      xmlns='http://www.w3.org/2000/svg'
+    >
+      <title />
+      <path d='M17.3,13.35a1,1,0,0,1-.7-.29,1,1,0,0,1,0-1.41l2.12-2.12a2,2,0,0,0,0-2.83L17.3,5.28a2.06,2.06,0,0,0-2.83,0L12.35,7.4A1,1,0,0,1,10.94,6l2.12-2.12a4.1,4.1,0,0,1,5.66,0l1.41,1.41a4,4,0,0,1,0,5.66L18,13.06A1,1,0,0,1,17.3,13.35Z' />
+      <path d='M8.11,21.3a4,4,0,0,1-2.83-1.17L3.87,18.72a4,4,0,0,1,0-5.66L6,10.94A1,1,0,0,1,7.4,12.35L5.28,14.47a2,2,0,0,0,0,2.83L6.7,18.72a2.06,2.06,0,0,0,2.83,0l2.12-2.12A1,1,0,1,1,13.06,18l-2.12,2.12A4,4,0,0,1,8.11,21.3Z' />
+      <path d='M8.82,16.18a1,1,0,0,1-.71-.29,1,1,0,0,1,0-1.42l6.37-6.36a1,1,0,0,1,1.41,0,1,1,0,0,1,0,1.42L9.52,15.89A1,1,0,0,1,8.82,16.18Z' />
+    </svg>
+  )
 }
 
-export function GithubIcon () {
-    return (
-        <svg class="w-8 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" /></svg></svg>
-    )
+export function GithubIcon() {
+  return (
+    <svg class='w-8 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' />
+      </svg>
+    </svg>
+  )
 }
 
 export function Left() {
-    return (
-      <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' class='w-6 h-6 z-10 fill-emerald-950'>
-        <path d='M39.3756,48.0022l30.47-25.39a6.0035,6.0035,0,0,0-7.6878-9.223L26.1563,43.3906a6.0092,6.0092,0,0,0,0,9.2231L62.1578,82.615a6.0035,6.0035,0,0,0,7.6878-9.2231Z' />
-      </svg>
-    )
-  }
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      viewBox='0 0 100 100'
+      class='w-6 h-6 z-10 fill-emerald-950'
+    >
+      <path d='M39.3756,48.0022l30.47-25.39a6.0035,6.0035,0,0,0-7.6878-9.223L26.1563,43.3906a6.0092,6.0092,0,0,0,0,9.2231L62.1578,82.615a6.0035,6.0035,0,0,0,7.6878-9.2231Z' />
+    </svg>
+  )
+}
 
-  export function Right() {
-    return (
-      <svg viewBox='0 0 100 100' class='w-6 h-6 z-10 fill-emerald-950' xmlns="http://www.w3.org/2000/svg"><path d="M69.8437,43.3876,33.8422,13.3863a6.0035,6.0035,0,0,0-7.6878,9.223l30.47,25.39-30.47,25.39a6.0035,6.0035,0,0,0,7.6878,9.2231L69.8437,52.6106a6.0091,6.0091,0,0,0,0-9.223Z" /></svg>
-    )
-  }
+export function Right() {
+  return (
+    <svg
+      viewBox='0 0 100 100'
+      class='w-6 h-6 fill-emerald-950'
+      xmlns='http://www.w3.org/2000/svg'
+    >
+      <path d='M69.8437,43.3876,33.8422,13.3863a6.0035,6.0035,0,0,0-7.6878,9.223l30.47,25.39-30.47,25.39a6.0035,6.0035,0,0,0,7.6878,9.2231L69.8437,52.6106a6.0091,6.0091,0,0,0,0-9.223Z' />
+    </svg>
+  )
+}
+
+export default function GoogleCalendar() {
+  return (
+    <svg
+      role='img'
+      viewBox='0 0 24 24'
+      class='w-8 h-8 fill-emerald-300'
+      xmlns='http://www.w3.org/2000/svg'
+    >
+      <title>Google Calendar</title>
+      <path d='M18.316 5.684H24v12.632h-5.684V5.684zM5.684 24h12.632v-5.684H5.684V24zM18.316 5.684V0H1.895A1.894 1.894 0 0 0 0 1.895v16.421h5.684V5.684h12.632zm-7.207 6.25v-.065c.272-.144.5-.349.687-.617s.279-.595.279-.982c0-.379-.099-.72-.3-1.025a2.05 2.05 0 0 0-.832-.714 2.703 2.703 0 0 0-1.197-.257c-.6 0-1.094.156-1.481.467-.386.311-.65.671-.793 1.078l1.085.452c.086-.249.224-.461.413-.633.189-.172.445-.257.767-.257.33 0 .602.088.816.264a.86.86 0 0 1 .322.703c0 .33-.12.589-.36.778-.24.19-.535.284-.886.284h-.567v1.085h.633c.407 0 .748.109 1.02.327.272.218.407.499.407.843 0 .336-.129.614-.387.832s-.565.327-.924.327c-.351 0-.651-.103-.897-.311-.248-.208-.422-.502-.521-.881l-1.096.452c.178.616.505 1.082.977 1.401.472.319.984.478 1.538.477a2.84 2.84 0 0 0 1.293-.291c.382-.193.684-.458.902-.794.218-.336.327-.72.327-1.149 0-.429-.115-.797-.344-1.105a2.067 2.067 0 0 0-.881-.689zm2.093-1.931l.602.913L15 10.045v5.744h1.187V8.446h-.827l-2.158 1.557zM22.105 0h-3.289v5.184H24V1.895A1.894 1.894 0 0 0 22.105 0zm-3.289 23.5l4.684-4.684h-4.684V23.5zM0 22.105C0 23.152.848 24 1.895 24h3.289v-5.184H0v3.289z' />
+    </svg>
+  )
+}

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

@@ -10,7 +10,7 @@ type LinkProps = {
   text: string
 }
 
-import { WebIcon, GithubIcon } from "./icons"
+import { WebIcon, GithubIcon } from './icons'
 
 export default function Link({ href, text }: LinkProps) {
   return (
@@ -19,8 +19,11 @@ export default function Link({ href, text }: LinkProps) {
       target='_blank'
       rel='noopener noreferrer'
       class={ANCHOR_STYLES}
+      title={
+        text === '' ? 'Github Repository' : text === '󰖟' ? 'Website' : 'Link'
+      }
     >
-      {text === '' ? <GithubIcon /> : <WebIcon /> }
+      {text === '' ? <GithubIcon /> : <WebIcon />}
     </a>
   )
 }

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

@@ -70,7 +70,7 @@ export default function Resources({ n = 3 }: ResourcesProps) {
   return (
     <>
       <div class='absolute font-merriweather responsive-text bg-emerald-200 left-1 rounded-sm flex items-center py-2'>
-        <button onClick={goLeft}>
+        <button onClick={goLeft} title={'iterate over'}>
           <Left />
         </button>
       </div>
@@ -102,7 +102,7 @@ export default function Resources({ n = 3 }: ResourcesProps) {
         )
       })}
       <div class='absolute responsive-text bg-emerald-200 right-1 rounded-sm flex items-center py-2'>
-        <button onClick={goRight}>
+        <button onClick={goRight} title={'iterate over'}>
           <Right />
         </button>
       </div>

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

@@ -31,7 +31,6 @@ const RESOURCE_STYLES: string = [
 import { signal } from '@preact/signals'
 const index = signal(0)
 
-
 import Link from './link'
 
 type ResourceProps = {
@@ -53,7 +52,7 @@ export default function Resources({ n = 3 }: ResourceProps) {
   return (
     <>
       <div class='absolute bg-cyan-300 bottom-16 left-1 rounded-sm flex items-center py-2'>
-        <button onClick={goLeft}>
+        <button onClick={goLeft} title={'iterate over'}>
           <Left />
         </button>
       </div>
@@ -71,7 +70,7 @@ export default function Resources({ n = 3 }: ResourceProps) {
         )
       })}
       <div class='absolute bg-cyan-300 bottom-16 right-1 rounded-sm flex items-center py-2'>
-        <button onClick={goRight}>
+        <button onClick={goRight} title={'iterate over'}>
           <Right />
         </button>
       </div>

src/components/icons/home.astro

@@ -1,5 +1,5 @@
 <svg {...Astro.props} viewBox='0 0 576 512' xmlns='http://www.w3.org/2000/svg'
   ><path
     d='M280.37 148.26L96 300.11V464a16 16 0 0 0 16 16l112.06-.29a16 16 0 0 0 15.92-16V368a16 16 0 0 1 16-16h64a16 16 0 0 1 16 16v95.64a16 16 0 0 0 16 16.05L464 480a16 16 0 0 0 16-16V300L295.67 148.26a12.19 12.19 0 0 0-15.3 0zM571.6 251.47L488 182.56V44.05a12 12 0 0 0-12-12h-56a12 12 0 0 0-12 12v72.61L318.47 43a48 48 0 0 0-61 0L4.34 251.47a12 12 0 0 0-1.6 16.9l25.5 31A12 12 0 0 0 45.15 301l235.22-193.74a12.19 12.19 0 0 1 15.3 0L530.9 301a12 12 0 0 0 16.9-1.6l25.5-31a12 12 0 0 0-1.7-16.93z'
-  /></svg
+   /></svg
 >

src/components/main/buttons.astro

@@ -1,6 +1,6 @@
 ---
 interface Props {
-  href: string
+  href?: string
 }
 
 const { href }: Props = Astro.props

src/components/main/featured.astro

@@ -1,5 +1,4 @@
 ---
-import NerdIcon from './nerd-icon.astro'
 const FEATURED_STYLES = [
   'col-span-1',
   'row-span-2',

src/components/main/footer.astro

@@ -20,7 +20,5 @@
     target='_blank'
     rel='noopener noreferrer'>jamerrq</a
   >
-  <a href='/' class='bg-slate-100 text-slate-900 px-2 rounded-lg'>
-    Home
-  </a>
+  <a href='/' class='bg-slate-100 text-slate-900 px-2 rounded-lg'> Home</a>
 </footer>

src/components/main/socials.astro

@@ -55,7 +55,7 @@ import {
       href='https://github.com/jamerrq'
       target='_blank'
       rel='noopener noreferrer'
-      class=' hover:scale-110'
+      class='hover:scale-110'
       title='GitHub'
     >
       <svg
@@ -69,7 +69,7 @@ import {
       href='mailto:[email protected]'
       target='_blank'
       rel='noopener noreferrer'
-      class=' hover:scale-110'
+      class='hover:scale-110'
       title='Mail'
     >
       <svg
@@ -83,7 +83,7 @@ import {
       href='https://www.linkedin.com/in/jamerrq/'
       target='_blank'
       rel='noopener noreferrer'
-      class=' hover:scale-110'
+      class='hover:scale-110'
       title='Linkedin'
     >
       <svg
@@ -97,7 +97,7 @@ import {
       href='https://my-portfolio-jamerrq.netlify.app/assets/pdf/CV_JamerRebolledo.pdf'
       target='_blank'
       rel='noopener noreferrer'
-      class=' hover:scale-110'
+      class='hover:scale-110'
       title='CV'
     >
       <svg
@@ -111,7 +111,7 @@ import {
       href='https://lichess.org/@/jamerrq'
       target='_blank'
       rel='noopener noreferrer'
-      class=' hover:scale-110'
+      class='hover:scale-110'
       title='Lichess'
     >
       <svg

src/components/main/working-on.astro

@@ -145,7 +145,7 @@ import {
             title='PostgreSQL'
           >
             <svg
-              class='w-5 h-6'
+              class='w-5 h-6 hover:scale-110'
               set:html={siPostgresql.svg}
               fill={`#${siPostgresql.hex}`}
             />
@@ -181,9 +181,10 @@ import {
             href='https://www.postman.com/'
             target='_blank'
             rel='noopener noreferrer'
+            title='Postman'
           >
             <svg
-              class='w-5 h-6'
+              class='w-5 h-5 hover:scale-110'
               set:html={siPostman.svg}
               fill={`#${siPostman.hex}`}
             />

src/components/tech-stack/title.astro

@@ -19,7 +19,7 @@ const TITLE_STYLES: string = [
   'font-rubik-doodle',
   // 'shadow-[0_0_0.5rem_rgba(0_0_0)]'
   // 'shadow-[0_0_0.15rem_rgb(69_26_3)]', // rgb(69, 26, 3)
-  'shadow-[0_0_0.25rem_rgb(253_230_138)]', // rgb(253, 230, 138)
+  'shadow-[0_0_0.25rem_rgb(253_230_138)]' // rgb(253, 230, 138)
 ].join(' ')
 ---
 

src/data/blog.json

@@ -1,9 +1,16 @@
 {
-  "data": [
+  "entries": [
     {
       "title": "The process of creating this website",
       "date": "2023-Jan-16",
-      "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla euismod, nisl vitae aliquam ultricies, nunc nisl aliquet nunc, vitae aliquam"
+      "título": "El proceso de crear este sitio web",
+      "href": "building-this-website"
+    },
+    {
+      "title": "5+ years using Linux and I couldn't be happier",
+      "date": "2023-Jan-16",
+      "título": "5+ años usando Linux y no podría estar más feliz",
+      "href": "5-years-using-linux"
     }
   ]
 }

src/pages/404.astro

@@ -62,10 +62,10 @@ import Container from '@components/main/container.astro'
     <Container>
       <h1>Page Not Found!</h1>
       <Peep />
-      <p class='responsive-text-xxs '>
+      <p class='responsive-text-xxs'>
         Sorry, the resource you are looking for does not exist (yet?).
       </p>
-      <p class='responsive-text-xxs '>
+      <p class='responsive-text-xxs'>
         Please check the URL and try again or go home
       </p>
       <div class='flex gap-2'>

src/pages/es/index.astro

@@ -1,6 +1,6 @@
 ---
-import Layout from '../../layouts/layout.astro'
-import Bento from '../../components/main-bento.astro'
+import Layout from '@layouts/layout.astro'
+import Bento from '@components/main/main-bento.astro'
 ---
 
 <Layout title='jamerrq.dev (es)'>

tsconfig.json

@@ -16,6 +16,9 @@
       "@data/*": [
         "src/data/*"
       ],
+      "@layouts/*": [
+        "src/layouts/*"
+      ],
     },
     "jsx": "react-jsx",
     "jsxImportSource": "preact",