{ZZ_ITEMS.map((item, i) => { const left = i % 2 === 0; return (

{left ? ( <>

{item.when}

{item.title}

{item.role}

{item.desc}

) : ( <>

{item.when}

{item.title}

{item.role}

{item.desc}

)}

); })}

), skills: (

🤖 AI & ML

{["Python","Scikit-Learn","TensorFlow","LSTM","OpenAI API","Prompt Engineering","LlamaIndex","RAG","OCR","Mistral","Phi-2"].map((c,i)=>{c})}

💻 Frontend & Design

{["React.js","JavaScript ES6+","HTML5","CSS3","Streamlit","WebSockets","Figma","Prototyping"].map((c,i)=>{c})}

🛠️ Tools & Infra

{["SQL","Git/GitHub","AWS EC2","AWS S3","Arduino","ESP32","C++","Autodesk Inventor"].map((c,i)=>{c})}

), about: (

I'm an engineer who loves building things end-to-end — whether that means routing wires on a wearable microcontroller, training an ML pipeline, or designing a UI from scratch. I care about taking complex systems and making them feel simple, visual, and intuitive.

Co-founding a stealth startup — P2P housing marketplace, in production
AI Innovation Extern · Pfizer · built OCR + RAG pipelines
Targeting: ML Engineer · Software Developer · Data Analyst co-ops

school

McMaster Eng

based in

Toronto, ON

shipped

5 projects

fuel

coffee addict

🎓 Education

McMaster University — B.Eng. & Management · Sep 2025 – Present

🎯 Hobbies

{["🏀 Basketball","🏸 Badminton","🏓 Table Tennis","☕ Coffee","🔧 Hardware Tinkering","🎮 Gaming","🎵 Music"].map((c,i) => {c} )}

), contact: (

★ open to Summer 2026 internships

let's build something →

Email GitHub LinkedIn

), }; const MODES = { engineer: { label: "ENGINEER", hero: { kick: "mode · engineer", tag: "I build things end-to-end." }, cards: [ { kind: "projects", doodle: "assets/layer.png", title: "PROJECTS", feature: true, summary: "Wearables · fraud detection · SaaS" }, { kind: "experience", doodle: "assets/chart.png", title: "EXPERIENCE", feature: false, summary: "Pfizer · Stealth · PM Accelerator" }, { kind: "skills", doodle: "assets/setting.png", title: "SKILLS", feature: false, summary: "AI/ML · React · Embedded · Cloud" }, { kind: "contact", doodle: "assets/chat.png", title: "CONTACT", feature: false, summary: "Available Summer 2026 →" }, ], }, human: { label: "HUMAN", hero: { kick: "mode · human", tag: "Off the clock." }, cards: [ { kind: "about", doodle: "assets/cup-of-coffee.png", title: "ABOUT ME", feature: true, summary: "McMaster Eng. Builder. Toronto." }, { kind: "contact", doodle: "assets/wave-hand.png", title: "SAY HI", feature: false, summary: "Always down to chat." }, ], }, }; const ROT = [-2.2, 1.8, 1.5, -2.0]; // ── AvatarEngine — border-triggered MP4 video transition state machine ──────── function AvatarEngine({ mode, resetTrigger }) { const assets = AVATAR_ASSETS[mode]; const [avatarState, _setAvatarState] = useState("neutral"); const avatarStateRef = useRef("neutral"); const videoRef = useRef(null); const setState = (s) => { avatarStateRef.current = s; _setAvatarState(s); }; useEffect(() => { const v = videoRef.current; if (v) { v.pause(); v.src = ""; } setState("neutral"); }, [resetTrigger, mode]); const playVideo = (src, nextState) => { const v = videoRef.current; if (!v) return; v.pause(); const onReady = () => { v.removeEventListener("loadeddata", onReady); setState(nextState); v.play().catch(() => {}); }; v.addEventListener("loadeddata", onReady); v.src = src; v.load(); }; const handleMouseEnter = () => { if (videoRef.current) videoRef.current.loop = false; playVideo(assets.enterVideo, "entering"); }; const handleMouseLeave = () => { if (avatarStateRef.current === "neutral") return; playVideo(assets.leaveVideo, "leaving"); }; const handleVideoEnded = () => { if (avatarStateRef.current === "entering") setState("hovering"); else if (avatarStateRef.current === "leaving") setState("neutral"); }; return (

