My Portfolio

This repository contains the source code for my personal website. It's built with a modern, fast, and type-safe stack.

Tech Stack

• Backend:
  • Runtime: Bun
  • Framework: ElysiaJS
  • Language: TypeScript
  • API Documentation: Swagger (via @elysiajs/swagger)
• Frontend:
  • Framework: Vue 3
  • Build Tool: Vite
  • Runtime/Package Manager: Bun
  • Language: TypeScript
• Containerization (Optional):
  • Containerfile (Dockerfile equivalent) provided for both frontend and backend, ready for Podman/Docker.

Project Structure

The project is organized into two main directories:

• ./backend/: Contains the ElysiaJS API server.
• ./frontend/: Contains the Vue 3 client-side application.

Here's a simplified overview of the directory structure:

.
├── backend/
│   ├── src/
│   │   ├── modules/        # Business logic for different API sections (bio, projects, etc.)
│   │   │   ├── bio/
│   │   │   ├── connect/
│   │   │   ├── projects/
│   │   │   └── skills/
│   │   └── index.ts        # Main backend entry point, sets up ElysiaJS app
│   ├── Containerfile       # For building the backend Docker/Podman image
│   ├── package.json
│   ├── bun.lock
│   └── tsconfig.json
│
├── frontend/
│   ├── public/             # Static assets
│   │   └── assets/
│   │       ├── images/
│   │       └── files/
│   ├── src/
│   │   ├── components/     # Vue components (layout, sections)
│   │   │   ├── layout/
│   │   │   └── sections/
│   │   ├── App.vue         # Root Vue component
│   │   ├── main.ts         # Frontend entry point, initializes Vue app
│   │   └── style.css       # Global styles
│   ├── Containerfile       # For building the frontend Docker/Podman image
│   ├── index.html          # Main HTML file for the SPA
│   ├── vite.config.ts      # Vite configuration
│   ├── package.json
│   ├── bun.lock
│   └── tsconfig.json
│
└── README.md               # This file

Getting Started

To run this project locally, you'll need Bun installed.

1. Backend Setup

Navigate to the backend directory, install dependencies, and start the development server:

cd backend
bun install
bun run dev

The backend API will typically be running on http://localhost:3000. API documentation (Swagger UI) will be available at http://localhost:3000/api/docs.

2. Frontend Setup

In a new terminal window, navigate to the frontend directory, install dependencies, and start the development server:

cd frontend
bun install
bun run dev

The frontend development server will typically start on http://localhost:5173 (Vite's default). Open this URL in your browser to see the website.

The frontend is configured to proxy API requests from /api to the backend server running on http://localhost:3000.

Development

• Backend: The backend uses bun run --watch src/index.ts for bun run dev, so changes to backend files will automatically restart the server.
• Frontend: The Vite development server provides Hot Module Replacement (HMR) for a fast development experience.

Building for Production

• Frontend:

  cd frontend
  bun run build

  This will create a dist folder in the frontend directory with the static assets.

• Backend: The backend runs TypeScript files directly with Bun. For a production deployment, you would typically run bun src/index.ts (as configured in the backend/Containerfile).

Containerization

Containerfile definitions are provided in both the frontend and backend directories, specifically designed for building and running container images using Podman.

• The frontend Containerfile builds the static assets, which are intended to be served by a web server.
• The backend Containerfile sets up a production-ready environment to run the ElysiaJS API.

This project is structured to be deployed with Podman, potentially alongside other web applications on a server. A separate deployment script (not included in this repository) is used to automate the build and deployment process for all services.

Refer to the individual Containerfiles for build specifics. For orchestration, you might use Podman's kube play functionality with Kubernetes YAML definitions, or custom Podman commands managed by your deployment script.

---

Thank you for checking out my personal website's codebase!