most of the theme is done, need two intro bits on homepage, considering images and fonts

.idea/codeStyles/codeStyleConfig.xml

@@ -0,0 +1,5 @@
+<component name="ProjectCodeStyleConfiguration">
+  <state>
+    <option name="PREFERRED_PROJECT_CODE_STYLE" value="Default" />
+  </state>
+</component>

.idea/compiler.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="TypeScriptCompiler">
+    <option name="useTypesFromServer" value="true" />
+  </component>
+</project>

package.json

@@ -13,7 +13,8 @@
     "lucide-react": "^0.511.0",
     "next": "15.3.2",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "react-markdown": "^10.1.0"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",

posts/collective-empowerment.md

@@ -0,0 +1,30 @@
+---
+title: "Collective Empowerment"
+---
+
+## Collective Empowerment
+### XXX. and DUCKWORTH.
+
+      Lamar’s _DAMN._ attempts to uplift the Black community as he leads others through his music. In several songs, there are many moments where people look to him for advice and where Kendrick himself highlights the struggles of being a leader. A central narrative point in _XXX._ is a friend calling Kendrick about his son being murdered through gang violence and asks him for advice. Lamar advocates for violence responding with,
+
+> I can't sugarcoat the answer for you, this is how I feel\
+> If somebody kill my son, that mean somebody gettin' killed\
+> …\
+> I chip a nigga, then throw the blower in his lap\
+> Walk myself to the court like, "Bitch, I did that"\
+> Ain't no Black Power when your baby killed by a coward.
+
+While indicative of language that Malcolm X and others would use in arming themselves in self-defense, the morale of the song attempts to refute this notion. The comment at the end of the quote also highlights this, by showing how progression is stifled by murder and endless violence. And, even though an eye-for-an-eye goes against the idea of collective empowerment, by the end of the song Kendrick highlights the need for unity in order to make progress by saying,
+
+> But is America honest or do we bask in sin?\
+> Pass the gin, I mix it with American blood\
+> Then bash him in, you Crippin' or you married to Blood?\
+> I'll ask again, oops, accident\
+> It's nasty when you set us up then roll the dice, then bet us up\
+> You overnight the big rifles, then tell Fox to be scared of us\
+> Gang members or terrorists, et cetera, et cetera\
+> America's reflections of me, that's what a mirror does
+
+Throughout this verse, Kendrick shows the divisiveness in American politics and its trend towards extremism that was similar to the sentiment of African-Americans during the Civil Rights Movement. Those who saw progress as too slow would continue to advocate for change through Black Nationalism or advocating for a violent movement, creating even more divisions. Today, Lamar points out the brokenness in the Black community, as they struggle with gang violence, and how it prevents them from being able to overcome racist depictions in the media. That, in order to not be only known for gang affiliations, violence, and drugs, that they would need to fix the divisions amongst themselves. Although, Kendrick still highlights the government’s role in creating these racist depictions of Black people through policies like the War on Drugs and the privatization of prisons, that disproportionately effected African-Americans and profited from their incarcerations. In this way, _XXX._ showcases modern collective empowerment from the Black Arts Movement through laying a foundation that describes problems within the Black community and how to solve them and, in doing so, Kendrick attempts to unify the Black community despite gang affiliations. Lamar would go on to break down barriers between gangs with his beef with Drake, in which he unified the community against him and performed with different affiliations at his _“Pop Out”_ concert in 2024 that he then referred to as “I put one hundred hoods on one stage” during _reincarnated_ on his album _GNX_.
+
+      The song _DUCKWORTH._ also features elements of collective empowerment, specifically his recollection of how Top Dawg Entertainment, Lamar’s record label at the time, came to be. Throughout the song, 

posts/dna.md

