Welcome to My Personal Webpage!

A modern, production-ready personal webpage using Next.js with Bun. This project had 2 main goals:

• Get people to know more about me & showcase my professional experience/stack
• Learn more about Svelte and SvelteKit
• Build a modern, responsive, eye-catching (subject to personal taste!) static website, something I love to do and don't have many opportunities to do so.

This project fully supports SvelteKit SSR and SSG features, it's currently using an exported build output, that only includes static HTML/CSS/JS since it's useful for self-hosting without a Node.js server in Github Pages.

Features

• 🚀 Server-side rendering (w/ Bun!)
• 📦 Asset bundling and optimization
• 🔒 TypeScript by default
• 🎉 TailwindCSS for styling
• 📖 Svelte docs
• 🧪 Vitest for testing
• 🔍 ESLint + Prettier for code linting & formatting

Getting Started

Prerequisites

This template uses bun as the package manager and Javascript Runtime. So, you need to install bun globally:

curl -fsSL https://bun.sh/install | bash

Installation

Install the dependencies:

bun install

Development

Start the development server with HMR:

bun dev

Your application will be available at http://localhost:5173.

Building for Production

Create a production build:

bun run build

Deployment

This repo includes a github action workflow to automatically deploy the project to Github Pages when a push is made on the main branch.

Linting & Formatting

Biome is used to ensure code consistency across the project. It is already included a config file with the default + recommended options to enable when using this setup. Feel free to change it to your liking!

To run all the biome checks (linting and formatting):

bun run lint

To automatically fix linting issues and format code:

bun run format

Testing

This template uses Vitest as the testing framework for Unit and Component testing. There's also included a basic setup with recommended settings.

To run the tests, use the following command:

bun run test

This will run all the unit and integration tests.

To watch and re-run tests on file changes during development:

bun run test:watch

Styling

This template comes with Tailwind CSS already configured for a simple default starting experience. You can use whatever CSS framework you prefer.