Portfolio

Personal portfolio site for Stefan Varga, built with React, TypeScript, and Vite as a chat interface: visitors tap topic buttons (or type a question) and "Stefan" replies in message bubbles with a typing animation. Design tokens follow filipbaturan.com: IBM Plex Sans/Serif, CSS-variable theming with a light/dark toggle, coral accent.

All content lives in src/data/profile.ts; chat questions and reply flows in src/data/topics.ts.

Development

npm install
npm run dev      # local dev server
npm run build    # type-check and production build (dist/)
npm run preview  # serve the production build

Deploy

Hosted on GitHub Pages at https://classicdocs.github.io/portfolio/ from the gh-pages branch. To publish a new version:

npm run deploy

This builds dist/ and force-pushes it to gh-pages.

Structure

• src/data/profile.ts - all portfolio content (about, experience, skills, education, links)
• src/data/topics.ts - chat topics: question text, reply sequences, and keyword matching for typed input
• src/components/Chat.tsx - message state and sequential delivery with typing delays
• src/components/Message.tsx - bubble renderers (text, role with show-more, skills, education, contact)
• src/components/Composer.tsx - topic quick-reply buttons and free-text input
• src/styles.css - full design system (CSS variables, light/dark via data-theme)

Theme choice persists in localStorage; an inline script in index.html applies it before first paint.