From f0b3e92571f9ac503dd2306410280b2866cd2738 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Mon, 3 Nov 2025 13:02:38 +0000
Subject: [PATCH 1/6] Initial plan


From 4f254d1079b88099a9e7825c287f8af5193ea79d Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Mon, 3 Nov 2025 13:06:27 +0000
Subject: [PATCH 2/6] Initial exploration - understanding current design

Co-authored-by: UmairJibran <43789374+UmairJibran@users.noreply.github.com>
---
 public/rss.xml | 106 +++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 106 insertions(+)
 create mode 100644 public/rss.xml

diff --git a/public/rss.xml b/public/rss.xml
new file mode 100644
index 00000000..00e69a88
--- /dev/null
+++ b/public/rss.xml
@@ -0,0 +1,106 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
+    <channel>
+        <title>
+            Umair Jibran's Writings
+        </title>
+        <link>
+            https://umairjibran.com/writings
+        </link>
+        <description>
+            Latest articles from Umair Jibran's writings.
+        </description>
+        <atom:link rel="self" href="https://umairjibran.com/rss.xml"/>
+        <language>
+            en-us
+        </language>
+        <lastBuildDate>
+            Mon, 03 Nov 2025 13:05:25 GMT
+        </lastBuildDate>
+        <item>
+            <title>
+                Mastering Local Backend Development: Docker &amp; NGINX as a Reverse Proxy for Efficient Testing
+            </title>
+            <link>
+                https://umairjibran.com/blogs/docker-nginx-reverse-proxy-local-dev
+            </link>
+            <description>
+                Learn how to set up a local backend environment using Docker and NGINX as a reverse proxy. Streamline your development and testing with this step-by-step guide, optimized for efficient scaling and traffic management.
+            </description>
+            <pubDate>
+                Sun, 20 Oct 2024 18:13:00 GMT
+            </pubDate>
+            <guid>
+                https://umairjibran.com/blogs/docker-nginx-reverse-proxy-local-dev
+            </guid>
+        </item>
+        <item>
+            <title>
+                GitHub CODEOWNERS: A Comprehensive Guide
+            </title>
+            <link>
+                https://umairjibran.com/blogs/github-codeowners
+            </link>
+            <description>
+                Learn how to use GitHub&apos;s CODEOWNERS file to streamline your project&apos;s workflow. This guide covers everything you need to know about CODEOWNERS, including how to create and use it effectively.
+            </description>
+            <pubDate>
+                Sat, 12 Oct 2024 18:13:00 GMT
+            </pubDate>
+            <guid>
+                https://umairjibran.com/blogs/github-codeowners
+            </guid>
+        </item>
+        <item>
+            <title>
+                LocalStack: Your Gateway to Seamless Cloud Testing Locally
+            </title>
+            <link>
+                https://umairjibran.com/blogs/localstack-your-gateway-to-cloud-testing
+            </link>
+            <description>
+                Discover how LocalStack enables you to emulate AWS services locally, saving time and costs while improving productivity.
+            </description>
+            <pubDate>
+                Sun, 22 Dec 2024 18:13:00 GMT
+            </pubDate>
+            <guid>
+                https://umairjibran.com/blogs/localstack-your-gateway-to-cloud-testing
+            </guid>
+        </item>
+        <item>
+            <title>
+                Make it your own
+            </title>
+            <link>
+                https://umairjibran.com/blogs/make-it-your-own
+            </link>
+            <description>
+                Learn how you can customize this template to make it your own. This guide will help you understand how the template is organized and how to add new content.
+            </description>
+            <pubDate>
+                Thu, 22 Aug 2024 19:29:00 GMT
+            </pubDate>
+            <guid>
+                https://umairjibran.com/blogs/make-it-your-own
+            </guid>
+        </item>
+        <item>
+            <title>
+                Ultimate Guide to Removing Sensitive Data from Git History: Protect Your Codebase
+            </title>
+            <link>
+                https://umairjibran.com/blogs/removing-historic-commits
+            </link>
+            <description>
+                Discover the definitive methods to remove sensitive data like API keys from Git history. Learn how to safeguard your repository, rewrite commit history, and prevent future leaks using best practices.
+            </description>
+            <pubDate>
+                Sun, 08 Dec 2024 18:13:00 GMT
+            </pubDate>
+            <guid>
+                https://umairjibran.com/blogs/removing-historic-commits
+            </guid>
+        </item>
+    </channel>
+</rss>
\ No newline at end of file

From 929a034199126e4e5889a7752df6f8633f35ba4c Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Mon, 3 Nov 2025 13:11:37 +0000
Subject: [PATCH 3/6] Transform home page to brutalist design

