feat: test dot as favicon

public/favicon.svg

@@ -1,9 +1,17 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
+<?xml version="1.0" encoding="UTF-8"?>
-   <path d="M 31.999999,0 A 32,31.999999 0 0 0 0,31.999999 V 95.999997 A 32,31.999999 0 0 0 31.999999,128 h 64 A 32,31.999999 0 0 0 128,95.999997 V 31.999999 A 32,31.999999 0 0 0 95.999999,0 Z m 9.813477,32.85327 H 86.186522 V 44.373292 H 70.399903 V 95.146726 H 57.600098 V 44.373292 H 41.813476 Z" />
+<svg width="51mm" height="51mm" version="1.1" viewBox="0 0 51 51" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-   <style>
+<defs>
-      path { fill: black; }
+<linearGradient id="c" x1="85.455" x2="120.81" y1="158.91" y2="123.55" gradientUnits="userSpaceOnUse">
-      @media (prefers-color-scheme: dark) {
+<stop stop-color="#fb5246" offset="0"/>
-         path { fill: white; }
+<stop stop-color="#fb5246" offset=".5"/>
-      }
+<stop stop-color="#ff9068" offset="1"/>
-   </style>
+</linearGradient>
+<linearGradient id="b" x1="77.63" x2="128.63" y1="141.23" y2="141.23" gradientUnits="userSpaceOnUse">
+<stop stop-color="#fff" stop-opacity=".095618" offset="0"/>
+<stop stop-color="#fff" stop-opacity="0" offset="1"/>
+</linearGradient>
+</defs>
+<g transform="translate(-77.63 -115.73)">
+<circle cx="103.13" cy="141.23" r="25" fill="url(#c)" stroke="url(#b)" stroke-opacity=".095618"/>
+</g>
 </svg>

src/components/Footer.astro

@@ -5,7 +5,7 @@ import { SITE } from "@consts";
 <footer class="w-full">
   <span class="text-tertiary"
     >&copy; {new Date().getFullYear()}
-    <a href="/" class="hover:text-secondary transition-colors duration-300"
+    <a href="#top" class="hover:text-secondary transition-colors duration-300"
       >{SITE.TITLE}</a
     >. All rights reserved.
   </span>

src/components/Header.astro

@@ -1,6 +1,7 @@
 ---
 import { SITE } from "@consts";
 import Button from "@components/Button.astro";
+import { Icon } from "astro-icon/components";
 
 const pathname = new URL(Astro.request.url).pathname;
 const currentPath = pathname.replace(/\/$/, "");
@@ -10,10 +11,10 @@ const currentPath = pathname.replace(/\/$/, "");
   <nav class="flex w-full justify-between">
     <div class="flex w-fit items-center justify-between">
       <a href="/" aria-label={SITE.TITLE} title={SITE.TITLE} class="group">
-        <div
+        <Icon
-          class="ring-secondary/10 size-8 rounded-full bg-linear-45 from-[#FF5907] from-50% to-[#FF8548] ring-1 transition-transform ease-in-out ring-inset group-hover:scale-105"
+          name="icon"
-        >
+          class="size-8 transition-transform ease-in-out group-hover:scale-105"
-        </div>
+        />
       </a>
     </div>
     <ul class="flex w-fit flex-row items-center gap-4">

src/components/Hero.astro

@@ -5,33 +5,35 @@ import Link from "@components/Link.astro";
 
 <section class="animate-reveal flex flex-col gap-6 opacity-0">
   <h1
-    class="flex w-full flex-col text-start text-7xl leading-[1] font-medium tracking-[-2px] lowercase sm:tracking-[-4px]"
+    class="flex w-full flex-col text-start text-7xl leading-[1] font-semibold tracking-[-2px] lowercase"
   >
     <span class="text-nowrap">Troy Lusty</span>
     <span class="text-tertiary text-pretty">Digital Designer</span>
   </h1>
   <div class="text-secondary/70 text-lg font-medium">
     I am in my final year of studying on a Game Arts and Design BA (Hons) degree
-    and on the side I manage online operations for a
+    and on the side I manage online operations for a family run
-    <Link href="/projects/camouflage-store" class="underline underline-offset-2"
+    <a
-      >family run business</Link
+      href="/projects/camouflage-store"
+      class="hover:text-gradient-start hover:decoration-gradient-start underline decoration-wavy underline-offset-2 transition-colors duration-300"
+      >outdoor apparel business</a
     >.
   </div>
   <div class="text-tertiary text-lg font-medium">
-    Want to chat?
+    Think I could help with a project you're working on?
     <Link
       href="mailto:hello@troylusty.com"
-      class="lowercase underline underline-offset-2"
+      class="hover:text-secondary lowercase underline decoration-wavy underline-offset-2 transition-colors duration-300"
     >
       Send me a message
     </Link>
   </div>
