Skip to content

Commit 0d6477b

Browse files
lovable-dev[bot]lovable-dev[bot]
committed
Remix UI with Gen-Z vibe
Integrate high-energy, futuristic styling across sections by adopting a cyberpunk aesthetic: glass cards, neon gradients, animated backgrounds, and AI-forward copy. Added GlassCard and CustomBadge components, wired up Hero/About/Experience/Skills/Contact sections to new visuals, updated navigation/footer, and refactored imports. Introduced framer-motion dependency and expanded styling hooks in Tailwind/CSS to support glow, gradient borders, and animated elements for an out-of-this-world portfolio. X-Lovable-Edit-ID: edt-a7a66d9b-1046-48df-a135-fe7ca10c7b77
2 parents 040fce8 + b6b8197 commit 0d6477b

14 files changed

Lines changed: 963 additions & 529 deletions

‎package-lock.json‎

Lines changed: 158 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@
4545
"cmdk": "^1.1.1",
4646
"date-fns": "^3.6.0",
4747
"embla-carousel-react": "^8.6.0",
48+
"framer-motion": "^12.23.26",
4849
"input-otp": "^1.4.2",
4950
"lucide-react": "^0.462.0",
5051
"next-themes": "^0.3.0",

‎src/components/AboutSection.tsx‎

Lines changed: 103 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -1,89 +1,114 @@
1-
import { Bot, Brain, Code2, Rocket, Sparkles, Zap } from 'lucide-react';
1+
import { motion } from 'framer-motion';
2+
import { Rocket, Timer, Sparkles, Zap } from 'lucide-react';
3+
import GlassCard from './ui/GlassCard';
24

