voice (#78)

- styling

astro.config.mjs

@@ -24,7 +24,7 @@ export default defineConfig({
     icon({
       iconDir: "src/assets/icons",
       include: {
-        lucide: ["info", "sun-medium", "moon", "search", "rss"],
+        lucide: ["info", "hammer", "sun-medium", "moon", "search", "rss"],
       },
       svgoOptions: {
         plugins: [

cypress/e2e/footer.cy.js

@@ -24,7 +24,7 @@ describe("Footer", () => {
   });
 
   it("last updated date displays", () => {
-    cy.getByData("updated").should("contain.text", "🛠️ Updated");
+    cy.getByData("updated").should("contain.text", "Updated");
   });
 
   it("theme toggles", () => {

src/components/Footer.astro

@@ -13,15 +13,18 @@ import Updated from "./Updated.astro";
         <a href="/colophon"
           ><span class="sr-only">Colophon page</span><Icon
             name="lucide:info"
-            class="size-[24px] hover:scale-110"
+            class="size-[24px] hover:rotate-6 hover:scale-110"
           /></a
         >
       </p>
 
       <div class="flex items-center justify-center gap-4">
         <a href="mailto:[email protected]" title="My email">
           <span class="sr-only">My email</span>
-          <Icon name="mail" class="size-[26px] hover:scale-110" />
+          <Icon
+            name="mail"
+            class="size-[26px] hover:rotate-6 hover:scale-110"
+          />
         </a>
 
         <a
@@ -31,7 +34,7 @@ import Updated from "./Updated.astro";
           title="My LinkedIn"
         >
           <span class="sr-only">My LinkedIn</span>
-          <Icon name="linkedin" class="size-6 hover:scale-110" />
+          <Icon name="linkedin" class="size-6 hover:rotate-6 hover:scale-110" />
         </a>
 
         <a
@@ -41,7 +44,7 @@ import Updated from "./Updated.astro";
           title="My X or Twitter"
         >
           <span class="sr-only">My X or Twitter</span>
-          <Icon name="x" class="size-6 hover:scale-110" />
+          <Icon name="x" class="size-6 hover:rotate-6 hover:scale-110" />
         </a>
 
         <a
@@ -51,16 +54,22 @@ import Updated from "./Updated.astro";
           title="My GitHub"
         >
           <span class="sr-only">My GitHub</span>
-          <Icon name="github" class="size-6 hover:scale-110 dark:hidden" />
+          <Icon
+            name="github"
+            class="size-6 hover:rotate-6 hover:scale-110 dark:hidden"
+          />
           <Icon
             name="github-dark"
-            class="hidden size-6 hover:scale-110 dark:block"
+            class="hidden size-6 hover:rotate-6 hover:scale-110 dark:block"
           />
         </a>
 
         <a href="/rss.xml" title="My RSS feed">
           <span class="sr-only">My RSS feed</span>
-          <Icon name="lucide:rss" class="size-6 hover:scale-110" />
+          <Icon
+            name="lucide:rss"
+            class="size-6 hover:rotate-6 hover:scale-110"
+          />
         </a>
       </div>
     </div>

src/components/PlayVoice.astro

@@ -51,7 +51,7 @@ const { id } = Astro.props;
 
       const id = this.dataset.id;
 
-      audio.src = `/voice/${id === "/" ? "index" : id?.slice(1)}.mp3`;
+      audio.src = `/voice/${id}.mp3`;
 
       const button = document.querySelector("button#play-voice");
 

src/components/Updated.astro

@@ -1,24 +1,13 @@
 ---
+import { Icon } from "astro-icon/components";
+
 const lastUpdated = new Date();
 ---
 
 <astro-updated data-lastupdated={lastUpdated} transition:persist>
   <span data-testid="updated"
-    >🛠️ <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="20"
-      height="20"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      stroke-width="2"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      class="inline animate-pulse"
-      ><circle cx="12" cy="12" r="1"></circle><circle cx="19" cy="12" r="1"
-      ></circle><circle cx="5" cy="12" r="1"></circle></svg
-    ></span
-  >
+    ><Icon name="lucide:hammer" class="inline size-5" />
+  </span>
 </astro-updated>
 
 <script>
@@ -30,10 +19,8 @@ const lastUpdated = new Date();
     constructor() {
       super();
 
-      const date = this.dataset.lastupdated;
-      const span = this.querySelector("span");
-
-      span!.textContent = `🛠️ Updated ${dayjs().to(dayjs(date))}`;
+      this.querySelector("span")!.innerHTML +=
+        `Updated ${dayjs().to(dayjs(this.dataset.lastupdated))}`;
     }
   }
 

src/content/pages/about.md

@@ -2,12 +2,4 @@
 
 ---
 
-Hi there, I'm a web developer from New Zealand. After studying to be a
-network engineer and working in IT support related roles, I decided to
-become a developer in 2023.
-
-In my spare time, I like to read (slowly), run on local tracks, watch
-movies and shows, and play the piano (poorly). I also watch too much
-basketball.
-
-This site is built with Astro and Tailwind CSS. Hosted on Netlify. Source code is available here.
+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'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. - 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.

src/content/pages/colophon.md

@@ -20,6 +20,8 @@ Unit tests are run with [Vitest](https://vitest.dev/). End-to-end tests are run
 
 Analytics are powered by [Clarity](https://clarity.microsoft.com/). Privacy info is [available here](https://learn.microsoft.com/en-us/clarity/faq#privacy).
 
+Recordings for each page are AI generated with [ElevenLabs](elevenlabs.io/?from=partnerhale9484) using a cloned voice from recordings of my actual voice. The link includes my referral.
+
 ### Design and Visual Elements
 [DM Sans](https://fonts.google.com/specimen/DM+Sans) is a sans serif font under the [Open Font License](https://openfontlicense.org/).
 

src/content/pages/colophon_voice.md

@@ -0,0 +1,5 @@
+---
+
+---
+
+This colophon page outlines the technology and tools used to build this site. - This site is built with Astro. - Tailwind CSS is used for base styles. - Netlify handles hosting, deployment, and edge functions used to generate Open Graph images. - Orama is used for search functionality. - Unit tests are run with Vitest. - End-to-end tests are run with Cypress. - Analytics are powered by Clarity. - Privacy info is available here. - Recordings for each page are AI generated with ElevenLabs using a cloned voice from recordings of my actual voice. - The link includes my referral. - DM Sans is a sans serif font under the Open Font License. - Icons are from Lucide. - Any third-party logos are from official sources like press kits or brand pages. - Any other images have been sourced from my projects, or created by myself. - The source code is available on GitHub under the MIT License. - Feel free to create an issue for any mistakes or errors.

src/content/pages/index.md

@@ -2,8 +2,8 @@
 
 ---
 
-Hi, I'm Alex.
+Hi, I'm Alex. - 
 
-Some cool things I've worked with
+I'm a web developer. - 
 
-Some of my projects
+Currently I work as a freelancer.

src/content/pages/services.md

@@ -3,13 +3,6 @@
 ---
 
 I'm a freelance web developer with mainly experience in frontend and
-some exposure to backend tech.
-
-I'm currently taking on new projects, and I'm interested in developer
-roles (local or remote). Feel free to [contact me](mailto:[email protected]) about any projects or opportunities.
-
-I also offer volunteer web development for charities and nonprofits.
-
-Please contact me if you're looking for:
-- web or app development
+some exposure to backend tech. - I'm currently taking on new projects, and I'm interested in developer roles (local or remote). - Feel free to contact me about any projects or opportunities. - I also offer volunteer web development for charities and nonprofits. - Please contact me if you're looking for: -
+- web or app development -
 - web consulting

src/layouts/Layout.astro

@@ -10,12 +10,10 @@ import PlayVoice from "@/components/PlayVoice.astro";
 
 interface Props {
   title?: string;
-  voice?: boolean;
+  voice?: string;
 }
 
 const { title, voice } = Astro.props;
-
-const pathname = Astro.url.pathname;
 ---
 
 <!doctype html>
@@ -67,7 +65,7 @@ const pathname = Astro.url.pathname;
       <slot />
     </main>
 
-    {/*voice && <PlayVoice id={pathname} />*/}
+    {voice && <PlayVoice id={voice} />}
 
     <Footer />
 

src/pages/about.astro

@@ -15,23 +15,21 @@ const image = await getImage({
 
 /*import { rawContent } from "@/content/pages/about.md";
 
-if (import.meta.env.PROD) {
-  await fetch(`${Astro.url.origin}/api/voice`, {
-    method: "POST",
-    body: JSON.stringify({
-      id: "about",
-      textInput: rawContent(),
-    }),
-  });
-}*/
+await fetch(`${Astro.url.origin}/api/voice`, {
+  method: "POST",
+  body: JSON.stringify({
+    id: "about",
+    textInput: rawContent(),
+  }),
+});*/
 
 const ogImageUrl = new URL(
   `/api/og/?title=About web developer Alex Nguyen`,
   Astro.site,
 );
 ---
 
-<Layout title="About -" voice>
+<Layout title="About -" voice="about">
   <Fragment slot="head">
     <SEO
       description="About web developer Alex Nguyen"

src/pages/api/voice.ts

@@ -1,6 +1,6 @@
-/*
 import type { APIRoute } from "astro";
 
+// @ts-ignore - no types available
 import ElevenLabs from "elevenlabs-node";
 
 const voice = new ElevenLabs({
@@ -14,8 +14,8 @@ export const POST: APIRoute = async ({ request }) => {
   const response = await voice.textToSpeech({
     fileName: `public/voice/${id}.mp3`,
     textInput,
+    modelId: "eleven_turbo_v2",
   });
 
   return new Response(JSON.stringify(response));
 };
-*/

src/pages/colophon.astro

@@ -8,13 +8,23 @@ import Layout from "@/layouts/Layout.astro";
 const page = await getEntry("pages", "colophon");
 const { Content } = await page.render();
 
+/*import { rawContent } from "@/content/pages/colophon_voice.md";
+
+await fetch(`${Astro.url.origin}/api/voice`, {
+  method: "POST",
+  body: JSON.stringify({
+    id: "colophon",
+    textInput: rawContent(),
+  }),
+});*/
+
 const ogImageUrl = new URL(
   `/api/og/?title=Colophon - tech and tools`,
   Astro.site,
 );
 ---
 
-<Layout title="Colophon - ">
+<Layout title="Colophon - " voice="colophon">
   <Fragment slot="head">
     <SEO
       description="Colophon - tech and tools"

src/pages/index.astro

@@ -4,38 +4,29 @@ import { getCollection } from "astro:content";
 import { SEO } from "astro-seo";
 
 import Layout from "@/layouts/Layout.astro";
-import Tool from "@/components/pages/home/Tool.astro";
 import ProjectCard from "@/components/pages/home/ProjectCard.astro";
 
-const tools = (await getCollection("tools")).sort(
-  (a, b) => a.data.order - b.data.order,
-);
-
 const projects = (await getCollection("projects")).sort(
   (a, b) => a.data.order - b.data.order,
 );
 
 /*import { rawContent } from "@/content/pages/index.md";
 
-import { POST } from "./api/voice.ts";
-
-if (import.meta.env.PROD) {
-  await fetch(`${Astro.url.origin}/api/voice`, {
-    method: "POST",
-    body: JSON.stringify({
-      id: "index",
-      textInput: rawContent(),
-    }),
-  });
-}*/
+await fetch(`${Astro.url.origin}/api/voice`, {
+  method: "POST",
+  body: JSON.stringify({
+    id: "index",
+    textInput: rawContent(),
+  }),
+});*/
 
 const ogImageUrl = new URL(
   `/api/og/?title=Home of web developer Alex Nguyen`,
   Astro.site,
 );
 ---
 
-<Layout voice>
+<Layout voice="index">
   <Fragment slot="head">
     <SEO
       description="Website of web developer Alex Nguyen"
@@ -52,25 +43,10 @@ const ogImageUrl = new URL(
     />
   </Fragment>
 
-  <div class="prose dark:prose-invert">
-    <h1>Hi, I'm Alex.</h1>
-    <p class="text-center">
-      I'm a web developer. Currently I work as a freelancer.
-    </p>
-  </div>
-
-  <div class="flex flex-col gap-6">
-    <div class="space-y-4">
-      <h2>Some cool things I've worked with</h2>
-      <ul class="grid grid-cols-2 justify-center gap-6 sm:grid-cols-4">
-        {
-          tools.map(({ slug, data: tool }) => (
-            <Tool name={tool.name} slug={slug} url={tool.url} />
-          ))
-        }
-      </ul>
-    </div>
-  </div>
+  <h1>Hi, I'm Alex.</h1>
+  <p class="text-center">
+    I'm a web developer. Currently I work as a freelancer.
+  </p>
 
   <h2 class="mt-6">Some of my projects</h2>