What it does
This is the website you're on right now: my personal portfolio. It shows who I am, what I work with, my experience and the things I've built, and it gives people an easy way to contact me. I designed and built it myself, and I keep adding to it.
- Lines of code
- 4.6k
- React components
- 31
- Roles in the typing line
- 9
- Themes: light & dark
- 2
Key features
- Typing roles: under my name, my roles type themselves out one by one (IT Support, Software Developer, Network & CCTV and more).
- ID card: click my photo and it flips over in 3D to show an ID card, with a real QR code that opens this site.
- Live GitHub stats: the number of public repos and the languages I use come straight from GitHub, refreshed about once a day.
- Tech orbit: my tools sit on a circle that turns as you scroll down the page, and turns back when you scroll up.
- Theme switch: light and dark mode. The new theme grows out of the button as a circle.
- Small touches: a soft glow follows the mouse over cards, a reading progress bar sits at the top, there's a back-to-top button, and pages slide in when you move between them.
- Project pages: each project, like this one, has its own page with the full story.
How it's built
My data
Simple TypeScript files
- About me & roles
- Experience & skills
- Projects (+ MDX pages)
Next.js 16
React 19 + Tailwind CSS
- Pages made at build time
- GitHub stats, rebuilt daily
- QR code made at build time
Cloudflare
Hosting
- New version on every push
- Fast pages worldwide
- Plain files, no server
The site is built with Next.js 16, React 19, TypeScript and Tailwind CSS. All my information (roles, experience, skills, projects) lives in a few data files, so updating the site usually means changing one line, not a whole page. Project pages like this one are written in MDX, which is Markdown that can include React components such as the boxes above.
Every page is made ahead of time as a plain file, so it arrives ready to read and needs very little JavaScript. The GitHub stats are fetched while the site is built, and the site rebuilds itself once a day to keep them fresh. Every time I push to GitHub, it's built and published on Cloudflare automatically.
Made for everyone
- Works on any screen: every section is checked on small phones (360px wide) and on desktop.
- Respects motion settings: if your device asks for less motion, the typing, turning and sliding all stop.
- Keyboard and screen readers: everything can be reached with the keyboard, and decorative parts are hidden from screen readers.
- No flash of the wrong theme: the theme is chosen before the page is drawn, so dark mode never flashes white.
- Readable colours: text keeps strong contrast in both light and dark mode.
What's next
- Move to my own domain, fangyuke.dev.
- Add more projects as I build them.