redoing the font

Author: pyrobeck

index.html

@@ -5,6 +5,13 @@
     <link rel="icon" type="image/svg+xml" href="/favicon.png" />
     <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;700&family=Poppins:wght@400;600&display=swap" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&display=swap" rel="stylesheet" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+  href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap"
+  rel="stylesheet"
+/>
+
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Beck's Portfolio</title>
   </head>

src/pages/contact.jsx

@@ -9,11 +9,10 @@ export default function Contact() {
           initial={{ opacity: 0, y: 40 }}
           animate={{ opacity: 1, y: 0 }}
           transition={{ duration: 1 }}
-          className="font-[Playfair_Display] font-bold leading-[0.9] tracking-tight mb-12
-                     text-6xl sm:text-7xl md:text-8xl lg:text-[10rem] xl:text-[13rem]
-                     bg-linear-to-r from-purple-500 via-fuchsia-500 to-pink-500 bg-clip-text text-transparent"
+          style={{ fontFamily: '"Space Mono", monospace' }}
+          className="font-mono font-bold leading-[0.9] tracking-tight mb-12 text-8xl sm:text-9xl md:text-[10rem] lg:text-[14rem] xl:text-[18rem] text-white"
         >
-          Contact
+          CONTACT
         </motion.h1>
 
         <motion.div

src/pages/games.jsx

@@ -12,11 +12,11 @@ export default function Games() {
         initial={{ opacity: 0, y: 40 }}
         animate={{ opacity: 1, y: 0 }}
         transition={{ duration: 1 }}
-        className="font-[Playfair_Display] font-bold text-center leading-[0.9] mb-16
-                   text-[4rem] sm:text-[6rem] md:text-[8rem]
-                   bg-linear-to-r from-purple-500 via-fuchsia-500 to-pink-500 bg-clip-text text-transparent"
+        style={{ fontFamily: '"Space Mono", monospace' }}
+        className="font-mono font-bold text-center leading-[0.9] mb-16
+                   text-[4rem] sm:text-[6rem] md:text-[8rem] text-white"
       >
-        Games
+        GAMES
       </motion.h1>
 
       <motion.section

src/pages/home.jsx

@@ -9,9 +9,9 @@ export default function Home() {
           initial={{ opacity: 0, y: 40 }}
           animate={{ opacity: 1, y: 0 }}
           transition={{ duration: 1 }}
-          className="font-[Playfair_Display] font-bold leading-[0.9] tracking-tight text-center md:text-left
-                     text-6xl sm:text-7xl md:text-8xl lg:text-[10rem] xl:text-[13rem] bg-linear-to-r 
-                     from-white via-white to-white bg-clip-text text-transparent"
+          style={{ fontFamily: '"Space Mono", monospace' }}
+          className="font-mono font-bold leading-[0.9] tracking-tight text-center md:text-left
+                     text-7xl sm:text-7xl md:text-8xl lg:text-[10rem] xl:text-[13rem] text-white"
         >
           BECK’S<br />PORTFOLIO
         </motion.h1>

src/pages/portfolio.jsx

@@ -127,11 +127,11 @@ export default function Portfolio() {
         className="w-full max-w-7xl mb-32"
       >
         <h1
-          className="font-[Playfair_Display] font-bold text-center leading-[0.9] mb-16
-                     text-[4rem] sm:text-[6rem] md:text-[8rem]
-                     bg-linear-to-r from-purple-500 via-fuchsia-500 to-pink-500 bg-clip-text text-transparent"
+          className="font-mono font-bold text-center leading-[0.9] mb-16
+                     text-[4rem] sm:text-[6rem] md:text-[8rem]"
+          style={{ fontFamily: '"Space Mono", monospace' }}
         >
-          Personal Work
+          PERSONAL WORK
         </h1>
 
         <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-8 px-8">
@@ -171,11 +171,11 @@ export default function Portfolio() {
         className="w-full max-w-7xl"
       >
         <h1
-          className="font-[Playfair_Display] font-bold text-center leading-[0.9] mb-16
-                     text-[4rem] sm:text-[6rem] md:text-[8rem]
-                     bg-linear-to-r from-fuchsia-500 via-pink-500 to-red-400 bg-clip-text text-transparent"
+          className="font-mono font-bold text-center leading-[0.9] mb-16
+                     text-[4rem] sm:text-[6rem] md:text-[8rem] text-white"
+          style={{ fontFamily: '"Space Mono", monospace' }}
         >
-          Volunteer Work
+          VOLUNTEER WORK
         </h1>
 
         <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-8 px-8">
@@ -207,9 +207,6 @@ export default function Portfolio() {
 
         <br />
         <br />
-        <p className="text-purple-400 text-center mt-12 max-w-2xl mx-auto">
-          🕸️ Updated frequently! 🕸️
-        </p>
       </motion.section>
 
       {/* MODAL / LIGHTBOX */}

tailwind.config.js

@@ -8,13 +8,13 @@ export default {
     theme: {
       extend: {
         colors: {
-          accent: '#8b5cf6', // Purple neon accent
           dark: '#0a0a0a',
           light: '#f5f5f5',
         },
         fontFamily: {
           sans: ['"Inter var"', 'sans-serif'],
           display: ['"Space Grotesk"', 'sans-serif'],
+          mono: ['"Space Mono"', 'monospace'],
         },
       },
     },