project cards

alexnguyennz · Sep 14, 2024 · 0b82386 · 0b82386
1 parent c5d26c7
commit 0b82386
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 68 deletions.
diff --git a/astro.config.mjs b/astro.config.mjs
@@ -23,7 +23,15 @@ export default defineConfig({
     icon({
       iconDir: "src/assets/icons",
       include: {
-        lucide: ["info", "hammer", "sun-medium", "moon", "search", "rss"],
+        lucide: [
+          "info",
+          "hammer",
+          "sun-medium",
+          "moon",
+          "search",
+          "rss",
+          "arrow-right",
+        ],
       },
       svgoOptions: {
         plugins: [
@@ -44,7 +52,9 @@ export default defineConfig({
     }),
     astroExpressiveCode({ themes: ["dracula"] }),
   ],
-  prefetch: true,
+  prefetch: {
+    prefetchAll: true,
+  },
   markdown: {
     syntaxHighlight: false,
     remarkPlugins: [readingTime, modifiedTime],

diff --git a/src/assets/img/about.jpg b/src/assets/img/about.jpg
diff --git a/src/components/pages/home/ProjectCard.astro b/src/components/pages/home/ProjectCard.astro
@@ -14,49 +14,33 @@ interface Props {
 
 const { project } = Astro.props;
 
-const tags: CollectionEntry<"tags">[] = await getEntries(project.data.tags);
+const tags = await getEntries(project.data.tags);
 ---
 
 <article
-  class="group relative flex h-full max-w-xs flex-1 flex-col rounded-[3rem] border border-slate-200 bg-white p-5 shadow-sm hover:translate-y-1 hover:shadow-md dark:border-slate-800 dark:bg-slate-900"
+  class="group relative flex max-w-xs flex-1 scale-95 flex-col rounded-[3rem] border border-slate-200 bg-white bg-opacity-70 p-5 shadow transition hover:translate-y-1 hover:scale-100 hover:bg-opacity-100 hover:shadow-lg dark:border-slate-800 dark:bg-slate-900"
 >
-  <div
-    class="absolute right-5 top-5 z-10 flex gap-2 transition group-hover:opacity-100 sm:opacity-0"
-  >
-    <a
-      href={project.data.url}
-      target="_blank"
-      rel="noopener noreferrer nofollow"
-      title="View"
-      class="rounded-full bg-slate-700 p-3 py-1 text-xl text-white no-underline hover:no-underline dark:bg-slate-200 dark:text-black"
-      aria-label={project.data.name + " link"}
-    >
-      ↗
-    </a>
-  </div>
-
-  <div>
+  <div class="m-auto flex flex-1 flex-col">
     <a
       href={`/project/${project.slug}`}
       aria-label={`${project.data.name} project page`}
-      data-astro-prefetch
+      class="m-auto mb-2 after:absolute after:inset-0 after:z-10"
     >
       {
         project.data.cover ? (
           <Image
             src={project.data.cover}
-            height={192}
             alt={project.data.name}
             class={cn(
-              "mx-auto mb-2 h-[128px] animate-show object-contain opacity-0",
+              "max-h-[128px] w-auto",
               project.slug === "vsctrustorgnz" && "dark:invert",
-              project.slug === "astrowp" && "rounded-[2.25rem] bg-slate-900",
+              project.slug === "astrowp" && "invert dark:invert-0",
             )}
             loading="lazy"
             transition:name={`project-${project.data.name}-image`}
           />
         ) : (
-          <div class="h-[128px] w-full" />
+          <div class="h-[128px]" />
         )
       }</a
     >
@@ -83,6 +67,7 @@ const tags: CollectionEntry<"tags">[] = await getEntries(project.data.tags);
                 href={tag.url}
                 target="_blank"
                 rel="noreferrer noopener nofollow"
+                class="z-20"
                 title={tag.name}
                 aria-label={tag.name}
               >
@@ -126,7 +111,7 @@ const tags: CollectionEntry<"tags">[] = await getEntries(project.data.tags);
 
 <style>
   article {
-    transition-property: box-shadow, transform;
+    transition-property: all;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     transition-duration: 300ms;
     animation: animate-in ease-in both;

diff --git a/src/pages/about.astro b/src/pages/about.astro
@@ -1,18 +1,8 @@
 ---
-import { Image, getImage } from "astro:assets";
-
 import { SEO } from "astro-seo";
 
 import Layout from "@/layouts/Layout.astro";
 
-import aboutImage from "@/assets/img/about.jpg";
-
-const image = await getImage({
-  src: aboutImage,
-  width: aboutImage.width / 2,
-  height: aboutImage.height / 2,
-});
-
 const ogImageUrl = new URL(
   `/api/og/?title=About web developer Alex Nguyen`,
   Astro.site,
@@ -41,36 +31,20 @@ const ogImageUrl = new URL(
     <p>
       Hi there, I'm a web developer based in Wellington, New Zealand. After
       studying to be a network engineer and working in IT support related roles,
-      I decided to become a developer in 2023.
+      I decided to become a freelance developer in 2023.
     </p>
 
     <p>
-      I've always been interested in computers and tech. From an early age, I've
-      loved computers - from setting up emulators to play old games, installing
-      and configuring different OSs, building my own PCs, and dabbling in
-      software and game development.
+      I've always been interested in computers and tech. From an early age I
+      loved using computers - from setting up emulators to play old games,
+      installing and configuring different operating systems, building my own
+      PCs, and dabbling in software and game development.
     </p>
 
     <p>
       In my spare time, I like to read (slowly), run on local tracks, go to the
-      cinema, and play the piano (poorly). I also watch too much basketball.
+      cinema, and play the piano (poorly). I'm currently writing a comedy
+      fiction book. I also watch too much basketball.
     </p>
-
-    <a
-      href="https://waterfalls.co.nz/waterfalls-by-region/292-new-zealand-waterfalls/north-island/wellington-and-wairarapa/327-fish-ladder-waterfall"
-      target="_blank"
-      rel="noreferrer noopener nofollow"
-    >
-      <Image
-        src={image.src}
-        width={image.attributes.width}
-        height={image.attributes.height}
-        alt="View from the Fish Ladder at Trelissick Park, Wellington"
-        title="View from the Fish Ladder at Trelissick Park, Wellington"
-        class="mx-auto h-auto w-96 rounded-2xl shadow-lg"
-        fetchpriority="high"
-        loading="eager"
-      />
-    </a>
   </div>
 </Layout>
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
@@ -30,15 +30,6 @@ module.exports = {
           },
         },
       }),
-      keyframes: {
-        show: {
-          "0%": { opacity: 0 },
-          "100%": { opacity: 100 },
-        },
-      },
-      animation: {
-        show: "show 0.5s 0.5s forwards",
-      },
     },
   },
   plugins: [require("@tailwindcss/typography")],