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

skeletal layout, theme functionality, mobile/desktop responsive, autoscroll

Browse Source
This commit is contained in:
Ricearoni1245
2025-10-29 02:03:46 -05:00
commit 8f86e13dfc
24 changed files with 4950 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

232
src/index.css Normal file
View File

@@ -0,0 +1,232 @@
@import "tailwindcss";
/* Base design tokens that generate classes like bg-primary, text-text, etc. */
@theme {
--color-bg: #0e1116; /* defaults = Theme A */
--color-text: #e1e8ee;
--color-primary: #3d8eff;
--color-secondary: #1a1f26;
--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;
}
/* A–E themes: override the same tokens inside an attribute scope */
html[data-theme="a"] {
--color-bg: #0e1116;
--color-secondary: #1a1f26;
--color-text: #e1e8ee;
--color-primary: #3d8eff;
--color-tertiary: #00c9a7;
--color-contrast: #9ca3af;
}
html[data-theme="b"] {
--color-bg: #120e0e;
--color-secondary: #1c1818;
--color-text: #fefcfb;
--color-primary: #ff7043;
--color-tertiary: #ffd166;
--color-contrast: #a3948c;
}
html[data-theme="c"] {
--color-bg: #0d1318;
--color-secondary: #1b242c;
--color-text: #e8ecef;
--color-primary: #00a3c4;
--color-tertiary: #ff8a70;
--color-contrast: #9ca3af;
}
html[data-theme="d"] {
--color-bg: #0f1014;
--color-secondary: #1d1f24;
--color-text: #eaecef;
--color-primary: #6c78ff;
--color-tertiary: #a97bff;
--color-contrast: #9ca3af;
}
html[data-theme="e"] {
--color-bg: #0c1114;
--color-secondary: #182127;
--color-text: #edeff1;
--color-primary: #00d2a2;
--color-tertiary: #ffca57;
--color-contrast: #9ca3af;
}
/* theme-aware hero color follows --color-primary */
:root {
--hero-core: var(--color-primary);
}
@layer utilities {
/* Mobile / default */
.bg-hero {
background:
/* Top-right radial accent, similar to desktop */ radial-gradient(
120% 100% at 80% 10%,
color-mix(in oklab, var(--color-primary) 32%, transparent) 0%,
transparent 60%
),
/* Slight linear sweep from top to bottom */
linear-gradient(
180deg,
#0a0d13 0%,
var(--color-bg) 40%,
color-mix(in oklab, var(--color-primary) 10%, var(--color-bg) 90%)
100%
);
}
}
/* Desktop override */
@media (min-width: 768px) {
.bg-hero {
background:
/* small, softer highlight lower than the portrait rim */ radial-gradient(
95% 70% at 50% 28%,
color-mix(in oklab, var(--hero-core) 18%, transparent 82%) 0%,
transparent 56%
),
/* gentle bottom vignette for depth */
radial-gradient(
130% 90% at 50% 120%,
rgba(0, 0, 0, 0.32) 0%,
rgba(0, 0, 0, 0) 58%
),
/* base linear sweep */
linear-gradient(
185deg,
#0b0f15 0%,
var(--color-bg) 40%,
color-mix(in oklab, var(--hero-core) 12%, var(--color-bg) 88%) 100%
);
}
}
@media (min-width: 768px) {
/* Theme A – deep blue */
html[data-theme="a"] .bg-hero {
background: radial-gradient(
135% 120% at 80% 48%,
color-mix(in oklab, var(--color-primary) 65%, black 35%) 0%,
color-mix(in oklab, var(--color-primary) 45%, black 55%) 38%,
transparent 74%
),
linear-gradient(
165deg,
#080b10 0%,
color-mix(in oklab, var(--color-bg) 70%, black 30%) 46%,
#0a1324 100%
);
}
html[data-theme="b"] .bg-hero {
background: radial-gradient(
140% 110% at 76% 46%,
color-mix(in oklab, var(--color-primary) 60%, black 40%) 0%,
color-mix(in oklab, var(--color-primary) 40%, black 60%) 36%,
transparent 70%
),
linear-gradient(
185deg,
#140c0b 0%,
var(--color-bg) 40%,
color-mix(in oklab, var(--color-tertiary) 6%, var(--color-bg) 94%) 100%
);
}
/* Theme C – teal/cyan */
html[data-theme="c"] .bg-hero {
background: radial-gradient(
140% 120% at 76% 48%,
color-mix(in oklab, var(--color-primary) 58%, black 42%) 0%,
color-mix(in oklab, var(--color-primary) 40%, black 60%) 36%,
transparent 72%
),
linear-gradient(
165deg,
#081016 0%,
color-mix(in oklab, var(--color-bg) 62%, black 38%) 44%,
#0a1822 100%
);
}
/* Theme D – indigo/violet */
html[data-theme="d"] .bg-hero {
background: radial-gradient(
135% 120% at 80% 48%,
color-mix(in oklab, var(--color-primary) 60%, black 40%) 0%,
color-mix(in oklab, var(--color-primary) 38%, black 62%) 36%,
transparent 72%
),
linear-gradient(
165deg,
#090a10 0%,
color-mix(in oklab, var(--color-bg) 68%, black 32%) 46%,
#111328 100%
);
}
/* Theme E – emerald */
html[data-theme="e"] .bg-hero {
background: radial-gradient(
140% 120% at 78% 48%,
color-mix(in oklab, var(--color-primary) 58%, black 42%) 0%,
color-mix(in oklab, var(--color-primary) 38%, black 62%) 34%,
transparent 70%
),
linear-gradient(
165deg,
#07100e 0%,
color-mix(in oklab, var(--color-bg) 64%, black 36%) 44%,
#0a1c1a 100%
);
}
}
@media (min-width: 768px) {
.bg-hero::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
/* left-to-right fade of darkness */
background: linear-gradient(
90deg,
rgba(0, 0, 0, 0.5) 0%,
rgba(0, 0, 0, 0.34) 30%,
rgba(0, 0, 0, 0.18) 42%,
rgba(0, 0, 0, 0) 50%
);
z-index: 0;
}
/* keep content above the overlay */
.bg-hero > * {
position: relative;
z-index: 1;
}
}
@layer utilities {
.img-glow {
background:
radial-gradient(
68% 68% at 50% 42%,
color-mix(in oklab, var(--color-primary) 100%, black 0%) 0%,
color-mix(in oklab, var(--color-primary) 70%, black 30%) 40%,
color-mix(in oklab, var(--color-primary) 45%, black 55%) 70%,
color-mix(in oklab, var(--color-primary) 20%, black 80%) 85%
),
radial-gradient(
80% 80% at 50% 50%,
rgba(0,0,0,0) 58%,
rgba(0,0,0,0.35) 78%,
rgba(0,0,0,0.55) 100%
);
box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.35);
}
}