Co-authored-by: UmairJibran <43789374+UmairJibran@users.noreply.github.com>
---
 src/app/layout.tsx               |   2 +-
 src/app/page.tsx                 | 160 ++++++++++++++--------------
 src/components/Header.tsx        |  18 ++--
 src/components/RecentWriting.tsx |  14 +--
 src/styles/globals.css           | 174 +++++++++++++------------------
 tailwind.config.ts               |  15 ++-
 6 files changed, 181 insertions(+), 202 deletions(-)

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 29595bee..f5a10526 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -49,7 +49,7 @@ export default function RootLayout({
         data-website-id={umamiAnalytics.dataWebsiteId}
       />
       <body
-        className={`${ibmPlexMono.variable} ${inconsolata.variable} font-mono bg-[#0d0d0d]`}
+        className={`${ibmPlexMono.variable} ${inconsolata.variable} font-mono bg-white text-black`}
       >
         <Header />
         {children}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index a9211283..4373a3ae 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -80,12 +80,12 @@ function ExperienceTimelineItem({
         {/* Card */}
         <div className="w-[calc(50%-2rem)]">
           <div
-            className="group bg-[#1a1a1a] border border-gray-800 rounded-lg p-6 hover:border-green-400 transition-all duration-300 cursor-pointer"
+            className="group bg-white border-4 border-black p-6 hover:bg-brutalist-yellow transition-all duration-300 cursor-pointer brutalist-shadow"
             onClick={() => setShowDetails(true)}
           >
             <div className="flex items-start gap-4">
               {/* Company Logo */}
-              <div className="flex-shrink-0 w-12 h-12 bg-white rounded-lg flex items-center justify-center overflow-hidden">
+              <div className="flex-shrink-0 w-12 h-12 bg-white border-4 border-black flex items-center justify-center overflow-hidden">
                 {companyLogos[experience.company] ? (
                   <Image
                     src={companyLogos[experience.company]}
@@ -95,18 +95,18 @@ function ExperienceTimelineItem({
                     className="object-contain"
                   />
                 ) : (
-                  <Building2 className="w-6 h-6 text-gray-400" />
+                  <Building2 className="w-6 h-6 text-black" />
                 )}
               </div>
 
               {/* Content */}
               <div className="flex-1 min-w-0">
-                <h3 className="text-white font-semibold text-base mb-1 group-hover:text-green-400 transition-colors">
+                <h3 className="text-black font-black text-base mb-1 uppercase">
                   <div className="flex items-center gap-2">
                     {experience.position}
                     {experience.volunteer && (
                       <span
-                        className="inline-flex items-center justify-center px-2 py-0.5 rounded-md bg-blue-900/30 border border-blue-700/50 text-blue-300 text-xs font-medium"
+                        className="inline-flex items-center justify-center px-2 py-0.5 bg-brutalist-blue text-white text-xs font-black border-2 border-black uppercase"
                         title="Volunteer"
                       >
                         Volunteer
@@ -117,13 +117,13 @@ function ExperienceTimelineItem({
                 <Link
                   href={experience.website}
                   target="_blank"
-                  className="text-gray-400 text-sm hover:text-green-400 transition-colors inline-flex items-center gap-1 mb-2"
+                  className="text-black text-sm hover:bg-black hover:text-brutalist-yellow transition-colors inline-flex items-center gap-1 mb-2 font-bold underline decoration-2"
                   onClick={(e) => e.stopPropagation()}
                 >
                   {experience.company}
                   <ExternalLink className="w-3 h-3" />
                 </Link>
-                <p className="text-gray-500 text-xs mb-3">
+                <p className="text-black text-xs mb-3 font-bold uppercase">
                   {startDate.toLocaleDateString("en-US", {
                     month: "short",
                     year: "numeric",
@@ -137,7 +137,7 @@ function ExperienceTimelineItem({
                     : "Present"}{" "}
                   · {duration}
                 </p>
-                <p className="text-gray-400 text-sm leading-relaxed line-clamp-2">
+                <p className="text-black text-sm leading-relaxed line-clamp-2 font-medium">
                   {experience.oneLine}
                 </p>
               </div>
@@ -147,7 +147,7 @@ function ExperienceTimelineItem({
 
         {/* Timeline dot and line */}
         <div className="flex flex-col items-center">
-          <div className="w-4 h-4 bg-green-400 rounded-full border-4 border-[#0d0d0d] z-10"></div>
+          <div className="w-6 h-6 bg-brutalist-red border-4 border-black z-10"></div>
         </div>
 
         {/* Empty space on the other side */}
@@ -193,9 +193,9 @@ function TestimonialsCarousel({ testimonials }: { testimonials: any[] }) {
       <div className="flex items-center justify-center gap-6 px-6">
         {/* Previous Testimonial (Left, smaller) */}
         <div className="hidden lg:block w-[300px] opacity-40 transform scale-90 transition-all duration-500">
-          <div className="bg-[#1a1a1a] border border-gray-800 rounded-lg p-5 h-[280px] flex flex-col">
-            <Quote className="w-6 h-6 text-green-400 mb-3 flex-shrink-0" />
-            <p className="text-gray-300 text-xs leading-relaxed mb-4 line-clamp-4 flex-1">
+          <div className="bg-white border-4 border-black p-5 h-[280px] flex flex-col">
+            <Quote className="w-6 h-6 text-black mb-3 flex-shrink-0" />
+            <p className="text-black text-xs leading-relaxed mb-4 line-clamp-4 flex-1 font-medium">
               {testimonials[getTestimonialIndex(-1)].testimonial}
             </p>
             <div className="flex items-center gap-3">
@@ -204,13 +204,13 @@ function TestimonialsCarousel({ testimonials }: { testimonials: any[] }) {
                 alt={testimonials[getTestimonialIndex(-1)].name}
                 width={32}
                 height={32}
-                className="rounded-full"
+                className="border-2 border-black"
               />
               <div className="flex-1 min-w-0">
-                <div className="text-white font-semibold text-xs truncate">
+                <div className="text-black font-black text-xs truncate uppercase">
                   {testimonials[getTestimonialIndex(-1)].name}
                 </div>
-                <div className="text-gray-500 text-xs truncate">
+                <div className="text-black text-xs truncate font-medium">
                   {testimonials[getTestimonialIndex(-1)].designationAtTime}
                 </div>
               </div>
@@ -222,9 +222,9 @@ function TestimonialsCarousel({ testimonials }: { testimonials: any[] }) {
         <div
           className={`w-full max-w-2xl transition-all duration-500 ${isTransitioning ? "opacity-0 scale-95" : "opacity-100 scale-100"}`}
         >
-          <div className="bg-[#1a1a1a] border-2 border-green-400 rounded-lg p-8 shadow-xl shadow-green-400/10">
-            <Quote className="w-10 h-10 text-green-400 mb-6" />
-            <p className="text-gray-200 text-base leading-relaxed mb-8">
+          <div className="bg-brutalist-yellow border-8 border-black p-8 brutalist-shadow-red">
+            <Quote className="w-10 h-10 text-black mb-6" />
+            <p className="text-black text-base leading-relaxed mb-8 font-bold">
               {testimonials[currentIndex].testimonial}
             </p>
             <div className="flex items-center gap-4">
@@ -233,16 +233,16 @@ function TestimonialsCarousel({ testimonials }: { testimonials: any[] }) {
                 alt={testimonials[currentIndex].name}
                 width={56}
                 height={56}
-                className="rounded-full"
+                className="border-4 border-black"
               />
               <div className="flex-1">
-                <div className="text-white font-bold text-lg">
+                <div className="text-black font-black text-lg uppercase">
                   {testimonials[currentIndex].name}
                 </div>
-                <div className="text-gray-400 text-sm">
+                <div className="text-black text-sm font-bold">
                   {testimonials[currentIndex].designationAtTime}
                 </div>
-                <div className="text-gray-500 text-xs mt-1">
+                <div className="text-black text-xs mt-1 font-medium">
                   {testimonials[currentIndex].employerAtTime}
                 </div>
               </div>
@@ -250,7 +250,7 @@ function TestimonialsCarousel({ testimonials }: { testimonials: any[] }) {
                 <Link
                   href={testimonials[currentIndex].linkedin}
                   target="_blank"
-                  className="text-gray-500 hover:text-green-400 transition-colors p-2"
+                  className="text-black hover:bg-black hover:text-brutalist-yellow transition-colors p-2 border-2 border-black"
                 >
                   <Linkedin className="w-5 h-5" />
                 </Link>
@@ -261,9 +261,9 @@ function TestimonialsCarousel({ testimonials }: { testimonials: any[] }) {
 
         {/* Next Testimonial (Right, smaller) */}
         <div className="hidden lg:block w-[300px] opacity-40 transform scale-90 transition-all duration-500">
-          <div className="bg-[#1a1a1a] border border-gray-800 rounded-lg p-5 h-[280px] flex flex-col">
-            <Quote className="w-6 h-6 text-green-400 mb-3 flex-shrink-0" />
-            <p className="text-gray-300 text-xs leading-relaxed mb-4 line-clamp-4 flex-1">
+          <div className="bg-white border-4 border-black p-5 h-[280px] flex flex-col">
+            <Quote className="w-6 h-6 text-black mb-3 flex-shrink-0" />
+            <p className="text-black text-xs leading-relaxed mb-4 line-clamp-4 flex-1 font-medium">
               {testimonials[getTestimonialIndex(1)].testimonial}
             </p>
             <div className="flex items-center gap-3">
@@ -272,13 +272,13 @@ function TestimonialsCarousel({ testimonials }: { testimonials: any[] }) {
                 alt={testimonials[getTestimonialIndex(1)].name}
                 width={32}
                 height={32}
-                className="rounded-full"
+                className="border-2 border-black"
               />
               <div className="flex-1 min-w-0">
-                <div className="text-white font-semibold text-xs truncate">
+                <div className="text-black font-black text-xs truncate uppercase">
                   {testimonials[getTestimonialIndex(1)].name}
                 </div>
-                <div className="text-gray-500 text-xs truncate">
+                <div className="text-black text-xs truncate font-medium">
                   {testimonials[getTestimonialIndex(1)].designationAtTime}
                 </div>
               </div>
@@ -299,10 +299,10 @@ function TestimonialsCarousel({ testimonials }: { testimonials: any[] }) {
                 setIsTransitioning(false);
               }, 300);
             }}
-            className={`h-2 rounded-full transition-all duration-300 ${
+            className={`h-4 transition-all duration-300 border-2 border-black ${
               index === currentIndex
-                ? "w-8 bg-green-400"
-                : "w-2 bg-gray-700 hover:bg-gray-600"
+                ? "w-8 bg-black"
+                : "w-4 bg-white hover:bg-gray-200"
             }`}
             aria-label={`Go to testimonial ${index + 1}`}
           />
@@ -337,11 +337,11 @@ export default function Home() {
   }, []);
 
   return (
-    <main className="bg-[#0d0d0d] min-h-screen grain">
-      {/* Hero Section - Dark Theme */}
+    <main className="bg-white min-h-screen">
+      {/* Hero Section - Brutalist Theme */}
       <section className="max-w-6xl mx-auto px-6 pt-20 pb-16">
         {/* Title */}
-        <h1 className="text-white text-4xl md:text-5xl font-bold mb-4 leading-tight">
+        <h1 className="text-black text-5xl md:text-7xl font-black mb-8 leading-none uppercase border-8 border-black p-8 bg-brutalist-yellow inline-block transform -rotate-1">
           Software engineer, technical
           <br />
           writer & open-source maintainer
@@ -349,24 +349,27 @@ export default function Home() {
 
         {/* Description */}
         <div
-          className="text-gray-400 text-base md:text-lg leading-relaxed mb-8 max-w-3xl [&_a]:text-green-400 [&_a]:hover:underline [&_strong]:text-white [&_strong]:font-medium [&_img]:inline-block [&_img]:w-5 [&_img]:h-5 [&_img]:mx-1"
+          className="text-black text-base md:text-lg leading-relaxed mb-8 max-w-3xl border-l-8 border-black pl-6 font-bold [&_a]:text-brutalist-red [&_a]:underline [&_a]:decoration-4 [&_a]:hover:bg-brutalist-red [&_a]:hover:text-white [&_strong]:text-black [&_strong]:font-black [&_img]:inline-block [&_img]:w-5 [&_img]:h-5 [&_img]:mx-1"
           dangerouslySetInnerHTML={{ __html: profile.extraInfo }}
         />
 
         {/* Social Links */}
-        <div className="flex flex-wrap gap-3 mb-16">
-          {profile.social.map((item) => (
+        <div className="flex flex-wrap gap-4 mb-16">
+          {profile.social.map((item, idx) => (
             <Link
               key={item.name}
               href={item.link}
-              className="inline-flex items-center gap-2 px-4 py-2 bg-[#1a1a1a] hover:bg-[#252525] border border-gray-800 rounded-md text-gray-300 hover:text-white transition-colors text-sm"
+              className="inline-flex items-center gap-2 px-6 py-3 bg-white hover:bg-black border-4 border-black text-black hover:text-brutalist-yellow transition-colors text-sm font-bold uppercase brutalist-shadow transform hover:translate-x-1 hover:translate-y-1"
               target="_blank"
+              style={{
+                transform: `rotate(${idx % 2 === 0 ? '-' : ''}${Math.random() * 2}deg)`
+              }}
             >
-              {item.icon === "GitHub" && <Github className="h-4 w-4" />}
-              {item.icon === "Linkedin" && <Linkedin className="h-4 w-4" />}
-              {item.icon === "Twitter" && <Twitter className="h-4 w-4" />}
-              {item.icon === "Mail" && <Mail className="h-4 w-4" />}
-              {item.icon === "Type" && <Type className="h-4 w-4" />}
+              {item.icon === "GitHub" && <Github className="h-5 w-5" />}
+              {item.icon === "Linkedin" && <Linkedin className="h-5 w-5" />}
+              {item.icon === "Twitter" && <Twitter className="h-5 w-5" />}
+              {item.icon === "Mail" && <Mail className="h-5 w-5" />}
+              {item.icon === "Type" && <Type className="h-5 w-5" />}
               <span>{item.name}</span>
             </Link>
           ))}
@@ -375,11 +378,11 @@ export default function Home() {
         {/* Recent Writing Section */}
         {latestBlog && (
           <div className="mb-16">
-            <div className="flex items-center justify-between mb-6">
-              <h2 className="text-white text-2xl font-bold">Latest Writing</h2>
+            <div className="flex items-center justify-between mb-6 border-b-4 border-black pb-4">
+              <h2 className="text-black text-3xl font-black uppercase">Latest Writing</h2>
               <Link 
                 href="/writing" 
-                className="text-green-400 hover:text-green-300 text-sm font-medium inline-flex items-center gap-1 transition-colors"
+                className="text-black hover:bg-brutalist-yellow hover:text-black text-sm font-bold uppercase inline-flex items-center gap-1 transition-colors border-4 border-black px-4 py-2"
               >
                 View all
                 <ArrowUpRight className="h-4 w-4" />
@@ -391,23 +394,23 @@ export default function Home() {
 
         {/* GitHub Contribution Graph Placeholder */}
         <div className="mb-16">
-          <h2 className="text-white text-xl font-semibold mb-4">
+          <h2 className="text-black text-2xl font-black mb-6 uppercase border-l-8 border-brutalist-yellow pl-4">
             Contribution Graph
           </h2>
-          <div className="bg-[#1a1a1a] border border-gray-800 rounded-lg p-6">
+          <div className="bg-white border-4 border-black p-6">
             <div className="flex items-center justify-between mb-4">
-              <p className="text-gray-400 text-sm">
+              <p className="text-black text-sm font-bold uppercase">
                 1038 contributions in the last year
               </p>
               <div className="flex items-center gap-2">
-                <span className="text-xs text-gray-500">Less</span>
+                <span className="text-xs text-black font-bold uppercase">Less</span>
                 <div className="flex gap-1">
-                  <div className="w-3 h-3 bg-[#0e4429] rounded-sm"></div>
-                  <div className="w-3 h-3 bg-[#006d32] rounded-sm"></div>
-                  <div className="w-3 h-3 bg-[#26a641] rounded-sm"></div>
-                  <div className="w-3 h-3 bg-[#39d353] rounded-sm"></div>
+                  <div className="w-3 h-3 bg-gray-200 border-2 border-black"></div>
+                  <div className="w-3 h-3 bg-brutalist-yellow border-2 border-black"></div>
+                  <div className="w-3 h-3 bg-brutalist-red border-2 border-black"></div>
+                  <div className="w-3 h-3 bg-black border-2 border-black"></div>
                 </div>
-                <span className="text-xs text-gray-500">More</span>
+                <span className="text-xs text-black font-bold uppercase">More</span>
               </div>
             </div>
             {/* Simplified contribution grid */}
@@ -416,18 +419,18 @@ export default function Home() {
                 const intensity = Math.random();
                 const bgColor =
                   intensity > 0.75
-                    ? "bg-[#39d353]"
+                    ? "bg-black"
                     : intensity > 0.5
-                      ? "bg-[#26a641]"
+                      ? "bg-brutalist-red"
                       : intensity > 0.25
-                        ? "bg-[#006d32]"
+                        ? "bg-brutalist-yellow"
                         : intensity > 0.1
-                          ? "bg-[#0e4429]"
-                          : "bg-[#161b22]";
+                          ? "bg-gray-200"
+                          : "bg-white";
                 return (
                   <div
                     key={i}
-                    className={`w-[10px] h-[10px] rounded-sm ${bgColor}`}
+                    className={`w-[10px] h-[10px] border-2 border-black ${bgColor}`}
                     title={`Contributions on day ${i + 1}`}
                   />
                 );
@@ -439,14 +442,14 @@ export default function Home() {
 
       {/* Work Experience Section - Timeline */}
       <section className="max-w-5xl mx-auto px-6 py-16">
-        <h2 className="text-white text-2xl font-bold mb-12 text-center">
+        <h2 className="text-black text-4xl font-black mb-12 text-center uppercase bg-brutalist-yellow border-8 border-black p-6 inline-block mx-auto block w-full text-center">
           Work Experience
         </h2>
 
         {/* Timeline container */}
         <div className="relative">
           {/* Vertical line */}
-          <div className="absolute left-1/2 top-0 bottom-0 w-0.5 bg-gray-800 transform -translate-x-1/2 hidden md:block"></div>
+          <div className="absolute left-1/2 top-0 bottom-0 w-1 bg-black transform -translate-x-1/2 hidden md:block"></div>
 
           {/* Timeline items */}
           <div className="hidden md:block">
@@ -465,13 +468,13 @@ export default function Home() {
             {experience.map((exp, index) => (
               <div key={index}>
                 <div
-                  className="group bg-[#1a1a1a] border border-gray-800 rounded-lg p-6 hover:border-green-400 transition-all duration-300 cursor-pointer"
+                  className="group bg-white border-4 border-black p-6 hover:bg-brutalist-yellow transition-all duration-300 cursor-pointer brutalist-shadow"
                   onClick={() => {
                     // Will need to handle mobile dialog
                   }}
                 >
                   <div className="flex items-start gap-4">
-                    <div className="flex-shrink-0 w-12 h-12 bg-white rounded-lg flex items-center justify-center overflow-hidden">
+                    <div className="flex-shrink-0 w-12 h-12 bg-white border-4 border-black flex items-center justify-center overflow-hidden">
                       {companyLogos[exp.company] ? (
                         <Image
                           src={companyLogos[exp.company]}
@@ -481,23 +484,23 @@ export default function Home() {
                           className="object-contain"
                         />
                       ) : (
-                        <Building2 className="w-6 h-6 text-gray-400" />
+                        <Building2 className="w-6 h-6 text-black" />
                       )}
                     </div>
                     <div className="flex-1 min-w-0">
-                      <h3 className="text-white font-semibold text-base mb-1 group-hover:text-green-400 transition-colors">
+                      <h3 className="text-black font-black text-base mb-1 uppercase">
                         {exp.position}
                       </h3>
                       <Link
                         href={exp.website}
                         target="_blank"
-                        className="text-gray-400 text-sm hover:text-green-400 transition-colors inline-flex items-center gap-1 mb-2"
+                        className="text-black text-sm hover:bg-black hover:text-brutalist-yellow transition-colors inline-flex items-center gap-1 mb-2 font-bold underline decoration-2"
                         onClick={(e) => e.stopPropagation()}
                       >
                         {exp.company}
                         <ExternalLink className="w-3 h-3" />
                       </Link>
-                      <p className="text-gray-500 text-xs mb-3">
+                      <p className="text-black text-xs mb-3 font-bold uppercase">
                         {new Date(exp.startDate).toLocaleDateString("en-US", {
                           month: "short",
                           year: "numeric",
@@ -510,7 +513,7 @@ export default function Home() {
                             })
                           : "Present"}
                       </p>
-                      <p className="text-gray-400 text-sm leading-relaxed line-clamp-2">
+                      <p className="text-black text-sm leading-relaxed line-clamp-2 font-medium">
                         {exp.oneLine}
                       </p>
                     </div>
@@ -523,23 +526,23 @@ export default function Home() {
       </section>
 
       {/* Testimonials Section - Carousel */}
-      <section className="py-16">
+      <section className="py-16 bg-white">
         <div className="max-w-6xl mx-auto px-6 mb-8">
-          <h2 className="text-white text-2xl font-bold">What People Say</h2>
+          <h2 className="text-black text-4xl font-black uppercase border-b-8 border-black pb-4">What People Say</h2>
         </div>
         <TestimonialsCarousel testimonials={testimonials} />
       </section>
 
       {/* Footer / Contact */}
-      <footer className="max-w-6xl mx-auto px-6 py-16 border-t border-gray-800">
+      <footer className="max-w-6xl mx-auto px-6 py-16 border-t-8 border-black">
         <div className="flex flex-col md:flex-row items-center justify-between gap-6">
-          <div className="text-gray-500 text-sm">
+          <div className="text-black text-sm font-bold uppercase">
             Built with ❤️ by {profile.name.firstName} {profile.name.lastName}
           </div>
           <div className="flex gap-4">
             <Button
               asChild
-              className="bg-green-600 hover:bg-green-700 text-white"
+              className="bg-brutalist-red hover:bg-black text-white hover:text-brutalist-red border-4 border-black font-bold uppercase px-6 py-3"
             >
               <Link href={`mailto:${profile.email}`}>
                 <Mail className="mr-2 h-4 w-4" />
@@ -548,8 +551,7 @@ export default function Home() {
             </Button>
             <Button
               asChild
-              variant="outline"
-              className="border-gray-700 text-white bg-transparent hover:bg-gray-800 hover:border-green-400 hover:text-white"
+              className="border-4 border-black text-black bg-white hover:bg-brutalist-yellow hover:text-black font-bold uppercase px-6 py-3"
             >
               <Link href={profile.consultationLink} target="_blank">
                 <Calendar className="mr-2 h-4 w-4" />
@@ -558,7 +560,7 @@ export default function Home() {
             </Button>
           </div>
         </div>
-        <div className="text-center text-gray-600 text-sm mt-8">
+        <div className="text-center text-black text-sm mt-8 font-bold uppercase">
           Copyright © {profile.name.firstName} {new Date().getFullYear()}. All
           rights reserved.
         </div>
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 35530fa0..006803be 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -11,7 +11,7 @@ export default function Header() {
 
   navComponents.push(
     <Link href="/" key="home">
-      <span className="mr-5 cursor-pointer hover:text-green-400 transition-colors">
+      <span className="mr-5 cursor-pointer hover:bg-brutalist-yellow hover:text-black transition-colors px-3 py-2 border-4 border-black font-bold uppercase">
         Home
       </span>
     </Link>,
@@ -19,7 +19,7 @@ export default function Header() {
 
   navComponents.push(
     <Link href="/projects" key="projects">
-      <span className="mr-5 cursor-pointer hover:text-green-400 transition-colors">
+      <span className="mr-5 cursor-pointer hover:bg-brutalist-yellow hover:text-black transition-colors px-3 py-2 border-4 border-black font-bold uppercase">
         Projects
       </span>
     </Link>,
@@ -27,24 +27,22 @@ export default function Header() {
 
   navComponents.push(
     <Link href="/writing" key="writing">
-      <span className="mr-5 cursor-pointer hover:text-green-400 transition-colors">
+      <span className="mr-5 cursor-pointer hover:bg-brutalist-yellow hover:text-black transition-colors px-3 py-2 border-4 border-black font-bold uppercase">
         Writing
       </span>
     </Link>,
   );
 
   return (
-    <header className="text-gray-400 body-font sticky z-50 top-0 bg-[#0d0d0d]/95 backdrop-blur-sm border-b border-gray-800">
-      <div className="container mx-auto flex flex-wrap p-1 lg:p-4 flex-col lg:flex-row items-center">
-        <nav className="lg:w-1/5 flex-wrap items-center text-base lg:ml-auto flex">
+    <header className="text-black body-font sticky z-50 top-0 bg-white border-b-8 border-black">
+      <div className="container mx-auto flex flex-wrap p-4 lg:p-6 flex-col lg:flex-row items-center justify-between">
+        <nav className="flex-wrap items-center text-base flex gap-2">
           {navComponents}
         </nav>
-        <div className="w-full lg:w-3/5 p-2 order-first lg:order-none"></div>
-        <div className="lg:w-1/5 inline-flex lg:justify-end lg:ml-0">
+        <div className="inline-flex">
           <Button
             onClick={() => launchExternalUrl(profile.resume)}
-            variant="ghost"
-            className="inline-flex items-center gap-2 text-gray-300 hover:text-white hover:bg-[#1a1a1a]"
+            className="inline-flex items-center gap-2 text-black bg-brutalist-yellow hover:bg-black hover:text-brutalist-yellow border-4 border-black font-bold uppercase px-6 py-3 transition-colors"
             data-umami-event="resume-button-clicked"
           >
             Resume
diff --git a/src/components/RecentWriting.tsx b/src/components/RecentWriting.tsx
index 2462faea..40e5a65f 100644
--- a/src/components/RecentWriting.tsx
+++ b/src/components/RecentWriting.tsx
@@ -19,19 +19,19 @@ export function RecentWriting({ story }: Props) {
   return (
     <Link
       href={`${root}/${story.slug}`}
-      className="group block bg-[#1a1a1a] border border-gray-800 rounded-lg p-6 hover:border-green-400 hover:bg-[#1a1a1a]/80 transition-all duration-300"
+      className="group block bg-white border-4 border-black p-6 hover:bg-brutalist-yellow transition-all duration-300 brutalist-shadow"
     >
       <div className="flex items-start justify-between gap-4">
         <div className="flex-1">
           {/* Type Badge */}
           <div className="flex flex-wrap items-center gap-2 mb-3">
-            <span className="inline-flex items-center rounded-md bg-green-400/10 px-2 py-1 text-xs font-medium text-green-400 ring-1 ring-inset ring-green-400/20">
+            <span className="inline-flex items-center bg-black px-3 py-1 text-xs font-black text-white uppercase border-2 border-black">
               {story.type === "blog" ? "blog" : "case study"}
             </span>
             {story.tags?.slice(0, 3).map((tag) => (
               <span
                 key={tag}
-                className="inline-flex items-center rounded-md bg-gray-800/50 px-2 py-1 text-xs font-medium text-gray-400 ring-1 ring-inset ring-gray-700/50"
+                className="inline-flex items-center bg-white px-2 py-1 text-xs font-bold text-black border-2 border-black uppercase"
               >
                 {tag}
               </span>
@@ -39,22 +39,22 @@ export function RecentWriting({ story }: Props) {
           </div>
 
           {/* Title */}
-          <h3 className="text-2xl font-bold mb-3 text-white group-hover:text-green-400 transition-colors">
+          <h3 className="text-2xl font-black mb-3 text-black uppercase">
             {story.title}
           </h3>
 
           {/* Excerpt */}
-          <p className="text-gray-400 leading-relaxed mb-4">{story.excerpt}</p>
+          <p className="text-black leading-relaxed mb-4 font-medium">{story.excerpt}</p>
 
           {/* Date */}
-          <div className="flex items-center gap-2 text-gray-500 text-sm">
+          <div className="flex items-center gap-2 text-black text-sm font-bold uppercase">
             <Calendar className="h-4 w-4" />
             <span>{formattedDate}</span>
           </div>
         </div>
 
         {/* Arrow Icon */}
-        <ArrowUpRight className="h-6 w-6 text-gray-600 group-hover:text-green-400 transition-colors flex-shrink-0" />
+        <ArrowUpRight className="h-6 w-6 text-black flex-shrink-0" />
       </div>
     </Link>
   );
diff --git a/src/styles/globals.css b/src/styles/globals.css
index ddcecf61..a1ae7693 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -2,110 +2,88 @@
 @tailwind components;
 @tailwind utilities;
 
+/* Brutalist underline effect */
 .custom-underline {
   display: inline-block;
   position: relative;
   padding-bottom: 2px;
+  border-bottom: 4px solid transparent;
+  transition: border-color 0.2s;
 }
 
-.custom-underline::after {
-  content: "";
-  position: absolute;
-  left: 50%;
-  bottom: 0;
-  width: 0;
-  height: 2px;
-  background-color: rgb(0, 0, 0);
-  transform: translateX(-50%);
-  transition: width 1s;
+.custom-underline:hover,
+.custom-underline:focus {
+  border-bottom-color: #FFFF00;
 }
 
-.custom-underline:hover::after,
-.custom-underline:focus::after {
-  width: 100%;
+/* Brutalist box shadow */
+.brutalist-shadow {
+  box-shadow: 8px 8px 0px 0px #000000;
 }
 
-/* Animated blob backgrounds */
-@keyframes blob {
-  0% {
-    transform: translate(0px, 0px) scale(1);
-  }
-  33% {
-    transform: translate(30px, -50px) scale(1.1);
-  }
-  66% {
-    transform: translate(-20px, 20px) scale(0.9);
-  }
-  100% {
-    transform: translate(0px, 0px) scale(1);
-  }
+.brutalist-shadow-yellow {
+  box-shadow: 8px 8px 0px 0px #FFFF00;
 }
 
-.animate-blob {
-  animation: blob 7s infinite;
+.brutalist-shadow-red {
+  box-shadow: 8px 8px 0px 0px #FF0000;
 }
 
-.animation-delay-2000 {
-  animation-delay: 2s;
+/* Harsh hover effects */
+.brutalist-hover:hover {
+  transform: translate(4px, 4px);
+  box-shadow: 4px 4px 0px 0px #000000;
 }
 
-.animation-delay-4000 {
-  animation-delay: 4s;
+/* Glitch effect for brutalist design */
+@keyframes glitch {
+  0% {
+    transform: translate(0);
+  }
+  20% {
+    transform: translate(-2px, 2px);
+  }
+  40% {
+    transform: translate(-2px, -2px);
+  }
+  60% {
+    transform: translate(2px, 2px);
+  }
+  80% {
+    transform: translate(2px, -2px);
+  }
+  100% {
+    transform: translate(0);
+  }
 }
 
 @layer base {
   :root {
     --background: 0 0% 100%;
-    --foreground: 240 10% 3.9%;
+    --foreground: 0 0% 0%;
     --card: 0 0% 100%;
-    --card-foreground: 240 10% 3.9%;
+    --card-foreground: 0 0% 0%;
     --popover: 0 0% 100%;
-    --popover-foreground: 240 10% 3.9%;
-    --primary: 240 5.9% 10%;
-    --primary-foreground: 0 0% 98%;
-    --secondary: 240 4.8% 95.9%;
-    --secondary-foreground: 240 5.9% 10%;
-    --muted: 240 4.8% 95.9%;
-    --muted-foreground: 240 3.8% 46.1%;
-    --accent: 240 4.8% 95.9%;
-    --accent-foreground: 240 5.9% 10%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 240 5.9% 90%;
-    --input: 240 5.9% 90%;
-    --ring: 240 10% 3.9%;
-    --chart-1: 12 76% 61%;
-    --chart-2: 173 58% 39%;
-    --chart-3: 197 37% 24%;
-    --chart-4: 43 74% 66%;
-    --chart-5: 27 87% 67%;
-    --radius: 0.5rem;
-  }
-  .dark {
-    --background: 240 10% 3.9%;
-    --foreground: 0 0% 98%;
-    --card: 240 10% 3.9%;
-    --card-foreground: 0 0% 98%;
-    --popover: 240 10% 3.9%;
-    --popover-foreground: 0 0% 98%;
-    --primary: 0 0% 98%;
-    --primary-foreground: 240 5.9% 10%;
-    --secondary: 240 3.7% 15.9%;
-    --secondary-foreground: 0 0% 98%;
-    --muted: 240 3.7% 15.9%;
-    --muted-foreground: 240 5% 64.9%;
-    --accent: 240 3.7% 15.9%;
-    --accent-foreground: 0 0% 98%;
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 240 3.7% 15.9%;
-    --input: 240 3.7% 15.9%;
-    --ring: 240 4.9% 83.9%;
-    --chart-1: 220 70% 50%;
-    --chart-2: 160 60% 45%;
-    --chart-3: 30 80% 55%;
-    --chart-4: 280 65% 60%;
-    --chart-5: 340 75% 55%;
+    --popover-foreground: 0 0% 0%;
+    --primary: 0 0% 0%;
+    --primary-foreground: 0 0% 100%;
+    --secondary: 60 100% 50%;
+    --secondary-foreground: 0 0% 0%;
+    --muted: 0 0% 95%;
+    --muted-foreground: 0 0% 40%;
+    --accent: 60 100% 50%;
+    --accent-foreground: 0 0% 0%;
+    --destructive: 0 100% 50%;
+    --destructive-foreground: 0 0% 100%;
+    --border: 0 0% 0%;
+    --input: 0 0% 0%;
+    --ring: 0 0% 0%;
+    --chart-1: 60 100% 50%;
+    --chart-2: 0 100% 50%;
+    --chart-3: 240 100% 50%;
+    --chart-4: 0 0% 0%;
+    --chart-5: 0 0% 100%;
+    --radius: 0;
   }
 }
 
@@ -114,33 +92,15 @@
     @apply border-border;
   }
   body {
-    @apply bg-background text-foreground;
+    @apply bg-white text-black;
   }
 }
 
-/* Grainy texture overlay */
+/* Brutalist grain - removed for cleaner look */
 .grain {
   position: relative;
 }
 
-.grain::before {
-  content: "";
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
-  pointer-events: none;
-  z-index: 1;
-  opacity: 0.4;
-}
-
-.grain > * {
-  position: relative;
-  z-index: 2;
-}
-
 /* Hide scrollbar */
 .scrollbar-hide {
   -ms-overflow-style: none;
@@ -150,3 +110,15 @@
 .scrollbar-hide::-webkit-scrollbar {
   display: none;
 }
+
+/* Brutalist text styles */
+.brutalist-text {
+  font-weight: 900;
+  text-transform: uppercase;
+  letter-spacing: -0.05em;
+}
+
+/* Hard lines */
+.hard-border {
+  border: 4px solid #000000;
+}
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 71edfc15..bfbba384 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -14,7 +14,13 @@ const config: Config = {
   			'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))'
   		},
   		colors: {
-  			black: '#222831',
+  			black: '#000000',
+  			white: '#FFFFFF',
+  			brutalist: {
+  				yellow: '#FFFF00',
+  				red: '#FF0000',
+  				blue: '#0000FF',
+  			},
   			background: 'hsl(var(--background))',
   			foreground: 'hsl(var(--foreground))',
   			card: {
@@ -57,9 +63,10 @@ const config: Config = {
   			}
   		},
   		borderRadius: {
-  			lg: 'var(--radius)',
-  			md: 'calc(var(--radius) - 2px)',
-  			sm: 'calc(var(--radius) - 4px)'
+  			lg: '0',
+  			md: '0',
+  			sm: '0',
+  			none: '0'
   		}
   	},
   	fontFamily: {

From f609d7deaa328eb3e044cf50c4cb5d95163ba025 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Mon, 3 Nov 2025 13:15:24 +0000
Subject: [PATCH 4/6] Transform all pages and components to brutalist design

Co-authored-by: UmairJibran <43789374+UmairJibran@users.noreply.github.com>
---
 src/app/projects/page.tsx           | 51 +++++++++++------------------
 src/app/writing/page.tsx            | 24 +++++++-------
 src/components/ExperienceDialog.tsx | 16 ++++-----
 src/components/MoreStories.tsx      |  6 ++--
 src/components/StoryPreview.tsx     | 16 ++++-----
 src/components/ui/button.tsx        | 22 ++++++-------
 src/components/ui/dialog.tsx        |  6 ++--
 7 files changed, 65 insertions(+), 76 deletions(-)

diff --git a/src/app/projects/page.tsx b/src/app/projects/page.tsx
index 76cd2e0f..b106fc4b 100644
--- a/src/app/projects/page.tsx
+++ b/src/app/projects/page.tsx
@@ -10,27 +10,27 @@ export default function ProjectsPage() {
   const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
 
   return (
-    <main className="bg-[#0d0d0d] min-h-screen grain">
+    <main className="bg-white min-h-screen">
       {/* Hero Section */}
       <section className="max-w-7xl mx-auto px-6 pt-20 pb-12">
         <div className="flex items-end justify-between mb-4">
           <div>
             <div className="flex items-center gap-3 mb-2">
-              <Briefcase className="h-6 w-6 text-green-400" />
-              <span className="text-gray-500 text-sm uppercase tracking-wider">Portfolio</span>
+              <Briefcase className="h-6 w-6 text-black" />
+              <span className="text-black text-sm uppercase tracking-wider font-black">Portfolio</span>
             </div>
-            <h1 className="text-white text-5xl md:text-6xl font-bold">
+            <h1 className="text-black text-6xl md:text-7xl font-black uppercase border-8 border-black p-6 bg-brutalist-yellow inline-block transform rotate-1">
               Projects
             </h1>
           </div>
           <div className="text-right">
-            <div className="text-gray-500 text-sm mb-1">Total</div>
-            <div className="text-green-400 text-2xl font-bold font-mono">
+            <div className="text-black text-sm mb-1 font-bold uppercase">Total</div>
+            <div className="text-black text-3xl font-black font-mono border-4 border-black px-4 py-2 bg-brutalist-red text-white">
               {String(portfolio.length).padStart(2, '0')}
             </div>
           </div>
         </div>
-        <div className="h-px bg-gradient-to-r from-green-400 via-gray-800 to-transparent"></div>
+        <div className="h-2 bg-black"></div>
       </section>
 
       {/* Projects List */}
@@ -39,22 +39,22 @@ export default function ProjectsPage() {
           {portfolio.map((project, index) => (
             <div
               key={project.id}
-              className="group relative border-b border-gray-800 last:border-b-0 hover:bg-[#1a1a1a]/30 transition-all duration-300"
+              className="group relative border-b-4 border-black last:border-b-0 hover:bg-brutalist-yellow transition-all duration-300"
               onMouseEnter={() => setHoveredIndex(index)}
               onMouseLeave={() => setHoveredIndex(null)}
             >
               <div className="flex items-center gap-6 md:gap-8 py-6 px-4">
                 {/* Index */}
-                <div className="hidden md:block text-gray-600 group-hover:text-green-400 font-mono text-sm w-12 transition-colors">
+                <div className="hidden md:block text-black font-black text-lg w-12 transition-colors uppercase">
                   {String(index + 1).padStart(2, '0')}
                 </div>
 
                 {/* Logo */}
                 <div className="relative flex-shrink-0">
-                  <div className={`w-16 h-16 md:w-20 md:h-20 bg-white/5 rounded-lg flex items-center justify-center overflow-hidden border transition-all duration-300 ${
+                  <div className={`w-16 h-16 md:w-20 md:h-20 bg-white flex items-center justify-center overflow-hidden border-4 transition-all duration-300 ${
                     hoveredIndex === index 
-                      ? 'border-green-400 shadow-lg shadow-green-400/20' 
-                      : 'border-gray-800'
+                      ? 'border-black bg-brutalist-red' 
+                      : 'border-black'
                   }`}>
                     <Image
                       src={`/assets/logos/${project.logo}.webp`}
@@ -70,25 +70,21 @@ export default function ProjectsPage() {
                       }}
                     />
                   </div>
-                  {/* Decorative corner accent */}
-                  {hoveredIndex === index && (
-                    <div className="absolute -top-1 -right-1 w-3 h-3 border-t-2 border-r-2 border-green-400"></div>
-                  )}
                 </div>
 
                 {/* Project Info */}
                 <div className="flex-1 min-w-0">
                   <div className="flex items-center gap-3 mb-1">
-                    <h3 className="text-white font-semibold text-lg md:text-xl group-hover:text-green-400 transition-colors">
+                    <h3 className="text-black font-black text-lg md:text-xl uppercase">
                       {project.name}
                     </h3>
                     {!project.url && !project.source && (
-                      <span className="text-xs px-2 py-0.5 rounded-full bg-gray-800 text-gray-500 border border-gray-700">
+                      <span className="text-xs px-2 py-0.5 bg-black text-white border-2 border-black font-black uppercase">
                         Private
                       </span>
                     )}
                   </div>
-                  <p className="text-gray-400 text-sm md:text-base line-clamp-1 md:line-clamp-2">
+                  <p className="text-black text-sm md:text-base line-clamp-1 md:line-clamp-2 font-medium">
                     {project.description}
                   </p>
                 </div>
@@ -99,7 +95,7 @@ export default function ProjectsPage() {
                     <Link
                       href={project.url}
                       target="_blank"
-                      className="flex items-center gap-2 px-3 md:px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-md transition-all text-sm font-medium shadow-lg shadow-green-600/20 hover:shadow-green-600/40"
+                      className="flex items-center gap-2 px-4 md:px-6 py-3 bg-black hover:bg-brutalist-yellow text-white hover:text-black transition-all text-sm font-black uppercase border-4 border-black brutalist-shadow"
                     >
                       <span className="hidden sm:inline">Visit</span>
                       <ArrowUpRight className="h-4 w-4" />
@@ -110,7 +106,7 @@ export default function ProjectsPage() {
                     <Link
                       href={project.source}
                       target="_blank"
-                      className="p-2 border border-gray-700 hover:border-green-400 hover:bg-green-400/10 text-gray-400 hover:text-green-400 rounded-md transition-all"
+                      className="p-3 border-4 border-black hover:bg-black text-black hover:text-brutalist-yellow transition-all"
                       title="View Source Code"
                     >
                       <Github className="h-5 w-5" />
@@ -118,13 +114,6 @@ export default function ProjectsPage() {
                   )}
                 </div>
               </div>
-
-              {/* Animated hover gradient line */}
-              <div 
-                className={`absolute bottom-0 left-0 h-px bg-gradient-to-r from-green-400 via-green-400/50 to-transparent transition-all duration-500 ${
-                  hoveredIndex === index ? 'w-full opacity-100' : 'w-0 opacity-0'
-                }`}
-              ></div>
             </div>
           ))}
         </div>
@@ -132,14 +121,14 @@ export default function ProjectsPage() {
 
       {/* Footer info */}
       <section className="max-w-7xl mx-auto px-6 pb-16">
-        <div className="border-t border-gray-800 pt-8 flex items-center justify-between text-sm">
-          <div className="flex items-center gap-2 text-gray-500">
+        <div className="border-t-4 border-black pt-8 flex items-center justify-between text-sm">
+          <div className="flex items-center gap-2 text-black font-bold uppercase">
             <Code2 className="h-4 w-4" />
             <span>Open source contributions and client work</span>
           </div>
           <Link 
             href="/" 
-            className="text-gray-500 hover:text-green-400 transition-colors flex items-center gap-1"
+            className="text-black hover:bg-black hover:text-brutalist-yellow transition-colors flex items-center gap-1 border-4 border-black px-4 py-2 font-black uppercase"
           >
             Back to home
             <ArrowUpRight className="h-3 w-3" />
diff --git a/src/app/writing/page.tsx b/src/app/writing/page.tsx
index 49431e31..7ea97f2b 100644
--- a/src/app/writing/page.tsx
+++ b/src/app/writing/page.tsx
@@ -12,35 +12,35 @@ export default function Index() {
 
   if (allContent.length === 0) {
     return (
-      <main className="bg-[#0d0d0d] min-h-screen grain flex items-center justify-center">
-        <div className="text-gray-500">oops... I should write some up</div>
+      <main className="bg-white min-h-screen flex items-center justify-center">
+        <div className="text-black font-black text-2xl uppercase border-8 border-black p-8 bg-brutalist-yellow">oops... I should write some up</div>
       </main>
     );
   }
 
   return (
-    <main className="bg-[#0d0d0d] min-h-screen grain">
+    <main className="bg-white min-h-screen">
       {/* Header section */}
       <section className="max-w-6xl mx-auto px-6 pt-20 pb-12">
         <div className="flex items-end justify-between mb-4">
           <div>
             <div className="flex items-center gap-3 mb-2">
-              <PenTool className="h-6 w-6 text-green-400" />
-              <span className="text-gray-500 text-sm uppercase tracking-wider">Blog & Case Studies</span>
+              <PenTool className="h-6 w-6 text-black" />
+              <span className="text-black text-sm uppercase tracking-wider font-black">Blog & Case Studies</span>
             </div>
-            <h1 className="text-white text-5xl md:text-6xl font-bold mb-6">
+            <h1 className="text-black text-6xl md:text-7xl font-black mb-6 uppercase border-8 border-black p-6 bg-brutalist-red text-white inline-block transform -rotate-1">
               Writing
             </h1>
           </div>
           <div className="text-right">
-            <div className="text-gray-500 text-sm mb-1">Articles</div>
-            <div className="text-green-400 text-2xl font-bold font-mono">
+            <div className="text-black text-sm mb-1 font-bold uppercase">Articles</div>
+            <div className="text-black text-3xl font-black font-mono border-4 border-black px-4 py-2 bg-brutalist-yellow">
               {String(allContent.length).padStart(2, '0')}
             </div>
           </div>
         </div>
         
-        <div className="text-base text-gray-400 space-y-3 max-w-3xl mb-6">
+        <div className="text-base text-black space-y-3 max-w-3xl mb-6 font-medium border-l-8 border-black pl-6">
           <p>
             I write about software engineering, web development, and the technical challenges I encounter. 
             Here you will find in-depth case studies, technical articles, and development stories.
@@ -48,7 +48,7 @@ export default function Index() {
           <div className="flex items-center gap-6 pt-2">
             <Link 
               href="/rss.xml" 
-              className="flex items-center gap-2 text-gray-500 hover:text-green-400 transition-colors text-sm"
+              className="flex items-center gap-2 text-black hover:bg-brutalist-yellow transition-colors text-sm font-bold uppercase border-4 border-black px-4 py-2"
             >
               <Rss className="h-4 w-4" />
               RSS Feed
@@ -56,7 +56,7 @@ export default function Index() {
             <Link 
               href="https://linkedin.com/in/umairjibran" 
               target="_blank"
-              className="flex items-center gap-2 text-gray-500 hover:text-green-400 transition-colors text-sm"
+              className="flex items-center gap-2 text-black hover:bg-brutalist-yellow transition-colors text-sm font-bold uppercase border-4 border-black px-4 py-2"
             >
               <Linkedin className="h-4 w-4" />
               Follow on LinkedIn
@@ -64,7 +64,7 @@ export default function Index() {
           </div>
         </div>
         
-        <div className="h-px bg-gradient-to-r from-green-400 via-gray-800 to-transparent"></div>
+        <div className="h-2 bg-black"></div>
       </section>
 
       {/* All content */}
diff --git a/src/components/ExperienceDialog.tsx b/src/components/ExperienceDialog.tsx
index 743d3c84..a6619dca 100644
--- a/src/components/ExperienceDialog.tsx
+++ b/src/components/ExperienceDialog.tsx
@@ -31,18 +31,18 @@ export function ExperienceDialog({
 }) {
   return (
     <Dialog open={open} onOpenChange={onOpenChange} modal>
-      <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto bg-[#1a1a1a] border-gray-800">
+      <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto bg-white border-8 border-black">
         <DialogHeader>
-          <DialogTitle className="text-xl font-bold flex flex-col gap-2">
-            <span className="text-white">{experience.position}</span>
+          <DialogTitle className="text-xl font-black flex flex-col gap-2 uppercase">
+            <span className="text-black">{experience.position}</span>
             <Link 
               href={experience.website} 
-              className="text-lg text-green-400 hover:text-green-300 font-medium transition-colors"
+              className="text-lg text-black hover:bg-brutalist-yellow font-black transition-colors underline decoration-4"
               target="_blank"
             >
               {experience.company}
             </Link>
-            <span className="text-sm font-normal text-gray-400">
+            <span className="text-sm font-bold text-black uppercase">
               {new Date(experience.startDate).toLocaleDateString('en-US', { month: 'long', year: 'numeric' })} - {
                 experience.endDate ? new Date(experience.endDate).toLocaleDateString('en-US', { month: 'long', year: 'numeric' }) : 'Present'
               }
@@ -50,11 +50,11 @@ export function ExperienceDialog({
           </DialogTitle>
         </DialogHeader>
         <div className="mt-4">
-          <p className="text-gray-300 mb-6 text-lg">{experience.oneLine}</p>
-          <ul className="space-y-3 text-gray-400">
+          <p className="text-black mb-6 text-lg font-bold border-l-4 border-black pl-4">{experience.oneLine}</p>
+          <ul className="space-y-3 text-black font-medium">
             {experience.bullets.map((bullet, i) => (
               <li key={i} className="flex items-start gap-2">
-                <span className="text-green-400 mt-1.5">•</span>
+                <span className="text-black mt-1.5 text-xl font-black">▪</span>
                 <span>{bullet}</span>
               </li>
             ))}
diff --git a/src/components/MoreStories.tsx b/src/components/MoreStories.tsx
index 58d44c9d..454bb980 100644
--- a/src/components/MoreStories.tsx
+++ b/src/components/MoreStories.tsx
@@ -52,7 +52,7 @@ export function MoreStories({ stories }: Props) {
       <div className="relative">
         {/* Main continuous timeline */}
         <div
-          className="absolute left-32 w-px bg-gray-800"
+          className="absolute left-32 w-1 bg-black"
           style={{
             top: '12px',
             height: `calc(100% - ${lastSectionHeight}px + 26px)`
@@ -66,10 +66,10 @@ export function MoreStories({ stories }: Props) {
               <div className="relative flex items-center mb-16">
                 <div className="w-28 flex-shrink-0" />
                 {/* Month bullet */}
-                <div className="absolute left-32 -translate-x-1/2 w-4 h-4 rounded-full bg-green-400 z-10 shadow-lg shadow-green-400/50" />
+                <div className="absolute left-32 -translate-x-1/2 w-6 h-6 bg-brutalist-red border-4 border-black z-10" />
                 {/* Month label */}
                 <div className="pl-12">
-                  <h3 className="text-3xl font-mono font-bold text-white">
+                  <h3 className="text-4xl font-mono font-black text-black uppercase border-b-4 border-black pb-2">
                     {groupedStories[key].month} {groupedStories[key].year}
                   </h3>
                 </div>
diff --git a/src/components/StoryPreview.tsx b/src/components/StoryPreview.tsx
index b375c2a0..21ed58c1 100644
--- a/src/components/StoryPreview.tsx
+++ b/src/components/StoryPreview.tsx
@@ -30,14 +30,14 @@ export function StoryPreview({
     <div className="group relative flex items-start">
       {/* Left side - day number */}
       <div className="w-28 flex-shrink-0 text-right pr-8">
-        <span className="text-6xl font-mono font-bold tabular-nums leading-none text-gray-700 group-hover:text-green-400 transition-colors">
+        <span className="text-6xl font-mono font-black tabular-nums leading-none text-black border-4 border-black px-3 py-2 inline-block bg-brutalist-yellow transform rotate-3 group-hover:rotate-0 transition-transform">
           {day}
         </span>
       </div>
 
       {/* Timeline dot */}
       <div
-        className="absolute left-32 -translate-x-1/2 w-2 h-2 rounded-full bg-green-400 mt-[12px] z-10 shadow-lg shadow-green-400/30"
+        className="absolute left-32 -translate-x-1/2 w-4 h-4 bg-black border-4 border-white mt-[12px] z-10"
       />
 
       {/* Right side - content */}
@@ -45,15 +45,15 @@ export function StoryPreview({
         href={[root, slug].join("/")}
         className="flex-grow hover:no-underline group-hover:opacity-90 transition-opacity pl-12"
       >
-        <div className="rounded-lg p-6 border border-gray-800 bg-[#1a1a1a]/30 hover:bg-[#1a1a1a]/60 hover:border-green-400/50 transition-all">
+        <div className="p-6 border-4 border-black bg-white hover:bg-brutalist-yellow transition-all brutalist-shadow">
           <div className="flex flex-wrap items-center gap-2 mb-3">
-            <span className="inline-flex items-center rounded-md bg-green-400/10 px-2 py-1 text-xs font-medium text-green-400 ring-1 ring-inset ring-green-400/20">
+            <span className="inline-flex items-center bg-black px-3 py-1 text-xs font-black text-white uppercase">
               {type.replace("-", " ")}
             </span>
             {tags.map((tag) => (
               <span 
                 key={tag} 
-                className="inline-flex items-center rounded-md bg-gray-800/50 px-2 py-1 text-xs font-medium text-gray-400 ring-1 ring-inset ring-gray-700/50"
+                className="inline-flex items-center bg-white px-2 py-1 text-xs font-bold text-black border-2 border-black uppercase"
               >
                 {tag}
               </span>
@@ -61,14 +61,14 @@ export function StoryPreview({
           </div>
           <div className="flex items-start justify-between gap-4">
             <div className="flex-1">
-              <h3 className="text-xl font-semibold mb-2 text-white group-hover:text-green-400 transition-colors">
+              <h3 className="text-xl font-black mb-2 text-black uppercase">
                 {title}
               </h3>
-              <p className="text-gray-400 leading-relaxed">
+              <p className="text-black leading-relaxed font-medium">
                 {excerpt}
               </p>
             </div>
-            <ArrowUpRight className="h-5 w-5 text-gray-600 group-hover:text-green-400 transition-colors flex-shrink-0 mt-1" />
+            <ArrowUpRight className="h-5 w-5 text-black flex-shrink-0 mt-1" />
           </div>
         </div>
       </Link>
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index 65d4fcd9..064c4aa6 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -5,26 +5,26 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-black uppercase transition-colors focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-black disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border-4 border-black",
   {
     variants: {
       variant: {
         default:
-          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+          "bg-black text-white hover:bg-brutalist-yellow hover:text-black",
         destructive:
-          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+          "bg-brutalist-red text-white hover:bg-black hover:text-brutalist-red",
         outline:
-          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+          "bg-white text-black hover:bg-brutalist-yellow hover:text-black",
         secondary:
-          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 hover:underline",
+          "bg-brutalist-yellow text-black hover:bg-black hover:text-brutalist-yellow",
+        ghost: "border-0 hover:bg-brutalist-yellow hover:text-black",
+        link: "border-0 text-black underline decoration-4 hover:bg-brutalist-yellow",
       },
       size: {
-        default: "h-9 px-4 py-2",
-        sm: "h-8 rounded-md px-3 text-xs",
-        lg: "h-10 rounded-md px-8",
-        icon: "h-9 w-9",
+        default: "h-11 px-6 py-3",
+        sm: "h-9 px-4 text-xs",
+        lg: "h-12 px-8",
+        icon: "h-11 w-11",
       },
     },
     defaultVariants: {
diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
index d5eab947..c9b649dc 100644
--- a/src/components/ui/dialog.tsx
+++ b/src/components/ui/dialog.tsx
@@ -38,14 +38,14 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border-8 border-black bg-white p-6 duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] brutalist-shadow",
         className
       )}
       {...props}
     >
       {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
-        <X className="h-4 w-4 text-gray-400 hover:text-white" />
+      <DialogPrimitive.Close className="absolute right-4 top-4 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-4 focus:ring-black disabled:pointer-events-none border-4 border-black p-1 bg-brutalist-yellow hover:bg-black group">
+        <X className="h-4 w-4 text-black group-hover:text-brutalist-yellow" />
         <span className="sr-only">Close</span>
       </DialogPrimitive.Close>
     </DialogPrimitive.Content>

From 11b877b093707926700776b03385b48ab1acf0e3 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Mon, 3 Nov 2025 13:17:41 +0000
Subject: [PATCH 5/6] Transform blog pages and markdown styles to brutalist
 design

Co-authored-by: UmairJibran <43789374+UmairJibran@users.noreply.github.com>
---
 src/app/writing/[slug]/page.tsx       | 16 ++++----
 src/components/RelatedStories.tsx     | 30 +++++++-------
 src/styles/markdown-styles.module.css | 59 +++++++++------------------
 3 files changed, 42 insertions(+), 63 deletions(-)

diff --git a/src/app/writing/[slug]/page.tsx b/src/app/writing/[slug]/page.tsx
index b62fab17..7e21274a 100644
--- a/src/app/writing/[slug]/page.tsx
+++ b/src/app/writing/[slug]/page.tsx
@@ -22,13 +22,13 @@ export default async function StoryPage({ params }: { params: { slug: string } }
     const content = await markdownToHtml(story.content || "");
 
     return (
-        <main className="bg-[#0d0d0d] min-h-screen grain">
+        <main className="bg-white min-h-screen">
             {/* Header */}
-            <div className="border-b border-gray-800">
+            <div className="border-b-4 border-black">
                 <article className="max-w-5xl mx-auto px-6 py-16">
                     <Link 
                         href="/writing" 
-                        className="inline-flex items-center gap-2 text-gray-500 hover:text-green-400 transition-colors mb-8 text-sm"
+                        className="inline-flex items-center gap-2 text-black hover:bg-brutalist-yellow transition-colors mb-8 text-sm font-bold uppercase border-4 border-black px-4 py-2"
                     >
                         <ArrowLeft className="h-4 w-4" />
                         Back to all posts
@@ -36,28 +36,28 @@ export default async function StoryPage({ params }: { params: { slug: string } }
                     
                     <header>
                         <div className="flex items-center gap-3 mb-4">
-                            <span className="inline-flex items-center rounded-md bg-green-400/10 px-3 py-1 text-sm font-medium text-green-400 ring-1 ring-inset ring-green-400/20">
+                            <span className="inline-flex items-center bg-black px-3 py-1 text-sm font-black text-white uppercase border-4 border-black">
                                 {story.type.replace("-", " ")}
                             </span>
                             {story.tags?.map((tag) => (
                                 <span 
                                     key={tag}
-                                    className="inline-flex items-center rounded-md bg-gray-800/50 px-2 py-1 text-xs font-medium text-gray-400 ring-1 ring-inset ring-gray-700/50"
+                                    className="inline-flex items-center bg-white px-2 py-1 text-xs font-bold text-black border-2 border-black uppercase"
                                 >
                                     {tag}
                                 </span>
                             ))}
                         </div>
                         
-                        <h1 className="text-4xl md:text-5xl font-bold mb-6 text-white leading-tight">
+                        <h1 className="text-5xl md:text-6xl font-black mb-6 text-black leading-none uppercase border-l-8 border-brutalist-yellow pl-6">
                             {story.title}
                         </h1>
                         
-                        <p className="text-xl text-gray-400 leading-relaxed mb-6">
+                        <p className="text-xl text-black leading-relaxed mb-6 font-bold border-l-4 border-black pl-6">
                             {story.excerpt}
                         </p>
                         
-                        <div className="flex items-center gap-2 text-gray-500 text-sm">
+                        <div className="flex items-center gap-2 text-black text-sm font-bold uppercase">
                             <Calendar className="h-4 w-4" />
                             <time dateTime={story.date}>
                                 {new Date(story.date).toLocaleDateString('en-US', {
diff --git a/src/components/RelatedStories.tsx b/src/components/RelatedStories.tsx
index bc2c0fb5..79d32298 100644
--- a/src/components/RelatedStories.tsx
+++ b/src/components/RelatedStories.tsx
@@ -49,31 +49,31 @@ export function RelatedStories({ currentStory, allStories }: Props) {
 
   return (
     <aside className="space-y-8">
-      <h2 className="text-lg font-semibold text-white mb-6">Related Stories</h2>
+      <h2 className="text-lg font-black text-black mb-6 uppercase border-b-4 border-black pb-2">Related Stories</h2>
       
       {relatedBlog && (
         <div>
-          <h3 className="text-sm font-medium text-gray-500 mb-3">From the Blog</h3>
+          <h3 className="text-sm font-bold text-black mb-3 uppercase">From the Blog</h3>
           <Link href={`/writing/${relatedBlog.story.slug}`} className="block group">
-            <div className="rounded-lg p-4 bg-[#1a1a1a] border border-gray-800 hover:border-green-400/50 transition-all">
+            <div className="p-4 bg-white border-4 border-black hover:bg-brutalist-yellow transition-all brutalist-shadow">
               <div className="flex items-center gap-2 mb-2">
-                <span className="inline-flex items-center rounded-md bg-green-400/10 px-2 py-1 text-xs font-medium text-green-400 ring-1 ring-inset ring-green-400/20">
+                <span className="inline-flex items-center bg-black px-2 py-1 text-xs font-black text-white uppercase">
                   blog
                 </span>
                 {relatedBlog.matchingTag && (
-                  <span className="inline-flex items-center rounded-md bg-gray-800/50 px-2 py-1 text-xs font-medium text-gray-400 ring-1 ring-inset ring-gray-700/50">
+                  <span className="inline-flex items-center bg-white px-2 py-1 text-xs font-bold text-black border-2 border-black uppercase">
                     {relatedBlog.matchingTag}
                   </span>
                 )}
               </div>
               <div className="flex items-start justify-between gap-2">
                 <div className="flex-1">
-                  <h4 className="text-base font-medium text-white group-hover:text-green-400 transition-colors mb-1">
+                  <h4 className="text-base font-black text-black uppercase mb-1">
                     {relatedBlog.story.title}
                   </h4>
-                  <p className="text-sm text-gray-400 line-clamp-2">{relatedBlog.story.excerpt}</p>
+                  <p className="text-sm text-black line-clamp-2 font-medium">{relatedBlog.story.excerpt}</p>
                 </div>
-                <ArrowUpRight className="h-4 w-4 text-gray-600 group-hover:text-green-400 transition-colors flex-shrink-0 mt-1" />
+                <ArrowUpRight className="h-4 w-4 text-black flex-shrink-0 mt-1" />
               </div>
             </div>
           </Link>
@@ -82,27 +82,27 @@ export function RelatedStories({ currentStory, allStories }: Props) {
 
       {relatedCaseStudy && (
         <div>
-          <h3 className="text-sm font-medium text-gray-500 mb-3">From Case Studies</h3>
+          <h3 className="text-sm font-bold text-black mb-3 uppercase">From Case Studies</h3>
           <Link href={`/writing/${relatedCaseStudy.story.slug}`} className="block group">
-            <div className="rounded-lg p-4 bg-[#1a1a1a] border border-gray-800 hover:border-green-400/50 transition-all">
+            <div className="p-4 bg-white border-4 border-black hover:bg-brutalist-yellow transition-all brutalist-shadow">
               <div className="flex items-center gap-2 mb-2">
-                <span className="inline-flex items-center rounded-md bg-green-400/10 px-2 py-1 text-xs font-medium text-green-400 ring-1 ring-inset ring-green-400/20">
+                <span className="inline-flex items-center bg-black px-2 py-1 text-xs font-black text-white uppercase">
                   case study
                 </span>
                 {relatedCaseStudy.matchingTag && (
-                  <span className="inline-flex items-center rounded-md bg-gray-800/50 px-2 py-1 text-xs font-medium text-gray-400 ring-1 ring-inset ring-gray-700/50">
+                  <span className="inline-flex items-center bg-white px-2 py-1 text-xs font-bold text-black border-2 border-black uppercase">
                     {relatedCaseStudy.matchingTag}
                   </span>
                 )}
               </div>
               <div className="flex items-start justify-between gap-2">
                 <div className="flex-1">
-                  <h4 className="text-base font-medium text-white group-hover:text-green-400 transition-colors mb-1">
+                  <h4 className="text-base font-black text-black uppercase mb-1">
                     {relatedCaseStudy.story.title}
                   </h4>
-                  <p className="text-sm text-gray-400 line-clamp-2">{relatedCaseStudy.story.excerpt}</p>
+                  <p className="text-sm text-black line-clamp-2 font-medium">{relatedCaseStudy.story.excerpt}</p>
                 </div>
-                <ArrowUpRight className="h-4 w-4 text-gray-600 group-hover:text-green-400 transition-colors flex-shrink-0 mt-1" />
+                <ArrowUpRight className="h-4 w-4 text-black flex-shrink-0 mt-1" />
               </div>
             </div>
           </Link>
diff --git a/src/styles/markdown-styles.module.css b/src/styles/markdown-styles.module.css
index c3d34afa..36dd448a 100644
--- a/src/styles/markdown-styles.module.css
+++ b/src/styles/markdown-styles.module.css
@@ -1,5 +1,5 @@
 .markdown {
-  @apply text-lg leading-relaxed text-gray-300;
+  @apply text-lg leading-relaxed text-black;
 }
 
 .markdown p,
@@ -18,77 +18,56 @@
 }
 
 .markdown h2 {
-  @apply text-3xl mt-12 mb-4 leading-snug text-white font-semibold;
+  @apply text-3xl mt-12 mb-4 leading-snug text-black font-black uppercase border-l-8 border-brutalist-yellow pl-4;
 }
 
 .markdown h3 {
-  @apply text-2xl mt-8 mb-4 leading-snug text-white font-semibold;
+  @apply text-2xl mt-8 mb-4 leading-snug text-black font-black uppercase border-l-4 border-black pl-4;
 }
 
 .markdown a {
-  color: #10b981;
+  color: #000000;
   display: inline-block;
   position: relative;
-  font-weight: 500;
+  font-weight: 900;
+  text-decoration: underline;
+  text-decoration-thickness: 3px;
+  text-underline-offset: 4px;
 }
 
-.markdown a::after {
-  content: "";
-  position: absolute;
-  left: 50%;
-  bottom: 0;
-  width: 0;
-  height: 1px;
-  background-color: #10b981;
-  transform: translateX(-50%);
-  transition: width 0.3s;
-}
-
-.markdown a:hover::after,
-.markdown a:focus::after {
-  width: 100%;
+.markdown a:hover {
+  background-color: #FFFF00;
 }
 
 .markdown img {
-  @apply flex justify-center w-full my-6 rounded-lg;
+  @apply flex justify-center w-full my-6 border-4 border-black;
 }
 
 .markdown pre code {
   font-family: "Fira Code", monospace;
-  background-color: #1a1a1a;
-  color: #e5e7eb;
+  background-color: #FFFFFF;
+  color: #000000;
   padding: 16px;
-  border-radius: 8px;
   display: block;
   overflow-x: auto;
   line-height: 1.6;
   white-space: pre;
   position: relative;
-  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.5);
-  border: 1px solid #2a2a2a;
+  border: 4px solid #000000;
 }
 
 .markdown code {
   font-family: "Fira Code", monospace;
-  background-color: #1a1a1a;
-  color: #10b981;
+  background-color: #FFFF00;
+  color: #000000;
   padding: 3px 8px;
-  border-radius: 4px;
   display: inline;
   white-space: nowrap;
-  border: 1px solid #2a2a2a;
-}
-
-.markdown pre code::before {
-  counter-increment: line;
-  content: counter(line);
-  position: absolute;
-  left: -2.5em;
-  text-align: right;
-  color: #555;
+  border: 2px solid #000000;
+  font-weight: 900;
 }
 
 .markdown blockquote {
-  @apply border-l-4 border-green-400/50 pl-4 italic text-gray-400 bg-[#1a1a1a] py-3 pr-4 rounded-r-lg;
+  @apply border-l-8 border-black pl-4 font-bold text-black bg-white py-3 pr-4;
 }
 

From 039b31f653e47a31ed275bad7c6a52829b282fc0 Mon Sep 17 00:00:00 2001
From: Umair Jibran <me@umairjibran.com>
Date: Thu, 19 Feb 2026 13:46:04 +0500
Subject: [PATCH 6/6] wip

---
 src/app/page.tsx          | 142 ++++++++++++++++----------
 src/components/Header.tsx |  10 +-
 src/styles/globals.css    | 204 +++++++++++++++++++++++++++++++++++++-
 tailwind.config.ts        |   4 +
 4 files changed, 303 insertions(+), 57 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 4373a3ae..8c96ed92 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -80,7 +80,7 @@ function ExperienceTimelineItem({
         {/* Card */}
         <div className="w-[calc(50%-2rem)]">
           <div
-            className="group bg-white border-4 border-black p-6 hover:bg-brutalist-yellow transition-all duration-300 cursor-pointer brutalist-shadow"
+            className="group bg-white border-4 border-black p-6 hover:bg-brutalist-yellow transition-all duration-300 cursor-pointer brutalist-shadow-multi hover:brutalist-shadow-multi-heavy hover:scale-105 brutalist-noise"
             onClick={() => setShowDetails(true)}
           >
             <div className="flex items-start gap-4">
@@ -147,7 +147,7 @@ function ExperienceTimelineItem({
 
         {/* Timeline dot and line */}
         <div className="flex flex-col items-center">
-          <div className="w-6 h-6 bg-brutalist-red border-4 border-black z-10"></div>
+          <div className="w-6 h-6 bg-brutalist-red border-4 border-black z-10 transform rotate-45 hover:rotate-180 transition-transform duration-300 cursor-pointer pulse-brutal"></div>
         </div>
 
         {/* Empty space on the other side */}
@@ -222,7 +222,11 @@ function TestimonialsCarousel({ testimonials }: { testimonials: any[] }) {
         <div
           className={`w-full max-w-2xl transition-all duration-500 ${isTransitioning ? "opacity-0 scale-95" : "opacity-100 scale-100"}`}
         >
-          <div className="bg-brutalist-yellow border-8 border-black p-8 brutalist-shadow-red">
+          <div className="bg-brutalist-yellow border-8 border-black p-8 brutalist-shadow-multi-heavy relative brutalist-noise">
+            {/* Decorative corner accent */}
+            <div className="absolute -top-4 -right-4 w-8 h-8 bg-brutalist-magenta border-4 border-black rotate-45"></div>
+            <div className="absolute -bottom-4 -left-4 w-8 h-8 bg-brutalist-cyan border-4 border-black rotate-45"></div>
+            
             <Quote className="w-10 h-10 text-black mb-6" />
             <p className="text-black text-base leading-relaxed mb-8 font-bold">
               {testimonials[currentIndex].testimonial}
@@ -337,11 +341,15 @@ export default function Home() {
   }, []);
 
   return (
-    <main className="bg-white min-h-screen">
+    <main className="bg-white min-h-screen brutalist-noise">
       {/* Hero Section - Brutalist Theme */}
-      <section className="max-w-6xl mx-auto px-6 pt-20 pb-16">
+      <section className="max-w-6xl mx-auto px-6 pt-20 pb-16 relative">
+        {/* Decorative floating elements */}
+        <div className="absolute top-10 right-10 w-20 h-20 bg-brutalist-cyan border-4 border-black rotate-12 hidden lg:block pulse-brutal"></div>
+        <div className="absolute bottom-20 left-20 w-16 h-16 bg-brutalist-magenta border-4 border-black -rotate-12 hidden lg:block"></div>
+        
         {/* Title */}
-        <h1 className="text-black text-5xl md:text-7xl font-black mb-8 leading-none uppercase border-8 border-black p-8 bg-brutalist-yellow inline-block transform -rotate-1">
+        <h1 className="text-black text-5xl md:text-7xl font-black mb-8 leading-none uppercase border-8 border-black p-8 bg-brutalist-yellow inline-block transform -rotate-1 brutalist-shadow-multi-heavy relative z-10">
           Software engineer, technical
           <br />
           writer & open-source maintainer
@@ -349,40 +357,41 @@ export default function Home() {
 
         {/* Description */}
         <div
-          className="text-black text-base md:text-lg leading-relaxed mb-8 max-w-3xl border-l-8 border-black pl-6 font-bold [&_a]:text-brutalist-red [&_a]:underline [&_a]:decoration-4 [&_a]:hover:bg-brutalist-red [&_a]:hover:text-white [&_strong]:text-black [&_strong]:font-black [&_img]:inline-block [&_img]:w-5 [&_img]:h-5 [&_img]:mx-1"
+          className="text-black text-base md:text-lg leading-relaxed mb-8 max-w-3xl border-l-8 border-black pl-6 bg-white/80 backdrop-blur-sm p-4 font-bold [&_a]:text-brutalist-red [&_a]:underline [&_a]:decoration-4 [&_a]:hover:bg-brutalist-red [&_a]:hover:text-white [&_a]:transition-all [&_strong]:text-black [&_strong]:font-black [&_strong]:bg-brutalist-yellow [&_strong]:px-1 [&_img]:inline-block [&_img]:w-5 [&_img]:h-5 [&_img]:mx-1"
           dangerouslySetInnerHTML={{ __html: profile.extraInfo }}
         />
 
         {/* Social Links */}
         <div className="flex flex-wrap gap-4 mb-16">
-          {profile.social.map((item, idx) => (
-            <Link
-              key={item.name}
-              href={item.link}
-              className="inline-flex items-center gap-2 px-6 py-3 bg-white hover:bg-black border-4 border-black text-black hover:text-brutalist-yellow transition-colors text-sm font-bold uppercase brutalist-shadow transform hover:translate-x-1 hover:translate-y-1"
-              target="_blank"
-              style={{
-                transform: `rotate(${idx % 2 === 0 ? '-' : ''}${Math.random() * 2}deg)`
-              }}
-            >
-              {item.icon === "GitHub" && <Github className="h-5 w-5" />}
-              {item.icon === "Linkedin" && <Linkedin className="h-5 w-5" />}
-              {item.icon === "Twitter" && <Twitter className="h-5 w-5" />}
-              {item.icon === "Mail" && <Mail className="h-5 w-5" />}
-              {item.icon === "Type" && <Type className="h-5 w-5" />}
-              <span>{item.name}</span>
-            </Link>
-          ))}
+          {profile.social.map((item, idx) => {
+            const colors = ['bg-brutalist-yellow', 'bg-brutalist-cyan', 'bg-brutalist-magenta', 'bg-white', 'bg-brutalist-green'];
+            const shadowColors = ['brutalist-shadow', 'brutalist-shadow-cyan', 'brutalist-shadow-magenta', 'brutalist-shadow-yellow'];
+            return (
+              <Link
+                key={item.name}
+                href={item.link}
+                className={`inline-flex items-center gap-2 px-6 py-3 ${colors[idx % colors.length]} hover:bg-black border-4 border-black text-black hover:text-brutalist-yellow transition-all text-sm font-bold uppercase ${shadowColors[idx % shadowColors.length]} glitch-hover rotate-chaos-${(idx % 5) + 1}`}
+                target="_blank"
+              >
+                {item.icon === "GitHub" && <Github className="h-5 w-5" />}
+                {item.icon === "Linkedin" && <Linkedin className="h-5 w-5" />}
+                {item.icon === "Twitter" && <Twitter className="h-5 w-5" />}
+                {item.icon === "Mail" && <Mail className="h-5 w-5" />}
+                {item.icon === "Type" && <Type className="h-5 w-5" />}
+                <span>{item.name}</span>
+              </Link>
+            );
+          })}
         </div>
 
         {/* Recent Writing Section */}
         {latestBlog && (
           <div className="mb-16">
-            <div className="flex items-center justify-between mb-6 border-b-4 border-black pb-4">
-              <h2 className="text-black text-3xl font-black uppercase">Latest Writing</h2>
+            <div className="flex items-center justify-between mb-6 border-b-8 border-black pb-4 bg-brutalist-cyan/20 p-4 brutalist-torn">
+              <h2 className="text-black text-3xl font-black uppercase zigzag-underline">Latest Writing</h2>
               <Link 
                 href="/writing" 
-                className="text-black hover:bg-brutalist-yellow hover:text-black text-sm font-bold uppercase inline-flex items-center gap-1 transition-colors border-4 border-black px-4 py-2"
+                className="text-black hover:bg-brutalist-magenta hover:text-white text-sm font-bold uppercase inline-flex items-center gap-1 transition-colors border-4 border-black px-4 py-2 brutalist-shadow"
               >
                 View all
                 <ArrowUpRight className="h-4 w-4" />
@@ -393,13 +402,18 @@ export default function Home() {
         )}
 
         {/* GitHub Contribution Graph Placeholder */}
-        <div className="mb-16">
-          <h2 className="text-black text-2xl font-black mb-6 uppercase border-l-8 border-brutalist-yellow pl-4">
+        <div className="mb-16 relative">
+          {/* Decorative sticker */}
+          <div className="absolute -top-6 -right-6 bg-brutalist-magenta border-4 border-black px-4 py-2 text-black font-black text-xs uppercase rotate-12 brutalist-shadow hidden lg:block z-10">
+            HOT!
+          </div>
+          
+          <h2 className="text-black text-2xl font-black mb-6 uppercase border-l-8 border-brutalist-green pl-4 bg-gradient-to-r from-brutalist-green/20 to-transparent py-2">
             Contribution Graph
           </h2>
-          <div className="bg-white border-4 border-black p-6">
+          <div className="bg-white border-8 border-black p-6 brutalist-shadow-multi">
             <div className="flex items-center justify-between mb-4">
-              <p className="text-black text-sm font-bold uppercase">
+              <p className="text-black text-sm font-bold uppercase bg-brutalist-yellow px-3 py-1 border-2 border-black">
                 1038 contributions in the last year
               </p>
               <div className="flex items-center gap-2">
@@ -407,6 +421,7 @@ export default function Home() {
                 <div className="flex gap-1">
                   <div className="w-3 h-3 bg-gray-200 border-2 border-black"></div>
                   <div className="w-3 h-3 bg-brutalist-yellow border-2 border-black"></div>
+                  <div className="w-3 h-3 bg-brutalist-orange border-2 border-black"></div>
                   <div className="w-3 h-3 bg-brutalist-red border-2 border-black"></div>
                   <div className="w-3 h-3 bg-black border-2 border-black"></div>
                 </div>
@@ -420,17 +435,19 @@ export default function Home() {
                 const bgColor =
                   intensity > 0.75
                     ? "bg-black"
-                    : intensity > 0.5
+                    : intensity > 0.6
                       ? "bg-brutalist-red"
-                      : intensity > 0.25
-                        ? "bg-brutalist-yellow"
-                        : intensity > 0.1
-                          ? "bg-gray-200"
-                          : "bg-white";
+                      : intensity > 0.4
+                        ? "bg-brutalist-orange"
+                        : intensity > 0.25
+                          ? "bg-brutalist-yellow"
+                          : intensity > 0.1
+                            ? "bg-gray-200"
+                            : "bg-white";
                 return (
                   <div
                     key={i}
-                    className={`w-[10px] h-[10px] border-2 border-black ${bgColor}`}
+                    className={`w-[10px] h-[10px] border-2 border-black ${bgColor} hover:scale-125 transition-transform cursor-pointer`}
                     title={`Contributions on day ${i + 1}`}
                   />
                 );
@@ -441,9 +458,18 @@ export default function Home() {
       </section>
 
       {/* Work Experience Section - Timeline */}
-      <section className="max-w-5xl mx-auto px-6 py-16">
-        <h2 className="text-black text-4xl font-black mb-12 text-center uppercase bg-brutalist-yellow border-8 border-black p-6 inline-block mx-auto block w-full text-center">
-          Work Experience
+      <section className="max-w-5xl mx-auto px-6 py-16 bg-gradient-to-b from-brutalist-yellow/10 to-white relative">
+        {/* Decorative elements */}
+        <div className="absolute top-10 left-5 w-24 h-24 border-8 border-black bg-brutalist-cyan rotate-45 hidden lg:block opacity-20"></div>
+        <div className="absolute bottom-10 right-5 w-20 h-20 border-8 border-black bg-brutalist-magenta -rotate-12 hidden lg:block opacity-20"></div>
+        
+        <h2 className="text-black text-4xl font-black mb-12 text-center uppercase bg-brutalist-yellow border-8 border-black p-6 w-full brutalist-shadow-multi relative z-10">
+          <span className="relative">
+            Work Experience
+            <span className="absolute -top-8 -right-8 bg-brutalist-red text-white px-3 py-1 text-xs border-4 border-black rotate-12 hidden lg:inline-block">
+              NEW!
+            </span>
+          </span>
         </h2>
 
         {/* Timeline container */}
@@ -526,23 +552,37 @@ export default function Home() {
       </section>
 
       {/* Testimonials Section - Carousel */}
-      <section className="py-16 bg-white">
-        <div className="max-w-6xl mx-auto px-6 mb-8">
-          <h2 className="text-black text-4xl font-black uppercase border-b-8 border-black pb-4">What People Say</h2>
+      <section className="py-16 bg-gradient-to-r from-brutalist-magenta/5 via-brutalist-cyan/5 to-brutalist-yellow/5 border-y-8 border-black relative overflow-hidden">
+        {/* Decorative background elements */}
+        <div className="absolute top-0 left-0 w-full h-full opacity-10 pointer-events-none">
+          <div className="absolute top-10 left-10 w-32 h-32 bg-brutalist-yellow border-4 border-black rotate-45"></div>
+          <div className="absolute top-40 right-20 w-24 h-24 bg-brutalist-cyan border-4 border-black -rotate-12"></div>
+          <div className="absolute bottom-20 left-1/4 w-28 h-28 bg-brutalist-magenta border-4 border-black rotate-12"></div>
+        </div>
+        
+        <div className="max-w-6xl mx-auto px-6 mb-8 relative z-10">
+          <h2 className="text-black text-4xl font-black uppercase border-b-8 border-black pb-4 bg-white inline-block pr-8">
+            What People Say
+            <span className="inline-block ml-2 animate-bounce">💬</span>
+          </h2>
         </div>
         <TestimonialsCarousel testimonials={testimonials} />
       </section>
 
       {/* Footer / Contact */}
-      <footer className="max-w-6xl mx-auto px-6 py-16 border-t-8 border-black">
-        <div className="flex flex-col md:flex-row items-center justify-between gap-6">
-          <div className="text-black text-sm font-bold uppercase">
+      <footer className="max-w-6xl mx-auto px-6 py-16 border-t-8 border-black bg-gradient-to-b from-white to-brutalist-yellow/20 relative">
+        {/* Decorative corner elements */}
+        <div className="absolute top-0 left-0 w-16 h-16 border-r-8 border-b-8 border-black"></div>
+        <div className="absolute top-0 right-0 w-16 h-16 border-l-8 border-b-8 border-black"></div>
+        
+        <div className="flex flex-col md:flex-row items-center justify-between gap-6 relative z-10">
+          <div className="text-black text-sm font-bold uppercase bg-white border-4 border-black px-4 py-2 brutalist-shadow">
             Built with ❤️ by {profile.name.firstName} {profile.name.lastName}
           </div>
           <div className="flex gap-4">
             <Button
               asChild
-              className="bg-brutalist-red hover:bg-black text-white hover:text-brutalist-red border-4 border-black font-bold uppercase px-6 py-3"
+              className="bg-brutalist-red hover:bg-black text-white hover:text-brutalist-red border-4 border-black font-bold uppercase px-6 py-3 brutalist-shadow glitch-hover"
             >
               <Link href={`mailto:${profile.email}`}>
                 <Mail className="mr-2 h-4 w-4" />
@@ -551,7 +591,7 @@ export default function Home() {
             </Button>
             <Button
               asChild
-              className="border-4 border-black text-black bg-white hover:bg-brutalist-yellow hover:text-black font-bold uppercase px-6 py-3"
+              className="border-4 border-black text-black bg-brutalist-cyan hover:bg-brutalist-magenta hover:text-white font-bold uppercase px-6 py-3 brutalist-shadow-multi"
             >
               <Link href={profile.consultationLink} target="_blank">
                 <Calendar className="mr-2 h-4 w-4" />
@@ -560,7 +600,7 @@ export default function Home() {
             </Button>
           </div>
         </div>
-        <div className="text-center text-black text-sm mt-8 font-bold uppercase">
+        <div className="text-center text-black text-sm mt-8 font-bold uppercase bg-brutalist-yellow border-4 border-black p-3 inline-block w-full">
           Copyright © {profile.name.firstName} {new Date().getFullYear()}. All
           rights reserved.
         </div>
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 006803be..a6845897 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -11,7 +11,7 @@ export default function Header() {
 
   navComponents.push(
     <Link href="/" key="home">
-      <span className="mr-5 cursor-pointer hover:bg-brutalist-yellow hover:text-black transition-colors px-3 py-2 border-4 border-black font-bold uppercase">
+      <span className="mr-5 cursor-pointer hover:bg-brutalist-yellow hover:text-black transition-all px-3 py-2 border-4 border-black font-bold uppercase brutalist-hover-intense rotate-chaos-1">
         Home
       </span>
     </Link>,
@@ -19,7 +19,7 @@ export default function Header() {
 
   navComponents.push(
     <Link href="/projects" key="projects">
-      <span className="mr-5 cursor-pointer hover:bg-brutalist-yellow hover:text-black transition-colors px-3 py-2 border-4 border-black font-bold uppercase">
+      <span className="mr-5 cursor-pointer hover:bg-brutalist-cyan hover:text-black transition-all px-3 py-2 border-4 border-black font-bold uppercase brutalist-hover-intense rotate-chaos-2">
         Projects
       </span>
     </Link>,
@@ -27,14 +27,14 @@ export default function Header() {
 
   navComponents.push(
     <Link href="/writing" key="writing">
-      <span className="mr-5 cursor-pointer hover:bg-brutalist-yellow hover:text-black transition-colors px-3 py-2 border-4 border-black font-bold uppercase">
+      <span className="mr-5 cursor-pointer hover:bg-brutalist-magenta hover:text-white transition-all px-3 py-2 border-4 border-black font-bold uppercase brutalist-hover-intense rotate-chaos-3">
         Writing
       </span>
     </Link>,
   );
 
   return (
-    <header className="text-black body-font sticky z-50 top-0 bg-white border-b-8 border-black">
+    <header className="text-black body-font sticky z-50 top-0 bg-white border-b-8 border-black brutalist-noise">
       <div className="container mx-auto flex flex-wrap p-4 lg:p-6 flex-col lg:flex-row items-center justify-between">
         <nav className="flex-wrap items-center text-base flex gap-2">
           {navComponents}
@@ -42,7 +42,7 @@ export default function Header() {
         <div className="inline-flex">
           <Button
             onClick={() => launchExternalUrl(profile.resume)}
-            className="inline-flex items-center gap-2 text-black bg-brutalist-yellow hover:bg-black hover:text-brutalist-yellow border-4 border-black font-bold uppercase px-6 py-3 transition-colors"
+            className="inline-flex items-center gap-2 text-black bg-brutalist-yellow hover:bg-black hover:text-brutalist-yellow border-4 border-black font-bold uppercase px-6 py-3 transition-all brutalist-shadow-multi glitch-hover"
             data-umami-event="resume-button-clicked"
           >
             Resume
diff --git a/src/styles/globals.css b/src/styles/globals.css
index a1ae7693..fa6405e9 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -29,10 +29,100 @@
   box-shadow: 8px 8px 0px 0px #FF0000;
 }
 
+.brutalist-shadow-cyan {
+  box-shadow: 8px 8px 0px 0px #00FFFF;
+}
+
+.brutalist-shadow-magenta {
+  box-shadow: 8px 8px 0px 0px #FF00FF;
+}
+
+/* Multi-layer shadows for extra brutalism */
+.brutalist-shadow-multi {
+  box-shadow: 4px 4px 0px 0px #FFFF00, 8px 8px 0px 0px #000000;
+}
+
+.brutalist-shadow-multi-heavy {
+  box-shadow: 3px 3px 0px 0px #00FFFF, 6px 6px 0px 0px #FF00FF, 9px 9px 0px 0px #000000;
+}
+
 /* Harsh hover effects */
 .brutalist-hover:hover {
   transform: translate(4px, 4px);
-  box-shadow: 4px 4px 0px 0px #000000;
+  /* removed hover shadow to keep hover movement but no shadow */
+  box-shadow: none;
+}
+
+.brutalist-hover-intense:hover {
+  transform: translate(2px, 2px) rotate(2deg);
+  /* removed hover shadow to keep hover rotation but no shadow */
+  box-shadow: none;
+}
+
+/* Noise texture overlay */
+.brutalist-noise {
+  position: relative;
+}
+
+.brutalist-noise::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='3.5' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.08'/%3E%3C/svg%3E");
+  pointer-events: none;
+  z-index: 1;
+}
+
+/* Torn paper effect */
+.brutalist-torn {
+  clip-path: polygon(
+    0% 2%, 3% 0%, 5% 2%, 8% 0%, 12% 3%, 15% 1%, 18% 3%, 21% 0%, 
+    25% 2%, 28% 0%, 32% 3%, 35% 1%, 38% 3%, 42% 0%, 45% 2%, 
+    48% 0%, 52% 3%, 55% 1%, 58% 3%, 62% 0%, 65% 2%, 68% 0%, 
+    72% 3%, 75% 1%, 78% 3%, 82% 0%, 85% 2%, 88% 0%, 92% 3%, 
+    95% 1%, 98% 3%, 100% 0%, 100% 98%, 98% 100%, 95% 98%, 
+    92% 100%, 88% 97%, 85% 100%, 82% 97%, 78% 100%, 75% 98%, 
+    72% 100%, 68% 97%, 65% 100%, 62% 97%, 58% 100%, 55% 98%, 
+    52% 100%, 48% 97%, 45% 100%, 42% 97%, 38% 100%, 35% 98%, 
+    32% 100%, 28% 97%, 25% 100%, 21% 97%, 18% 100%, 15% 98%, 
+    12% 100%, 8% 97%, 5% 100%, 3% 98%, 0% 100%
+  );
+}
+
+/* Sticker rotation variants */
+.rotate-chaos-1 { transform: rotate(-2.5deg); }
+.rotate-chaos-2 { transform: rotate(1.8deg); }
+.rotate-chaos-3 { transform: rotate(-1.2deg); }
+.rotate-chaos-4 { transform: rotate(2.3deg); }
+.rotate-chaos-5 { transform: rotate(-3.1deg); }
+
+/* Aggressive glitch on hover */
+.glitch-hover:hover {
+  animation: glitch-intense 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
+}
+
+@keyframes glitch-intense {
+  0% {
+    transform: translate(0) skew(0deg);
+  }
+  20% {
+    transform: translate(-3px, 2px) skew(1deg);
+  }
+  40% {
+    transform: translate(-3px, -3px) skew(-2deg);
+  }
+  60% {
+    transform: translate(3px, 2px) skew(2deg);
+  }
+  80% {
+    transform: translate(3px, -2px) skew(-1deg);
+  }
+  100% {
+    transform: translate(0) skew(0deg);
+  }
 }
 
 /* Glitch effect for brutalist design */
@@ -57,6 +147,118 @@
   }
 }
 
+/* Pulse animation for accents */
+@keyframes pulse-brutal {
+  0%, 100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  50% {
+    transform: scale(1.05);
+    opacity: 0.9;
+  }
+}
+
+.pulse-brutal {
+  animation: pulse-brutal 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+/* Zigzag underline */
+.zigzag-underline {
+  position: relative;
+  display: inline-block;
+}
+
+.zigzag-underline::after {
+  content: '';
+  position: absolute;
+  bottom: -4px;
+  left: 0;
+  right: 0;
+  height: 6px;
+  background: linear-gradient(135deg, #FFFF00 5px, transparent 5px) 0 0,
+              linear-gradient(225deg, #FFFF00 5px, transparent 5px) 0 0;
+  background-size: 10px 10px;
+  background-repeat: repeat-x;
+}
+
+/* Stamp effect */
+.stamp-effect {
+  position: relative;
+  border: 4px dashed #000000;
+  background: 
+    linear-gradient(45deg, transparent 48%, #000 48%, #000 52%, transparent 52%),
+    linear-gradient(-45deg, transparent 48%, #000 48%, #000 52%, transparent 52%);
+  background-size: 20px 20px;
+  background-position: 0 0, 10px 0;
+  background-repeat: repeat;
+}
+
+/* Scribble underline effect */
+.scribble-underline {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 10'%3E%3Cpath d='M0,5 Q10,2 20,5 T40,5 T60,5 T80,5 T100,5 T120,5 T140,5 T160,5 T180,5 T200,5' stroke='%23000' stroke-width='2' fill='none'/%3E%3C/svg%3E");
+  background-size: 100% 10px;
+  background-repeat: no-repeat;
+  background-position: 0 100%;
+  padding-bottom: 8px;
+}
+
+/* Bold stripe pattern */
+.stripe-pattern {
+  background: repeating-linear-gradient(
+    45deg,
+    transparent,
+    transparent 10px,
+    rgba(0, 0, 0, 0.1) 10px,
+    rgba(0, 0, 0, 0.1) 20px
+  );
+}
+
+/* Brutalist border styles */
+.border-brutal-dotted {
+  border-style: dotted;
+  border-width: 6px;
+}
+
+.border-brutal-dashed {
+  border-style: dashed;
+  border-width: 6px;
+}
+
+/* Neon glow effect for accents */
+.neon-glow {
+  text-shadow: 0 0 5px currentColor, 0 0 10px currentColor, 0 0 15px currentColor;
+}
+
+/* Cutout text effect */
+.cutout-text {
+  background: #000;
+  color: #fff;
+  mix-blend-mode: multiply;
+}
+
+/* Shake animation on hover */
+@keyframes shake {
+  0%, 100% { transform: translateX(0); }
+  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
+  20%, 40%, 60%, 80% { transform: translateX(5px); }
+}
+
+.shake-hover:hover {
+  animation: shake 0.5s;
+}
+
+/* Pop out effect */
+@keyframes pop-out {
+  0% { transform: scale(1); }
+  50% { transform: scale(1.1) rotate(5deg); }
+  100% { transform: scale(1); }
+}
+
+.pop-hover:hover {
+  animation: pop-out 0.3s ease-in-out;
+}
+
 @layer base {
   :root {
     --background: 0 0% 100%;
diff --git a/tailwind.config.ts b/tailwind.config.ts
index bfbba384..e65e80a5 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -20,6 +20,10 @@ const config: Config = {
   				yellow: '#FFFF00',
   				red: '#FF0000',
   				blue: '#0000FF',
+  				cyan: '#00FFFF',
+  				magenta: '#FF00FF',
+  				green: '#00FF00',
+  				orange: '#FF6600',
   			},
   			background: 'hsl(var(--background))',
   			foreground: 'hsl(var(--foreground))',