just about every kind of improvement

georgebaskervil · May 17, 2024 · 44af160 · 44af160
1 parent 79283cf
commit 44af160
Show file tree

Hide file tree

Showing 25 changed files with 262 additions and 327 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -1,6 +1,3 @@
-# EditorConfig is awesome: https://EditorConfig.org
-
-# top-most EditorConfig file
 root = true
 
 [*]

diff --git a/README.md b/README.md
@@ -3,5 +3,5 @@
 URL is georgebaskerville.me.
 Based on [this template](https://github.com/pastc/portfolio)
 
-Code liscenced under MIT Liscence  
+Code liscenced under MIT Licence  
 Creative works liscenced under CC0 1.0 Universal
diff --git a/astro.config.mts → astro.config.ts b/astro.config.mts → astro.config.ts
@@ -1,8 +1,7 @@
 import { defineConfig } from "astro/config";
 import tailwind from "@astrojs/tailwind";
 
-// https://astro.build/config
 export default defineConfig({
-  prefetch: true,
-  integrations: [tailwind()]
+    prefetch: true,
+    integrations: [tailwind()],
 });
diff --git a/package.json b/package.json
@@ -25,7 +25,6 @@
     "@eslint/js": "^9.1.1",
     "@tailwindcss/typography": "^0.5.13",
     "@types/node": "^20.12.7",
-    "daisyui": "^4.10.3",
     "globals": "^15.1.0",
     "typescript-eslint": "^7.8.0",
     "vite": "^5.2.10"

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/public/brand-assets/old/icon.avif b/public/brand-assets/old/icon.avif
diff --git a/public/brand-assets/old/icon.png b/public/brand-assets/old/icon.png
diff --git a/public/brand-assets/old/icon.webp b/public/brand-assets/old/icon.webp
diff --git a/src/components/Layout.astro b/src/components/Layout.astro
@@ -0,0 +1,116 @@
+---
+import { Config } from "../config";
+
+interface Props {
+  title?: string;
+  description?: string;
+  og_title?: string;
+  og_description?: string;
+  og_type?: string;
+  og_image?: string;
+}
+
+const currentPath = Astro.url.pathname;
+---
+
+<!doctype html>
+<html class="bg-base-100 text-base-content overflow-y-scroll" lang="en">
+    <body>
+        <div class="mx-auto min-h-screen flex flex-col gap-9 px-10 py-8 md:gap-20 md:py-8">
+            <header class="flex w-full gap-3 md:gap-2 flex-row justify-between pb-5 md:pb-0">
+                <a href="/" class="text-sm md:text-xl lg:text-xl whitespace-nowrap mr-4 text-text">{Config.me.name}</a>
+                <nav class="text-xs md:text-sm lg:text-sm custom-breadcrumbs text-text">
+                    <ul>
+                        <li>
+                            <a class={currentPath === "/" ? "text-purple-500" : ""} href="/">Home</a>
+                        </li>
+                        <li>
+                            <a class={currentPath.startsWith("/posts") ? "text-purple-500" : ""} href="/posts">Posts</a>
+                        </li>
+                        <li>
+                            <a class={currentPath.startsWith("/pictures") ? "text-purple-500" : ""} href="/pictures">Pictures</a>
+                        </li>
+                        <li>
+                            <a class={currentPath.startsWith("/contact") ? "text-purple-500" : ""} href="/contact">Contact</a>
+                        </li>
+                        <li>
+                            <a class={currentPath.startsWith("/netflixdobetter") ? "text-purple-500" : ""} href="/netflixdobetter">Netflix, Do Better</a>
+                        </li>
+                        <li>
+                            <a class={currentPath.startsWith("/privacy") ? "text-purple-500" : ""} href="/privacy">Privacy</a>
+                        </li>
+                    </ul>
+                </nav>
+            </header>
+            <div class="flex-grow">
+                <slot />
+            </div>
+        </div>
+        <style is:global>
+            .custom-breadcrumbs {
+                max-width: 100%;
+                overflow-x: auto;
+                padding-top: 0.5%;
+            }
+
+            .custom-breadcrumbs > ul {
+                display: flex;
+                align-items: center;
+                white-space: nowrap;
+                min-height: min-content;
+            }
+
+            .custom-breadcrumbs > ul > li {
+                display: flex;
+                align-items: center;
+            }
+
+            .custom-breadcrumbs > ul > li > a {
+                display: flex;
+                cursor: pointer;
+                align-items: center;
+            }
+
+            @media (hover: hover) {
+                .custom-breadcrumbs > ul > li > a:hover {
+                    text-decoration-line: underline;
+                }
+            }
+
+            .custom-breadcrumbs > ul > li > a:focus {
+                outline: 2px solid transparent;
+                outline-offset: 2px;
+            }
+
+            .custom-breadcrumbs > ul > li > a:focus-visible {
+                outline: 2px solid currentColor;
+                outline-offset: 2px;
+            }
+
+            .custom-breadcrumbs > ul > li + *:before {
+                content: "/";
+                margin-left: 0.5rem /* 8px */;
+                margin-right: 0.75rem /* 12px */;
+                display: block;
+                opacity: 0.4;
+                background-color: transparent;
+            }
+
+            [dir="rtl"] .custom-breadcrumbs > ul > li + *:before {
+                --tw-rotate: -180deg;
+            }
+
+            footer {
+                font-family: monospace;
+            }
+        </style>
+    </body>
+    <footer class="bottom-0 text-left p-4 text-white text-sm ml-6" style="opacity:0.4; font-style: italic">
+        // Built with Astro, Tailwind CSS, and TypeScript by George Baskerville.
+        Based on
+        <a href="https://tahir.sh" target="_blank" rel="noopener noreferrer" class="hover:underline">a template</a>
+        by 
+        <a href="https://tahir.sh" target="_blank" rel="noopener noreferrer" class="hover:underline">Tahir Murata</a>.
+        <a href="https://github.com/georgebaskervil/Personal-Website" target="_blank" rel="noopener noreferrer" class="hover:underline">Source code available under MIT licence on GitHub</a>.
+    </footer>
+</html>
diff --git a/src/components/avatar.astro b/src/components/avatar.astro
@@ -4,21 +4,8 @@ const images = getavatar();
 let avatar = images[0]; // get the first avatar
 ---
 
-<style>
-    .image-container {
-      overflow: hidden;
-      border-radius: 10px;
-      transition: transform 0.3s ease;
-      width: 35%;
-      height: 35%;
-      min-width: 125px;
-    }
-    .image-container:hover {
-      transform: scale(1.05);
-    }
-  </style>
-    <picture class="image-container">
-      <source srcset={`/brand-assets/${avatar}.avif`} type="image/avif">
-      <source srcset={`/brand-assets/${avatar}.webp`} type="image/webp">
-      <img src={`/brand-assets/${avatar}.png`} alt="Avatar" class="lazy" />
-    </picture>
+<picture class="image-container overflow-hidden rounded-lg transition-transform duration-300 hover:scale-105" style="width: 35%; height: 35%; min-width: 125px;">
+  <source srcset={`/brand-assets/${avatar}.avif`} type="image/avif">
+  <source srcset={`/brand-assets/${avatar}.webp`} type="image/webp">
+  <img src={`/brand-assets/${avatar}.png`} alt="Avatar" class="lazy" />
+</picture>
diff --git a/src/components/image.astro b/src/components/image.astro
@@ -0,0 +1,34 @@
+---
+import { getavatar } from '../getavatar';
+const images = getavatar();
+let avatar = images[0]; // get the first avatar
+---
+
+<picture class="image-container overflow-hidden rounded-lg transition-transform duration-300 hover:scale-105" style="width: 35%; height: 35%; min-width: 125px;">
+  <source srcset={`/brand-assets/${avatar}.avif`} type="image/avif">
+  <source srcset={`/brand-assets/${avatar}.webp`} type="image/webp">
+  <img data-src={`/brand-assets/${avatar}.png`} alt="Avatar" class="lazy" />
+</picture>
+
+<script>
+    window.onload = () => {
+      const observer = new IntersectionObserver((entries, observer) => {
+        entries.forEach(entry => {
+          if (entry.isIntersecting) {
+            // Load image
+            const img = entry.target as HTMLImageElement;
+            if (img.dataset.src) {
+              img.src = img.dataset.src;
+            }
+
+            // Stop observing
+            observer.unobserve(entry.target);
+          }
+        });
+      });
+
+      document.querySelectorAll('img.lazy').forEach(img => {
+        observer.observe(img);
+      });
+    };
+  </script>
diff --git a/src/content/posts/im-boycotting-meta-heres-why.md b/src/content/posts/im-boycotting-meta-heres-why.md
@@ -10,7 +10,7 @@ However, Meta seems to have somehow managed to convince me that they are worthy
 
 However, this is not the real problem. The real problem lies in the fact that despite the extent of Meta's wrongoing being common knowledge, very few consequences have actually been brought against them. For example, the fines they have had to pay equal an inconsequential portion of their total revenue. Additionally, their userbase continues to grow at a phenomenal rate yearly.
 
-This has lead me to think about why Meta hasn't suffered consequences, as one of the first and hardest hitting consequences a social media platform can face is loss of users.This is especially true for Meta because the primary reason for this is that the only appeal factor of Meta is the size of their userbase. Almost everyone has family members using Facebook or Instagram, but not everyone has family members using X or Reddit even though the content on these platforms is of similar or better quality than can be found on Meta's platforms.
+This has lead me to think about why Meta hasn't suffered consequences, as one of the first and hardest hitting consequences a social media platform can face is loss of users. This is especially true for Meta because the primary reason for this is that the only appeal factor of Meta is the size of their userbase. Almost everyone has family members using Facebook or Instagram, but not everyone has family members using X or Reddit even though the content on these platforms is of similar or better quality than can be found on Meta's platforms.
 
 This is the root of the problem: we as internet users haven't stepped up where we should have, and haven't brought down long-term consequences on the platforms that we know are doing more systemic wrong than many of the individuals cancelled in the last five or so years.
 

diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro