adding colophon

aacevski · Dec 29, 2024 · 374c89d · 374c89d
1 parent 0f0d483
commit 374c89d
Show file tree

Hide file tree

Showing 8 changed files with 251 additions and 1 deletion.
diff --git a/src/components/colophon/color-system.astro b/src/components/colophon/color-system.astro
@@ -0,0 +1,40 @@
+---
+const colors = [
+  {
+    name: "Rich Black",
+    value: "#0a0a0a",
+    usage: "Primary background color",
+    class: "bg-[#0a0a0a]",
+  },
+  {
+    name: "Blue",
+    value: "#3b82f6",
+    usage: "Primary accent color",
+    class: "bg-blue-500",
+  },
+  {
+    name: "Gray",
+    value: "#9ca3af",
+    usage: "Secondary text color",
+    class: "bg-gray-400",
+  },
+];
+---
+
+<div class="space-y-8">
+  <h2 class="text-2xl font-semibold font-mono">Colors</h2>
+  <div class="grid gap-4">
+    {
+      colors.map((color) => (
+        <div class="p-6 bg-white/5 rounded-lg border border-white/10">
+          <div class={`h-16 ${color.class} rounded-lg mb-4`} />
+          <div class="space-y-2">
+            <h3 class="text-lg font-medium text-white">{color.name}</h3>
+            <p class="text-gray-400">{color.usage}</p>
+            <p class="font-mono text-sm text-gray-500">{color.value}</p>
+          </div>
+        </div>
+      ))
+    }
+  </div>
+</div>
diff --git a/src/components/colophon/font-display.astro b/src/components/colophon/font-display.astro
@@ -0,0 +1,46 @@
+---
+const fontDisplays = [
+  {
+    name: "Inter",
+    weights: [
+      { weight: 400, sample: "The quick brown fox jumps over the lazy dog" },
+      { weight: 600, sample: "The quick brown fox jumps over the lazy dog" },
+    ],
+    className: "font-sans",
+  },
+  {
+    name: "JetBrains Mono",
+    weights: [
+      { weight: 400, sample: "The quick brown fox jumps over the lazy dog" },
+      { weight: 700, sample: "The quick brown fox jumps over the lazy dog" },
+    ],
+    className: "font-mono",
+  },
+];
+---
+
+<div class="space-y-8">
+  <h2 class="text-2xl font-semibold font-mono">Font Specimens</h2>
+  <div class="grid gap-8">
+    {
+      fontDisplays.map((font) => (
+        <div class="p-6 bg-white/5 rounded-lg border border-white/10">
+          <h3 class="text-lg font-medium text-white mb-4">{font.name}</h3>
+          <div class="space-y-4">
+            {font.weights.map(({ weight, sample }) => (
+              <div>
+                <p class="text-sm text-gray-500 mb-2">Weight: {weight}</p>
+                <p
+                  class={`text-xl ${font.className}`}
+                  style={`font-weight: ${weight}`}
+                >
+                  {sample}
+                </p>
+              </div>
+            ))}
+          </div>
+        </div>
+      ))
+    }
+  </div>
+</div>
diff --git a/src/components/colophon/tech-stack.astro b/src/components/colophon/tech-stack.astro
@@ -0,0 +1,80 @@
+---
+interface Technology {
+  name: string;
+  description: string;
+  url: string;
+  icon: string;
+  category: "core" | "styling" | "content" | "tooling";
+}
+
+const technologies: Technology[] = [
+  {
+    name: "Astro",
+    description: "Lightning-fast static site generator with zero-JS by default",
+    url: "https://astro.build",
+    icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><defs><linearGradient id="a" x1="882.997" x2="638.955" y1="27.113" y2="866.902" gradientTransform="scale(.1)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#000014"/><stop offset="1" stop-color="#150426"/></linearGradient><linearGradient id="b" x1="1001.68" x2="790.326" y1="652.45" y2="1094.91" gradientTransform="scale(.1)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ff1639"/><stop offset="1" stop-color="#ff1639" stop-opacity="0"/></linearGradient></defs><path fill="url(#a)" d="M81.504 9.465c.973 1.207 1.469 2.836 2.457 6.09l21.656 71.136a90.079 90.079 0 0 0-25.89-8.765L65.629 30.28a1.833 1.833 0 0 0-3.52.004L48.18 77.902a90.104 90.104 0 0 0-26.003 8.778l21.758-71.14c.996-3.25 1.492-4.876 2.464-6.083a8.023 8.023 0 0 1 3.243-2.398c1.433-.575 3.136-.575 6.535-.575H71.72c3.402 0 5.105 0 6.543.579a7.988 7.988 0 0 1 3.242 2.402Zm0 0"/><path fill="#ff5d01" d="M84.094 90.074c-3.57 3.055-10.696 5.137-18.903 5.137-10.07 0-18.515-3.137-20.754-7.356-.8 2.418-.98 5.184-.98 6.954 0 0-.527 8.675 5.508 14.71a5.671 5.671 0 0 1 5.672-5.671c5.37 0 5.367 4.683 5.363 8.488v.336c0 5.773 3.527 10.719 8.543 12.805a11.62 11.62 0 0 1-1.172-5.098c0-5.508 3.23-7.555 6.988-9.938 2.989-1.894 6.309-4 8.594-8.222a15.513 15.513 0 0 0 1.875-7.41 15.55 15.55 0 0 0-.734-4.735Zm0 0"/><path fill="url(#b)" d="M84.094 90.074c-3.57 3.055-10.696 5.137-18.903 5.137-10.07 0-18.515-3.137-20.754-7.356-.8 2.418-.98 5.184-.98 6.954 0 0-.527 8.675 5.508 14.71a5.671 5.671 0 0 1 5.672-5.671c5.37 0 5.367 4.683 5.363 8.488v.336c0 5.773 3.527 10.719 8.543 12.805a11.62 11.62 0 0 1-1.172-5.098c0-5.508 3.23-7.555 6.988-9.938 2.989-1.894 6.309-4 8.594-8.222a15.513 15.513 0 0 0 1.875-7.41 15.55 15.55 0 0 0-.734-4.735Zm0 0"/></svg>`,
+    category: "core",
+  },
+  {
+    name: "Tailwind CSS",
+    description: "Utility-first framework for rapid UI development",
+    url: "https://tailwindcss.com",
+    icon: `<path d="M12 6.036c-2.667 0-4.333 1.325-5 3.976 1-1.325 2.167-1.822 3.5-1.491.761.189 1.305.738 1.91 1.345C13.387 10.855 14.522 12 17 12c2.667 0 4.333-1.325 5-3.976-1 1.325-2.166 1.822-3.5 1.491-.761-.189-1.305-.738-1.91-1.345C15.613 7.181 14.478 6.036 12 6.036zM7 12c-2.667 0-4.333 1.325-5 3.976 1-1.326 2.167-1.822 3.5-1.491.761.189 1.305.738 1.91 1.345 .977.99 2.112 2.134 4.59 2.134 2.667 0 4.333-1.325 5-3.976-1 1.325-2.167 1.822-3.5 1.491-.761-.189-1.305-.738-1.91-1.345C10.613 13.145 9.478 12 7 12z"/>`,
+    category: "styling",
+  },
+];
+
+const categoryColors = {
+  core: "from-blue-500/20 to-blue-500/10",
+  styling: "from-purple-500/20 to-purple-500/10",
+  content: "from-green-500/20 to-green-500/10",
+  tooling: "from-orange-500/20 to-orange-500/10",
+} as const;
+---
+
+<div class="space-y-8">
+  <h2 class="text-2xl font-semibold font-mono">Technology Stack</h2>
+  <div class="grid gap-4">
+    {
+      technologies.map((tech) => (
+        <a
+          href={tech.url}
+          target="_blank"
+          rel="noopener noreferrer"
+          class="group relative block p-6 bg-gradient-to-br border border-white/10 rounded-lg overflow-hidden transition-all duration-300 hover:border-white/20"
+          class:list={[categoryColors[tech.category]]}
+        >
+          <div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/5 to-transparent translate-x-[-100%] group-hover:translate-x-[100%] transition-transform duration-500" />
+
+          <div class="relative flex items-start gap-4">
+            <div class="shrink-0 p-2 bg-white/10 rounded-lg">
+              <svg
+                class="w-6 h-6 text-white"
+                viewBox="0 0 24 24"
+                fill="currentColor"
+              >
+                <Fragment set:html={tech.icon} />
+              </svg>
+            </div>
+
+            <div>
+              <div class="flex items-center gap-2 mb-2">
+                <h3 class="text-lg font-medium text-white group-hover:text-blue-400 transition-colors">
+                  {tech.name}
+                </h3>
+                <svg
+                  class="w-4 h-4 text-gray-500 group-hover:text-blue-400 transition-colors"
+                  viewBox="0 0 20 20"
+                  fill="currentColor"
+                >
+                  <path d="M5.22 14.78a.75.75 0 001.06 0l7.22-7.22v5.69a.75.75 0 001.5 0v-7.5a.75.75 0 00-.75-.75h-7.5a.75.75 0 000 1.5h5.69l-7.22 7.22a.75.75 0 000 1.06z" />
+                </svg>
+              </div>
+              <p class="text-gray-400">{tech.description}</p>
+            </div>
+          </div>
+        </a>
+      ))
+    }
+  </div>
+</div>
diff --git a/src/components/colophon/typography.astro b/src/components/colophon/typography.astro
@@ -0,0 +1,36 @@
+---
+const fonts = [
+  {
+    name: "Inter",
+    usage: "Primary font for body text and UI elements",
+    designer: "Rasmus Andersson",
+    url: "https://rsms.me/inter/",
+  },
+  {
+    name: "JetBrains Mono",
+    usage: "Monospace font for headings and code blocks",
+    designer: "JetBrains",
+    url: "https://www.jetbrains.com/lp/mono/",
+  },
+];
+---
+
+<div class="space-y-8">
+  <h2 class="text-2xl font-semibold font-mono">Typography</h2>
+  <div class="grid gap-4">
+    {
+      fonts.map((font) => (
+        <a
+          href={font.url}
+          target="_blank"
+          rel="noopener noreferrer"
+          class="block p-6 bg-white/5 rounded-lg border border-white/10 hover:border-blue-500/50 transition-all duration-300"
+        >
+          <h3 class="text-lg font-medium text-white mb-2">{font.name}</h3>
+          <p class="text-gray-400 mb-1">{font.usage}</p>
+          <p class="text-sm text-gray-500">Designed by {font.designer}</p>
+        </a>
+      ))
+    }
+  </div>
+</div>
diff --git a/src/components/footer.astro b/src/components/footer.astro
@@ -10,6 +10,7 @@ const socials = [
 const links = [
   { label: "Home", href: "/" },
   { label: "Writing", href: "/blog" },
+  { label: "Colophon", href: "/colophon" },
 ];
 
 const currentYear = new Date().getFullYear();

diff --git a/src/layouts/layout.astro b/src/layouts/layout.astro
@@ -1,4 +1,5 @@
 ---
+import Footer from "../components/footer.astro";
 import Navigation from "../components/header/navigation.astro";
 import { ClientRouter } from "astro:transitions";
 
@@ -57,6 +58,7 @@ const ogImage = new URL(
     <Navigation />
     <main class="pt-28 overflow-x-hidden">
       <slot />
+      <Footer />
     </main>
   </body>
 </html>
diff --git a/src/pages/colophon.astro b/src/pages/colophon.astro
@@ -0,0 +1,46 @@
+---
+import Layout from "../layouts/layout.astro";
+import TechStack from "../components/colophon/tech-stack.astro";
+import Typography from "../components/colophon/typography.astro";
+import ColorSystem from "../components/colophon/color-system.astro";
+import FontDisplay from "../components/colophon/font-display.astro";
+---
+
+<Layout title="Colophon - Andrej Acevski">
+  <div class="max-w-3xl mx-auto px-6 py-16">
+    <header class="mb-16">
+      <h1
+        class="text-4xl font-bold font-mono bg-gradient-to-r from-white to-gray-500 bg-clip-text text-transparent mb-4"
+      >
+        Colophon
+      </h1>
+      <p class="text-xl text-gray-400">
+        A detailed look at the tools and technologies used to build this
+        website.
+      </p>
+    </header>
+
+    <div class="space-y-16">
+      <FontDisplay />
+      <ColorSystem />
+      <TechStack />
+      <Typography />
+
+      <div class="space-y-8">
+        <h2 class="text-2xl font-semibold font-mono">Open Source</h2>
+        <p class="text-gray-400">
+          This website is open source and available on{" "}
+          <a
+            href="https://github.com/ace03uec/portfolio"
+            class="text-blue-400 hover:text-blue-300 transition-colors"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            GitHub
+          </a>. Feel free to explore the code and use it as inspiration for your
+          own projects.
+        </p>
+      </div>
+    </div>
+  </div>
+</Layout>
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -14,5 +14,4 @@ import Writing from "../components/sections/writing/index.astro";
       <Writing />
     </div>
   </div>
-  <Footer />
 </Layout>