Skip to content

Commit 8d026bd

Browse files
author
Regan Maharjan
committed
brand colors on my cms
1 parent 204a98f commit 8d026bd

15 files changed

Lines changed: 976 additions & 162 deletions

‎build/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@
55
<meta charset="UTF-8" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
77
<title>Regan Maharjan Portfolio Website</title>
8-
<script type="module" crossorigin src="/assets/index-DeACNocH.js"></script>
9-
<link rel="stylesheet" crossorigin href="/assets/index-kgdzoSss.css">
8+
<script type="module" crossorigin src="/assets/index-BA1Pg0uv.js"></script>
9+
<link rel="stylesheet" crossorigin href="/assets/index-DlCj6NKg.css">
1010
</head>
1111

1212
<body>

‎src/components/Navigation.tsx‎

Lines changed: 103 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ import { Link, useLocation } from 'react-router-dom';
33
import { motion } from 'motion/react';
44
import { Menu, X } from 'lucide-react';
55
import contentData from '../data/content';
6+
import { brandColors, brandColorsArray } from '../styles/brandColors';
7+
import { getPageActiveHintColor, getPageNameFromPath } from '../utils/brandColorsConfig';
68

79
export function Navigation() {
810
const [isScrolled, setIsScrolled] = useState(false);
@@ -20,13 +22,40 @@ export function Navigation() {
2022

2123
const navLinks = contentData.navigation.links;
2224

25+
// Get brand color for each tab - use CMS config for active hints per page
26+
const getTabColor = (link: { path: string; label: string }, index: number): string => {
27+
const isActive = location.pathname === link.path;
28+
29+
if (isActive) {
30+
// Get the active hint color for this specific page from CMS
31+
const pageName = getPageNameFromPath(link.path);
32+
if (pageName) {
33+
return getPageActiveHintColor(pageName);
34+
}
35+
// Fallback: Photography always uses blue
36+
if (link.path === '/photography' || link.label === 'Photography') {
37+
return brandColors.blue;
38+
}
39+
// Default fallback
40+
return brandColorsArray[index % brandColorsArray.length];
41+
}
42+
43+
// For inactive tabs, cycle through colors
44+
// Photography always uses blue
45+
if (link.path === '/photography' || link.label === 'Photography') {
46+
return brandColors.blue;
47+
}
48+
return brandColorsArray[index % brandColorsArray.length];
49+
};
50+
2351
return (
2452
<motion.nav
2553
initial={{ y: -100 }}
2654
animate={{ y: 0 }}
2755
className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${
28-
isScrolled ? 'glassmorphism border-b border-black/5' : 'bg-transparent'
56+
isScrolled ? 'glassmorphism border-b' : 'bg-transparent'
2957
}`}
58+
style={isScrolled ? { borderBottomColor: `${brandColors.blue}20` } : {}}
3059
>
3160
<div className="max-w-7xl mx-auto px-6 lg:px-12">
3261
<div className="flex items-center justify-between h-16 lg:h-20">
@@ -44,31 +73,53 @@ export function Navigation() {
4473

4574
{/* Desktop Navigation */}
4675
<div className="hidden lg:flex items-center gap-1">
47-
{navLinks.map((link: { path: string; label: string }) => (
48-
<Link
49-
key={link.path}
50-
to={link.path}
51-
className="relative px-4 py-2 transition-colors group"
52-
>
53-
<span className="relative z-10 text-sm">
54-
{link.label}
55-
</span>
56-
{location.pathname === link.path && (
57-
<motion.div
58-
layoutId="activeTab"
59-
className="absolute inset-0 bg-black/5 rounded-lg"
60-
transition={{ type: 'spring', bounce: 0.2, duration: 0.6 }}
76+
{navLinks.map((link: { path: string; label: string }, index: number) => {
77+
const isActive = location.pathname === link.path;
78+
const tabColor = getTabColor(link, index);
79+
80+
return (
81+
<Link
82+
key={link.path}
83+
to={link.path}
84+
className="relative px-4 py-2 transition-colors group"
85+
>
86+
<span className="relative z-10 text-sm">
87+
{link.label}
88+
</span>
89+
{isActive && (
90+
<motion.div
91+
layoutId="activeTab"
92+
className="absolute inset-0 rounded-lg backdrop-blur-sm"
93+
style={{
94+
backgroundColor: `${tabColor}20`,
95+
borderBottom: `1px solid ${tabColor}40`,
96+
boxShadow: `0 1px 2px ${tabColor}20`,
97+
}}
98+
transition={{ type: 'spring', bounce: 0.2, duration: 0.6 }}
99+
/>
100+
)}
101+
<div
102+
className="absolute inset-0 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity"
103+
style={{ backgroundColor: `${brandColors.white}30` }}
61104
/>
62-
)}
63-
<div className="absolute inset-0 bg-black/[0.02] rounded-lg opacity-0 group-hover:opacity-100 transition-opacity" />
64-
</Link>
65-
))}
105+
</Link>
106+
);
107+
})}
66108
</div>
67109

68110
{/* Mobile Menu Button */}
69111
<button
70112
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
71-
className="lg:hidden p-2 rounded-lg hover:bg-black/5 transition-colors"
113+
className="lg:hidden p-2 rounded-lg transition-colors"
114+
style={{
115+
backgroundColor: 'transparent',
116+
}}
117+
onMouseEnter={(e) => {
118+
e.currentTarget.style.backgroundColor = `${brandColors.white}20`;
119+
}}
120+
onMouseLeave={(e) => {
121+
e.currentTarget.style.backgroundColor = 'transparent';
122+
}}
72123
aria-label="Toggle menu"
73124
>
74125
{isMobileMenuOpen ? <X size={24} /> : <Menu size={24} />}
@@ -82,23 +133,40 @@ export function Navigation() {
82133
initial={{ opacity: 0, y: -20 }}
83134
animate={{ opacity: 1, y: 0 }}
84135
exit={{ opacity: 0, y: -20 }}
85-
className="lg:hidden glassmorphism border-t border-black/5"
136+
className="lg:hidden glassmorphism border-t"
137+
style={{ borderTopColor: `${brandColors.blue}20` }}
86138
>
87139
<div className="max-w-7xl mx-auto px-6 py-4 space-y-1">
88-
{navLinks.map((link: { path: string; label: string }) => (
89-
<Link
90-
key={link.path}
91-
to={link.path}
92-
onClick={() => setIsMobileMenuOpen(false)}
93-
className={`block px-4 py-3 rounded-lg transition-colors ${
94-
location.pathname === link.path
95-
? 'bg-black/5'
96-
: 'hover:bg-black/[0.02]'
97-
}`}
98-
>
99-
{link.label}
100-
</Link>
101-
))}
140+
{navLinks.map((link: { path: string; label: string }, index: number) => {
141+
const isActive = location.pathname === link.path;
142+
const tabColor = getTabColor(link, index);
143+
144+
return (
145+
<Link
146+
key={link.path}
147+
to={link.path}
148+
onClick={() => setIsMobileMenuOpen(false)}
149+
className="block px-4 py-3 rounded-lg transition-all backdrop-blur-sm"
150+
style={{
151+
backgroundColor: isActive ? `${tabColor}20` : 'transparent',
152+
borderLeft: isActive ? `2px solid ${tabColor}60` : '2px solid transparent',
153+
boxShadow: isActive ? `inset 0 0 10px ${tabColor}10` : 'none',
154+
}}
155+
onMouseEnter={(e) => {
156+
if (!isActive) {
157+
e.currentTarget.style.backgroundColor = `${brandColors.white}20`;
158+
}
159+
}}
160+
onMouseLeave={(e) => {
161+
if (!isActive) {
162+
e.currentTarget.style.backgroundColor = 'transparent';
163+
}
164+
}}
165+
>
166+
{link.label}
167+
</Link>
168+
);
169+
})}
102170
</div>
103171
</motion.div>
104172
)}

‎src/components/pages/About.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { motion } from 'motion/react';
22
import { Code2, Sparkles, Database, Heart, Accessibility, Brain } from 'lucide-react';
33
import { ImageWithFallback } from '../figma/ImageWithFallback';
44
import contentData from '../../data/content';
5+
import { getPageTitleColor } from '../../utils/brandColorsConfig';
56

67
const iconMap: Record<string, typeof Code2> = {
78
'Code2': Code2,
@@ -36,7 +37,7 @@ export function About() {
3637
animate={{ opacity: 1, y: 0 }}
3738
transition={{ duration: 0.8 }}
3839
>
39-
<h1 className="text-5xl lg:text-6xl tracking-tight mb-6">
40+
<h1 className="text-5xl lg:text-6xl tracking-tight mb-6" style={{ color: getPageTitleColor('about') }}>
4041
{hero.title}
4142
</h1>
4243
<div className="space-y-4 text-lg text-muted-foreground">

‎src/components/pages/Accessibility.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { Eye, Code, CheckCircle2, Sparkles, Users, Zap } from 'lucide-react';
33
import { Badge } from '../ui/badge';
44
import { ImageWithFallback } from '../figma/ImageWithFallback';
55
import contentData from '../../data/content';
6+
import { getPageTitleColor } from '../../utils/brandColorsConfig';
67

78
const iconMap: Record<string, typeof Eye> = {
89
'Eye': Eye,
@@ -35,7 +36,7 @@ export function Accessibility() {
3536
transition={{ duration: 0.8 }}
3637
className="text-center"
3738
>
38-
<h1 className="text-5xl lg:text-6xl tracking-tight mb-6">
39+
<h1 className="text-5xl lg:text-6xl tracking-tight mb-6" style={{ color: getPageTitleColor('accessibility') }}>
3940
{hero.title}
4041
</h1>
4142
<p className="text-xl text-muted-foreground max-w-3xl mx-auto">

0 commit comments

Comments
 (0)