-  <div id="social-links" class="flex flex-row gap-4">
+  <div class="flex flex-row gap-4">
     {
       SITE.LINKS.map((i) => (
         <Link
           href={i.href}
-          class="text-tertiary hover:text-accent text-lg font-medium lowercase underline-offset-2 hover:underline"
+          class="text-tertiary hover:text-secondary text-lg font-medium lowercase decoration-wavy underline-offset-2 transition-colors duration-300 hover:underline"
         >
           {i.name}
         </Link>

src/components/Prose.astro

@@ -1,5 +1,5 @@
 <div
-  class="prose prose-headings:text-secondary prose-h1:text-xl prose-h1:font-bold prose-p:max-w-full prose-p:text-pretty prose-p:break-words prose-p:text-secondary prose-a:text-secondary prose-a:underline prose-a:decoration-tertiary prose-a:decoration-wavy prose-strong:text-secondary prose-code:whitespace-pre-wrap prose-code:font-medium prose-code:text-secondary prose-code:before:content-none prose-code:after:content-none prose-li:text-secondary prose-li:marker:text-secondary prose-img:max-h-[90vh] prose-img:w-auto prose-img:max-w-full prose-img:rounded-sm prose-video:max-h-[90vh] prose-video:w-auto prose-video:max-w-full prose-video:rounded-sm max-w-full"
+  class="prose prose-headings:text-secondary prose-h1:text-xl prose-h1:font-bold prose-p:max-w-full prose-p:text-pretty prose-p:break-words prose-p:text-secondary/70 prose-a:text-secondary prose-a:underline prose-a:decoration-tertiary prose-a:decoration-wavy prose-strong:text-secondary prose-code:whitespace-pre-wrap prose-code:font-medium prose-code:text-secondary prose-code:before:content-none prose-code:after:content-none prose-li:text-secondary prose-li:marker:text-secondary prose-img:max-h-[90vh] prose-img:w-auto prose-img:max-w-full prose-img:rounded-sm prose-video:max-h-[90vh] prose-video:w-auto prose-video:max-w-full prose-video:rounded-sm max-w-full"
 >
   <slot />
 </div>

src/components/ShowcasePost.astro

@@ -20,7 +20,7 @@ const { collection } = Astro.props;
         </h3>
         <FormattedDate
           date={collection.data.date}
-          className="text-accent block text-nowrap"
+          className="text-tertiary block text-nowrap"
         />
       </div>
       <p class="text-tertiary text-pretty">{collection.data.description}</p>

src/icons/icon.svg

@@ -1,3 +1,17 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
+<?xml version="1.0" encoding="UTF-8"?>
-   <path d="M 31.999999,0 A 32,31.999999 0 0 0 0,31.999999 V 95.999997 A 32,31.999999 0 0 0 31.999999,128 h 64 A 32,31.999999 0 0 0 128,95.999997 V 31.999999 A 32,31.999999 0 0 0 95.999999,0 Z m 9.813477,32.85327 H 86.186522 V 44.373292 H 70.399903 V 95.146726 H 57.600098 V 44.373292 H 41.813476 Z" fill="currentColor" />
+<svg width="51mm" height="51mm" version="1.1" viewBox="0 0 51 51" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<defs>
+<linearGradient id="c" x1="85.455" x2="120.81" y1="158.91" y2="123.55" gradientUnits="userSpaceOnUse">
+<stop stop-color="#fb5246" offset="0"/>
+<stop stop-color="#fb5246" offset=".5"/>
+<stop stop-color="#ff9068" offset="1"/>
+</linearGradient>
+<linearGradient id="b" x1="77.63" x2="128.63" y1="141.23" y2="141.23" gradientUnits="userSpaceOnUse">
+<stop stop-color="#fff" stop-opacity=".095618" offset="0"/>
+<stop stop-color="#fff" stop-opacity="0" offset="1"/>
+</linearGradient>
+</defs>
+<g transform="translate(-77.63 -115.73)">
+<circle cx="103.13" cy="141.23" r="25" fill="url(#c)" stroke="url(#b)" stroke-opacity=".095618"/>
+</g>
 </svg>

src/styles/global.css

@@ -8,10 +8,12 @@
   --color-primary: var(--primary);
   --color-secondary: var(--secondary);
   --color-tertiary: var(--tertiary);
-  --color-accent: var(--accent);
 
   --color-button: var(--button);
   --color-button-active: var(--button-active);
+
+  --color-gradient-start: #fb5246;
+  --color-gradient-end: #ff9068;
 }
 
 @theme {
@@ -39,7 +41,6 @@
   --primary: light-dark(var(--color-neutral-50), var(--color-black));
   --secondary: light-dark(var(--color-neutral-950), var(--color-neutral-50));
   --tertiary: light-dark(var(--color-neutral-500), var(--color-neutral-500));
-  --accent: light-dark(var(--color-neutral-700), var(--color-neutral-300));
 
   --button: light-dark(var(--color-neutral-200), var(--color-neutral-800));
   --button-active: light-dark(