{/* Baseline Neutral Image */}

{/* Video layer — animates in, then freezes on final frame while hovering */}

); } // ── AvatarSidebar — fixed mini avatar after scrolling past landing ───────────── function AvatarSidebar({ mode }) { return ( ); } // ── FullSections — full-bleed content sections below the landing viewport ───── const SECTION_DEFS = [ { id: "projects", doodle: "assets/layer.png", title: "PROJECTS", variant: "odd" }, { id: "experience", doodle: "assets/chart.png", title: "EXPERIENCE", variant: "even" }, { id: "skills", doodle: "assets/setting.png", title: "SKILLS", variant: "odd" }, { id: "about", doodle: "assets/cup-of-coffee.png", title: "ABOUT ME", variant: "even" }, { id: "contact", doodle: "assets/chat.png", title: "CONTACT", variant: "odd" }, ]; function FullSections() { return ( <> {SECTION_DEFS.map(sec => (

{sec.title}

{DETAILS[sec.id]}

))} ); } function TypewriterTitle({ text }) { const spaceIdx = text.indexOf(" "); const before = text.slice(0, spaceIdx + 1); const after = text.slice(spaceIdx + 1); const lastChar = after.slice(-1); const afterRest = after.slice(0, -1); return (

{before} {afterRest}{lastChar}

); } // ── Card ────────────────────────────────────────────────────────────────────── function Card({ data, slot, sectionId }) { const tapeForSlot = { 0: "tl", 1: "tr", 2: "bl", 3: null }[slot]; const handleClick = () => document.getElementById(sectionId)?.scrollIntoView({ behavior: "smooth" }); return (

e.key === "Enter" && handleClick()} aria-label={"Jump to " + data.title + " section"} > {tapeForSlot && }

{data.title}

{data.summary}

↓

); } // ── App ─────────────────────────────────────────────────────────────────────── function App() { const t = TWEAK_DEFAULTS; const [mode, setMode] = useState("engineer"); const [flipCount, setFlipCount] = useState(0); const [scrolled, setScrolled] = useState(false); const m = MODES[mode]; const flipped = mode === "human"; const motionOff = t.motion === "off"; function flip() { setFlipCount(c => c + 1); setMode(flipped ? "engineer" : "human"); } useEffect(() => { const onScroll = () => setScrolled(window.scrollY > window.innerHeight * 0.8); window.addEventListener("scroll", onScroll, { passive: true }); return () => window.removeEventListener("scroll", onScroll); }, []); const rootStyle = { "--font-display": FONT_MAP[t.headingFont] || FONT_MAP["Archivo Black"], "--purple": t.accent, "--tape": t.tapeColor, "--jit": t.jitter, }; const renderFace = (key, back) => { const mm = MODES[key]; return (

{mm.hero.kick}

RONN

{mm.hero.tag}

↻ click to flip

); }; return (

★ eng mcmaster builder

hey — it's me ↓

{t.subtitle}

★ available · Summer 2026

{renderFace("engineer", false)} {renderFace("human", true)}

{m.cards[2] && } {m.cards[3] && }

↓ see the work

{scrolled && }

); } const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "headline": "RONN PHILIP", "subtitle": "Engineering & Management · McMaster · Mississauga, ON", "headingFont": "Archivo Black", "accent": "#67568C", "tapeColor": "#67568C", "jitter": 1, "motion": "full", "dots": true }/*EDITMODE-END*/; ReactDOM.createRoot(document.getElementById("root")).render();

EMG Fitness Armband

Atmosphere

ML Fraud Detection 2.0

AI Financial Dashboard

Fastodo

{item.title}

{item.title}

{before} {afterRest}{lastChar}

{data.title}