import { Container } from "@/components/ui/container"; import { Button } from "@/components/ui/button"; import { Badge } from "@/components/ui/badge"; import { Separator } from "@/components/ui/separator"; import { motion } from "framer-motion"; import { Code2, Terminal, GitBranch, Zap, Heart, Sparkles, Rocket } from "lucide-react"; // Header Component const Header = () => { return ( DevPort ); }; // Hero Section const Hero = () => { const stats = [ { value: "50+", label: "Projects", icon: }, { value: "3+", label: "Years Exp", icon: }, { value: "15+", label: "Open Source", icon: }, { value: "99%", label: "Uptime", icon: }, ]; const techStack = [ "TypeScript", "React", "Next.js", "Node.js", "PostgreSQL", "AWS", ]; return (

{/* Background Geometric Pattern */}

{/* Left Content */} {/* Badge */} Available for freelance {/* Headline */}

Building digital
experiences with
code & creativity

{/* Description */}

I craft elegant web applications that blend stunning design with robust engineering. Specializing in React ecosystems and cloud-native architectures.

{/* CTA Buttons */}

View Projects Get in Touch

{/* Tech Stack */}

Tech Stack

{techStack.map((tech, index) => ( {tech} ))}

{/* Right Visual */} {/* Main Visual Card */}

{/* Decorative Glow */}

{/* Main Card */}

{/* Code Editor Mock */}

{/* Window Header */}

portfolio.tsx

{/* Code Content */}

import {"{"} Developer {"}"} from "@/types"

const me = {"{"}

role : "Frontend Architect" ,

passion : "Creating beautiful UIs" ,

status : "Always learning" ,

{"}"}

{/* Stats Grid */}

{stats.map((stat, index) => (

{stat.icon} {stat.value}

{stat.label}

))}

{/* Scroll Indicator */} Scroll

); }; // Main App Component export default function App() { return (

); }

Building digital experiences with code & creativity

Building digital
experiences with
code & creativity

Pinkish Portfolio Hero