jxsen.com

A personal portfolio website built with React Three Fiber, featuring an interactive 3D environment with accessibility support.

Live Site

Visit the live site at jxsen.com

Technologies Used

• React - Frontend framework
• Three.js - 3D graphics library
• React Three Fiber - React renderer for Three.js
• React Three Drei - Useful helpers for React Three Fiber
• React Three A11y - Accessibility features for React Three Fiber
• TypeScript - Type safety and enhanced developer experience
• Vite - Build tool and development server

Features

• Interactive 3D environment
• Accessible design with ARIA support
• Animated 3D typography
• Interactive elements including:
  • GitHub profile link
  • Email contact
  • Custom 3D models
  • Orbital controls for scene navigation

Development

Prerequisites

• Node.js
• pnpm package manager

Installation

1. Clone the repository

git clone git@github.com:j-xsen/jxsen.com.git

2. Install dependencies

pnpm install

3. Start the development server

pnpm dev

Building for Production

To create a production build:

pnpm build

Deployment

This site is deployed on Cloudflare Workers via wrangler. Static assets build to dist/ and are served by the Worker (src/worker/index.ts), which also handles the /to/:slug URL shortener.

Accessibility

This project implements accessibility features through @react-three/a11y, ensuring that 3D content is accessible to screen readers and keyboard navigation.