35
const AboutSection = () => {
4-
const highlights = [
5-
{
6-
icon: Bot,
7-
title: 'AI Agent Architect',
8-
description: 'Building autonomous agents that handle complex tasks without human intervention',
9-
},
10-
{
11-
icon: Brain,
12-
title: 'Prompt Engineer',
13-
description: 'Mastering context engineering and few-shot techniques for optimal AI performance',
14-
},
15-
{
16-
icon: Zap,
17-
title: 'Full-Stack Dev',
18-
description: 'MERN, Python, and cloud-native architectures that scale',
19-
},
20-
{
21-
icon: Rocket,
22-
title: 'Tech Lead',
23-
description: 'Leading teams, mentoring engineers, and driving technical strategy',
24-
},
25-
];
26-
276
return (
28-
<section id="about" className="relative py-32 px-6">
29-
<div className="max-w-6xl mx-auto">
30-
{/* Section Header */}
31-
<div className="text-center mb-20">
32-
<span className="inline-flex items-center gap-2 px-4 py-2 rounded-full glass text-sm font-mono text-primary mb-6">
33-
<Sparkles className="w-4 h-4" />
34-
About Me
35-
</span>
36-
<h2 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-6">
37-
<span className="text-foreground">The </span>
38-
<span className="text-gradient">AI-First</span>
39-
<span className="text-foreground"> Developer</span>
40-
</h2>
41-
<p className="text-lg text-muted-foreground max-w-3xl mx-auto leading-relaxed">
42-
I don't just use AI—I build with it, for it, and sometimes against it when debugging.
43-
From autonomous agents to full-stack platforms, I'm obsessed with pushing what's possible
44-
in AI-assisted development.
45-
</p>
46-
</div>
7+
<section id="about" className="relative py-32 px-6 overflow-hidden">
8+
{/* Background effects */}
9+
<div className="absolute inset-0 bg-gradient-to-b from-transparent via-primary/5 to-transparent" />
10+
11+
<div className="relative max-w-6xl mx-auto">
12+
<motion.div
13+
initial={{ opacity: 0, y: 30 }}
14+
whileInView={{ opacity: 1, y: 0 }}
15+
viewport={{ once: true, margin: "-100px" }}
16+
transition={{ duration: 0.8 }}
17+
className="grid lg:grid-cols-2 gap-12 items-center"
18+
>
19+
{/* Left: Content */}
20+
<div>
21+
<span className="text-xs font-mono uppercase tracking-[0.3em] text-primary mb-4 block">
22+
00_The Sprint Manifesto
23+
</span>
24+
25+
<h2 className="text-4xl md:text-5xl lg:text-6xl font-black leading-[1.1] mb-8">
26+
<span className="text-foreground">FROM IDEA</span>
27+
<br />
28+
<span className="text-foreground">TO SHIP IN</span>
29+
<br />
30+
<span className="text-gradient glow-text">24 HOURS.</span>
31+
</h2>
32+
33+
<p className="text-lg text-muted-foreground mb-8 leading-relaxed">
34+
Bring me your vision. I will architect, develop, and deploy a high-fidelity
35+
functional prototype in less than 24 hours. This isn't a promise—it's my
36+
<span className="text-primary font-semibold"> standard operating procedure</span>.
37+
</p>
4738

48-
{/* Highlight Cards */}
49-
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
50-
{highlights.map((item, index) => (
51-
<div
52-
key={item.title}
53-
className="group relative p-8 rounded-2xl glass hover:bg-card/60 transition-all duration-500 overflow-hidden"
54-
style={{ animationDelay: `${index * 0.1}s` }}
55-
>
56-
{/* Gradient border on hover */}
57-
<div className="absolute inset-0 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-500 gradient-border" />
39+
<div className="flex flex-wrap gap-4">
40+
<div className="flex items-center gap-2 px-4 py-2 rounded-xl glass">
41+
<Zap className="w-4 h-4 text-primary" />
42+
<span className="text-sm font-medium text-foreground">Ultra Speed</span>
43+
</div>
44+
<div className="flex items-center gap-2 px-4 py-2 rounded-xl glass">
45+
<Rocket className="w-4 h-4 text-accent" />
46+
<span className="text-sm font-medium text-foreground">Production Ready</span>
47+
</div>
48+
</div>
49+
</div>
50+
51+
{/* Right: Visual */}
52+
<motion.div
53+
initial={{ opacity: 0, scale: 0.9 }}
54+
whileInView={{ opacity: 1, scale: 1 }}
55+
viewport={{ once: true, margin: "-100px" }}
56+
transition={{ duration: 0.8, delay: 0.2 }}
57+
>
58+
<GlassCard className="p-8 relative" hover={false}>
59+
{/* Animated border */}
60+
<div className="absolute inset-0 rounded-2xl overflow-hidden">
61+
<div className="absolute inset-0 bg-gradient-to-r from-primary via-accent to-primary opacity-20 animate-gradient bg-[length:200%_100%]" />
62+
</div>
5863

59-
<div className="relative z-10">
60-
<div className="inline-flex p-3 rounded-xl bg-primary/10 text-primary mb-4 group-hover:scale-110 transition-transform duration-300">
61-
<item.icon className="w-6 h-6" />
64+
<div className="relative flex flex-col items-center text-center">
65+
<motion.div
66+
animate={{
67+
boxShadow: [
68+
'0 0 30px hsl(175 100% 50% / 0.3)',
69+
'0 0 60px hsl(175 100% 50% / 0.5)',
70+
'0 0 30px hsl(175 100% 50% / 0.3)'
71+
]
72+
}}
73+
transition={{ duration: 2, repeat: Infinity, ease: "easeInOut" }}
74+
className="w-24 h-24 rounded-full bg-gradient-to-br from-primary to-accent flex items-center justify-center mb-6"
75+
>
76+
<Timer className="w-12 h-12 text-primary-foreground" />
77+
</motion.div>
78+
79+
<div className="text-7xl font-black text-gradient mb-2">24H</div>
80+
<div className="text-xs font-mono uppercase tracking-[0.3em] text-muted-foreground">
81+
DEPLOYMENT_WINDOW
6282
</div>
63-
<h3 className="text-xl font-semibold text-foreground mb-2 group-hover:text-primary transition-colors">
64-
{item.title}
65-
</h3>
66-
<p className="text-muted-foreground leading-relaxed">
67-
{item.description}
68-
</p>
6983
</div>
70-
</div>
71-
))}
72-
</div>
84+
</GlassCard>
85+
</motion.div>
86+
</motion.div>
7387

74-
{/* Fun Stat */}
75-
<div className="mt-16 text-center">
76-
<div className="inline-flex items-center gap-3 px-6 py-4 rounded-2xl glass">
77-
<Code2 className="w-5 h-5 text-primary" />
78-
<span className="text-muted-foreground">
79-
<span className="text-foreground font-semibold">3+ years</span> of shipping production code
80-
</span>
81-
<span className="text-muted-foreground">•</span>
82-
<span className="text-muted-foreground">
83-
<span className="text-foreground font-semibold">∞</span> cups of coffee
84-
</span>
85-
</div>
86-
</div>
88+
{/* Stats */}
89+
<motion.div
90+
initial={{ opacity: 0, y: 30 }}
91+
whileInView={{ opacity: 1, y: 0 }}
92+
viewport={{ once: true, margin: "-100px" }}
93+
transition={{ duration: 0.8, delay: 0.3 }}
94+
className="mt-20 grid grid-cols-2 md:grid-cols-4 gap-6"
95+
>
96+
{[
97+
{ value: '3+', label: 'Years Shipping' },
98+
{ value: '50+', label: 'Projects Deployed' },
99+
{ value: '∞', label: 'Coffee Consumed' },
100+
{ value: '0', label: 'Bugs in Prod (jk)' },
101+
].map((stat, idx) => (
102+
<GlassCard key={stat.label} className="p-6 text-center">
103+
<div className="text-3xl md:text-4xl font-black text-gradient mb-2">
104+
{stat.value}
105+
</div>
106+
<div className="text-xs font-mono uppercase tracking-wider text-muted-foreground">
107+
{stat.label}
108+
</div>
109+
</GlassCard>
110+
))}
111+
</motion.div>
87112
</div>
88113
</section>
89114
);

‎src/components/ArmorySection.tsx‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
import { motion } from 'framer-motion';
2+
import {
3+
Brain,
4+
Cpu,
5+
Zap,
6+
Wind,
7+
Layers,
8+
Search,
9+
Terminal,
10+
Cloud,
11+
Code2,
12+
Box
13+
} from 'lucide-react';
14+
import GlassCard from './ui/GlassCard';
15+
16+
const ArmorySection = () => {
17+
const tools = [
18+
{ name: "Claude Code", category: "Agentic Dev", Icon: Brain, color: "text-orange-400", desc: "My primary synthetic engineer." },
19+
{ name: "Cursor AI", category: "IDE Sync", Icon: Code2, color: "text-cyan-400", desc: "Elite orchestration & speed." },
20+
{ name: "Windsurf", category: "IDE Sync", Icon: Wind, color: "text-blue-400", desc: "The intelligent developer flow." },
21+
{ name: "Ollama", category: "Local LLMs", Icon: Box, color: "text-purple-400", desc: "Private, on-prem inference." },
22+
{ name: "Gemini 2.0 Flash", category: "Multimodal", Icon: Zap, color: "text-red-400", desc: "Long-context architecture analysis." },
23+
{ name: "v0.dev", category: "UI Synthesis", Icon: Layers, color: "text-pink-400", desc: "Instant visual component generation." },
24+
{ name: "OpenAI o1", category: "Reasoning", Icon: Cpu, color: "text-green-400", desc: "Complex logic & algorithm design." },
25+
{ name: "Groq", category: "Inference", Icon: Zap, color: "text-yellow-400", desc: "LPU accelerated real-time response." },
26+
{ name: "Perplexity", category: "Intelligence", Icon: Search, color: "text-blue-300", desc: "Real-time tech stack research." },
27+
{ name: "GitHub Copilot", category: "Autocomplete", Icon: Terminal, color: "text-white", desc: "Secondary pair programming." },
28+
{ name: "Replicate", category: "Model Hosting", Icon: Cloud, color: "text-white/60", desc: "Deploying custom AI models." },
29+
{ name: "LangChain", category: "Framework", Icon: Layers, color: "text-teal-400", desc: "Autonomous agent chaining." }
30+
];
31+
32+
const containerVariants = {
33+
hidden: { opacity: 0 },
34+
visible: {
35+
opacity: 1,
36+
transition: {
37+
staggerChildren: 0.05
38+
}
39+
}
40+
};
41+
42+
const itemVariants = {
43+
hidden: { opacity: 0, y: 20 },
44+
visible: { opacity: 1, y: 0 }
45+
};
46+
47+
return (
48+
<section id="armory" className="relative py-32 px-6 overflow-hidden">
49+
{/* Background grid */}
50+
<div className="absolute inset-0 bg-[linear-gradient(rgba(112,0,255,0.03)_1px,transparent_1px),linear-gradient(90deg,rgba(112,0,255,0.03)_1px,transparent_1px)] bg-[size:60px_60px]" />
51+
52+
<div className="relative max-w-6xl mx-auto">
53+
<motion.div
54+
initial={{ opacity: 0, y: 30 }}
55+
whileInView={{ opacity: 1, y: 0 }}
56+
viewport={{ once: true, margin: "-100px" }}
57+
transition={{ duration: 0.8 }}
58+
className="mb-16"
59+
>
60+
<span className="text-xs font-mono uppercase tracking-[0.3em] text-primary mb-4 block">
61+
01_The Armory
62+
</span>
63+
<h2 className="text-4xl md:text-5xl lg:text-6xl font-black mb-6">
64+
<span className="text-gradient glow-text">AI ARSENAL.</span>
65+
</h2>
66+
<p className="text-lg text-muted-foreground max-w-2xl">
67+
Every build is supported by a high-frequency selection of autonomous tools.
68+
I build <span className="text-primary">with agents</span>, <span className="text-accent">for agents</span>.
69+
</p>
70+
</motion.div>
71+
72+
<motion.div
73+
variants={containerVariants}
74+
initial="hidden"
75+
whileInView="visible"
76+
viewport={{ once: true, margin: "-50px" }}
77+
className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4"
78+
>
79+
{tools.map((tool) => (
80+
<motion.div key={tool.name} variants={itemVariants}>
81+
<GlassCard className="p-5 h-full">
82+
<div className={`${tool.color} mb-3`}>
83+
<tool.Icon className="w-6 h-6" />
84+
</div>
85+
<h3 className="font-bold text-foreground mb-1">{tool.name}</h3>
86+
<p className="text-xs font-mono text-primary mb-2">{tool.category}</p>
87+
<p className="text-xs text-muted-foreground leading-relaxed">{tool.desc}</p>
88+
</GlassCard>
89+
</motion.div>
90+
))}
91+
</motion.div>
92+
</div>
93+
</section>
94+
);
95+
};
96+
97+
export default ArmorySection;

0 commit comments

Comments
 (0)