dylanlangston.com

The source code for my personal website. 🚧 Currently under construction. 🚧

Overview 👀

My personal website is built with a modern tech stack to ensure performance and flexibility. It utilizes the following technologies:

• 🇿 Zig and 🎮 raylib for client-side rendering.
• 🌐 Emscripten for compiling to 🕸️ WebAssembly.
• 🛠️ Binaryen for optimizing WebAssembly.
• 🦀 Rust for backend logic utilizing 🔢 AWS Lambda.
• 🐍 Python for additional backend logic utilizing AWS Lambda.
• 🧠 Gemini API for accessing to Google's Gemini generative AI models.
• 🖥️ Svelte for building interactive user interfaces.
• 📝 TypeScript for improving JavaScript code reliability and developer efficiency.
• 🎨 TailwindCSS for styling components with utility-first CSS.
• 🚀 Vite for fast development and optimized production builds.
• Hosted on 🌍 AWS S3 and distributed globally via ☁️ AWS CloudFront for high availability and scalability.
• 📦 SAM CLI for deploying serverless applications.

flowchart TB
    subgraph "Frontend - Static Site"
        direction LR
        S1("Svelte")
        S2("Typescript")
        S3("Tailwindcss")
        S4("Vite")
        S5("AWS S3")
        S6("AWS CloudFront")

        subgraph "HTML 5 Canvas"
            direction LR
            A1("Zig")
            A2("Raylib")
            A3(Emscripten)
            A4("Binaryen")
            A1 -.C Interop.- A2 -.- A3
            A1 -.WebAssembly.- A3
            A3 ==Optimize==> A4
        end

        S3 -.- S1 -.- S2 -.- S3 -.- subGraph0 -.- S2
        S1 -.- subGraph0
        S1 & S2 & S3 & subGraph0 --Bundle--> S4 ==Hosting==> S5 ==CDN==> S6
    end

    subgraph "Rust Backend - API"
        direction LR
        I1("Rust")
        I2("Cargo Lambda")
        I3("AWS Lambda")
        I4("AWS API Gateway")
        I5("AWS SES")

        I1 -.- I2 -.- I3 --> I4
        I3 -.- I5 -.- I2
    end

    subgraph "Python Backend - API"
        direction LR
        P1("Python")
        P2("Gemini API")
        P3("AWS Lambda")
        P4("AWS API Gateway")

        P1 -.- P2 -.- P3 --> P4
    end

	subGraph1 <-..-> subGraph2
	subGraph1 <-..-> subGraph3
	

Build Process 🏗️

The build process for my personal website involves the following steps:

1. Development Environment Setup: Use Docker for consistent environment setup across different machines. GitHub Actions can be integrated for automation.
2. Code Compilation: Utilize Rust for server-side code and Zig/Emscripten along with Svelte/TypeScript for client-side code.
3. Optimization: Optimize compiled assets for production using Binaryen and Vite to ensure minimal file sizes and optimal performance.
4. Deployment: Deploy optimized assets to AWS S3 and configure CloudFront for global content distribution using SAM CLI.

flowchart LR
	B1("Makefile")
	

	B7("Docker")
	B8("Github Actions")
	B9("AWS SAM CLI")
    subgraph "HTML 5 Canvas"
        B2("Zig")
        B3("Emscripten")
    end
    subgraph "Static Site"
        B12("Svelte")
        B13("TypeScript")
        B5("NodeJS/Bun")
        B6("Vite")
        B4("Binaryen")
    end
    subgraph "Rust API"
        B10("rust")
        B11("cargo")
    end
    subgraph "Python API"
        B14("python")
        B15("zip")
    end


    B2 -.- B3
    B5 -.- B6 -.- B4
    B10 -.- B11
    B13 -.- B12
    B14 -.- B15
    B5 -.- B12
    B13 -.- B5

    B1 --Build--> subGraph0 --Build--> subGraph1 --Build--> subGraph2 --Build--> subGraph3 --Release--> B9
    B8 --Dev Container--> B7 --Setup--> B1
    B8 ~~~ B9
    B8 ~~~ B1
    B8 ~~~ subGraph0

Dev Environment 💻

This repository includes a devcontainer.json to get up and running quickly with a full-featured development environment in the cloud!¹

Credits 🙌

The website design and development is the singular effort of @dylanlangston. Closed for contributions but feel free to fork or open an issue if you have a question!

License 📜

This repo is licensed under the MIT License. See the LICENSE file for details.

Footnotes

1. For local development check out Dev Containers and DevPod. ↩