lloydrichards / proj_portfolio-website

Source code for personal portfolio website. Includes projects and lab modules.

Welcome to the Portfolio website for myself, Lloyd Richards. This website is a personal project to showcase my work and experiments. It is built with Next.js and TypeScript, and uses Tailwind CSS for styling. As a digital curriculum vitae, it include what works, education, and volunteer projects I have been involved in.

The website is also a place for me to experiment with new technologies and concepts. This includes data visualization, 3D graphics, and creative coding.

Tech Stack

This project uses the following technologies:

• Next.js - React Framework
• TypeScript - Typed JavaScript
• Tailwind CSS - Utility-first CSS framework
• shadcn/ui - UI components
• contentlayer - Content management
• D3.js - Data visualization library
• Framer Motion - Animation library

In addition, for the lab modules, the following technologies are experimented with:

• three.js - 3D library
• p5 - Creative coding library
• visx - Data visualization library
• leva - GUI for debugging
• fp-ts - Functional programming library
• anime.js - Animation library
• matter.js - Physics engine

Getting Started

For the JS runtime, this project uses Bun, make sure to have it installed. Then make sure to install the dependencies:

bun install

To run the development server:

bun dev

Open http://localhost:3000 with your browser to see the result.

Storybook

This project uses Storybook for component development. To run it:

bun storybook

Open http://localhost:6006 with your browser to see the result.