From 0c4d1dd9c2b98dd0544cbc58f608a7c7d6c7ce20 Mon Sep 17 00:00:00 2001
From: Ricearoni1245 <jholt1008@gmail.com>
Date: Fri, 31 Oct 2025 00:58:19 -0500
Subject: [PATCH] added fonts

---
 .gitignore                     |  2 +-
 src/components/Footer.tsx      |  6 +-----
 src/components/Hero.tsx        | 28 ++++++++++++++--------------
 src/components/Navbar.tsx      | 13 ++++++-------
 src/components/ThemeToggle.tsx |  1 -
 src/index.css                  |  8 +++++---
 6 files changed, 27 insertions(+), 31 deletions(-)

diff --git a/.gitignore b/.gitignore
index 12f77dd..2cc4c4d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -29,4 +29,4 @@ Thumbs.db
 # Uncomment the ones you're not using
 # yarn.lock
 # package-lock.json
-# pnpm-lock.yaml
\ No newline at end of file
+# pnpm-lock.yamlw
\ No newline at end of file
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 26d13ba..4e8cb0c 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -18,20 +18,17 @@ export function Footer({
   return (
     <footer className="border-t border-secondary bg-bg px-4 py-10">
       <div className="mx-auto flex max-w-7xl flex-col items-center justify-between gap-6 md:flex-row">
-        {/* Left: Brand + tagline */}
         <div className="text-center md:text-left">
           <div className="text-xl font-extrabold tracking-wide text-text">Jody Holt</div>
-          <p className="text-sm text-text/70">Design • Develop • Deliver</p>
+          <p className="text-sm text-text/70">Passion Pioneer</p>
         </div>
 
-        {/* Middle: Links */}
         <nav className="flex items-center gap-5">
           <a className="text-text hover:text-primary" href="#projects">Projects</a>
           <a className="text-text hover:text-primary" href="#experience">Experience</a>
           <a className="text-text hover:text-primary" href="#home">Background</a>
         </nav>
 
-        {/* Right: Socials */}
         <div className="flex items-center gap-4 text-text">
           {socials.map((s) => (
             <a
@@ -41,7 +38,6 @@ export function Footer({
               className="inline-flex h-10 w-10 items-center justify-center rounded-lg border border-secondary hover:border-primary hover:text-primary"
               title={s.label}
             >
-              {/* replace with real SVGs later */}
               {s.icon ?? <span className="h-2.5 w-2.5 rounded-full bg-current" />}
             </a>
           ))}
diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx
index 29c786f..6510240 100644
--- a/src/components/Hero.tsx
+++ b/src/components/Hero.tsx
@@ -7,13 +7,13 @@ export function Hero() {
     <section className="relative w-full bg-hero">
       <div className="md:hidden flex flex-col items-center text-center gap-2 min-h-[calc(100vh-64px)] py-6">
         <h1
-          className="font-extrabold tracking-wide leading-tight text-text
+          className="font-extrabold font-title tracking-wide leading-tight text-text
                  text-2xl underline md:decoration-secondary decoration-primary"
         >
           Design. Develop. Deliver.
         </h1>
 
-        <p className="text-sm text-text/80">
+        <p className=" font-main text-sm text-text/80">
           Driven by a genuine passion for creation through code.
         </p>
 
@@ -29,17 +29,17 @@ export function Hero() {
   />
 </div>
 
-        <h2 className="mt- font-extrabold text-text leading-tight tracking-wide text-3xl">
+        <h2 className="mt- font-extrabold font-title text-text leading-tight tracking-wide text-3xl">
           Hello, I’m Jody Holt
         </h2>
 
-        <p className=" mt-5 text-lg text-base text-text/85">
+        <p className=" font-main mt-5 text-lg text-base text-text/85">
           Turning concepts into clean, functional code.
         </p>
 
-        <p className="text-2xl font-semibold text-text mt-4">It’s What I Do.</p>
+        <p className=" font-main text-2xl font-semibold text-text mt-4">It’s What I Do.</p>
 
-        <p className="mt-8 text-2xl text-text">I would love to connect!</p>
+        <p className="mt-8 text-2xl text-text font-main ">I would love to connect!</p>
 
         <div className="mt-2 mb-4 flex items-center justify-center gap-4">
           {[
@@ -68,8 +68,8 @@ export function Hero() {
 
 
 
-
-
+ {/*DESKTOP*/}
+{/*____________________________________________________________________________________________________*/}
       <div className="hidden md:block md:mx-auto max-w-7xl px-4">
         <div
           className="
@@ -90,28 +90,28 @@ export function Hero() {
           <div className="flex-1 self-start  md:pt-10 items-center text-center">
             <h1
               className="text-text font-extrabold tracking-wide leading-tight
-                           text-3xl sm:text-4xl md:text-3xl lg:text-5xl xl:text-6xl underline md:decoration-secondary decoration-primary"
+                           text-3xl sm:text-4xl md:text-3xl lg:text-5xl xl:text-6xl underline md:decoration-secondary decoration-primary font-title"
             >
               Design. Develop. Deliver.
             </h1>
 
             <p
               className="mb-10       text-text/80
-                          text-sm sm:text-base md:text-lg lg:text-xl xl:text-2"
+                          text-sm sm:text-base md:text-lg lg:text-xl xl:text-2 font-main"
             >
               Driven by a genuine passion for creation through code.
             </p>
 
             <h2
               className="font-extrabold text-text leading-tight tracking-wide mb-5
-                           text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl"
+                           text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-title"
             >
               Hello, I’m Jody Holt
             </h2>
 
             <p
               className="mb-3 text-text/85 md:mt-10 md:mb-5
-                          text-base md:text-xl lg:text-2xl xl:text-3xl"
+                          text-base md:text-xl lg:text-2xl xl:text-3xl font-main"
             >
               Turning concepts into clean, functional code.
             </p>
@@ -119,14 +119,14 @@ export function Hero() {
             <p
               className="mb-30 text-text/85
                           text-base md:text-3xl lg:text-4xl xl:text-5xl
-            font-semibold"
+            font-semibold font-main"
             >
               It’s What I Do.
             </p>
 
             <p
               className="mb-8 text-text
-                          text-lg md:text-4xl lg:text-5xl"
+                          text-lg md:text-4xl lg:text-5xl font-main"
             >
               I would love to connect!
             </p>
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 0a2733e..4fa6f1d 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -15,12 +15,12 @@ export function Navbar({ onNav }: { onNav: (id: string) => void }) {
   };
 
   return (
-    <header className="sticky top-0 z-50 border-b border-secondary bg-bg/90 backdrop-blur h-16 md:h-20">
+    <header className="sticky top-0 z-50 border-b border-secondary bg-bg/90 backdrop-blur h-16 md:h-20 font-main">
       <div className="mx-auto flex h-full max-w-7xl items-center justify-between px-4">
-        {/* Brand (stacked) */}
+        
         <div className="flex items-center gap-3">
           <div className="leading-tight">
-            <div className="text-xl md:text-2xl font-extrabold tracking-wide text-text">
+            <div className="text-xl md:text-2xl font-extrabold font-name tracking-wide text-text">
               Jody Holt
             </div>
             <div className="text-[11px] md:text-sm text-text/70">
@@ -29,7 +29,7 @@ export function Navbar({ onNav }: { onNav: (id: string) => void }) {
           </div>
         </div>
 
-        {/* Desktop nav */}
+       
         <nav className="hidden items-center gap-6 md:flex">
           {links.map((l) => (
             <button
@@ -43,7 +43,7 @@ export function Navbar({ onNav }: { onNav: (id: string) => void }) {
           <ThemeToggle />
         </nav>
 
-        {/* Mobile controls */}
+       
         <div className="md:hidden">
           <button
             aria-expanded={open}
@@ -63,8 +63,7 @@ export function Navbar({ onNav }: { onNav: (id: string) => void }) {
         </div>
       </div>
 
-      {/* Mobile dropdown */}
-      {/* Mobile dropdown */}
+  
       <div
         className={`md:hidden transition-[max-height] duration-300 ${
           open ? "max-h-96 overflow-visible" : "max-h-0 overflow-hidden"
diff --git a/src/components/ThemeToggle.tsx b/src/components/ThemeToggle.tsx
index ee3738c..3a0abfe 100644
--- a/src/components/ThemeToggle.tsx
+++ b/src/components/ThemeToggle.tsx
@@ -31,7 +31,6 @@ export function ThemeToggle({ compact = false }: { compact?: boolean }) {
                     theme === t ? "outline outline-1 outline-primary" : ""
                   }`}
                 >
-                  {/* preview dot uses theme accent variables you defined per theme (optional) */}
                   <span
                     className="mr-2 inline-block h-3 w-3 rounded-full align-middle"
                     style={{ background: `var(--color-accent-${t})` }}
diff --git a/src/index.css b/src/index.css
index 3cfab21..c936146 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,3 +1,4 @@
+@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100..700;1,100..700&family=Oxanium:wght@200..800&family=Quantico:ital,wght@0,400;0,700;1,400;1,700&display=swap');
 @import "tailwindcss";
 
 /* Base design tokens that generate classes like bg-primary, text-text, etc. */
@@ -9,9 +10,10 @@
   --color-tertiary: #00c9a7;
   --color-contrast: #9ca3af;
 
-  --font-main: ui-sans-serif, system-ui, "Inter", "Segoe UI", sans-serif;
-  --font-title: "Nunito Sans", ui-sans-serif, system-ui, sans-serif;
-  --font-bold: "Bebas Neue", ui-sans-serif, system-ui, sans-serif;
+  --font-main: "IBM Plex Sans", sans-serif;
+  --font-title: "Oxanium", sans-serif;
+  --font-name:   "Quantico", sans-serif;  
+
 }
 
 /* A–E themes: override the same tokens inside an attribute scope */