More work on the new site. Still a long way to go.

public/images/angrybeanie.svg

@@ -0,0 +1,58 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="178.2231mm"
+   height="154.4136mm"
+   viewBox="0 0 178.2231 154.4136"
+   version="1.1"
+   id="svg236"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview238"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false" />
+  <defs
+     id="defs233" />
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-21.214167,-73.891462)">
+    <g
+       id="g891-0"
+       transform="matrix(0.5573153,0,0,0.55360346,-182.66243,-89.541294)"
+       inkscape:export-filename="/home/purserj/Graphics/angrybeanie/ab_twitter.png"
+       inkscape:export-xdpi="22.709999"
+       inkscape:export-ydpi="22.709999">
+      <path
+         inkscape:connector-curvature="0"
+         sodipodi:nodetypes="ccscsssscscsssc"
+         id="path2908-35"
+         d="m 391.3746,561.70048 -16.99327,-4.45511 c 0,0 -10.22746,-51.57704 -0.54364,-67.19951 9.6838,-15.62247 8.71932,-17.27235 8.71932,-17.27235 0,0 9.05197,-103.80042 40.18416,-131.96107 31.13219,-28.16064 60.76633,-39.94978 91.92309,-41.56059 31.15675,-1.6108 95.95737,6.99577 120.13286,42.67127 24.17549,35.67548 39.16169,101.0733 38.97081,117.78751 -0.19089,16.7142 7.80398,34.17743 7.80398,34.17743 0,0 2.2326,34.11381 -8.75839,49.39358 -10.99099,15.27978 -21.23294,22.3738 -21.23294,22.3738 0,0 10.1292,-54.62229 -4.12247,-69.5348 -14.25168,-14.9125 -39.98884,-28.64509 -86.89534,-25.57528 -46.90648,3.0698 -111.55527,9.87026 -138.08053,36.44465 -26.52527,26.57439 -31.79304,57.32482 -31.10764,54.71047 z"
+         style="fill:#e41011;fill-opacity:1;stroke:#000000;stroke-width:7.7;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+      <path
+         sodipodi:nodetypes="ccccc"
+         inkscape:connector-curvature="0"
+         id="rect3150-2"
+         d="m 628.1478,376.90719 -54.7834,50.75718 -0.99938,10.71008 69.39194,-31.16964 z"
+         style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0.214771;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dashoffset:0;stroke-opacity:1" />
+      <path
+         sodipodi:nodetypes="ccccc"
+         inkscape:connector-curvature="0"
+         id="rect3150-5-0"
+         d="m 448.39189,382.94181 69.1924,44.49821 3.10811,10.61413 -81.39439,-23.17994 z"
+         style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0.226492;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dashoffset:0;stroke-opacity:1" />
+    </g>
+  </g>
+</svg>

src/app/components/Footer.tsx

@@ -1,7 +1,28 @@
 export default function Footer() {
     return (
         <footer className="bg-gray-800 py-4">
-            <p className="text-center text-white">Copyright 2023</p>
+            <div className="grid grid-cols-3">
+                <div>
+                    <h3 className="text-white">Socials</h3>
+                    <ul>
+                        <li>Mastodon</li>
+                        <li>Bluesky</li>
+                        <li>Pixelfed</li>
+                    </ul>
+                </div>
+                <div>
+                    <h3 className="text-white">Copyright 2025</h3>
+                </div>
+                <div>
+                    <h3 className="text-white">Follow on RSS</h3>
+                    <ul>
+                        <li>General News</li>
+                        <li>Tech and Disability</li>
+                        <li>Photograph Feed</li>
+                    </ul>
+                </div>
+            </div>
+
         </footer>
     )
 }

src/app/components/LastFiveStories.tsx

@@ -1,11 +1,11 @@
 import Link from 'next/link'
 
