import React, { useState } from 'react'; import { motion, AnimatePresence } from 'framer-motion'; import { ArrowRight, ArrowLeft, ExternalLink, Mail, Link2, Globe, MessageCircle, X, BookOpen, GraduationCap, Quote, CheckCircle2 } from 'lucide-react'; import "./styles.css"; const PROJECTS = [ { title: "Digital Health Interface", year: "2024", description: "A streamlined patient management system for clinical environments.", link: "#", image: "https://images.unsplash.com/photo-1576091160550-2173dba999ef?auto=format&fit=crop&w=800&q=80" }, { title: "Educational Resource Hub", year: "2023", description: "Centralized platform for open-source curriculum sharing.", link: "#", image: "https://images.unsplash.com/photo-1501504905252-473c47e087f8?auto=format&fit=crop&w=800&q=80" }, { title: "Multimedia Archive", year: "2023", description: "High-performance asset management for creative teams.", link: "#", image: "https://images.unsplash.com/photo-1558655146-d09347e92766?auto=format&fit=crop&w=800&q=80" } ]; const STORYLINE = [ { year: "2022 — Present", title: "Senior Content Strategist", content: "Leading communication design and content architecture for healthcare clients at Creative Studio HK. Focusing on bridging the gap between complex data and human-centric design." }, { year: "2020 — 2022", title: "Multimedia Specialist", content: "Developed interactive learning modules and visual communication systems at EduTech Solutions. Pioneered digital-first education strategies." } ]; const Marquee = () => (

DESIGN • STRATEGY • DATA • INNOVATION • CONTENT • STORYTELLING • DESIGN • STRATEGY • DATA • INNOVATION • CONTENT • STORYTELLING •

); export default function App() { const [page, setPage] = useState('landing'); const [isModalOpen, setIsModalOpen] = useState(false); const [isSubmitted, setIsSubmitted] = useState(false); const pageVariants = { initial: { opacity: 0, y: 10 }, enter: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -10 } }; const handleContactSubmit = (e: React.FormEvent) => { e.preventDefault(); const formData = new FormData(e.currentTarget); const name = formData.get('name'); const email = formData.get('email'); const message = formData.get('message'); const mailtoLink = `mailto:yongsonglin@hotmail.com?subject=Portfolio Inquiry from ${name}&body=Name: ${name}%0D%0AEmail: ${email}%0D%0A%0D%0AMessage:%0D%0A${message}`; // Open email client window.location.href = mailtoLink; // Show success message setIsSubmitted(true); }; const closeModal = () => { setIsModalOpen(false); // Reset submission state after animation completes setTimeout(() => setIsSubmitted(false), 300); }; const Nav = () => ( ); return (

{page === 'landing' && (

Data Portfolio

Specializing in data-driven storytelling and digital content strategy for healthcare and education.

)} {page === 'projects' && (

Project Showcase

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

{project.year}

{project.title}

{project.description}

{project.image && (

)}

))}

)} {page === 'storyline' && (

YONG Song Lin

I believe that communication is a fundamental human right. My approach to speech therapy is rooted in empathy, evidence-based practice, and a commitment to empowering individuals to find their unique voice in a world that often moves too fast. I strive to bridge clinical expertise with compassionate storytelling.

{STORYLINE.map((item, i) => (

{item.year}

{item.title}

{item.content}

))}

)} {page === 'ugc' && (

UGC Portfolio

Connect & Follow

Rednote (Xiaohongshu) @songlin

Content Pillars

Speech Therapy Experience

Documenting clinical insights and therapeutic strategies to make speech-language pathology accessible and engaging for families and practitioners.

University Application

Sharing strategic advice and personal narratives focused on the higher education journey, helping students navigate complex admissions processes with confidence.

Engagement Insights

12.5k+ Total Reach

4.8% Avg. Engagement

850+ Content Saves

22% Growth Rate

)}

{isModalOpen && ( e.stopPropagation()} >

Contact

Get in Touch

Direct WhatsApp: +852 7051 3664

{!isSubmitted ? (

Name

Website (Optional)

Message

) : (

Message Sent!

Thanks for reaching out, I'll reply to you within 1-2 days!

)}

)} ); }