Rework hero copy and footer to match QRGenerator

Author: Laoujin

midjourney-raw/laoujin2_a_workshop_bench_seen_from_above_scattered_developer_t_5386d7e6-5b7b-4d6c-807c-28a0530d5cd9.png

@@ -0,0 +1,10 @@
+---
+type Props = {size?: number}
+const {size = 15} = Astro.props
+---
+
+<svg viewBox="0 0 16 16" width={size} height={size} aria-hidden="true" fill="currentColor">
+  <path
+    d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82a7.4 7.4 0 0 1 2-.27c.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8Z"
+  ></path>
+</svg>

src/components/GithubGlyph.astro

@@ -1,5 +1,6 @@
 ---
 import type {Project} from '../data/projects'
+import GithubGlyph from './GithubGlyph.astro'
 
 type Props = {project: Project}
 
@@ -44,11 +45,7 @@ const fallback = `linear-gradient(135deg, hsl(${hue} 42% 22%), hsl(${hue + 14} 3
         )
       }
       <a class="gh" href={project.github} target="_blank" rel="noopener">
-        <svg viewBox="0 0 16 16" width="15" height="15" aria-hidden="true" fill="currentColor">
-          <path
-            d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82a7.4 7.4 0 0 1 2-.27c.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8Z"
-          ></path>
-        </svg>
+        <GithubGlyph />
         GitHub
       </a>
     </div>

src/components/ProjectCard.astro

@@ -1,5 +1,6 @@
 ---
 import Base from '../layouts/Base.astro'
+import GithubGlyph from '../components/GithubGlyph.astro'
 import BlogTile from '../components/BlogTile.astro'
 import Section from '../components/Section.astro'
 import {projects, sections} from '../data/projects'
@@ -24,11 +25,8 @@ const description =
         <span>dev</span>
       </a>
 
-      <h1>Tools we built<br />because we needed them</h1>
-      <p class="lede">
-        Everything here came out of a real itch at itenium: a talk to give, a PDF to split, a
-        notification worth noticing. All of it is open source.
-      </p>
+      <h1>Tools we built</h1>
+      <p class="lede">Free and open-source tooling by itenium.</p>
 
       <nav class="jump">
         {sections.map((section) => <a href={`#${section.id}`}>{section.title}</a>)}
@@ -53,10 +51,19 @@ const description =
 
   <footer>
     <div class="wrap foot-inner">
-      <p>Built at <a href="https://itenium.be" target="_blank" rel="noopener">itenium</a></p>
-      <p>
-        <a href="https://github.com/itenium-be" target="_blank" rel="noopener">github.com/itenium-be</a>
-      </p>
+      <a class="built" href="https://itenium.be" target="_blank" rel="noopener">
+        <span>Built at</span>
+        <img
+          src="https://itenium.be/wp-content/uploads/2025/11/logo-itenium.svg"
+          alt="itenium"
+          width="74"
+          height="18"
+        />
+      </a>
+      <a class="source" href="https://github.com/itenium-be" target="_blank" rel="noopener">
+        <GithubGlyph size={16} />
+        <span>Source</span>
+      </a>
     </div>
   </footer>
 </Base>
@@ -163,23 +170,34 @@ const description =
 
   .foot-inner {
     display: flex;
-    justify-content: space-between;
-    gap: 16px;
+    align-items: center;
+    gap: 14px;
     flex-wrap: wrap;
     color: var(--muted);
-    font-size: 0.86rem;
+    font-size: 0.79rem;
   }
 
-  .foot-inner p {
-    margin: 0;
+  .built,
+  .source {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    text-decoration: none;
+    color: var(--muted);
+    transition: color 0.18s ease;
   }
 
-  .foot-inner a {
-    color: var(--accent);
-    text-decoration: none;
+  .built:hover,
+  .source:hover {
+    color: var(--text);
+  }
+
+  .built img {
+    height: 18px;
+    width: auto;
   }
 
-  .foot-inner a:hover {
-    text-decoration: underline;
+  .source {
+    margin-left: auto;
   }
 </style>