-export default function LastFiveStories({storyList}: {storyList: any}) {
+export default function LastFiveStories({storyList, projectFilter}: {storyList: any, projectFilter: String}) {
 
     return (
-    <div className="w-full md:w-1/4 px-4">
+    <div className="w-full md:w-4/12 px-4">
         <div className="bg-gray-100 p-4">
-            <h2 className="text-xl font-bold text-gray-800 mb-4">Recent Posts</h2>
+            <h2 className="text-xl font-bold text-gray-800 mb-4">Recent Posts - {projectFilter}</h2>
             <ul className="list-none">
                 {storyList.data.map((story: any) => (
                     <li className="mb-2">

src/app/components/NavBar.tsx

@@ -0,0 +1,56 @@
+export default function NavBar() {
+    return (
+        <nav className="bg-white border-gray-200 py-2.5 dark:bg-gray-900">
+            <div className="flex flex-wrap items-center justify-between max-w-screen-xl px-4 mx-auto">
+                <a href="/" className="flex items-center">
+                    <img src="https://www.svgrepo.com/show/499962/music.svg" className="h-6 mr-3 sm:h-9" alt="Landwind Logo" />
+                    <span className="self-center text-xl font-semibold whitespace-nowrap dark:text-white">Landwind</span>
+                </a>
+                <div className="flex items-center lg:order-2">
+                    <div className="hidden mt-2 mr-4 sm:inline-block">
+                        <span></span>
+                    </div>
+
+                    <a href="https://themesberg.com/product/tailwind-css/landing-page"
+                        className="text-white bg-purple-700 hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 font-medium rounded-lg text-sm px-4 lg:px-5 py-2 lg:py-2.5 sm:mr-2 lg:mr-0 dark:bg-purple-600 dark:hover:bg-purple-700 focus:outline-none dark:focus:ring-purple-800">Download</a>
+                    <button data-collapse-toggle="mobile-menu-2" type="button"
+                        className="inline-flex items-center p-2 ml-1 text-sm text-gray-500 rounded-lg lg:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
+                        aria-controls="mobile-menu-2" aria-expanded="true">
+                        <span className="sr-only">Open main menu</span>
+                        <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+                            <path fillRule="evenodd"
+                                d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
+                                clipRule="evenodd"></path>
+                        </svg>
+                        <svg className="hidden w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+                            <path fillRule="evenodd"
+                                d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+                                clipRule="evenodd"></path>
+                        </svg>
+                    </button>
+                </div>
+                <div className="items-center justify-between w-full lg:flex lg:w-auto lg:order-1" id="mobile-menu-2">
+                    <ul className="flex flex-col mt-4 font-medium lg:flex-row lg:space-x-8 lg:mt-0">
+                        <li>
+                            <a href="news/"
+                                className="block py-2 pl-3 pr-4 text-white bg-purple-700 rounded lg:bg-transparent lg:text-purple-700 lg:p-0 dark:text-white"
+                                aria-current="page">News and things</a>
+                        </li>
+                        <li>
+                            <a href="photography/"
+                                className="block py-2 pl-3 pr-4 text-gray-700 border-b border-gray-100 hover:bg-gray-50 lg:hover:bg-transparent lg:border-0 lg:hover:text-purple-700 lg:p-0 dark:text-gray-400 lg:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white lg:dark:hover:bg-transparent dark:border-gray-700">Photography</a>
+                        </li>
+                        <li>
+                            <a href="tech-and-disability"
+                                className="block py-2 pl-3 pr-4 text-gray-700 border-b border-gray-100 hover:bg-gray-50 lg:hover:bg-transparent lg:border-0 lg:hover:text-purple-700 lg:p-0 dark:text-gray-400 lg:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white lg:dark:hover:bg-transparent dark:border-gray-700">Tech and Disability</a>
+                        </li>
+                        <li>
+                            <a href="podcasts"
+                                className="block py-2 pl-3 pr-4 text-gray-700 border-b border-gray-100 hover:bg-gray-50 lg:hover:bg-transparent lg:border-0 lg:hover:text-purple-700 lg:p-0 dark:text-gray-400 lg:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white lg:dark:hover:bg-transparent dark:border-gray-700">Podcasts</a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </nav>
+    )
+}

src/app/globals.css

@@ -20,6 +20,10 @@ body {
   font-size: 1.5em;
 }
 
+b, strong {
+  font-weight: 900
+}
+
 @layer utilities {
   .text-balance {
     text-wrap: balance;

src/app/layout.tsx

@@ -1,9 +1,14 @@
 import type { Metadata } from "next";
-import { Inter } from "next/font/google";
 import "./globals.css";
 import Head from "next/head";
+import NavBar from "./components/NavBar";
+import { Inter } from 'next/font/google'
  
-const inter = Inter({ subsets: ["latin"] });
+// If loading a variable font, you don't need to specify the font weight
+const inter = Inter({
+  subsets: ['latin'],
+  weight: "300"
+})
 
 export const metadata: Metadata = {
   title: "Create Next App",
@@ -55,7 +60,9 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body className={inter.className}>{children}</body>
+      <body className={inter.className}>
+        <NavBar></NavBar>
+        <main>{children}</main></body>
     </html>
   );
 }

src/app/page.tsx

@@ -1,9 +1,45 @@
 import Image from "next/image";
+import Footer from "./components/Footer";
+import { getLatestPost } from "./lib/api";
 
-export default function Home() {
+export async function generateMetadata({params}: {params: {slug: string}}) {
+  return {
+    title: "Angry Beanie",
+    description: "A place where my mind lives",
+    openGraph: {
+      url: "https://angrybeanie.com",
+      title: "Angry Beanie",
+      description: "A place where my mind lives",
+      type: "article"
+    }
+  }
+}
+
+export default async function Home() {
+  const latestPost = await(getLatestPost())
+  console.log(latestPost)
   return (
-    <main className="flex min-h-screen flex-col items-center justify-between p-24">
+      <main className="p-20 w-auto flex px-24 justify-center relative">
-      
+        <div id="container" className="p-20 sm:p-16 md:p-20 lg:p-24 xl:p-20 w-auto flex flex-col md:flex-row px-4 sm:px-8 md:px-24 lg:px-24 xl:px-24 relative">
+        <div className="mr-10">
+             <img
+               className="rounded-xl min-w-[100px] w-1/2 h-auto md:w-1/2 md:h-auto"
+               src="/images/angrybeanie.svg"
+               alt="Angry Beanie logo"
+             />
+          </div>
+          <div className="w-full sm:w-[70%] md:w-[60%] lg:w-[50%]">
+            <h1 className="font-bold text-3xl mt-6 mb-8">
+              Latest Post
+            </h1>
+              <div>
+                <a href={"/news/" + latestPost.Slug}>
+                  <h2 className="pb-3 black">{latestPost.Title}</h2>
+                  <img className="rounded-xl min-w-[100px] w-full h-auto md:w-auto md:h-auto" src={process.env.MEDIA_BASE + latestPost.FeatureImage.data.attributes.formats.large.url} alt={latestPost.FeatureImage.data.attributes.alternativeText}></img>
+                </a>
+              </div>
+            </div>
+        </div>  
       </main>
   );
 }