import React, { useState, useEffect } from 'react'; import { motion, useMotionValue, useSpring } from 'framer-motion'; import { ArrowUpRight, Mail, Link2, Globe, MapPin } from 'lucide-react'; import "./styles.css"; const PROJECTS = [ { year: "2024", name: "AI Reader & TTS", desc: "Clean reading platform with Kokoro/Piper AI voices.", link: "https://book-app--pbook-c9fc1.asia-southeast1.hosted.app/" }, { year: "2025", name: "Event Map Ext.", desc: "Reddit extension for dynamic event mapping.", link: "https://hack-o-mania-ongod.vercel.app/" }, { year: "2024", name: "Solid Pods", desc: "Decentralized data solutions hackathon entry.", link: null }, { year: "2024", name: "AI Security CTF", desc: "GovTech AI Capture The Flag competition.", link: null } ]; const EXPERIENCES = [ { company: "TrailMail", role: "Full Stack Dev", period: "2024-PRESENT" }, { company: "Industry Platform", role: "Software Intern", period: "2024-2025" }, { company: "Self-Employed", role: "Freelance Programmer", period: "2022-PRESENT" } ]; const ACHIEVEMENTS = [ { title: "1ST PLACE TRAE MINIMAX HACKATHON", year: "2026" }, { title: "FINALIST BUILD FOR IMPACT", year: "2026" }, { title: "SPECIAL MENTION HACKOMANIA", year: "2025" }, { title: "2ND PLACE IMDA SOLID PODS HACKATHON", year: "2024" }, { title: "5TH PLACE GOVTECH AI CTF", year: "2024" } ]; const SKILLS = ["PYTHON", "REACT", "NEXT.JS", "FASTAPI", "DOCKER", "PYTORCH", "RAG", "TYPESCRIPT"]; export default function App() { const [isHovered, setIsHovered] = useState(false); const mouseX = useMotionValue(-100); const mouseY = useMotionValue(-100); useEffect(() => { const moveMouse = (e: MouseEvent) => { mouseX.set(e.clientX); mouseY.set(e.clientY); }; window.addEventListener("mousemove", moveMouse); return () => window.removeEventListener("mousemove", moveMouse); }, [mouseX, mouseY]); const handleHover = (hovering: boolean) => setIsHovered(hovering); return (

{/* SECTION 1: HERO (WHITE) */}

JOVAN JOVAN JOVAN JOVAN JOVAN JOVAN JOVAN JOVAN JOVAN JOVAN

FULL STACK DEVELOPER / AI ENGINEER

SINGAPORE [SG]

{/* SECTION 2: PROJECTS (BLACK) */}

01 / SELECTED_WORKS

{PROJECTS.map((project, i) => (

NO. 0{i + 1} {project.year}

{project.name} {project.link && ( handleHover(true)} onMouseLeave={() => handleHover(false)} > )}

{project.desc}

))}

{/* SECTION 3: EXPERIENCE & ACHIEVEMENTS (WHITE) */}

02 / CAREER_LOG

{EXPERIENCES.map((exp, i) => (

{exp.period}

{exp.company}

{exp.role}

))}

03 / RECOGNITION

{ACHIEVEMENTS.map((ach, i) => (

{ach.title} {ach.year}

))}

EDUCATION

National University of Singapore B.COMP BIZ AI SYSTEMS

Singapore Polytechnic DIP. APPLIED AI & ANALYTICS

{/* SECTION 4: SKILLS & FOOTER (BLACK) */}

04 / TECH_STACK

{SKILLS.map((skill) => ( handleHover(true)} onMouseLeave={() => handleHover(false)} > {skill} ))}

); }

Skills