Joders/Jody-Portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added fonts

Browse Source
This commit is contained in:
Ricearoni1245
2025-10-31 00:58:19 -05:00
parent 8f86e13dfc
commit 0c4d1dd9c2
6 changed files with 27 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@@ -29,4 +29,4 @@ Thumbs.db
# Uncomment the ones you're not using # Uncomment the ones you're not using
# yarn.lock # yarn.lock
# package-lock.json # package-lock.json
# pnpm-lock.yaml # pnpm-lock.yamlw

6
src/components/Footer.tsx
View File

@@ -18,20 +18,17 @@ export function Footer({
return ( return (
<footer className="border-t border-secondary bg-bg px-4 py-10"> <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"> <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-center md:text-left">
<div className="text-xl font-extrabold tracking-wide text-text">Jody Holt</div> <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> </div>
{/* Middle: Links */}
<nav className="flex items-center gap-5"> <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="#projects">Projects</a>
<a className="text-text hover:text-primary" href="#experience">Experience</a> <a className="text-text hover:text-primary" href="#experience">Experience</a>
<a className="text-text hover:text-primary" href="#home">Background</a> <a className="text-text hover:text-primary" href="#home">Background</a>
</nav> </nav>
{/* Right: Socials */}
<div className="flex items-center gap-4 text-text"> <div className="flex items-center gap-4 text-text">
{socials.map((s) => ( {socials.map((s) => (
<a <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" 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} title={s.label}
> >
{/* replace with real SVGs later */}
{s.icon ?? <span className="h-2.5 w-2.5 rounded-full bg-current" />} {s.icon ?? <span className="h-2.5 w-2.5 rounded-full bg-current" />}
</a> </a>
))} ))}

28
src/components/Hero.tsx
View File

@@ -7,13 +7,13 @@ export function Hero() {
<section className="relative w-full bg-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"> <div className="md:hidden flex flex-col items-center text-center gap-2 min-h-[calc(100vh-64px)] py-6">
<h1 <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" text-2xl underline md:decoration-secondary decoration-primary"
> >
Design. Develop. Deliver. Design. Develop. Deliver.
</h1> </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. Driven by a genuine passion for creation through code.
</p> </p>
@@ -29,17 +29,17 @@ export function Hero() {
/> />
</div> </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 Hello, I’m Jody Holt
</h2> </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. Turning concepts into clean, functional code.
</p> </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"> <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="hidden md:block md:mx-auto max-w-7xl px-4">
<div <div
className=" className="
@@ -90,28 +90,28 @@ export function Hero() {
<div className="flex-1 self-start md:pt-10 items-center text-center"> <div className="flex-1 self-start md:pt-10 items-center text-center">
<h1 <h1
className="text-text font-extrabold tracking-wide leading-tight 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. Design. Develop. Deliver.
</h1> </h1>
<p <p
className="mb-10 text-text/80 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. Driven by a genuine passion for creation through code.
</p> </p>
<h2 <h2
className="font-extrabold text-text leading-tight tracking-wide mb-5 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 Hello, I’m Jody Holt
</h2> </h2>
<p <p
className="mb-3 text-text/85 md:mt-10 md:mb-5 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. Turning concepts into clean, functional code.
</p> </p>
@@ -119,14 +119,14 @@ export function Hero() {
<p <p
className="mb-30 text-text/85 className="mb-30 text-text/85
text-base md:text-3xl lg:text-4xl xl:text-5xl text-base md:text-3xl lg:text-4xl xl:text-5xl
font-semibold" font-semibold font-main"
> >
It’s What I Do. It’s What I Do.
</p> </p>
<p <p
className="mb-8 text-text 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! I would love to connect!
</p> </p>

13
src/components/Navbar.tsx
View File

@@ -15,12 +15,12 @@ export function Navbar({ onNav }: { onNav: (id: string) => void }) {
}; };
return ( 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"> <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="flex items-center gap-3">
<div className="leading-tight"> <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 Jody Holt
</div> </div>
<div className="text-[11px] md:text-sm text-text/70"> <div className="text-[11px] md:text-sm text-text/70">
@@ -29,7 +29,7 @@ export function Navbar({ onNav }: { onNav: (id: string) => void }) {
</div> </div>
</div> </div>
{/* Desktop nav */}
<nav className="hidden items-center gap-6 md:flex"> <nav className="hidden items-center gap-6 md:flex">
{links.map((l) => ( {links.map((l) => (
<button <button
@@ -43,7 +43,7 @@ export function Navbar({ onNav }: { onNav: (id: string) => void }) {
<ThemeToggle /> <ThemeToggle />
</nav> </nav>
{/* Mobile controls */}
<div className="md:hidden"> <div className="md:hidden">
<button <button
aria-expanded={open} aria-expanded={open}
@@ -63,8 +63,7 @@ export function Navbar({ onNav }: { onNav: (id: string) => void }) {
</div> </div>
</div> </div>
{/* Mobile dropdown */}
{/* Mobile dropdown */}
<div <div
className={`md:hidden transition-[max-height] duration-300 ${ className={`md:hidden transition-[max-height] duration-300 ${
open ? "max-h-96 overflow-visible" : "max-h-0 overflow-hidden" open ? "max-h-96 overflow-visible" : "max-h-0 overflow-hidden"

1
src/components/ThemeToggle.tsx
View File

@@ -31,7 +31,6 @@ export function ThemeToggle({ compact = false }: { compact?: boolean }) {
theme === t ? "outline outline-1 outline-primary" : "" theme === t ? "outline outline-1 outline-primary" : ""
}`} }`}
> >
{/* preview dot uses theme accent variables you defined per theme (optional) */}
<span <span
className="mr-2 inline-block h-3 w-3 rounded-full align-middle" className="mr-2 inline-block h-3 w-3 rounded-full align-middle"
style={{ background: `var(--color-accent-${t})` }} style={{ background: `var(--color-accent-${t})` }}

8
src/index.css
View File

@@ -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"; @import "tailwindcss";
/* Base design tokens that generate classes like bg-primary, text-text, etc. */ /* Base design tokens that generate classes like bg-primary, text-text, etc. */
@@ -9,9 +10,10 @@
--color-tertiary: #00c9a7; --color-tertiary: #00c9a7;
--color-contrast: #9ca3af; --color-contrast: #9ca3af;
--font-main: ui-sans-serif, system-ui, "Inter", "Segoe UI", sans-serif; --font-main: "IBM Plex Sans", sans-serif;
--font-title: "Nunito Sans", ui-sans-serif, system-ui, sans-serif; --font-title: "Oxanium", sans-serif;
--font-bold: "Bebas Neue", ui-sans-serif, system-ui, sans-serif; --font-name: "Quantico", sans-serif;
} }
/* A–E themes: override the same tokens inside an attribute scope */ /* A–E themes: override the same tokens inside an attribute scope */