@@ -1,17 +0,0 @@
----
-title: "DNA"
-date: "2024-01-15"
-excerpt: "Analysis of Kendrick's exploration of identity and heritage"
----
-
-# DNA - The Foundation of Identity
-
-"DNA" serves as a powerful opening statement about Kendrick Lamar's genetic and cultural inheritance. The track explores themes of identity, heritage, and the complex relationship between nature and nurture.
-
-## Key Themes
-
-- **Identity Formation**: How our DNA shapes who we are
-- **Cultural Heritage**: The weight of ancestral history
-- **Resilience**: Strength passed down through generations
-
-The aggressive production mirrors the intensity of Kendrick's delivery, creating a sonic representation of the fire that runs through his veins.

src/app/api/post/[slug].ts

@@ -1,3 +0,0 @@
-export async function GET(slug: string) {
-  
-}

src/app/api/posts/route.ts

@@ -6,14 +6,11 @@ import matter from "gray-matter"
 export interface Post {
   slug: string
   title: string
-  date: string
-  excerpt?: string
 }
 
 export async function GET() {
   try {
     const postsDirectory = path.join(process.cwd(), "posts")
-    console.log(postsDirectory)
 
     // Check if posts directory exists
     if (!fs.existsSync(postsDirectory)) {
@@ -32,11 +29,8 @@ export async function GET() {
         return {
           slug,
           title: data.title || slug,
-          date: data.date || "",
-          excerpt: data.excerpt || "",
         }
       })
-      .sort((a, b) => (a.date > b.date ? -1 : 1))
 
     return NextResponse.json(posts)
   } catch (error) {

src/app/globals.css

@@ -22,5 +22,5 @@
 body {
   background: var(--background);
   color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: "Courier New", Arial, Helvetica, sans-serif;
 }

src/app/page.tsx

@@ -3,11 +3,22 @@
 import { useEffect, useState } from "react"
 import { ChevronDown } from "lucide-react"
 import Navbar from "@/components/navbar";
+import {Post} from "@/lib/posts";
+import Link from "next/link";
 
 export default function Home() {
   const [scrollY, setScrollY] = useState(0)
   const [titleOpacity, setTitleOpacity] = useState(0)
 
+  const [posts, setPosts] = useState<Post[]>([])
+
+  useEffect(() => {
+    fetch("/api/posts")
+      .then((res) => res.json())
+      .then((data) => setPosts(data))
+      .catch((err) => console.error("Error fetching posts:", err))
+  }, [])
+
   useEffect(() => {
     const handleScroll = () => {
       const currentScrollY = window.scrollY
@@ -31,6 +42,7 @@ export default function Home() {
 
   return (
     <div className="relative font-mono">
+      <title>DAMN.</title>
       <Navbar />
 
       {/* Parallax Hero Section */}
@@ -39,7 +51,7 @@ export default function Home() {
         <div
           className="absolute inset-0 w-full h-[120%] bg-cover bg-center bg-no-repeat"
           style={{
-            backgroundImage: `url('/vercel.svg?height=1080&width=1920')`,
+            backgroundImage: `url('/banner.png')`,
             transform: `translateY(${scrollY * 0.5}px)`,
             filter: "brightness(0.7) contrast(1.1)",
           }}
@@ -71,46 +83,17 @@ export default function Home() {
         <div className="container mx-auto px-4 py-20">
           <div className="flex flex-col items-center justify-center min-h-screen space-y-12">
             {/* Main Title with Fade-in Effect */}
-            <div className="text-center space-y-8 transition-opacity duration-1000" style={{ opacity: titleOpacity }}>
+            <div className="text-center space-y-2 transition-opacity duration-1000" style={{ opacity: titleOpacity }}>
-              <h2 className="text-8xl md:text-9xl font-black tracking-tighter text-red-600">DAMN.</h2>
+              <h2 className="text-8xl md:text-9xl font-black text-white">TITLE</h2>
               <div className="space-y-4">
-                <p className="text-2xl md:text-3xl font-light tracking-wide">KENDRICK LAMAR</p>
+                <p className="text-2xl md:text-3xl font-light">SUB</p>
                 <p className="text-lg md:text-xl text-gray-400 max-w-2xl mx-auto leading-relaxed">
-                  An exploration of duality, spirituality, and the human condition through one of hip-hop's most
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-                  critically acclaimed albums.
+                  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                 </p>
               </div>
             </div>
-
-            {/* Album Details */}
-            <div
-              className="grid grid-cols-1 md:grid-cols-3 gap-8 w-full max-w-4xl transition-opacity duration-1000 delay-500"
-              style={{ opacity: titleOpacity }}
-            >
-              <div className="text-center space-y-2">
-                <h3 className="text-xl font-semibold text-red-500">RELEASED</h3>
-                <p className="text-gray-300">April 14, 2017</p>
-              </div>
-              <div className="text-center space-y-2">
-                <h3 className="text-xl font-semibold text-red-500">LABEL</h3>
-                <p className="text-gray-300">Top Dawg Entertainment</p>
-              </div>
-              <div className="text-center space-y-2">
-                <h3 className="text-xl font-semibold text-red-500">GENRE</h3>
-                <p className="text-gray-300">Hip Hop, Conscious Rap</p>
-              </div>
-            </div>
-
-            {/* Quote Section */}
-            <div
-              className="text-center max-w-3xl mx-auto transition-opacity duration-1000 delay-1000"
-              style={{ opacity: titleOpacity }}
-            >
-              <blockquote className="text-xl md:text-2xl italic text-gray-300 leading-relaxed">
-                "Is it wickedness? Is it weakness? You decide. Are we gonna live or die?"
-              </blockquote>
-              <cite className="block mt-4 text-red-500 font-semibold">— Kendrick Lamar, FEAR.</cite>
-            </div>
           </div>
         </div>
       </section>
@@ -119,30 +102,28 @@ export default function Home() {
       <section className="bg-gray-900 text-white py-20">
         <div className="container mx-auto px-4">
           <div className="max-w-4xl mx-auto space-y-12">
-            <h3 className="text-4xl md:text-5xl font-bold text-center mb-12">ABOUT THE ALBUM</h3>
+            <h3 className="text-4xl md:text-5xl font-bold text-center mb-12">Sec2</h3>
 
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-12">
               <div className="space-y-6">
                 <p className="text-lg leading-relaxed text-gray-300">
-                  DAMN. is the fourth studio album by American rapper Kendrick Lamar. The album explores themes of
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-                  loyalty, faith, and the duality of human nature through introspective lyrics and innovative
+                  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-                  production.
+                  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-                </p>
-                <p className="text-lg leading-relaxed text-gray-300">
-                  Featuring collaborations with Rihanna, Zacari, and U2, the album received widespread critical acclaim
-                  and won the Pulitzer Prize for Music, making Lamar the first non-classical or jazz artist to receive
-                  the honor.
                 </p>
               </div>
 
               <div className="space-y-6">
                 <div className="bg-red-600/20 p-6 rounded-lg border border-red-600/30">
-                  <h4 className="text-xl font-semibold mb-3 text-red-400">ACCOLADES</h4>
+                  <h4 className="text-xl font-semibold mb-3 text-red-400">ARTICLES</h4>
                   <ul className="space-y-2 text-gray-300">
-                    <li>• Pulitzer Prize for Music (2018)</li>
+                    {posts.map((post) => (
-                    <li>• Grammy Award for Best Rap Album</li>
+                      <li key={post.slug}>
-                    <li>• #1 on Billboard 200</li>
+                        <Link href={`/posts/${post.slug}`} className="hover:text-red-400 transition-colors uppercase">
-                    <li>• Triple Platinum Certification</li>
+                          • {post.title}
+                        </Link>
+                      </li>
+                    ))}
                   </ul>
                 </div>
               </div>

src/app/posts/[slug]/page.tsx

@@ -1,7 +1,9 @@
 import { getPost } from "@/lib/posts"
 import { notFound } from "next/navigation"
 import Link from "next/link"
+import Markdown from 'react-markdown'
 import { ArrowLeft } from "lucide-react"
+import Navbar from "@/components/navbar";
 
 interface PostPageProps {
   params: Promise<{ slug: string }>
@@ -17,30 +19,37 @@ export default async function PostPage({ params }: PostPageProps) {
 
   return (
     <div className="min-h-screen bg-black text-white font-mono">
+      <Navbar />
+      <title>{post.title}</title>
       <div className="container mx-auto px-4 py-20">
         <div className="max-w-4xl mx-auto">
           {/* Back button */}
-          <Link
+          {/*<Link*/}
-            href="/"
+          {/*  href="/"*/}
-            className="inline-flex items-center space-x-2 text-red-400 hover:text-red-300 transition-colors mb-8"
+          {/*  className="inline-flex items-center space-x-2 text-red-400 hover:text-red-300 transition-colors mb-8"*/}
-          >
+          {/*>*/}
-            <ArrowLeft className="w-4 h-4" />
+          {/*  <ArrowLeft className="w-4 h-4" />*/}
-            <span>Back to Home</span>
+          {/*  <span>Back to Home</span>*/}
-          </Link>
+          {/*</Link>*/}
-
+          
-          {/* Post header */}
-          <header className="mb-12">
-            <h1 className="text-4xl md:text-6xl font-bold text-red-600 mb-4">{post.title}</h1>
-            {post.date && <time className="text-gray-400 text-lg">{post.date}</time>}
-            {post.excerpt && <p className="text-xl text-gray-300 mt-4 leading-relaxed">{post.excerpt}</p>}
-          </header>
-
           {/* Post content */}
           <article className="prose prose-invert prose-red max-w-none">
-            <div
+            <div className="text-gray-300 leading-relaxed space-y-6">
-              className="text-gray-300 leading-relaxed space-y-6"
+              <Markdown components={{
-              dangerouslySetInnerHTML={{ __html: post.content.replace(/\n/g, "<br />") }}
+                h2(props) {
-            />
+                  return <div className="justify-self-center font-bold text-4xl leading-8 mb-2 mt-12">{props.children}</div>
+                },
+                h3(props) {
+                  return <div className="justify-self-center font-medium italic text-2xl leading-8 mb-12">{props.children}</div>
+                },
+                blockquote(props) {
+                  return <div className="italic ml-12 mb-2 mt-2">{props.children}</div>
+                },
+                p(props) {
+                  return <div className="mt-0 mb-0 text-4 leading-8">{props.children}</div>
+                }
+              }}>{post.content}</Markdown>
+            </div>
           </article>
         </div>
       </div>

src/components/navbar.tsx

@@ -1,6 +1,7 @@
 "use client"
 
 import Link from "next/link"
+import Image from "next/image"
 import { useEffect, useState } from "react"
 
 interface Post {
@@ -20,18 +21,16 @@ export default function Navbar() {
       .catch((err) => console.error("Error fetching posts:", err))
   }, [])
 
-  console.log(posts)
-
   return (
     <nav className="fixed top-0 left-0 right-0 z-50 bg-black/90 backdrop-blur-sm border-b border-red-600/20 font-mono">
       <div className="container max-w-screen px-8">
         <div className="flex items-center justify-between h-16">
           {/* Left side - Logo and title */}
           <Link href="/" className="flex items-center space-x-3 hover:opacity-80 transition-opacity">
-            <div className="w-8 h-8 bg-red-600 rounded-sm flex items-center justify-center">
+            <div className="w-8 h-8 rounded-sm flex items-center justify-center">
-              <span className="text-white font-bold text-sm">D</span>
+              <Image className="rounded-sm" src="/cover.jpg" height={100} width={100} alt="DAMN. album cover"/>
             </div>
-            <span className="text-white font-bold text-xl tracking-wider">DAMN.</span>
+            <span className="text-red-600 font-bold text-xl tracking-wider">DAMN.</span>
           </Link>
 
           {/* Right side - Posts navigation */}

src/lib/posts.ts

@@ -5,8 +5,6 @@ import matter from "gray-matter"
 export interface Post {
   slug: string
   title: string
-  date: string
-  excerpt?: string
   content: string
 }
 
@@ -34,8 +32,6 @@ export async function getPost(slug: string): Promise<Post | null> {
     return {
       slug,
       title: data.title || slug,
-      date: data.date || "",
-      excerpt: data.excerpt || "",
       content,
     }
   } catch (error) {