Transform portfolio to brutalist design with TailwindCSS

[Copilot]

Redesigned the entire portfolio from dark modern theme to brutalist web design using TailwindCSS primitives.

Core Changes

Design System

• Removed all border-radius (set to 0)
• Color palette: pure black (#000), white (#FFF), yellow (#FF0), red (#F00), blue (#00F)
• Box shadows: 8px solid offset instead of blur
• Typography: uppercase headings, font-black (900 weight)
• Borders: 4-8px solid everywhere

Component Updates

• tailwind.config.ts: Brutalist colors, zero radius
• globals.css: CSS variables, brutalist utilities
• markdown-styles.module.css: Bold headings, yellow code blocks, black borders
• All page components (home, projects, writing, blog posts)
• All UI components (buttons, dialogs, cards)

Visual Examples

Before/After Key Elements

// Old approach - rounded, soft, dark
<div className="bg-[#1a1a1a] border border-gray-800 rounded-lg">

// New approach - sharp, bold, stark
<div className="bg-white border-4 border-black brutalist-shadow">

Brutalist Shadow Utility

.brutalist-shadow {
  box-shadow: 8px 8px 0px 0px #000000;
}

Screenshots

Home Page

Projects

Writing

Files Modified

Core styling:

• tailwind.config.ts, src/styles/globals.css, src/styles/markdown-styles.module.css

Pages:

• src/app/layout.tsx, src/app/page.tsx, src/app/projects/page.tsx, src/app/writing/page.tsx, src/app/writing/[slug]/page.tsx

Components:

• src/components/{Header,RecentWriting,MoreStories,StoryPreview,RelatedStories,ExperienceDialog}.tsx
• src/components/ui/{button,dialog}.tsx

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• fonts.googleapis.com
  • Triggering command: /usr/local/bin/node /home/REDACTED/work/portfolio/portfolio/node_modules/next/dist/compiled/jest-worker/processChild.js (dns block)
  • Triggering command: next-server (v14.2.15) (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

Original prompt

i like the current design, but I would really like to see how the entire portfolio would look like in brutalist design using tailwindcss.

the changes should be reflected on all pages, blogs, home etc

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://polite-river-0640ed603-127.westeurope.azurestaticapps.net

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://polite-river-0640ed603-127.westeurope.azurestaticapps.net

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://polite-river-0640ed603-127.westeurope.azurestaticapps.net