Bump footer version

Bump nanoid from 3.3.7 to 3.3.8 in /src

.caddy/Caddyfile

@@ -0,0 +1,5 @@
+timmypidashev.dev {
+  tls pidashev.tim@gmail.com
+
+	reverse_proxy 127.0.0.1:3000
+}

.caddy/Caddyfile.dev

@@ -0,0 +1,5 @@
+timmypidashev.local {
+  tls internal
+
+	reverse_proxy web:4321
+}

.docker/Dockerfile.dev

@@ -0,0 +1,27 @@
+FROM node:22-alpine
+
+ARG CONTAINER_WEB_VERSION
+ARG ENVIRONMENT
+ARG BUILD_DATE
+ARG GIT_COMMIT
+
+RUN set -eux \
+    & apk add \
+        --no-cache \
+        nodejs \
+        curl
+
+RUN curl -L https://unpkg.com/@pnpm/self-installer | node
+
+WORKDIR /app
+
+COPY . .
+
+RUN echo "PUBLIC_VERSION=${CONTAINER_WEB_VERSION}" > /app/.env && \
+    echo "PUBLIC_ENVIRONMENT=${ENVIRONMENT}" >> /app/.env && \
+    echo "PUBLIC_BUILD_DATE=${BUILD_DATE}" >> /app/.env && \
+    echo "PUBLIC_GIT_COMMIT=${GIT_COMMIT}" >> /app/.env
+
+EXPOSE 3000
+
+CMD ["pnpm", "install", "&&", "pnpm", "run", "dev"]

.docker/Dockerfile.release

@@ -0,0 +1,45 @@
+# Stage 1: Build and install dependencies
+FROM node:22-alpine AS builder
+WORKDIR /app
+
+# Install necessary dependencies, including pnpm
+RUN set -eux \
+    && apk add --no-cache nodejs curl \
+    && npm install -g pnpm
+
+# Copy package files first (for better caching)
+COPY package.json pnpm-lock.yaml ./
+
+# Install dependencies
+RUN pnpm install --frozen-lockfile
+
+# Now copy the rest of your source code
+COPY . .
+
+# Set build arguments
+ARG CONTAINER_WEB_VERSION
+ARG ENVIRONMENT
+ARG BUILD_DATE
+ARG GIT_COMMIT
+
+# Create .env file with build-time environment variables
+RUN echo "PUBLIC_VERSION=${CONTAINER_WEB_VERSION}" > /app/.env && \
+    echo "PUBLIC_ENVIRONMENT=${ENVIRONMENT}" >> /app/.env && \
+    echo "PUBLIC_BUILD_DATE=${BUILD_DATE}" >> /app/.env && \
+    echo "PUBLIC_GIT_COMMIT=${GIT_COMMIT}" >> /app/.env
+
+# Build the project
+RUN pnpm run build
+
+# Stage 2: Serve static files
+FROM node:22-alpine
+WORKDIR /app
+
+# Install serve
+RUN npm install -g serve
+
+# Copy built files
+COPY --from=builder /app/dist ./dist
+
+EXPOSE 3000
+CMD ["serve", "-s", "dist", "-l", "3000"]

.github/scripts/deploy_release.sh

@@ -0,0 +1,83 @@
+#!/bin/sh
+
+# Set variables
+BRANCH_NAME="$1"
+COMMIT_HASH="$2"
+GHCR_USERNAME="$3"
+GHCR_TOKEN="$4"
+DEPLOY_TYPE="$5"
+REPO_OWNER="$6"
+COMPOSE_FILE="$7"
+CADDYFILE="$8"
+MAKEFILE="$9"
+
+# Echo out variable names and their content on single lines
+echo "BRANCH_NAME: $BRANCH_NAME"
+echo "COMMIT_HASH: $COMMIT_HASH"
+echo "GHCR_USERNAME: $GHCR_USERNAME"
+echo "DEPLOY_TYPE: $DEPLOY_TYPE"
+echo "REPO_OWNER: $REPO_OWNER"
+echo "COMPOSE_FILE: $COMPOSE_FILE"
+echo "CADDYFILE: $CADDYFILE"
+echo "MAKEFILE: $MAKEFILE"
+
+# Set the staging directory
+STAGING_DIR="/root/deployments/.staging-${COMMIT_HASH}"
+
+# Set the tmux session name for release
+TMUX_SESSION="deployment-release"
+
+# Function to cleanup existing release deployment
+cleanup_release_deployment() {
+    echo "Cleaning up existing release deployment..."
+    # Stop and remove all release containers
+    docker-compose -f "/root/deployments/release/docker-compose.yml" down -v 2>/dev/null
+    # Remove release images
+    docker rmi $(docker images "ghcr.io/$REPO_OWNER/*:release" -q) 2>/dev/null
+    # Kill release tmux session if it exists
+    tmux kill-session -t "$TMUX_SESSION" 2>/dev/null
+    # Remove release deployment directory
+    rm -rf /root/deployments/release
+}
+
+# Function to create deployment directory
+create_deployment_directory() {
+    echo "Creating deployment directory..."
+    mkdir -p /root/deployments/release
+}
+
+# Function to pull Docker images
+pull_docker_images() {
+    echo "Pulling Docker images..."
+    docker pull ghcr.io/$REPO_OWNER/web:release
+}
+
+# Function to copy and prepare files
+copy_and_prepare_files() {
+    echo "Copying and preparing files..."
+    # Copy files preserving names and locations
+    install -D "$STAGING_DIR/$COMPOSE_FILE" "/root/deployments/release/$COMPOSE_FILE"
+    install -D "$STAGING_DIR/$CADDYFILE" "/root/deployments/release/$CADDYFILE"
+    install -D "$STAGING_DIR/$MAKEFILE" "/root/deployments/release/$MAKEFILE"
+    # Replace {$COMMIT_HASH} with $COMMIT_HASH in $CADDYFILE
+    sed -i "s/{\$COMMIT_HASH}/$COMMIT_HASH/g" "/root/deployments/release/$CADDYFILE"
+    # Replace {commit_hash} with $COMMIT_HASH in $COMPOSE_FILE
+    sed -i "s/{commit_hash}/$COMMIT_HASH/g" "/root/deployments/release/$COMPOSE_FILE"
+}
+
+# Function to start the deployment
+start_deployment() {
+    echo "Starting deployment..."
+    # Create new tmux session with specific name
+    tmux new-session -d -s "$TMUX_SESSION"
+    tmux send-keys -t "$TMUX_SESSION" "cd /root/deployments/release && make run release" Enter
+}
+
+# Main execution
+cleanup_release_deployment
+create_deployment_directory
+copy_and_prepare_files
+cd "/root/deployments/release"
+pull_docker_images
+start_deployment
+echo "Release build $COMMIT_HASH deployed successfully!"

.gitignore

@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# astro
+.astro/
+
+# dependencies
+node_modules/
+/.pnp
+.pnpm-store
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+.next/
+/out/
+
+# production
+/build
+dist/
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

LICENSE

@@ -0,0 +1,19 @@
+MIT License
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

Makefile

@@ -0,0 +1,266 @@
+PROJECT_NAME							:= "timmypidashev.dev"
+PROJECT_AUTHORS 						:= "Timothy Pidashev (timmypidashev) <pidashev.tim@gmail.com>"
+PROJECT_VERSION 						:= "v1.0.1"
+PROJECT_LICENSE 						:= "MIT"
+PROJECT_SOURCES							:= "https://github.com/timmypidashev/web"
+PROJECT_REGISTRY						:= "ghcr.io/timmypidashev/web"
+PROJECT_ORGANIZATION					:= "org.opencontainers"
+
+CONTAINER_WEB_NAME						:= "web"
+CONTAINER_WEB_VERSION					:= "v1.0.1"
+CONTAINER_WEB_LOCATION					:= "src/"
+CONTAINER_WEB_DESCRIPTION				:= "My portfolio website!"
+
+.DEFAULT_GOAL := help
+.PHONY: watch run build push prune bump exec
+.SILENT: watch run build push prune bump exec
+
+help:
+	@echo "Available targets:"
+	@echo "  run           - Runs the docker compose file with the specified environment (local, dev, preview, or release)"
+	@echo "  build         - Builds the specified docker image with the appropriate environment"
+	@echo "  push          - Pushes the built docker image to the registry"
+	@echo "  pull					 - Pulls the latest specified docker image from the registry"
+	@echo "  prune         - Removes all built and cached docker images and containers"
+	@echo "  bump          - Bumps the project and container versions"
+	@echo "  exec          - Spawns a shell to execute commands from within a running container"
+
+build:
+	# Arguments
+	# [container]: Build context(which container to build ['all' to build every container defined])
+	# [environment]: 'local', 'dev', 'preview', or 'release'
+	#
+	# Explanation:
+	# * Builds the specified docker image with the appropriate environment.
+	# * Passes all generated arguments to docker build-kit.
+	# * Installs pre-commit hooks if in a git repository.
+	
+	# Install pre-commit hooks if in a git repository.
+	$(call install_precommit)
+	
+	# Extract container and environment inputted.
+	$(eval INPUT_TARGET := $(word 2,$(MAKECMDGOALS)))
+	$(eval INPUT_CONTAINER := $(firstword $(subst :, ,$(INPUT_TARGET))))
+	$(eval INPUT_ENVIRONMENT := $(lastword $(subst :, ,$(INPUT_TARGET))))
+
+	# Call function container_build either through a for loop for each container 
+	# if all is called, or singularly to build the container.
+	$(if $(filter $(strip $(INPUT_CONTAINER)),all), \
+		$(foreach container,$(containers),$(call container_build,$(container) $(INPUT_ENVIRONMENT))), \
+		$(call container_build,$(INPUT_CONTAINER) $(INPUT_ENVIRONMENT)))
+
+run:
+	# Arguments:
+	# [environment]: 'local', 'dev', 'preview', or 'release'
+	# 
+	# Explanation:
+	# * Runs the docker compose file with the specified environment(compose.local.yml, compose.dev.yml, compose.preview.yml, or compose.release.yml)
+	# * Passes all generated arguments to the compose file.
+	# * Installs pre-commit hooks if in a git repository.
+	
+	# Install pre-commit hooks if in a git repository.
+	$(call install_precommit)
+
+	# Make sure we have been given proper arguments.
+	@if [ "$(word 2,$(MAKECMDGOALS))" = "local" ]; then \
+		echo "Running in local environment"; \
+		docker compose -f compose.$(word 2,$(MAKECMDGOALS)).yml up --watch --remove-orphans; \
+	elif [ "$(word 2,$(MAKECMDGOALS))" = "preview" ]; then \
+		echo "Running in preview environment"; \
+		docker compose -f compose.$(word 2,$(MAKECMDGOALS)).yml up --remove-orphans; \
+	elif [ "$(word 2,$(MAKECMDGOALS))" = "release" ]; then \
+		echo "Running in release environment"; \
+		docker compose -f compose.$(word 2,$(MAKECMDGOALS)).yml up --remove-orphans; \
+	else \
+		echo "Invalid usage. Please use 'make run <'local', 'dev', 'preview', or 'release'>"; \
+		exit 1; \
+	fi 
+
+push:
+	# Arguments
+	# [container]: Push context(which container to push to the registry)
+	# [version]: Container version to push.
+	#
+	# Explanation:
+	# * Pushes the specified container version to the registry defined in the user configuration.
+	
+	# Extract container and version inputted.
+	$(eval INPUT_TARGET := $(word 2,$(MAKECMDGOALS)))
+	$(eval INPUT_CONTAINER := $(firstword $(subst :, ,$(INPUT_TARGET))))
+	$(eval INPUT_VERSION := $(lastword $(subst :, ,$(INPUT_TARGET))))
+	
+	# Push the specified container version to the registry.
+	# NOTE: docker will complain if the container tag is invalid, no need to validate here.
+	@docker push $(PROJECT_REGISTRY)/$(INPUT_CONTAINER):$(INPUT_VERSION)
+
+pull:
+	# TODO: FIX COMMAND PULL
+	# Arguments
+	# [container]: Pull context (which container to pull from the registry)
+	# [environment]: 'local', 'dev', 'preview', or 'release'
+	#
+	# Explanation:
+	# * Pulls the specified container version from the registry defined in the user configuration.
+	# * Uses sed and basename to extract the repository name.
+	
+	# Extract container and environment inputted.
+	$(eval INPUT_TARGET := $(word 2,$(MAKECMDGOALS)))
+	$(eval INPUT_CONTAINER := $(firstword $(subst :, ,$(INPUT_TARGET))))
+	$(eval INPUT_ENVIRONMENT := $(lastword $(subst :, ,$(INPUT_TARGET))))
+	
+	# Validate environment
+	@if [ "$(strip $(INPUT_ENVIRONMENT))" != "local" ] [ "$(strip $(INPUT_ENVIRONMENT))" != "dev" ] && [ "$(strip $(INPUT_ENVIRONMENT))" != "preview" ] && [ "$(strip $(INPUT_ENVIRONMENT))" != "release" ]; then \
+			echo "Invalid environment. Please specify 'local', 'dev', 'preview', or 'release'"; \
+			exit 1; \
+	fi
+	
+	# Extract repository name from PROJECT_SOURCES using sed and basename
+	$(eval REPO_NAME := $(shell echo "$(PROJECT_SOURCES)" | sed 's|https://github.com/[^/]*/||' | sed 's/\.git$$//' | xargs basename))
+	
+	# Determine the correct tag based on the environment and container
+	$(eval TAG := $(if $(filter $(INPUT_ENVIRONMENT),local),\
+									 $(INPUT_CONTAINER):$(INPUT_ENVIRONMENT),\
+								 $(if $(filter $(INPUT_CONTAINER),$(REPO_NAME)),\
+									 $(PROJECT_REGISTRY):$(if $(filter $(INPUT_ENVIRONMENT),prev),prev,$(call container_version,$(INPUT_CONTAINER))),\
+									 $(PROJECT_REGISTRY)/$(INPUT_CONTAINER):$(if $(filter $(INPUT_ENVIRONMENT),prev),prev,$(call container_version,$(INPUT_CONTAINER))))))
+	
+	# Pull the specified container from the registry
+	@echo "Pulling container: $(INPUT_CONTAINER)"
+	@echo "Environment: $(INPUT_ENVIRONMENT)"
+	@echo "Tag: $(TAG)"
+	@docker pull $(TAG)
+
+prune:
+	# TODO: IMPLEMENT COMMAND PRUNE
+	# Removes all built and cached docker images and containers.
+
+bump:
+	# Arguments
+	# [container]: Bump context(which container version to bump)
+	# [semantic_type]: Semantic type context(major, minor, patch)
+	#
+	# Explanation:
+	# * Bumps the specified container version within the makefile config and the container's package.json.
+	# * Bumps the global project version in the makefile, and creates a new git tag with said version.
+	
+	# Extract container and semantic_type inputted.
+	$(eval INPUT_TARGET := $(word 2,$(MAKECMDGOALS)))
+	$(eval INPUT_CONTAINER := $(firstword $(subst :, ,$(INPUT_TARGET))))
+	$(eval INPUT_SEMANTIC_TYPE := $(lastword $(subst :, ,$(INPUT_TARGET))))
+	
+	# Extract old container and project versions.
+	$(eval OLD_CONTAINER_VERSION := $(subst v,,$(CONTAINER_$(shell echo $(INPUT_CONTAINER) | tr a-z A-Z)_VERSION)))
+	$(eval OLD_PROJECT_VERSION := $(subst v,,$(PROJECT_VERSION)))
+
+	# Pull docker semver becsause the normal command doesn't seem to work; also we don't need to worry about dependencies.
+	docker pull usvc/semver:latest
+
+	# Bump npm package.json file for selected container
+	cd $(call container_location,$(INPUT_CONTAINER)) && npm version $(shell docker run usvc/semver:latest bump $(INPUT_SEMANTIC_TYPE) $(OLD_CONTAINER_VERSION))
+
+	# Bump the git tag to match the new global version
+	git tag v$(shell docker run usvc/semver:latest bump $(INPUT_SEMANTIC_TYPE) $(OLD_PROJECT_VERSION))
+	
+	# Bump the container version and global version in the Makefile
+	perl -pi -e 's/^PROJECT_VERSION\s*:=\s*\K.*/"v$(shell docker run usvc/semver:latest bump $(INPUT_SEMANTIC_TYPE) $(OLD_PROJECT_VERSION))"/ if /^PROJECT_VERSION\s*:=/' Makefile;
+	perl -pi -e 's/^CONTAINER_$(shell echo $(INPUT_CONTAINER) | tr a-z A-Z)_VERSION\s*:=\s*\K.*/"v$(shell docker run usvc/semver:latest bump $(INPUT_SEMANTIC_TYPE) $(OLD_CONTAINER_VERSION))"/ if /^CONTAINER_$(shell echo $(INPUT_CONTAINER) | tr a-z A-Z)_VERSION\s*:=/' Makefile;
+
+	# Commit and push to git origin
+	git add .
+	git commit -a -S -m "Bump $(INPUT_CONTAINER) to v$(shell docker run usvc/semver:latest bump $(INPUT_SEMANTIC_TYPE) $(OLD_PROJECT_VERSION))"
+	git push
+	git push origin tag v$(shell docker run usvc/semver:latest bump $(INPUT_SEMANTIC_TYPE) $(OLD_PROJECT_VERSION))
+
+exec:
+	# Extract container and environment inputted.
+	$(eval INPUT_TARGET := $(word 2,$(MAKECMDGOALS)))
+	$(eval INPUT_CONTAINER := $(firstword $(subst :, ,$(INPUT_TARGET))))
+	$(eval INPUT_ENVIRONMENT := $(lastword $(subst :, ,$(INPUT_TARGET))))
+	$(eval COMPOSE_FILE := compose.$(INPUT_ENVIRONMENT).yml)
+	
+	docker compose -f $(COMPOSE_FILE) run --service-ports $(INPUT_CONTAINER) sh
+
+# This function generates Docker build arguments based on variables defined in the Makefile.
+# It extracts variable assignments, removes whitespace, and formats them as build arguments.
+# Additionally, it appends any custom shell generated arguments defined below.
+define args
+    $(shell \
+        grep -E '^[[:alnum:]_]+[[:space:]]*[:?]?[[:space:]]*=' $(MAKEFILE_LIST) | \
+        awk 'BEGIN {FS = ":="} { \
+            gsub(/^[[:space:]]+|[[:space:]]+$$/, "", $$2); \
+            gsub(/^/, "\x27", $$2); \
+            gsub(/$$/, "\x27", $$2); \
+            gsub(/[[:space:]]+/, "", $$1); \
+            gsub(":", "", $$1); \
+            printf "--build-arg %s=%s ", $$1, $$2 \
+        }') \
+				--build-arg ENVIRONMENT='"$(shell echo $(INPUT_ENVIRONMENT))"' \
+        --build-arg BUILD_DATE='"$(shell date)"' \
+		--build-arg GIT_COMMIT='"$(shell git rev-parse HEAD)"'
+endef
+
+# This function generates labels based on variables defined in the Makefile.
+# It extracts only the selected container variables and is used to echo this information
+# to the docker buildx engine in the command line.
+define labels
+	--label $(PROJECT_ORGANIZATION).image.title=$(CONTAINER_$(1)_NAME) \
+	--label $(PROJECT_ORGANIZATION).image.description=$(CONTAINER_$(1)_DESCRIPTION) \
+	--label $(PROJECT_ORGANIZATION).image.authors=$(PROJECT_AUTHORS) \
+	--label $(PROJECT_ORGANIZATION).image.url=$(PROJECT_SOURCES) \
+	--label $(PROJECT_ORGANIZATION).image.source=$(PROJECT_SOURCES)/$(CONTAINER_$(1)_LOCATION)
+endef
+
+# This function returns a list of container names defined in the Makefile.
+# In order for this function to return a container, it needs to have this format: CONTAINER_%_NAME!
+define containers
+    $(strip $(filter-out $(_NL),$(foreach var,$(.VARIABLES),$(if $(filter CONTAINER_%_NAME,$(var)),$(strip $($(var)))))))
+endef
+
+define container_build
+	$(eval CONTAINER := $(word 1,$1))
+	$(eval ENVIRONMENT := $(word 2,$1))
+	$(eval ARGS := $(shell echo $(args)))
+	$(eval VERSION := $(strip $(call container_version,$(CONTAINER))))
+	$(eval PROJECT := $(strip $(subst ",,$(PROJECT_NAME))))
+	$(eval TAG := $(PROJECT).$(CONTAINER):$(ENVIRONMENT))
+
+	@echo "Building container: $(CONTAINER)"
+	@echo "Environment: $(ENVIRONMENT)"
+	@echo "Version: $(VERSION)"
+
+	@if [ "$(strip $(ENVIRONMENT))" != "local" ] && [ "$(strip $(ENVIRONMENT))" != "dev" ] && [ "$(strip $(ENVIRONMENT))" != "preview" ] && [ "$(strip $(ENVIRONMENT))" != "release" ]; then \
+        echo "Invalid environment. Please specify 'local', 'dev', 'preview', or 'release'"; \
+        exit 1; \
+    fi
+	
+	docker buildx build --no-cache --load -t $(TAG) -f .docker/Dockerfile.$(ENVIRONMENT) ./$(strip $(subst $(SPACE),,$(call container_location,$(CONTAINER))))/. $(ARGS) $(call labels,$(shell echo $(CONTAINER_NAME) | tr '[:lower:]' '[:upper:]')) --debug
+endef
+
+define container_location
+    $(strip $(eval CONTAINER_NAME := $(shell echo $(1) | tr '[:lower:]' '[:upper:]'))) \
+    $(CONTAINER_$(CONTAINER_NAME)_LOCATION)
+endef
+
+define container_name
+		$(strip $(shell echo '$(1)' | tr '[:upper:]' '[:lower:]' | tr -d '[:space:]'))
+endef
+
+define container_version
+	$(strip $(eval CONTAINER_NAME := $(shell echo $(1) | tr '[:lower:]' '[:upper:]'))) \
+	$(if $(CONTAINER_$(CONTAINER_NAME)_VERSION), \
+		$(shell echo $(strip $(strip $(CONTAINER_$(CONTAINER_NAME)_VERSION))) | tr -d '[:space:]'), \
+		$(error Version data for container $(1) not found))
+endef
+
+define install_precommit
+	$(strip \
+		$(shell \
+			if git rev-parse --is-inside-work-tree > /dev/null 2>&1; then \
+				pre-commit install > /dev/null 2>&1; \
+			fi \
+		) \
+	)
+endef
+
+%:
+	@:

README.md

@@ -1,2 +1 @@
-# Portfolio
-My portfolio website!
+<img src=".github/preview.jpeg" title="Preview"/>

blog.html

@@ -1,58 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-    <title>Blog</title>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta name="Timothy Pidashev" content="A 17-year-old on an epic journey to become a software developer!" />
-    <meta name="keywords" content="Timothy Pidashev, timmypidashev, timmy, programming, github" />
-    <link rel="shortcut icon" type="image/png" href="images/elements/png/timmy.png"/>
-    <link rel="stylesheet" href="css/styles.css">
-    <link rel="preconnect" href="https://fonts.gstatic.com">
-    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
-</head>
-<body>
-    <!-- Overlay -->
-    <div id="myNav" class="overlay">
-        <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
-        <div class="overlay-content">
-          <a href="download.html">Download YT</a>
-        </div>
-      </div>
-    
-    <!-- Navbar -->
-    <div class="header">
-        <a href="#default" class="logo" data-aos="zoom-in">Timmy</a>
-        <div class="header-right">
-          <a href="index.html" data-aos="zoom-in">About</a>
-          <a class="active" href="blog.html" data-aos="zoom-in" data-aos="zoom-in">Blog</a>
-          <a href="projects.html" data-aos="zoom-in">Projects</a>
-          <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; </span>
-        </div>
-    </div>
-    
-    <!-- Content -->
-    <!-- Section -->
-    <section class="centered">
-        <div>
-            <h1 class="hero__header" data-aos="flip-down">Work In Progress</h1>
-        </div>
-        <img src="images/elements/png/line_short.png" alt="line" class="divider__line" data-aos="flip-left">
-    </section>
-
-    <!-- JS -->
-    <script src="js/closeNav.js"></script>
-    <script src="js/openNav.js"></script>
-    <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
-    <script>AOS.init(
-        {
-            once: false,
-            mirror: true,
-            anchorPlacement: 'top-bottom',
-            offset: 0,
-            duration: 800
-        });</script>
-
-</body>
-</html>

compose.dev.yml

@@ -0,0 +1,35 @@
+services:
+  caddy:
+    container_name: proxy
+    image: caddy:latest
+    ports:
+      - 80:80
+      - 443:443
+    volumes:
+      - ./.caddy/Caddyfile.dev:/etc/caddy/Caddyfile:rw
+    networks:
+      - web_proxy
+    depends_on:
+      - web
+
+  web:
+    container_name: web
+    image: web:dev
+    volumes:
+      - ./src/node_modules:/app/node_modules
+      - ./src/sandbox.config.json:/app/sandbox.config.json
+      - ./src/.stackblitzrc:/app/.stackblitzrc
+      - ./src/astro.config.mjs:/app/astro.config.mjs
+      - ./src/tailwind.config.cjs:/app/tailwind.config.cjs
+      - ./src/tsconfig.json:/app/tsconfig.json
+      - ./src/pnpm-lock.yaml:/app/pnpm-lock.yaml
+      - ./src/package.json:/app/package.json
+      - ./src/public:/app/public
+      - ./src/src:/app/src
+    networks:
+      - web_proxy
+
+networks:
+  web_proxy:
+    name: web_proxy
+    external: true

compose.release.yml

@@ -0,0 +1,24 @@
+services:
+  caddy:
+    container_name: proxy
+    image: caddy:latest
+    ports:
+      - 80:80
+      - 443:443
+    volumes:
+      - ./.caddy/Caddyfile.dev:/etc/caddy/Caddyfile:rw
+    networks:
+      - proxy_network
+    depends_on:
+      - release.timmypidashev.dev
+
+  release.timmypidashev.dev:
+    container_name: timmypidashev
+    image: ghcr.io/timmypidashev/timmypidashev.dev:release
+    networks:
+      - proxy_network
+
+networks:
+  proxy_network:
+    name: proxy_network
+    external: true

css/styles.css

@@ -1,188 +0,0 @@
-* {
-    padding: 0;
-    margin: 0;
-    box-sizing: border-box;
-}
-
-/* Navbar */
-.header {
-    overflow: hidden;
-    background-color: #FB93DA;
-    padding: 20px 10px;
-  }
-  
-  .header a {
-    float: left;
-    color: #404082;
-    text-shadow: 3px 2px 2px rgba(199, 130, 59, 0.15);
-    text-align: center;
-    padding: 12px;
-    text-decoration: none;
-    font-size: 18px; 
-    line-height: 25px;
-    border-radius: 4px;
-  }
-  
-  .header a.logo {
-    font-size: 25px;
-    font-weight: bold;
-  }
-  
-  .header a:hover {
-    background-color: #D26BB9;
-    color: black;
-  }
-  
-  .header a.active {
-    background-color: #404082;
-    color: white;
-  }
-  
-  .header-right {
-    float: right;
-  }
-
-/* Overlay */
-.overlay {
-    height: 100%;
-    width: 0;
-    position: fixed;
-    z-index: 1;
-    top: 0;
-    left: 0;
-    background-color: rgb(0,0,0);
-    background-color: rgba(0,0,0, 0.9);
-    overflow-x: hidden;
-    transition: 0.5s;
-  }
-  
-  .overlay-content {
-    position: relative;
-    top: 25%;
-    width: 100%;
-    text-align: center;
-    margin-top: 30px;
-  }
-  
-  .overlay a {
-    padding: 8px;
-    text-decoration: none;
-    font-size: 36px;
-    color: #818181;
-    display: block;
-    transition: 0.3s;
-  }
-  
-  .overlay a:hover, .overlay a:focus {
-    color: #f1f1f1;
-  }
-  
-  .overlay .closebtn {
-    position: absolute;
-    top: 20px;
-    right: 45px;
-    font-size: 60px;
-  }
-
-/* Style */
-html {
-    background-color: #FB93DA;
-    color: #404082;
-    font-family: 'Montserrat', sans-serif;
-    font-weight: 400;
-    font-size: 1vh;
-    text-shadow: 3px 2px 2px rgba(199, 130, 59, 0.15);
-    -ms-overflow-style: none;  /* Hide scrollbar for Internet Explorer and Edge */
-    scrollbar-width: none;  /* Hide scrollbar for Firefox */
-    scroll-behavior: smooth;
-    }
-
-    /* Hide scrollbar for Chrome, Safari and Opera */
-    .html::-webkit-scrollbar {
-        display: none;
-    }
-
-#end__of__page {
-    margin-bottom: -30vh;
-} 
-
-.centered {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    min-height: 100vh;
-}
-
-.row {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-}
-
-.pink__colored {
-    color: #D26BB9;
-}
-
-.orange__highlight {
-    background-color: #D26BB9;
-    border-radius: 20px;
-    line-height: 1.5;
-    padding-right: 0.9vw;
-    padding-left: 0.9vw;
-    font-weight: 520;
-    text-shadow: none;
-    box-shadow: 3px 2px 2px rgba(199, 130, 59, 0.15);
-}
-
-.hero__header {
-    font-size: 6vw;
-    font-weight: 400;
-}
-
-.divider__line {
-    height: 4vw;
-}
-
-.about__header {
-    font-size: 3vw;
-    font-weight: 400;
-}
-
-.logo {
-    transition: all 0.2s ease-in-out;
-}
-
-.logo:hover {
-    transform: scale(1.1);
-    cursor: pointer;
-}
-
-.logo__image {
-    margin-left: 2vw;
-    margin-right: 2vw;
-    width: 10vw;
-}
-
-@media only screen and (max-width: 1024px) {
-    .hero__header {
-        font-size: 12vw;
-        font-weight: 400;
-    }
-
-    .about__header {
-        font-size: 5vw;
-        font-weight: 400;
-    }
-
-    .divider__line {
-        height: 8vw;
-    }
-
-    .logo__image {
-        margin-left: 2vw;
-        margin-right: 2vw;
-        width: 14vw;
-    }
-}

download.html

@@ -1,58 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-    <title>Download YT</title>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta name="Timothy Pidashev" content="A 17-year-old on an epic journey to become a software developer!" />
-    <meta name="keywords" content="Timothy Pidashev, timmypidashev, timmy, programming, github" />
-    <link rel="shortcut icon" type="image/png" href="images/elements/png/timmy.png"/>
-    <link rel="stylesheet" href="css/styles.css">
-    <link rel="preconnect" href="https://fonts.gstatic.com">
-    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
-</head>
-<body>
-    <!-- Overlay -->
-    <div id="myNav" class="overlay">
-        <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
-        <div class="overlay-content">
-          <a href="download.html">Download YT</a>
-        </div>
-      </div>
-    
-    <!-- Navbar -->
-    <div class="header">
-        <a href="#default" class="logo" data-aos="zoom-in">Timmy</a>
-        <div class="header-right">
-          <a href="index.html" data-aos="zoom-in">About</a>
-          <a href="blog.html" data-aos="zoom-in" data-aos="zoom-in">Blog</a>
-          <a href="projects.html" data-aos="zoom-in">Projects</a>
-          <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; </span>
-        </div>
-    </div>
-    
-    <!-- Content -->
-    <!-- Section -->
-    <section class="centered">
-        <div>
-            <h1 class="hero__header" data-aos="flip-down">Work In Progress</h1>
-        </div>
-        <img src="images/elements/png/line_short.png" alt="line" class="divider__line" data-aos="flip-left">
-    </section>
-    
-    <!-- JS -->
-    <script src="js/closeNav.js"></script>
-    <script src="js/openNav.js"></script>
-    <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
-    <script>AOS.init(
-        {
-            once: false,
-            mirror: true,
-            anchorPlacement: 'top-bottom',
-            offset: 0,
-            duration: 800
-        });</script>
-
-</body>
-</html>

index.html

@@ -1,108 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-    <title>Timothy Pidashev</title>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta name="Timothy Pidashev" content="A 17-year-old on an epic journey to become a software developer!" />
-    <meta name="keywords" content="Timothy Pidashev, timmypidashev, timmy, programming, github" />
-    <link rel="shortcut icon" type="image/png" href="images/elements/png/timmy.png"/>
-    <link rel="stylesheet" href="css/styles.css">
-    <link rel="preconnect" href="https://fonts.gstatic.com">
-    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
-</head>
-<body>
-    <!-- Overlay -->
-    <div id="myNav" class="overlay">
-        <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
-        <div class="overlay-content">
-          <a href="download.html">Download YT</a>
-        </div>
-      </div>
-    
-    <!-- Navbar -->
-    <div class="header">
-        <a href="#default" class="logo" data-aos="zoom-in">Timmy</a>
-        <div class="header-right">
-          <a class="active" href="index.html" data-aos="zoom-in">About</a>
-          <a href="blog.html" data-aos="zoom-in" data-aos="zoom-in">Blog</a>
-          <a href="projects.html" data-aos="zoom-in">Projects</a>
-          <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; </span>
-        </div>
-    </div>
-    
-    <!-- Content -->
-    <section class="centered">
-        <div>
-            <h1 class="hero__header pink__colored" data-aos="fade-right">Hello, Im</h1>
-            <h1 class="hero__header" data-aos="flip-down">Timothy</h1>
-            <h1 class="hero__header" data-aos="fade-left">Pidashev</h1>
-        </div>
-        <img src="images/elements/png/line_short.png" alt="line" class="divider__line" data-aos="flip-left">
-    </section>
-    <section class="centered">
-        <div>
-            <h1 class="about__header" data-aos="zoom-out">
-                I'm a 17-year-old on an
-                <span class="orange__highlight">epic journey</span>
-            </h1>
-            <h1 class="about__header" data-aos="flip-down">
-                to become a
-                <span class="orange__highlight">software developer!</span>
-            </h1>
-        </div>
-        <img src="images/elements/png/line_short.png" alt="line" class="divider__line" data-aos="flip-left">
-    </section>
-    <div id="end__of__page" class="centered">
-        <div class="row">
-            <div class="logo">
-                <a href="https://www.youtube.com/channel/UCEpaCDz-wZ21kR8nA8xDSzg" target="_blank">
-                    <img src="images/elements/png/youtube.png" alt="youtube logo" data-aos="fade-left" class="logo__image">
-                </a>
-            </div>
-            <div class="logo">
-                <a href="https://twitter.com/Timothy89184676" target="_blank">
-                    <img src="images/elements/png/twitter.png" alt="twitter logo" data-aos="zoom-in" class="logo__image">
-                </a>
-            </div>
-            <div class="logo">
-                <a href="https://discord.gg/34RqygKbtX" target="_blank">
-                    <img src="images/elements/png/discord.png" alt="discord logo" data-aos="fade-right" class="logo__image">
-                </a>
-            </div>
-        </div>
-        <div class="row">
-            <div class="logo">
-                <a href="https://timmyverybored.itch.io/" target="_blank">
-                    <img src="images/elements/png/itch.png" alt="itch logo" data-aos="fade-right" class="logo__image">
-                </a>
-            </div>
-            <div class="logo">
-                <a href="https://github.com/timmypidashev" target="_blank">
-                    <img src="images/elements/png/github.png" alt="github logo" data-aos="zoom-out" class="logo__image">
-                </a>
-            </div>
-            <div class="logo">
-                <a href="mailto: pidashev.tim@gmail.com" target="_blank">
-                    <img src="images/elements/png/gmail.png" alt="gmail logo" data-aos="fade-left" class="logo__image">
-                </a>
-            </div>
-        </div>
-    </div>
-
-    <!-- JS -->
-    <script src="js/closeNav.js"></script>
-    <script src="js/openNav.js"></script>
-    <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
-    <script>AOS.init(
-        {
-            once: false,
-            mirror: true,
-            anchorPlacement: 'top-bottom',
-            offset: 0,
-            duration: 800
-        });</script>
-
-</body>
-</html>

js/closeNav.js

@@ -1,3 +0,0 @@
-function closeNav() {
-    document.getElementById("myNav").style.width = "0%";
-}

js/openNav.js

@@ -1,3 +0,0 @@
-function openNav() {
-    document.getElementById("myNav").style.width = "100%";
-}

package.json

@@ -0,0 +1,8 @@
+{
+	"dependencies": {
+		"react": "^18.3.1",
+		"react-dom": "^18.3.1",
+		"@types/react": "^18.3.12",
+		"@types/react-dom": "^18.3.1"
+	}
+}

pnpm-lock.yaml

@@ -0,0 +1,90 @@
+lockfileVersion: '9.0'
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
+importers:
+
+  .:
+    dependencies:
+      '@types/react':
+        specifier: ^18.3.12
+        version: 18.3.12
+      '@types/react-dom':
+        specifier: ^18.3.1
+        version: 18.3.1
+      react:
+        specifier: ^18.3.1
+        version: 18.3.1
+      react-dom:
+        specifier: ^18.3.1
+        version: 18.3.1(react@18.3.1)
+
+packages:
+
+  '@types/prop-types@15.7.13':
+    resolution: {integrity: sha512-hCZTSvwbzWGvhqxp/RqVqwU999pBf2vp7hzIjiYOsl8wqOmUxkQ6ddw1cV3l8811+kdUFus/q4d1Y3E3SyEifA==}
+
+  '@types/react-dom@18.3.1':
+    resolution: {integrity: sha512-qW1Mfv8taImTthu4KoXgDfLuk4bydU6Q/TkADnDWWHwi4NX4BR+LWfTp2sVmTqRrsHvyDDTelgelxJ+SsejKKQ==}
+
+  '@types/react@18.3.12':
+    resolution: {integrity: sha512-D2wOSq/d6Agt28q7rSI3jhU7G6aiuzljDGZ2hTZHIkrTLUI+AF3WMeKkEZ9nN2fkBAlcktT6vcZjDFiIhMYEQw==}
+
+  csstype@3.1.3:
+    resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
+
+  js-tokens@4.0.0:
+    resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
+
+  loose-envify@1.4.0:
+    resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
+    hasBin: true
+
+  react-dom@18.3.1:
+    resolution: {integrity: sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==}
+    peerDependencies:
+      react: ^18.3.1
+
+  react@18.3.1:
+    resolution: {integrity: sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==}
+    engines: {node: '>=0.10.0'}
+
+  scheduler@0.23.2:
+    resolution: {integrity: sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==}
+
+snapshots:
+
+  '@types/prop-types@15.7.13': {}
+
+  '@types/react-dom@18.3.1':
+    dependencies:
+      '@types/react': 18.3.12
+
+  '@types/react@18.3.12':
+    dependencies:
+      '@types/prop-types': 15.7.13
+      csstype: 3.1.3
+
+  csstype@3.1.3: {}
+
+  js-tokens@4.0.0: {}
+
+  loose-envify@1.4.0:
+    dependencies:
+      js-tokens: 4.0.0
+
+  react-dom@18.3.1(react@18.3.1):
+    dependencies:
+      loose-envify: 1.4.0
+      react: 18.3.1
+      scheduler: 0.23.2
+
+  react@18.3.1:
+    dependencies:
+      loose-envify: 1.4.0
+
+  scheduler@0.23.2:
+    dependencies:
+      loose-envify: 1.4.0

projects.html

@@ -1,59 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-    <title>Projects</title>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta name="Timothy Pidashev" content="A 17-year-old on an epic journey to become a software developer!" />
-    <meta name="keywords" content="Timothy Pidashev, timmypidashev, timmy, programming, github" />
-    <link rel="shortcut icon" type="image/png" href="images/elements/png/timmy.png"/>
-    <link rel="stylesheet" href="css/styles.css">
-    <link rel="preconnect" href="https://fonts.gstatic.com">
-    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
-</head>
-<body>
-
-    <!-- Overlay -->
-    <div id="myNav" class="overlay">
-        <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
-        <div class="overlay-content">
-          <a href="download.html">Download YT</a>
-        </div>
-      </div>
-    
-    <!-- Navbar -->
-    <div class="header">
-        <a href="#default" class="logo" data-aos="zoom-in">Timmy</a>
-        <div class="header-right">
-          <a href="index.html" data-aos="zoom-in">About</a>
-          <a href="blog.html" data-aos="zoom-in" data-aos="zoom-in">Blog</a>
-          <a class="active" href="projects.html" data-aos="zoom-in">Projects</a>
-          <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; </span>
-        </div>
-    </div>
-    
-    <!-- Content -->
-    <!-- Section -->
-    <section class="centered">
-        <div>
-            <h1 class="hero__header" data-aos="flip-down">Work In Progress</h1>
-        </div>
-        <img src="images/elements/png/line_short.png" alt="line" class="divider__line" data-aos="flip-left">
-    </section>
-
-    <!-- JS -->
-    <script src="js/closeNav.js"></script>
-    <script src="js/openNav.js"></script>
-    <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
-    <script>AOS.init(
-        {
-            once: false,
-            mirror: true,
-            anchorPlacement: 'top-bottom',
-            offset: 0,
-            duration: 800
-        });</script>
-
-</body>
-</html>

src/.stackblitzrc

@@ -0,0 +1,6 @@
+{
+  "startCommand": "npm start",
+  "env": {
+    "ENABLE_CJS_IMPORTS": true
+  }
+}

src/README.md

@@ -0,0 +1,11 @@
+# Astro with Tailwind
+
+```
+npm init astro -- --template with-tailwindcss
+```
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/with-tailwindcss)
+
+Astro comes with [Tailwind](https://tailwindcss.com) support out of the box. This example showcases how to style your Astro project with Tailwind.
+
+For complete setup instructions, please see our [Styling Guide](https://docs.astro.build/guides/styling#-tailwind).

src/astro.config.mjs

@@ -0,0 +1,179 @@
+import { defineConfig } from "astro/config";
+import tailwind from "@astrojs/tailwind";
+import react from "@astrojs/react";
+import mdx from "@astrojs/mdx";
+import rehypePrettyCode from "rehype-pretty-code";
+import rehypeSlug from "rehype-slug";
+
+import sitemap from "@astrojs/sitemap";
+
+// https://astro.build/config
+export default defineConfig({
+  site: "https://timmypidashev.dev",
+  build: {
+    // Enable build-time optimizations
+    inlineStylesheets: "auto",
+    // Split large components into smaller chunks
+    splitComponents: true,
+  },
+  integrations: [
+    tailwind(), 
+    react(), 
+    mdx({
+      syntaxHighlight: false,
+      rehypePlugins: [
+        /**
+         * Adds ids to headings
+         */
+        rehypeSlug,
+        [
+          /**
+           * Enhances code blocks with syntax highlighting, line numbers,
+           * titles, and allows highlighting specific lines and words
+           */
+
+          rehypePrettyCode,
+          {
+            theme: {
+              "name": "Custom Gruvbox Dark",
+              "type": "dark",
+              "colors": {
+                "editor.background": "#000000",
+                "editor.foreground": "#ebdbb2"
+              },
+              "tokenColors": [
+                {
+                  "scope": ["comment", "punctuation.definition.comment"],
+                  "settings": {
+                    "foreground": "#928374",
+                    "fontStyle": "italic"
+                  }
+                },
+                {
+                  "scope": ["constant", "variable.other.constant"],
+                  "settings": {
+                    "foreground": "#d3869b"
+                  }
+                },
+                {
+                  "scope": "variable",
+                  "settings": {
+                    "foreground": "#ebdbb2"
+                  }
+                },
+                {
+                  "scope": ["keyword", "storage.type", "storage.modifier"],
+                  "settings": {
+                    "foreground": "#fb4934"
+                  }
+                },
+                {
+                  "scope": ["string", "punctuation.definition.string"],
+                  "settings": {
+                    "foreground": "#b8bb26"
+                  }
+                },
+                {
+                  "scope": ["entity.name.function", "support.function"],
+                  "settings": {
+                    "foreground": "#b8bb26"
+                  }
+                },
+                {
+                  "scope": "entity.name.type",
+                  "settings": {
+                    "foreground": "#fabd2f"
+                  }
+                },
+                {
+                  "scope": ["entity.name.tag", "punctuation.definition.tag"],
+                  "settings": {
+                    "foreground": "#83a598"
+                  }
+                },
+                {
+                  "scope": ["entity.other.attribute-name"],
+                  "settings": {
+                    "foreground": "#8ec07c"
+                  }
+                },
+                {
+                  "scope": ["punctuation", "meta.brace"],
+                  "settings": {
+                    "foreground": "#ebdbb2"
+                  }
+                },
+                {
+                  "scope": "markup.inline.raw",
+                  "settings": {
+                    "foreground": "#fe8019"
+                  }
+                },
+                {
+                  "scope": ["markup.heading"],
+                  "settings": {
+                    "foreground": "#b8bb26",
+                    "fontStyle": "bold"
+                  }
+                },
+                {
+                  "scope": ["markup.bold"],
+                  "settings": {
+                    "foreground": "#fe8019",
+                    "fontStyle": "bold"
+                  }
+                },
+                {
+                  "scope": ["markup.italic"],
+                  "settings": {
+                    "foreground": "#fe8019",
+                    "fontStyle": "italic"
+                  }
+                },
+                {
+                  "scope": ["markup.list"],
+                  "settings": {
+                    "foreground": "#83a598"
+                  }
+                },
+                {
+                  "scope": ["markup.quote"],
+                  "settings": {
+                    "foreground": "#928374",
+                    "fontStyle": "italic"
+                  }
+                },
+                {
+                  "scope": ["markup.link"],
+                  "settings": {
+                    "foreground": "#8ec07c"
+                  }
+                },
+                {
+                  "scope": "support.class",
+                  "settings": {
+                    "foreground": "#fabd2f"
+                  }
+                },
+                {
+                  "scope": "number",
+                  "settings": {
+                    "foreground": "#d3869b"
+                  }
+                }
+              ],
+            },
+          },
+        ],
+      ],
+    }),
+    sitemap({
+      filter: (page) => {
+        return !page.includes("/drafts/") && !page.includes("/private/");
+      },
+      changefreq: "weekly",
+      priority: 0.7,
+      lastmod: new Date(),
+    }),
+  ],
+});

src/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "src",
+  "version": "v1.0.1",
+  "private": true,
+  "scripts": {
+    "dev": "astro dev --host",
+    "build": "astro build",
+    "preview": "astro preview"
+  },
+  "devDependencies": {
+    "@astrojs/react": "^4.1.2",
+    "@astrojs/tailwind": "^5.1.4",
+    "@tailwindcss/typography": "^0.5.15",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "astro": "^5.1.2",
+    "tailwindcss": "^3.4.15"
+  },
+  "dependencies": {
+    "@astrojs/mdx": "^4.0.3",
+    "@astrojs/sitemap": "^3.2.1",
+    "lucide-react": "^0.468.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-responsive": "^10.0.0",
+    "reading-time": "^1.5.0",
+    "rehype-pretty-code": "^0.14.0",
+    "rehype-slug": "^6.0.0",
+    "schema-dts": "^1.1.2",
+    "typewriter-effect": "^2.21.0"
+  }
+}

src/sandbox.config.json

@@ -0,0 +1,11 @@
+{
+  "infiniteLoopProtection": true,
+  "hardReloadOnChange": false,
+  "view": "browser",
+  "template": "node",
+  "container": {
+    "port": 3000,
+    "startScript": "start",
+    "node": "14"
+  }
+}

src/src/components/about/current-focus.tsx

@@ -0,0 +1,134 @@
+import React from 'react';
+import { Code2, BookOpen, RocketIcon, Compass } from 'lucide-react';
+
+export default function CurrentFocus() {
+  const recentProjects = [
+    {
+      title: "Darkbox",
+      description: "My gruvbox theme, with a pure black background",
+      href: "/projects/darkbox",
+      tech: ["Neovim", "Lua"]
+    },
+    {
+      title: "Revive Auto Parts",
+      description: "A car parts listing site built for a client",
+      href: "/projects/reviveauto",
+      tech: ["Tanstack", "React Query", "Fastapi"]
+    },
+    {
+      title: "Fhccenter",
+      description: "Website made for a private school",
+      href: "/projects/fhccenter",
+      tech: ["Nextjs", "Typescript", "Prisma"]
+    }
+  ];
+
+  return (
+    <div className="flex justify-center items-center w-full">
+      <div className="w-full max-w-6xl p-4 sm:px-6 py-6 sm:py-8">
+        <h2 className="text-3xl sm:text-4xl font-bold text-center text-yellow-bright mb-8 sm:mb-12">
+          Current Focus
+        </h2>
+
+        {/* Recent Projects Section */}
+        <div className="mb-8 sm:mb-16">
+          <div className="flex items-center justify-center gap-2 mb-6">
+            <Code2 className="text-yellow-bright" size={24} />
+            <h3 className="text-xl font-bold text-foreground/90">Recent Projects</h3>
+          </div>
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 max-w-5xl mx-auto">
+            {recentProjects.map((project) => (
+              <a 
+                href={project.href}
+                key={project.title}
+                className="p-4 sm:p-6 rounded-lg border border-foreground/10 hover:border-yellow-bright/50 
+                         transition-all duration-300 group bg-background/50"
+              >
+                <h4 className="font-bold text-lg group-hover:text-yellow-bright transition-colors">
+                  {project.title}
+                </h4>
+                <p className="text-foreground/70 mt-2 text-sm sm:text-base">{project.description}</p>
+                <div className="flex flex-wrap gap-2 mt-3">
+                  {project.tech.map((tech) => (
+                    <span key={tech} className="text-xs px-2 py-1 rounded-full bg-foreground/5 text-foreground/60">
+                      {tech}
+                    </span>
+                  ))}
+                </div>
+              </a>
+            ))}
+          </div>
+        </div>
+
+        {/* Current Learning & Interests */}
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8 max-w-5xl mx-auto">
+          {/* What I'm Learning */}
+          <div className="space-y-4 p-4 sm:p-6 rounded-lg border border-foreground/10 bg-background/50">
+            <div className="flex items-center justify-center gap-2">
+              <BookOpen className="text-green-bright" size={24} />
+              <h3 className="text-lg sm:text-xl font-bold text-foreground/90">Currently Learning</h3>
+            </div>
+            <ul className="space-y-3 text-sm sm:text-base text-foreground/70">
+              <li className="flex items-center gap-2">
+                <span className="w-1.5 h-1.5 rounded-full bg-green-bright flex-shrink-0" />
+                <span>Rust Programming</span>
+              </li>
+              <li className="flex items-center gap-2">
+                <span className="w-1.5 h-1.5 rounded-full bg-green-bright flex-shrink-0" />
+                <span>WebAssembly with Rust</span>
+              </li>
+              <li className="flex items-center gap-2">
+                <span className="w-1.5 h-1.5 rounded-full bg-green-bright flex-shrink-0" />
+                <span>HTTP/3 & WebTransport</span>
+              </li>
+            </ul>
+          </div>
+
+          {/* Project Interests */}
+          <div className="space-y-4 p-4 sm:p-6 rounded-lg border border-foreground/10 bg-background/50">
+            <div className="flex items-center justify-center gap-2">
+              <RocketIcon className="text-blue-bright" size={24} />
+              <h3 className="text-lg sm:text-xl font-bold text-foreground/90">Project Interests</h3>
+            </div>
+            <ul className="space-y-3 text-sm sm:text-base text-foreground/70">
+              <li className="flex items-center gap-2">
+                <span className="w-1.5 h-1.5 rounded-full bg-blue-bright flex-shrink-0" />
+                <span>AI Model Integration</span>
+              </li>
+              <li className="flex items-center gap-2">
+                <span className="w-1.5 h-1.5 rounded-full bg-blue-bright flex-shrink-0" />
+                <span>Rust Systems Programming</span>
+              </li>
+              <li className="flex items-center gap-2">
+                <span className="w-1.5 h-1.5 rounded-full bg-blue-bright flex-shrink-0" />
+                <span>Cross-platform WASM Apps</span>
+              </li>
+            </ul>
+          </div>
+
+          {/* Areas to Explore */}
+          <div className="space-y-4 p-4 sm:p-6 rounded-lg border border-foreground/10 bg-background/50">
+            <div className="flex items-center justify-center gap-2">
+              <Compass className="text-purple-bright" size={24} />
+              <h3 className="text-lg sm:text-xl font-bold text-foreground/90">Want to Explore</h3>
+            </div>
+            <ul className="space-y-3 text-sm sm:text-base text-foreground/70">
+              <li className="flex items-center gap-2">
+                <span className="w-1.5 h-1.5 rounded-full bg-purple-bright flex-shrink-0" />
+                <span>LLM Fine-tuning</span>
+              </li>
+              <li className="flex items-center gap-2">
+                <span className="w-1.5 h-1.5 rounded-full bg-purple-bright flex-shrink-0" />
+                <span>Rust 2024 Edition</span>
+              </li>
+              <li className="flex items-center gap-2">
+                <span className="w-1.5 h-1.5 rounded-full bg-purple-bright flex-shrink-0" />
+                <span>Real-time Web Transport</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/src/components/about/intro.tsx

@@ -0,0 +1,61 @@
+import React from "react";
+import { ChevronDownIcon } from "@/components/icons";
+
+export default function Intro() {
+  const scrollToNext = () => {
+    window.scrollTo({
+      top: window.innerHeight,
+      behavior: "smooth"
+    });
+  };
+  
+  return (
+    <div className="w-full max-w-4xl px-4">
+      <div className="space-y-8 md:space-y-12">
+        <div className="flex flex-col sm:flex-row items-center sm:items-center justify-center gap-8 sm:gap-16">
+          <div className="w-32 h-32 sm:w-48 sm:h-48 shrink-0">
+            <img
+              src="/me.jpeg"
+              alt="Timothy Pidashev"
+              className="rounded-lg object-cover w-full h-full ring-2 ring-yellow-bright hover:ring-orange-bright transition-all duration-300"
+            />
+          </div>
+          <div className="text-center sm:text-left space-y-4 sm:space-y-6">
+            <h2 className="text-xl sm:text-5xl font-bold text-yellow-bright">
+              Timothy Pidashev
+            </h2>
+            <div className="text-sm sm:text-xl text-foreground/70 space-y-2 sm:space-y-3">
+              <p className="flex items-center justify-center font-bold sm:justify-start gap-2">
+                <span className="text-blue">Software Systems Engineer</span>
+              </p>
+              <p className="flex items-center justify-center font-bold sm:justify-start gap-2">
+                <span className="text-green">Open Source Enthusiast</span>
+              </p>
+              <p className="flex items-center justify-center font-bold sm:justify-start gap-2">
+                <span className="text-yellow">Coffee Connoisseur</span>
+              </p>
+            </div>
+          </div>
+        </div>
+        <div className="space-y-8">
+          <p className="text-foreground/80 text-center text-base sm:text-2xl italic max-w-3xl mx-auto font-medium">
+            "Turning coffee into code" isn't just a clever phrase – 
+            <span className="text-aqua-bright"> it's how I approach each project:</span>
+            <span className="text-purple-bright"> methodically,</span>
+            <span className="text-blue-bright"> with attention to detail,</span>
+            <span className="text-green-bright"> and a refined process.</span>
+          </p>
+          <div className="flex justify-center">
+            <button 
+              onClick={scrollToNext}
+              className="text-foreground/50 hover:text-yellow-bright transition-colors duration-300"
+              aria-label="Scroll to next section"
+            >
+              <ChevronDownIcon size={40} className="animate-bounce" />
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/src/components/about/outside-coding.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import { Fish, Mountain, Book, Car } from 'lucide-react';
+
+export default function OutsideCoding() {
+  const interests = [
+    {
+      icon: <Fish className="text-blue-bright" size={20} />,
+      title: "Fishing",
+      description: "Finding peace and adventure on the water, always looking for the next great fishing spot"
+    },
+    {
+      icon: <Mountain className="text-green-bright" size={20} />,
+      title: "Hiking",
+      description: "Exploring trails with friends and seeking out scenic viewpoints in nature"
+    },
+    {
+      icon: <Book className="text-purple-bright" size={20} />,
+      title: "Reading",
+      description: "Deep diving into novels & technical books that expand my horizons & captivate my mind"
+    },
+    {
+      icon: <Car className="text-yellow-bright" size={20} />,
+      title: "Project Cars",
+      description: "Working on automotive projects, modifying & restoring sporty sedans"
+    }
+  ];
+
+  return (
+    <div className="flex justify-center items-center w-full">
+      <div className="w-full max-w-4xl px-4 py-8">
+        <h2 className="text-2xl md:text-4xl font-bold text-center text-yellow-bright mb-8">
+          Outside of Programming
+        </h2>
+        
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
+          {interests.map((interest) => (
+            <div 
+              key={interest.title} 
+              className="flex flex-col items-center text-center p-4 rounded-lg border border-foreground/10 
+                       hover:border-yellow-bright/50 transition-all duration-300 bg-background/50"
+            >
+              <div className="mb-3">
+                {interest.icon}
+              </div>
+              <h3 className="font-bold text-foreground/90 mb-2">
+                {interest.title}
+              </h3>
+              <p className="text-sm text-foreground/70">
+                {interest.description}
+              </p>
+            </div>
+          ))}
+        </div>
+
+        <p className="text-center text-foreground/80 mt-8 max-w-2xl mx-auto text-sm md:text-base italic">
+          When I'm not writing code, you'll find me
+          <span className="text-blue-bright"> out on the water,</span>
+          <span className="text-green-bright"> hiking trails,</span>
+          <span className="text-purple-bright"> reading books,</span>
+          <span className="text-yellow-bright"> or modifying my current ride.</span>
+        </p>
+      </div>
+    </div>
+  );
+}

src/src/components/about/timeline.tsx

@@ -0,0 +1,81 @@
+import React from "react";
+import { Check, Code, GitBranch, Star } from "lucide-react";
+
+export default function Timeline() {
+  const timelineItems = [
+    {
+      year: "2024",
+      title: "Present",
+      description: "The wisdom of past ventures now flows through my work, whether crafting elegant CRUD applications or embarking on bold projects that expand my limits.",
+      technologies: ["Rust", "Typescript", "Go", "Postgres"],
+      icon: <Code className="text-yellow-bright" size={20} />
+    },
+    {
+      year: "2022",
+      title: "Diving Deeper",
+      description: "The worlds of systems programming and scalable infrastructure collided as I explored low-level C++ graphics programming and containerization with Docker.",
+      technologies: ["C++", "Cmake", "Docker", "Docker Compose"],
+      icon: <GitBranch className="text-green-bright" size={20} />
+    },
+    {
+      year: "2020",
+      title: "Exploring the Stack",
+      description: "Starting with pure HTML and CSS, I explored the foundations of web development, gradually venturing into JavaScript and React to bring my static pages to life.",
+      technologies: ["Javascript", "Tailwind", "React", "Express"],
+      icon: <Star className="text-blue-bright" size={20} />
+    },
+    {
+      year: "2018",
+      title: "Starting the Journey",
+      description: "An elective Python class in 8th grade transformed my keen interest in programming into a relentless obsession, one that drove me to constantly explore new depths.",
+      technologies: ["Python", "Discord.py", "Asyncio", "Sqlite"],
+      icon: <Check className="text-purple-bright" size={20} />
+    }
+  ];
+
+  return (
+    <div className="w-full max-w-6xl px-4 py-8 relative z-0">
+      <h2 className="text-2xl md:text-4xl font-bold text-center text-yellow-bright mb-8 md:mb-12">
+        Journey Through Code
+      </h2>
+      <div className="relative">
+        <div className="absolute left-4 sm:left-1/2 h-full w-0.5 bg-foreground/10 -translate-x-1/2" />
+        
+        <div className="ml-8 sm:ml-0">
+          {timelineItems.map((item, index) => (
+            <div key={item.year} className="relative mb-8 md:mb-12 last:mb-0">
+              <div className={`flex flex-col sm:flex-row items-start ${
+                index % 2 === 0 ? 'sm:flex-row-reverse' : ''
+              }`}>
+                <div className="absolute -left-8 sm:left-1/2 w-6 h-6 sm:w-8 sm:h-8 bg-background 
+                              rounded-full border-2 border-yellow-bright sm:-translate-x-1/2
+                              flex items-center justify-center z-10">
+                  {item.icon}
+                </div>
+                <div className={`w-full sm:w-[calc(50%-32px)] ${
+                  index % 2 === 0 ? 'sm:pr-8 md:pr-12' : 'sm:pl-8 md:pl-12'
+                }`}>
+                  <div className="p-4 sm:p-6 bg-background/50 rounded-lg border border-foreground/10 
+                                hover:border-yellow-bright/50 transition-colors duration-300">
+                    <span className="text-xs sm:text-sm font-mono text-yellow-bright">{item.year}</span>
+                    <h3 className="text-lg sm:text-xl font-bold text-foreground/90 mt-2">{item.title}</h3>
+                    <p className="text-sm sm:text-base text-foreground/70 mt-2">{item.description}</p>
+                    <div className="flex flex-wrap gap-2 mt-3">
+                      {item.technologies.map((tech) => (
+                        <span key={tech} 
+                              className="px-2 py-1 text-xs sm:text-sm rounded-full bg-foreground/5 
+                                       text-foreground/60 hover:text-yellow-bright transition-colors duration-300">
+                          {tech}
+                        </span>
+                      ))}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

src/src/components/background/index.tsx

@@ -0,0 +1,363 @@
+import { useEffect, useRef } from "react";
+
+interface Cell {
+  alive: boolean;
+  next: boolean;
+  color: [number, number, number];
+  currentX: number;
+  currentY: number;
+  targetX: number;
+  targetY: number;
+  opacity: number;
+  targetOpacity: number;
+  scale: number;
+  targetScale: number;
+  transitioning: boolean;
+  transitionComplete: boolean;
+}
+
+interface Grid {
+  cells: Cell[][];
+  cols: number;
+  rows: number;
+  offsetX: number;
+  offsetY: number;
+}
+
+interface BackgroundProps {
+  layout?: 'index' | 'sidebar';
+  position?: 'left' | 'right';
+}
+
+const CELL_SIZE = 25;
+const TRANSITION_SPEED = 0.1;
+const SCALE_SPEED = 0.15;
+const CYCLE_FRAMES = 120;
+const INITIAL_DENSITY = 0.15;
+const SIDEBAR_WIDTH = 240;
+
+const Background: React.FC<BackgroundProps> = ({ 
+  layout = 'index',
+  position = 'left' 
+}) => {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const gridRef = useRef<Grid>();
+  const animationFrameRef = useRef<number>();
+  const frameCount = useRef(0);
+  const resizeTimeoutRef = useRef<NodeJS.Timeout>();
+
+  const randomColor = (): [number, number, number] => {
+    const colors = [
+      [204, 36, 29],   // red
+      [152, 151, 26],  // green
+      [215, 153, 33],  // yellow
+      [69, 133, 136],  // blue
+      [177, 98, 134],  // purple
+      [104, 157, 106]  // aqua
+    ];
+    return colors[Math.floor(Math.random() * colors.length)];
+  };
+
+  const calculateGridDimensions = (width: number, height: number) => {
+    const cols = Math.floor(width / CELL_SIZE);
+    const rows = Math.floor(height / CELL_SIZE);
+    const offsetX = Math.floor((width - (cols * CELL_SIZE)) / 2);
+    const offsetY = Math.floor((height - (rows * CELL_SIZE)) / 2);
+    return { cols, rows, offsetX, offsetY };
+  };
+
+  const initGrid = (width: number, height: number): Grid => {
+    const { cols, rows, offsetX, offsetY } = calculateGridDimensions(width, height);
+    
+    const cells = Array(cols).fill(0).map((_, i) => 
+      Array(rows).fill(0).map((_, j) => ({
+        alive: Math.random() < INITIAL_DENSITY,
+        next: false,
+        color: randomColor(),
+        currentX: i,
+        currentY: j,
+        targetX: i,
+        targetY: j,
+        opacity: 0,
+        targetOpacity: 0,
+        scale: 0,
+        targetScale: 0,
+        transitioning: false,
+        transitionComplete: false
+      }))
+    );
+
+    const grid = { cells, cols, rows, offsetX, offsetY };
+    computeNextState(grid);
+    
+    // Initialize cells with staggered animation
+    for (let i = 0; i < cols; i++) {
+      for (let j = 0; j < rows; j++) {
+        const cell = cells[i][j];
+        if (cell.next) {
+          cell.alive = true;
+          setTimeout(() => {
+            cell.targetOpacity = 1;
+            cell.targetScale = 1;
+          }, Math.random() * 1000);
+        } else {
+          cell.alive = false;
+        }
+      }
+    }
+
+    return grid;
+  };
+
+  const countNeighbors = (grid: Grid, x: number, y: number): { count: number, colors: [number, number, number][] } => {
+    const neighbors = { count: 0, colors: [] as [number, number, number][] };
+    
+    for (let i = -1; i <= 1; i++) {
+      for (let j = -1; j <= 1; j++) {
+        if (i === 0 && j === 0) continue;
+        
+        const col = (x + i + grid.cols) % grid.cols;
+        const row = (y + j + grid.rows) % grid.rows;
+        
+        if (grid.cells[col][row].alive) {
+          neighbors.count++;
+          neighbors.colors.push(grid.cells[col][row].color);
+        }
+      }
+    }
+    
+    return neighbors;
+  };
+
+  const averageColors = (colors: [number, number, number][]): [number, number, number] => {
+    if (colors.length === 0) return [0, 0, 0];
+    const sum = colors.reduce((acc, color) => [
+      acc[0] + color[0],
+      acc[1] + color[1],
+      acc[2] + color[2]
+    ], [0, 0, 0]);
+    return [
+      Math.round(sum[0] / colors.length),
+      Math.round(sum[1] / colors.length),
+      Math.round(sum[2] / colors.length)
+    ];
+  };
+
+  const computeNextState = (grid: Grid) => {
+    for (let i = 0; i < grid.cols; i++) {
+      for (let j = 0; j < grid.rows; j++) {
+        const cell = grid.cells[i][j];
+        const { count, colors } = countNeighbors(grid, i, j);
+
+        if (cell.alive) {
+          cell.next = count === 2 || count === 3;
+        } else {
+          cell.next = count === 3;
+          if (cell.next) {
+            cell.color = averageColors(colors);
+          }
+        }
+        
+        if (cell.alive !== cell.next && !cell.transitioning) {
+          cell.transitioning = true;
+          cell.transitionComplete = false;
+          if (!cell.next) {
+            cell.targetScale = 0;
+            cell.targetOpacity = 0;
+          }
+        }
+      }
+    }
+  };
+
+  const updateCellAnimations = (grid: Grid) => {
+    for (let i = 0; i < grid.cols; i++) {
+      for (let j = 0; j < grid.rows; j++) {
+        const cell = grid.cells[i][j];
+        
+        cell.opacity += (cell.targetOpacity - cell.opacity) * TRANSITION_SPEED;
+        cell.scale += (cell.targetScale - cell.scale) * SCALE_SPEED;
+        
+        if (cell.transitioning) {
+          if (!cell.next && cell.scale < 0.05) {
+            cell.alive = false;
+            cell.transitioning = false;
+            cell.transitionComplete = true;
+            cell.scale = 0;
+            cell.opacity = 0;
+          }
+          else if (cell.next && !cell.alive && !cell.transitionComplete) {
+            cell.alive = true;
+            cell.transitioning = false;
+            cell.transitionComplete = true;
+            cell.targetScale = 1;
+            cell.targetOpacity = 1;
+          }
+          else if (cell.next && !cell.alive && cell.transitionComplete) {
+            cell.transitioning = true;
+            cell.targetScale = 1;
+            cell.targetOpacity = 1;
+          }
+        }
+      }
+    }
+  };
+
+  const setupCanvas = (canvas: HTMLCanvasElement, width: number, height: number) => {
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return;
+
+    const dpr = window.devicePixelRatio || 1;
+    canvas.width = width * dpr;
+    canvas.height = height * dpr;
+    ctx.scale(dpr, dpr);
+    
+    canvas.style.width = `${width}px`;
+    canvas.style.height = `${height}px`;
+    
+    return ctx;
+  };
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+
+    // Create an AbortController for cleanup
+    const controller = new AbortController();
+    const signal = controller.signal;
+
+    const handleResize = () => {
+      if (signal.aborted) return;
+      
+      if (resizeTimeoutRef.current) {
+        clearTimeout(resizeTimeoutRef.current);
+      }
+
+      resizeTimeoutRef.current = setTimeout(() => {
+        if (signal.aborted) return;
+        
+        const displayWidth = layout === 'index' ? window.innerWidth : SIDEBAR_WIDTH;
+        const displayHeight = window.innerHeight;
+
+        const ctx = setupCanvas(canvas, displayWidth, displayHeight);
+        if (!ctx) return;
+
+        frameCount.current = 0;
+        
+        // Only initialize new grid if one doesn't exist or dimensions changed
+        if (!gridRef.current || 
+            gridRef.current.cols !== Math.floor(displayWidth / CELL_SIZE) || 
+            gridRef.current.rows !== Math.floor(displayHeight / CELL_SIZE)) {
+          gridRef.current = initGrid(displayWidth, displayHeight);
+        }
+      }, 250);
+    };
+
+    const displayWidth = layout === 'index' ? window.innerWidth : SIDEBAR_WIDTH;
+    const displayHeight = window.innerHeight;
+    
+    const ctx = setupCanvas(canvas, displayWidth, displayHeight);
+    if (!ctx) return;
+
+    // Only initialize grid if it doesn't exist
+    if (!gridRef.current) {
+      gridRef.current = initGrid(displayWidth, displayHeight);
+    }
+
+    const animate = () => {
+      if (signal.aborted) return;
+      
+      frameCount.current++;
+      
+      if (gridRef.current) {
+        if (frameCount.current % CYCLE_FRAMES === 0) {
+          computeNextState(gridRef.current);
+        }
+        
+        updateCellAnimations(gridRef.current);
+      }
+      
+      // Draw frame
+      ctx.fillStyle = '#000000';
+      ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+      if (gridRef.current) {
+        const grid = gridRef.current;
+        const cellSize = CELL_SIZE * 0.8;
+        const roundness = cellSize * 0.2;
+
+        for (let i = 0; i < grid.cols; i++) {
+          for (let j = 0; j < grid.rows; j++) {
+            const cell = grid.cells[i][j];
+            if (cell.opacity > 0.01) {
+              const [r, g, b] = cell.color;
+              ctx.fillStyle = `rgb(${r},${g},${b})`;
+              ctx.globalAlpha = cell.opacity * 0.8;
+
+              const scaledSize = cellSize * cell.scale;
+              const xOffset = (cellSize - scaledSize) / 2;
+              const yOffset = (cellSize - scaledSize) / 2;
+              
+              const x = grid.offsetX + i * CELL_SIZE + (CELL_SIZE - cellSize) / 2 + xOffset;
+              const y = grid.offsetY + j * CELL_SIZE + (CELL_SIZE - cellSize) / 2 + yOffset;
+              const scaledRoundness = roundness * cell.scale;
+
+              ctx.beginPath();
+              ctx.moveTo(x + scaledRoundness, y);
+              ctx.lineTo(x + scaledSize - scaledRoundness, y);
+              ctx.quadraticCurveTo(x + scaledSize, y, x + scaledSize, y + scaledRoundness);
+              ctx.lineTo(x + scaledSize, y + scaledSize - scaledRoundness);
+              ctx.quadraticCurveTo(x + scaledSize, y + scaledSize, x + scaledSize - scaledRoundness, y + scaledSize);
+              ctx.lineTo(x + scaledRoundness, y + scaledSize);
+              ctx.quadraticCurveTo(x, y + scaledSize, x, y + scaledSize - scaledRoundness);
+              ctx.lineTo(x, y + scaledRoundness);
+              ctx.quadraticCurveTo(x, y, x + scaledRoundness, y);
+              ctx.fill();
+            }
+          }
+        }
+        
+        ctx.globalAlpha = 1;
+      }
+
+      animationFrameRef.current = requestAnimationFrame(animate);
+    };
+
+    window.addEventListener('resize', handleResize, { signal });
+    animate();
+
+    return () => {
+      controller.abort();
+      window.removeEventListener('resize', handleResize);
+      if (animationFrameRef.current) {
+        cancelAnimationFrame(animationFrameRef.current);
+      }
+      if (resizeTimeoutRef.current) {
+        clearTimeout(resizeTimeoutRef.current);
+      }
+    };
+  }, []); // Empty dependency array since we're managing state internally
+
+  const getContainerClasses = () => {
+    if (layout === 'index') {
+      return 'fixed inset-0 -z-10';
+    }
+    
+    const baseClasses = 'fixed top-0 bottom-0 hidden lg:block -z-10 pointer-events-none';
+    return position === 'left' 
+      ? `${baseClasses} left-0` 
+      : `${baseClasses} right-0`;
+  };
+
+  return (
+    <div className={getContainerClasses()}>
+      <canvas
+        ref={canvasRef}
+        className="w-full h-full bg-black"
+      />
+      <div className="absolute inset-0 bg-black/30 backdrop-blur-sm" />
+    </div>
+  );
+};
+
+export default Background;

src/src/components/blog/post-list.tsx

@@ -0,0 +1,104 @@
+import React from "react";
+
+type BlogPost = {
+  slug: string;
+  data: {
+    title: string;
+    author: string;
+    date: string;
+    tags: string[];
+    description: string;
+    image?: string;
+    imagePosition?: string;
+  };
+};
+
+interface BlogPostListProps {
+  posts: BlogPost[];
+}
+
+const formatDate = (dateString: string) => {
+  return new Date(dateString).toLocaleDateString("en-US", {
+    year: "numeric",
+    month: "long",
+    day: "numeric"
+  });
+};
+
+export const BlogPostList = ({ posts }: BlogPostListProps) => {
+  return (
+    <div className="w-full max-w-6xl mx-auto pt-24 sm:pt-24"> 
+      <h1 className="text-2xl sm:text-3xl font-bold text-purple mb-12 text-center px-4 leading-relaxed">
+        Latest Thoughts <br className="sm:hidden" />
+        & Writings
+      </h1>
+
+      <ul className="space-y-6 md:space-y-10">
+        {posts.map((post) => (
+          <li key={post.slug} className="group px-4 md:px-0">
+            <a 
+              href={`/blog/${post.slug}`}
+              className="block"
+            >
+              <article className="flex flex-col md:flex-row gap-4 md:gap-8 pb-6 md:pb-10 border-b border-foreground/20 last:border-b-0 p-2 md:p-4 rounded-lg group-hover:outline group-hover:outline-2 group-hover:outline-purple transition-all duration-200">
+                {/* Image container with fixed aspect ratio */}
+                <div className="w-full md:w-1/3 aspect-[16/9] overflow-hidden rounded-lg bg-background">
+                  <img
+                    src={post.data.image || "/blog/placeholder.png"}
+                    alt={post.data.title}
+                    className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
+                    style={{ objectPosition: post.data.imagePosition || "center center" }}
+                  />
+                </div>
+                
+                {/* Content container */}
+                <div className="w-full md:w-2/3 flex flex-col gap-2 md:gap-4 py-1 md:py-2">
+                  {/* Title and meta info */}
+                  <div className="space-y-1.5 md:space-y-3">
+                    <h2 className="text-lg md:text-2xl font-semibold text-yellow group-hover:text-purple transition-colors duration-200 line-clamp-2">
+                      {post.data.title}
+                    </h2>
+                    
+                    <div className="flex flex-wrap items-center gap-2 md:gap-3 text-sm md:text-base text-foreground/80">
+                      <span className="text-orange">{post.data.author}</span>
+                      <span className="text-foreground/50">•</span>
+                      <time dateTime={post.data.date} className="text-blue">
+                        {formatDate(post.data.date)}
+                      </time>
+                    </div>
+                  </div>
+                  
+                  {/* Description */}
+                  <p className="text-foreground/90 text-sm md:text-lg leading-relaxed line-clamp-2 mt-0.5 md:mt-0">
+                    {post.data.description}
+                  </p>
+                  
+                  {/* Tags */}
+                  <div className="flex flex-wrap gap-1.5 md:gap-3 mt-1 md:mt-2">
+                    {post.data.tags.slice(0, 3).map((tag) => (
+                      <span
+                        key={tag}
+                        className="text-xs md:text-base text-aqua hover:text-aqua-bright transition-colors duration-200"
+                        onClick={(e) => {
+                          e.preventDefault();
+                          window.location.href = `/blog/tag/${tag}`;
+                        }}
+                      >
+                        #{tag}
+                      </span>
+                    ))}
+                    {post.data.tags.length > 3 && (
+                      <span className="text-xs md:text-base text-foreground/60">
+                        +{post.data.tags.length - 3}
+                      </span>
+                    )}
+                  </div>
+                </div>
+              </article>
+            </a>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};

src/src/components/footer/index.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { Links } from "@/components/footer/links";
+
+export default function Footer({ fixed = false }) {
+  const footerLinks = Links.map((link) => (
+    <div
+      key={link.id}
+      className={`inline-block ${link.color}`}
+    >
+      <a href={link.href} target="_blank" rel="noopener noreferrer">{link.label}</a>
+    </div>
+  ));
+
+  return (
+    <footer className={`w-full font-bold ${fixed ? "fixed bottom-0 left-0 right-0" : ""}`}>
+      <div className="flex flex-row px-2 py-1 text-lg lg:px-6 lg:py-1.5 lg:text-3xl md:text-2xl justify-between md:justify-center space-x-2 md:space-x-10 lg:space-x-20">
+        {footerLinks}
+      </div>
+    </footer>
+  );
+}

src/src/components/footer/links.ts

@@ -0,0 +1,14 @@
+interface FooterLink {
+  id: number;
+  href: string;
+  label: string;
+  color: string;
+}
+
+export const Links: FooterLink[] = [
+  { id: 0, href: "mailto:contact@timmypidashev.dev", label: "Contact", color: "text-green" },
+  { id: 1, href: "https://github.com/timmypidashev", label: "Github", color: "text-yellow" },
+  { id: 3, href: "https://www.linkedin.com/in/timothy-pidashev-4353812b8", label: "Linkedin", color: "text-blue" },
+  { id: 4, href: "https://github.com/timmypidashev/web", label: "Source", color: "text-purple" },
+  { id: 5, href: "https://github.com/timmypidashev/web/releases", label: "v2", color: "text-aqua" }
+];

src/src/components/header/index.tsx

@@ -0,0 +1,107 @@
+import React, { useState, useEffect } from "react";
+import { Links } from "@/components/header/links";
+
+export default function Header() {
+  const [isClient, setIsClient] = useState(false);
+  const [visible, setVisible] = useState(true);
+  const [lastScrollY, setLastScrollY] = useState(0);
+  const [currentPath, setCurrentPath] = useState("");
+  const [shouldAnimate, setShouldAnimate] = useState(false);
+
+  useEffect(() => {
+    setIsClient(true);
+    setCurrentPath(document.location.pathname);
+    setTimeout(() => setShouldAnimate(true), 50);
+  }, []);
+
+  useEffect(() => {
+    if (!isClient) return;
+    const handleScroll = () => {
+      const currentScrollY = document.documentElement.scrollTop;
+      setVisible(currentScrollY < lastScrollY || currentScrollY < 10);
+      setLastScrollY(currentScrollY);
+    };
+    document.addEventListener("scroll", handleScroll);
+    return () => document.removeEventListener("scroll", handleScroll);
+  }, [lastScrollY, isClient]);
+
+  const checkIsActive = (linkHref: string): boolean => {
+    if (!isClient) return false;
+    
+    const path = document.location.pathname;
+    if (linkHref === "/") return path === "/";
+    
+    return linkHref !== "/" && path.startsWith(linkHref);
+  };
+
+  const isIndexPage = checkIsActive("/");
+  const headerLinks = Links.map((link) => {
+    const isActive = checkIsActive(link.href);
+    
+    return (
+      <div
+        key={link.id}
+        className={`
+          relative inline-block
+          ${link.color}
+          ${!isIndexPage ? 'bg-black' : ''}
+        `}
+      >
+        <a 
+          href={link.href}
+          className="relative inline-block"
+        >
+          {link.label}
+          <div className="absolute -bottom-1 left-0 w-full overflow-hidden">
+            {isClient && isActive && (
+              <svg 
+                className="w-full h-3 opacity-100"
+                preserveAspectRatio="none"
+                viewBox="0 0 100 12"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  className="stroke-current transition-[stroke-dashoffset] duration-[600ms] ease-out"
+                  d="M0,6 
+                    C25,4 35,8 50,6 
+                    S75,4 100,6"
+                  fill="none"
+                  strokeWidth="2.5"
+                  strokeLinecap="round"
+                  style={{
+                    strokeDasharray: 100,
+                    strokeDashoffset: shouldAnimate ? 0 : 100
+                  }}
+                />
+              </svg>
+            )}
+          </div>
+        </a>
+      </div>
+    );
+  });
+  
+  return (
+    <header 
+      className={`
+        fixed z-50 top-0 left-0 right-0 
+        font-bold 
+        transition-transform duration-300
+        ${visible ? "translate-y-0" : "-translate-y-full"}
+      `}
+    >
+      <div className={`
+        w-full flex flex-row items-center justify-center
+        ${!isIndexPage ? 'bg-black md:bg-transparent' : ''}
+      `}>
+        <div className={`
+          w-full md:w-auto flex flex-row pt-1 px-2 text-lg lg:text-3xl md:text-2xl
+          items-center justify-between md:justify-center space-x-2 md:space-x-10 lg:space-x-20 md:py-2
+          ${!isIndexPage ? 'bg-black md:px-20' : ''}
+        `}>
+          {headerLinks}
+        </div>
+      </div>
+    </header>
+  );
+}

src/src/components/header/links.ts

@@ -0,0 +1,14 @@
+interface HeaderLink {
+  id: number;
+  href: string;
+  label: string;
+  color: string;
+}
+
+export const Links: HeaderLink[] = [
+  { id: 0, href: "/", label: "Home", color: "text-green" },
+  { id: 1, href: "/about", label: "About", color: "text-yellow" },
+  { id: 2, href: "/projects", label: "Projects", color: "text-blue" },
+  { id: 3, href: "/blog", label: "Blog", color: "text-purple" },
+  { id: 4, href: "/resume", label: "Resume", color: "text-aqua" }
+];

src/src/components/hero/index.tsx

@@ -0,0 +1,84 @@
+import React from "react";
+import Typewriter from "typewriter-effect";
+
+const html = (strings: TemplateStringsArray, ...values: any[]) => {
+  let result = strings[0];
+  for (let i = 0; i < values.length; i++) {
+    result += values[i] + strings[i + 1];
+  }
+  return result.replace(/\n\s*/g, "").replace(/\s+/g, " ").trim();
+};
+
+interface TypewriterOptions {
+  autoStart: boolean;
+  loop: boolean;
+  delay: number;
+  deleteSpeed: number;
+  cursor: string;
+}
+
+interface TypewriterInstance {
+  typeString: (str: string) => TypewriterInstance;
+  pauseFor: (ms: number) => TypewriterInstance;
+  deleteAll: () => TypewriterInstance;
+  start: () => TypewriterInstance;
+}
+
+export default function Hero() {
+  const SECTION_1 = html`
+    <span>Hello, I'm</span>
+    <br><div class="mb-4"></div>
+    <span><a href="/about" class="text-aqua hover:underline"><strong>Timothy Pidashev</strong></a></span>
+  `;
+
+  const SECTION_2 = html`
+    <span>I've been turning</span>
+    <br><div class="mb-4"></div>
+    <span><a href="/projects" class="text-green hover:underline"><strong>coffee</strong></a> into 
+    <a href="/projects" class="text-yellow hover:underline"><strong>code</strong></a></span>
+    <br><div class="mb-4"></div>
+    <span>since <a href="/about" class="text-blue hover:underline"><strong>2018</strong></a>!</span>
+  `;
+
+  const SECTION_3 = html`
+    <span>Check out my</span>
+    <br><div class="mb-4"></div>
+    <span><a href="/blog" class="text-purple hover:underline"><strong>blog</strong></a>/
+    <a href="/projects" class="text-blue hover:underline"><strong>projects</strong></a> or</span>
+    <br><div class="mb-4"></div>
+    <span><a href="/contact" class="text-green hover:underline"><strong>contact</strong></a> me below!</span>
+  `;
+
+  const handleInit = (typewriter: TypewriterInstance): void => {
+    typewriter
+      .typeString(SECTION_1)
+      .pauseFor(2000)
+      .deleteAll()
+      .typeString(SECTION_2)
+      .pauseFor(2000)
+      .deleteAll()
+      .typeString(SECTION_3)
+      .pauseFor(2000)
+      .deleteAll()
+      .start();
+  };
+
+  const typewriterOptions: TypewriterOptions = {
+    autoStart: true,
+    loop: true,
+    delay: 50,
+    deleteSpeed: 800,
+    cursor: '|'
+  };
+
+  return (
+    <div className="flex justify-center items-center min-h-screen">
+      <div className="text-4xl font-bold text-center">
+        <Typewriter
+          options={typewriterOptions}
+          onInit={handleInit}
+        />
+      </div>
+    </div>
+  );
+}

src/src/components/icons/chevron-down.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+import { ChevronDown } from "lucide-react";
+
+export const ChevronDownIcon = (props: React.ComponentProps<typeof ChevronDown>) => {
+  return <ChevronDown {...props} />;
+};

src/src/components/icons/index.ts

@@ -0,0 +1 @@
+export { ChevronDownIcon } from "@/components/icons/chevron-down";

src/src/components/projects/project-card.tsx

@@ -0,0 +1,78 @@
+import React from "react"
+import type { CollectionEntry } from "astro:content";
+
+interface ProjectCardProps {
+  project: CollectionEntry<"projects">;
+}
+
+export function ProjectCard({ project }: ProjectCardProps) {
+  const hasLinks = project.data.githubUrl || project.data.demoUrl;
+
+  return (
+    <article className="group relative h-full">
+      <a 
+        href={`/projects/${project.slug}`}
+        className="block rounded-lg border-2 border-foreground/20 
+                 hover:border-blue transition-all duration-300 
+                 bg-background overflow-hidden h-full flex flex-col"
+      >
+        <div className="aspect-video w-full border-b border-foreground/20 bg-foreground/5 overflow-hidden flex-shrink-0">
+          {project.data.image ? (
+            <img 
+              src={project.data.image} 
+              alt={`${project.data.title} preview`}
+              className="w-full h-full object-cover object-center group-hover:scale-105 transition-transform duration-300"
+            />
+          ) : (
+            <div className="w-full h-full flex items-center justify-center text-foreground/30">
+              <span className="text-sm">No preview available</span>
+            </div>
+          )}
+        </div>
+
+        <div className="p-4 sm:p-6 space-y-3 flex flex-col flex-grow">
+          <h3 className="text-lg sm:text-xl font-bold group-hover:text-blue transition-colors">
+            {project.data.title}
+          </h3>
+          
+          <div className="flex flex-wrap gap-2">
+            {project.data.techStack.map(tech => (
+              <span key={tech} className="text-xs px-2 py-1 rounded-full bg-purple-bright/10 text-purple-bright">
+                {tech}
+              </span>
+            ))}
+          </div>
+
+          <p className="text-foreground/70 text-sm sm:text-base flex-grow">
+            {project.data.description}
+          </p>
+          
+          {hasLinks && (
+            <div className="flex gap-4 pt-3 border-t border-foreground/10 mt-auto">
+              {project.data.githubUrl && (
+                <a 
+                  href={project.data.githubUrl}
+                  className="text-sm text-blue hover:text-blue-bright 
+                           transition-colors z-10"
+                  onClick={(e) => e.stopPropagation()}
+                >
+                  View Source
+                </a>
+              )}
+              {project.data.demoUrl && (
+                <a 
+                  href={project.data.demoUrl}
+                  className="text-sm text-green hover:text-green-bright 
+                           transition-colors z-10"
+                  onClick={(e) => e.stopPropagation()}
+                >
+                  Live Link
+                </a>
+              )}
+            </div>
+          )}
+        </div>
+      </a>
+    </article>
+  );
+}

src/src/components/projects/project-list.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+import type { CollectionEntry } from "astro:content";
+import { ProjectCard } from "@/components/projects/project-card";
+
+interface ProjectListProps {
+  projects: CollectionEntry<"projects">[];
+}
+
+export function ProjectList({ projects }: ProjectListProps) {
+  const latestProjects = projects.slice(0, 3);
+  const otherProjects = projects.slice(3);
+
+  return (
+    <div className="w-full max-w-6xl mx-auto pt-24 sm:pt-32"> 
+      <h1 className="text-2xl sm:text-3xl font-bold text-blue mb-12 text-center px-4 leading-relaxed">
+        Here's what I've been <br className="sm:hidden" />
+        building lately
+      </h1>
+      
+      <div className="px-4 mb-16">
+        <h2 className="text-xl font-bold text-foreground/90 mb-6">
+          Featured Projects
+        </h2>
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 auto-rows-fr justify-items-center">
+          {latestProjects.map(project => (
+            <div key={project.slug} className="w-full max-w-md">
+              <ProjectCard project={project} />
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {otherProjects.length > 0 && (
+        <div className="px-4 pb-8">
+          <h2 className="text-xl font-bold text-foreground/90 mb-6">
+            All Projects
+          </h2>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 auto-rows-fr justify-items-center">
+            {otherProjects.map(project => (
+              <div key={project.slug} className="w-full max-w-md">
+                <ProjectCard project={project} />
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

src/src/components/resume/index.tsx

@@ -0,0 +1,270 @@
+import React from "react";
+import { 
+  FileDown, 
+  Github, 
+  Linkedin, 
+  Globe 
+} from "lucide-react";
+
+const resumeData = {
+  name: "Timothy Pidashev",
+  title: "Software Engineer",
+  contact: {
+    email: "contact@timmypidashev.dev",
+    phone: "+1 (360) 409-0357",
+    location: "Camas, WA",
+    linkedin: "linkedin.com/in/timothy-pidashev-4353812b8/",
+    github: "github.com/timmypidashev"
+  },
+  summary: "Experienced software engineer with a passion for building scalable web applications and solving complex problems. Specialized in React, TypeScript, and modern web technologies.",
+  experience: [
+    {
+      title: "Office Manager & Tutor",
+      company: "FHCC",
+      location: "Ridgefield, WA",
+      period: "2020 - Present",
+      achievements: [
+        "Tutored Python, JavaScript, and HTML to students in grades 4-10, successfully fostering early programming skills",
+        "Designed and deployed a full-stack CRUD application to manage organizational operations",
+        "Engineered and implemented building-wide networking infrastructure and managed multiple service deployments",
+        "Maintained student records and administrative paperwork."
+      ]
+    }
+  ],
+  contractWork: [
+    {
+      title: "Revive Auto Parts",
+      type: "Full-Stack Development & Maintenance",
+      startDate: "2024",
+      url: "https://reviveauto.parts",
+      responsibilities: [
+        "Maintain and optimize website performance and security",
+        "Implement new features and functionality as needed",
+        "Provide 24/7 monitoring and emergency support"
+      ],
+      achievements: [
+        "Designed and built the entire application from the ground up, including auth",
+        "Engineered a tagging system to optimize search results by keywords and relativity",
+        "Implemented a filter provider to further narrow down search results and enchance the user experience",
+        "Created a smooth and responsive infinitely scrollable listings page", 
+        "Automated deployment & testing processes reducing downtime by 60%"
+      ]
+    }
+  ],
+  education: [
+    {
+      degree: "B.S. Computer Science",
+      school: "Clark College",
+      location: "Vancouver, WA",
+      period: "Graduating 2026",
+      achievements: []
+    }
+  ],
+  skills: {
+    technical: ["JavaScript", "TypeScript", "React", "Node.js", "Python", "SQL", "AWS", "Docker", "C", "Go", "Rust"],
+    soft: ["Leadership", "Problem Solving", "Communication", "Agile Methodologies"]
+  },
+  certifications: [
+    {
+      name: "AWS Certified Solutions Architect",
+      issuer: "Amazon Web Services",
+      date: "2022"
+    }
+  ]
+};
+
+const Resume = () => {
+  const handleDownloadPDF = () => {
+    window.open("/timothy-pidashev-resume.pdf", "_blank");
+  };
+
+  return (
+    <div className="max-w-4xl mx-auto px-6 md:px-8 pt-24 pb-16">
+      <div className="space-y-16">
+        {/* Header */}
+        <header className="text-center space-y-6">
+          <h1 className="text-6xl font-bold text-aqua-bright">{resumeData.name}</h1>
+          <h2 className="text-3xl text-foreground/80">{resumeData.title}</h2>
+          <div className="flex flex-col md:flex-row justify-center gap-4 md:gap-6 text-foreground/60 text-lg">
+            <a href={`mailto:${resumeData.contact.email}`} className="hover:text-foreground transition-colors duration-200">
+              {resumeData.contact.email}
+            </a>
+            <span className="hidden md:inline">•</span>
+            <a href={`tel:${resumeData.contact.phone}`} className="hover:text-foreground transition-colors duration-200">
+              {resumeData.contact.phone}
+            </a>
+            <span className="hidden md:inline">•</span>
+            <span>{resumeData.contact.location}</span>
+          </div>
+          <div className="flex justify-center items-center gap-6 text-lg">
+           <a href={`https://${resumeData.contact.github}`} 
+               target="_blank"
+               className="text-blue-bright hover:text-blue transition-colors duration-200 flex items-center gap-2"
+            >
+              <Github size={18} />
+              GitHub
+            </a>
+
+            <a href={`https://${resumeData.contact.linkedin}`} 
+               target="_blank"
+               className="text-blue-bright hover:text-blue transition-colors duration-200 flex items-center gap-2"
+            >
+              <Linkedin size={18} />
+              LinkedIn
+            </a>
+            <button
+              onClick={handleDownloadPDF}
+              className="text-blue-bright hover:text-blue transition-colors duration-200 flex items-center gap-2"
+            >
+              <FileDown size={18} />
+              Resume
+            </button>
+          </div>
+        </header>
+
+        {/* Summary */}
+        <section className="space-y-4">
+          <h3 className="text-3xl font-bold text-yellow-bright">Professional Summary</h3>
+          <p className="text-xl leading-relaxed">{resumeData.summary}</p>
+        </section>
+
+        {/* Experience */}
+        <section className="space-y-8">
+          <h3 className="text-3xl font-bold text-yellow-bright">Experience</h3>
+          {resumeData.experience.map((exp, index) => (
+            <div key={index} className="space-y-4">
+              <div className="flex flex-col md:flex-row md:justify-between md:items-start gap-2">
+                <div>
+                  <h4 className="text-2xl font-semibold text-green-bright">{exp.title}</h4>
+                  <div className="text-foreground/60 text-lg">{exp.company} - {exp.location}</div>
+                </div>
+                <div className="text-foreground/60 text-lg font-medium">{exp.period}</div>
+              </div>
+              <ul className="list-disc pl-6 space-y-3">
+                {exp.achievements.map((achievement, i) => (
+                  <li key={i} className="text-lg leading-relaxed">{achievement}</li>
+                ))}
+              </ul>
+            </div>
+          ))}
+        </section>
+
+        {/* Contract Work */}
+        <section className="space-y-8">
+          <h3 className="text-3xl font-bold text-yellow-bright">Contract Work</h3>
+          {resumeData.contractWork.map((project, index) => (
+            <div key={index} className="space-y-4">
+              <div className="flex flex-col md:flex-row md:justify-between md:items-start gap-2">
+                <div>
+                  <div className="flex items-center gap-3">
+                    <h4 className="text-2xl font-semibold text-green-bright">{project.title}</h4>
+                    {project.url && (
+                      <a 
+                        href={project.url}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="text-blue-bright hover:text-blue transition-colors duration-200 opacity-60 hover:opacity-100"
+                        aria-label={`Visit ${project.title}`}
+                      >
+                        <Globe size={16} strokeWidth={1.5} />
+                      </a>
+                    )}
+                  </div>
+                  <div className="text-foreground/60 text-lg">{project.type}</div>
+                </div>
+                <div className="text-foreground/60 text-lg font-medium">Since {project.startDate}</div>
+              </div>
+              <div className="space-y-4">
+                {project.responsibilities && (
+                  <div>
+                    <h5 className="text-lg text-aqua font-semibold mb-2">Responsibilities</h5>
+                    <ul className="list-disc pl-6 space-y-3">
+                      {project.responsibilities.map((responsibility, i) => (
+                        <li key={i} className="text-lg leading-relaxed">{responsibility}</li>
+                      ))}
+                    </ul>
+                  </div>
+                )}
+                {project.achievements && (
+                  <div>
+                    <h5 className="text-lg text-aqua font-semibold mb-2">Key Achievements</h5>
+                    <ul className="list-disc pl-6 space-y-3">
+                      {project.achievements.map((achievement, i) => (
+                        <li key={i} className="text-lg leading-relaxed">{achievement}</li>
+                      ))}
+                    </ul>
+                  </div>
+                )}
+              </div>
+            </div>
+          ))}
+        </section>
+
+        {/* Education */}
+        <section className="space-y-8">
+          <h3 className="text-3xl font-bold text-yellow-bright">Education</h3>
+          {resumeData.education.map((edu, index) => (
+            <div key={index} className="space-y-4">
+              <div className="flex flex-col md:flex-row md:justify-between md:items-start gap-2">
+                <div>
+                  <h4 className="text-2xl font-semibold text-green-bright">{edu.degree}</h4>
+                  <div className="text-foreground/60 text-lg">{edu.school} - {edu.location}</div>
+                </div>
+                <div className="text-foreground/60 text-lg font-medium">{edu.period}</div>
+              </div>
+              <ul className="list-disc pl-6 space-y-3">
+                {edu.achievements.map((achievement, i) => (
+                  <li key={i} className="text-lg leading-relaxed">{achievement}</li>
+                ))}
+              </ul>
+            </div>
+          ))}
+        </section>
+
+        {/* Skills */}
+        <section className="space-y-8">
+          <h3 className="text-3xl font-bold text-yellow-bright">Skills</h3>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+            <div className="space-y-4">
+              <h4 className="text-2xl font-semibold text-green-bright">Technical Skills</h4>
+              <div className="flex flex-wrap gap-3">
+                {resumeData.skills.technical.map((skill, index) => (
+                  <span key={index} 
+                        className="border border-foreground/20 px-4 py-2 rounded-lg hover:border-foreground/40 transition-colors duration-200">
+                    {skill}
+                  </span>
+                ))}
+              </div>
+            </div>
+            <div className="space-y-4">
+              <h4 className="text-2xl font-semibold text-green-bright">Soft Skills</h4>
+              <div className="flex flex-wrap gap-3">
+                {resumeData.skills.soft.map((skill, index) => (
+                  <span key={index} 
+                        className="border border-foreground/20 px-4 py-2 rounded-lg hover:border-foreground/40 transition-colors duration-200">
+                    {skill}
+                  </span>
+                ))}
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* Certifications */}
+        {/* Temporarily Hidden
+        <section className="space-y-6 mb-16">
+          <h3 className="text-3xl font-bold text-yellow-bright">Certifications</h3>
+          {resumeData.certifications.map((cert, index) => (
+            <div key={index} className="space-y-2">
+              <h4 className="text-2xl font-semibold text-green-bright">{cert.name}</h4>
+              <div className="text-foreground/60 text-lg">{cert.issuer} - {cert.date}</div>
+            </div>
+          ))}
+        </section>
+        */}
+      </div>
+    </div>
+  );
+};
+
+export default Resume;

src/src/content/blog/components/my-first-post/cookie.tsx

@@ -0,0 +1,59 @@
+import { useState } from "react";
+
+const Cookie = () => {
+  const [hasBite, setHasBite] = useState(false);
+
+  const handleClick = () => {
+    setHasBite((prev) => !prev);
+  };
+
+  return (
+    <button
+      onClick={handleClick}
+      aria-label="Click for a cookie bite"
+      className="inline-flex items-center justify-center p-0 bg-transparent hover:scale-110 transition-transform"
+      style={{
+        verticalAlign: "middle",
+        lineHeight: 0, // Ensure the button doesn't affect the text spacing
+      }}
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 64 64"
+        className="w-6 h-6" // Adjust size to align better with text
+        fill="none"
+      >
+        {/* Base cookie */}
+        <circle cx="32" cy="32" r="30" fill="#D2691E" />
+
+        {/* Bite area: uses a mask */}
+        <mask id="biteMask">
+          {/* Full circle mask */}
+          <rect width="64" height="64" fill="white" />
+          {hasBite && <circle cx="48" cy="16" r="12" fill="black" />}
+        </mask>
+
+        {/* Cookie with bite mask applied */}
+        <circle cx="32" cy="32" r="30" fill="#D2691E" mask="url(#biteMask)" />
+
+        {/* Chocolate chips */}
+        <circle cx="20" cy="24" r="3" fill="#3E2723" />
+        <circle cx="40" cy="18" r="3" fill="#3E2723" />
+        <circle cx="28" cy="40" r="3" fill="#3E2723" />
+        <circle cx="44" cy="36" r="3" fill="#3E2723" />
+        <circle cx="24" cy="48" r="3" fill="#3E2723" />
+      </svg>
+    </button>
+  );
+};
+
+const App = () => {
+  return (
+    <p className="text-lg">
+      On your way out, don't forget to grab a cookie!{" "}
+      <Cookie />
+    </p>
+  );
+};
+
+export default App;

src/src/content/blog/my-first-post.mdx

@@ -0,0 +1,25 @@
+---
+title: My First Post!
+description: A quick introduction
+author: Timothy Pidashev
+tags: [greeting]
+date: January 9, 2025
+image: "/blog/my-first-post/thumbnail.png"
+imagePosition: "center 30%"
+---
+
+import Cookie from "@/content/blog/components/my-first-post/cookie";
+
+Hello, my name is Timothy Pidashev! I’m an aspiring software engineer currently expanding my technical horizons!
+
+Wait… that was a bit too formal. This is, after all, a blog post. Let me try that again.
+
+Hey 👋, my name is Timothy! I’m a software nerd who loves building cool tech! Phew, that was rough. Jokes aside, 
+I’m happy you're here, dear reader. I have a lot planned for my little blog, and I hope the next few posts will 
+be useful to many nerds out there!
+
+As a little spoiler of what’s to come, the next post will be a complete dive into modifying and corebooting a 
+Thinkpad T440p for the ultimate secure dev laptop! I’ve been personally daily-driving mine for the last two 
+years and can’t wait to show it off, so stay tuned!
+
+<Cookie />

src/src/content/config.ts

@@ -0,0 +1,26 @@
+import { defineCollection, z } from "astro:content";
+
+export const collections = {
+  blog: defineCollection({
+    schema: z.object({
+      title: z.string(),
+      description: z.string(),
+      author: z.string(),
+      tags: z.array(z.string()),
+      date: z.string(),
+      image: z.string().optional(),
+      imagePosition: z.string().optional(),
+    }),
+  }),
+  projects: defineCollection({
+    schema: z.object({
+      title: z.string(),
+      description: z.string(),
+      githubUrl: z.string().url().optional(),
+      demoUrl: z.string().url().optional(),
+      techStack: z.array(z.string()),
+      date: z.string(),
+      image: z.string().optional(),
+    }),
+  }),
+};

src/src/content/projects/darkbox.mdx

@@ -0,0 +1,42 @@
+---
+title: "Darkbox"
+description: "My gruvbox theme, with a pure black background"
+githubUrl: "https://github.com/timmypidashev/darkbox.nvim"
+techStack: ["Neovim", "Lua"]
+date: "2025-01-05"
+image: "/projects/darkbox/thumbnail.jpeg"
+---
+
+## Overview
+My gruvbox theme, with a pure black background
+
+## Key Features
+* **Pure Black Background**: Preventing eyestrain during prolonged screen time.
+
+* **Gruvbox Inspired**: Only the very best warm colorscheme, revamped for contrast.
+
+* **Neovim First**: First class support for neovim, with treesitter support built in.
+
+## Development Highlights
+First, this project could not have been possible without the help of previous theme projects 
+such as [gruvbox.nvim](https://github.com/ellisonleao/gruvbox.nvim). Major kudos to everyone
+who helped write that plugin. Using existing code as reference from this project dramatically 
+sped up development and made matters easy. 
+
+On top of that, working with lua was delightful, and there were no roadblocks or glaring
+issues which prevented me from completion. Neovim's tight integration with lua is a game
+changer compared to something like [VimScript](https://vimdoc.sourceforge.net/htmldoc/usr_41.html). 
+Overall, I found the whole experience simply perfect. 
+
+## Challenges & Roadblocks
+One thing I am not proud of, is how contrast has turned out. At the moment, the gruvbox dark 
+colorscheme that inspired darkbox, isn't taking into account the contrast change from the 
+background `#282828` to `#000000`. This, can show up as a bit washed out to the careful eye in certain
+code blocks where multiple colors clash together. I intend to work on this in a future release. 
+The fix will be to darken the color contrast to more closely match to the pure black background.
+
+## Summary
+This is it! This is the theme I am going to use for most likely the rest of my programming life.
+I have always had a gruvbox themed desktop, but no background image. This resulted in an interesting
+combo, and where the spark for this idea came from. I'm a bit biased, but I love it and hope 
+someone else does too. The github link can be found [here](https://github.com/timmypidashev/darkbox.nvim) :D

src/src/content/projects/fhccenter.mdx

@@ -0,0 +1,49 @@
+---
+title: "Fhccenter"
+description: "Website made for a private school"
+demoUrl: "https://fhccenter.org"
+techStack: ["Nextjs", "Typescript", "Prisma"]
+date: "2024-10-03"
+image: "/projects/fhccenter/thumbnail.jpeg"
+---
+
+## Overview
+A private learning center website that provides information about the organization,
+student registrations, a newsletter, and full admin login with administrative tools.
+
+## Key Features
+* **Server Components**: React Server Components power efficient data flow and server-side
+rendering.
+
+* **JWT Authentication**: Built using a custom authentication provider, the entire site is 
+secured with a jwt token schema, including refresh tokens.
+
+* **Elegant Components**: Constructed using Shadcn and Framer motion, component animations
+and feel are seamless.
+
+## Development Highlights
+Building this site was quite an interesting feat. This was my first foray into react server 
+components, and while they aren't my preferred method of building applications, It was a great
+experience to fully dive in and make use of them. This was also my first time using Nextjs's 
+new app router, and coming from the page router I really liked the experience. Building out
+new pages and components was just a pure flow of thought, and I found myself trying to keep up
+with the ideas coming out of my head rather than coming upon development barriers or softblocks.
+
+## Challenges & Roadblocks
+One of the only real challenges I didn't anticipate was caching. In Nextjs 14, caching is handled
+very poorly, and I found myself struggling to figure out workarounds when handling dynamic data
+such as the newsletter on the site. Full cache routes were extremely tricky to understand, but 
+after reading some troubleshooting guides it was full sailing ahead.
+
+Another tricky but fun challenge was implementing authentication using react server components.
+Since I had never used them up to this point, going about setting up a jwt schema while also trying
+to ensure api routes don't accidentally leak was tricky, and something I still to this day don't really
+like when it comes to server components. The fact that a single line of code is responsible for separating
+server from client with nothing preventing a dev from putting all those components wherever they please can 
+cause quite a mess, so following good file organization conventions was instrumental. 
+
+## Summary
+Overall, I had a pleasant time working on [fhccenter](https://fhccenter.org). After learning all the new
+features like server components and the app router, I spent more time messing around with css styling and 
+getting the site to look exactly the way I wanted it rather than debugging silly mistakes, which was 
+refreshing coming from other frameworks.

src/src/content/projects/iridescent.mdx

@@ -0,0 +1,58 @@
+---
+title: "Iridescent"
+description: "An open-source graphics engine"
+githubUrl: "https://github.com/timmypidashev/iridescent"
+techStack: ["Cmake", "Glad", "Imgui"]
+date: "2024-05-03"
+image: "/projects/iridescent/thumbnail.jpeg"
+---
+
+## Overview
+A open-source graphics engine concept created for my highschool senior project. 
+Built to expand my understanding of the low level programming world, and further
+my reach of graphics and c++ programming.
+
+## Key Features
+* **Dockable Windows**: A quality of life feature utilizing imgui which allows
+to efficiently use monitor space, moving logging and certain tools into their own 
+windows outside of the engines viewspace.
+
+* **Layer Stack**: Deterministic and fast stack which determines the order in which 
+all layers of the application are drawn, from the ui all the way to the polygons making
+up the scene.
+
+* **Input Polling**: A realtime implementation polling all input events on the keyboard
+and mouse for an extremely low latency between input events and scene events.
+
+* **Detailed Logging**: A detailed logging system which logs events from the scene all the 
+way down to the system.
+
+* **Shading**: The crème de la crème of the renderer, adding shading to the entire scene.
+
+## Development Highlights
+Some of the best highlights for me during this project was quite literally every time I managed
+to fix a compilation issue. The exhileration after each successful step forward was just mesmerizing,
+and I knew the moment I began my obsession wouldn't end until the engine was in a complete state.
+Since I was going into this blind during my senior year at highschool, I knew almost nothing about 
+c++ or the build systems that accompany it, so learning all of that at once was both a breath of fresh 
+air and a frustration. However, after several days of work, I became very comfortable with cmake, my build 
+system of choice, and most basic concepts of c++, allowing me to begin working on the engine itself. 
+It was at this point where I started hitting some real knowledge barriers and ended up going to multiple 
+resources to learn and understand the inner workings of a graphics renderer. Resources such as the 
+[Hazel Engine Series](https://www.youtube.com/watch?v=JxIZbV_XjAs&list=PLlrATfBNZ98dC-V-N3m0Go4deliWHPFwT),
+[Learn C++ Website](https://www.learncpp.com/learn-cpp-site-index/), and [OpenGL Tutorials](https://www.opengl.org/sdk/docs/tutorials/)
+helped me tremendously here.
+
+## Challenges & Roadblocks
+Some of the biggest challenges I faced was overcoming the knowledge barrier I had on the inner workings
+of graphics rendering and low level programming overall. Thankfuly, being stubborn and obsessed can 
+sometimes help, and in this case after numerous attempts, I began meticoulouly learning every aspect 
+of the engine as I developed it, and over time it began paying off, snowballing into a very fun experience. 
+Some food for thought, after you overcome the biggest barrier in your journey, the rest seems laughably easy.
+
+## Summary
+Looking back, working on Iridescent was some of the most fun I have ever had programming as of yet,
+and I am still craving for the next project to top this one. It was only by working on this engine
+that I realized just how much I love working on the little details, obsessing over each little system
+in the engine. Definitely something I will have to do again, maybe write a little game, but thats for 
+future me to decide :D

src/src/content/projects/reviveauto.mdx

@@ -0,0 +1,179 @@
+---
+title: "Revive Auto Parts"
+description: "A car parts listing site built for a client"
+demoUrl: "https://reviveauto.parts"
+techStack: ["Tanstack", "React Query", "Fastapi"]
+date: "2025-01-04"
+image: "/projects/reviveauto/thumbnail.jpeg"
+---
+
+## Overview
+A car parts listing website built to provide an intuitive and efficient experience 
+for users searching for automotive parts. This project was commissioned by a client 
+and showcases some pretty cool modern web technologies, enabling excellent
+performance and a clean user interface.
+
+## Key Features
+* **Dynamic & Simple Routing**: Powered by TanStack Router, enabling seamless navigation 
+and deep-linking for product categories and details.
+
+* **Real-Time Data Fetching**: Utilized React Query to handle server state and caching, 
+ensuring users have up-to-date information.
+
+* **Infinite Scroll**:  Implemented React Query's infinite scrolling and memoization 
+optimization techniques to ensure fast and seamless scrolling through listings.
+
+* **Dynamic Filters**: Created dynamic filters which are editable on the admin panel,
+allowing for a high level of customization.
+
+* **Responsive Design**: Built with Tailwind and Shadcn for a fully responsive layout,
+providing a consistent experience across desktop and mobile devices.
+
+* **Optimized Performance**: Leveraged Vite for fast builds and optimized code-splitting,
+improving page load times drastically.
+
+## Development Highlights
+I had numerous highlights and *aha* moments when developing this site. One of these has to 
+be the site layout, built with [shadcn/ui](https://ui.shadcn.com) components. I had used 
+this component library in a previous site, but I had yet to grasp just how powerful this 
+collection of components is. We truly do stand on the shoulders of giants, and using this
+library not only allowed me to very quickly prototype a design, but to then flesh it out
+without having to dive into the weeds of UI development.
+
+Another great highlight has to be [Tanstack Router](https://tanstack.com/router/latest). 
+As a seasoned developer, I have had many opportunities to try a lot of different routers
+across several frameworks. As many have before me, we stumble onto the nextjs router, and 
+tend not to look back. However, tanstack did something I did not expect, and it takes routing 
+to the next level. With TanStack, the routes folder is solely focused on defining routes and 
+layouts, providing a cleaner, more modular structure. This is a stark contrast to Next.js's 
+approach, where the app directory can quickly become convoluted by mixing route definitions 
+with server-side logic, API calls, and other concerns. Anybody who has built a Nextjs project
+bigger than a To-Do app can likely relate to the mental pain that is trying to find a route or 
+endpoint in your app router when its nested and hidden away four or five directories deep.
+
+Another memorable highlight was writing my backend in Python using [Fastapi](https://fastapi.tiangolo.com/). 
+Sometimes, a project doesn't need a complex nodejs runtime, or an ORM built for a massive service. 
+As a python enthusiast, I found the combination of fastapi & sqlmodel to be just perfect for this project, 
+and defining api endpoints and schemas were quite enjoyable. As I do, I decided to roll my own authentication, 
+and found Python to be a great environment in which to do so. 
+
+Lastly, I have to touch on React Query. The combo that is React Query and Fastapi can truly be magical.
+To truly showcase what I mean, here's an example of a query and endpoint working together:
+
+```typescript
+// features/auth/services/login/queries.ts
+export function useLogin() {
+  const { setCredentials } = useUserStore();
+
+  return useMutation<LoginResponseSchemaType, AxiosError<BackendError>, LoginRequestSchemaType>({
+    mutationFn: user => login(user),
+    onSuccess: data => {
+      setCredentials({
+        accessToken: data.access_token,
+      });
+    },
+  });
+}
+
+const login = backend<z.infer<typeof LoginRequestSchema>, z.infer<typeof LoginResponseSchema>>({
+  method: "POST",
+  path: `${BACKEND_URL}${AUTH}/login`,
+  requestSchema: LoginRequestSchema,
+  responseSchema: LoginResponseSchema,
+  type: "public",
+});
+```
+```typescript 
+// features/auth/services/login/schemas
+import { z } from "zod";
+
+export const LoginRequestSchema = z.object({
+  email: z
+    .string()
+    .min(1, "Email is required!")
+    .trim()
+    .email({ message: "Invalid email!" })
+    .toLowerCase(),
+  password: z.string().trim().min(8, { message: "Password must be at least 8 characters long!" }),
+});
+export type LoginRequestSchemaType = z.infer<typeof LoginRequestSchema>;
+
+export const LoginResponseSchema = z.object({
+  access_token: z.string(),
+});
+export type LoginResponseSchemaType = z.infer<typeof LoginResponseSchema>;
+```
+
+```python
+# routes/auth.py
+class LoginResponse(BaseModel):
+    access_token: str
+
+@router.post(
+    "/login",
+    description=
+    """
+    The login endpoint.
+    
+    Used to create access and refresh tokens for a user.
+    The refresh token is set as an HTTP-only cookie.
+    """,
+    summary="Create access token and set refresh token as HTTP-only cookie."
+)
+async def login(
+    response: Response,
+    form_data: LoginSchema = Body(...), 
+    session: Session = Depends(get_session)
+) -> Any:
+
+    # Fetch user using the form_data sent by the client
+    user = await service.authenticate(
+        email=form_data.email,
+        password=form_data.password,
+        session=session
+    )
+
+    # If service returns None, raise exception 
+    if not user:
+        raise HTTPException(
+            status_code=status.HTTP_401_UNAUTHORIZED,
+            detail="Incorrect email or password",
+        )
+
+    # Set refresh token as HTTP-only cookie
+    response.set_cookie(
+        key="refresh_token",
+        value=create_token(user, type="refresh"),
+        httponly=True,
+        path="/auth/refresh",
+        domain=Config.JWT_COOKIE_DOMAIN,
+        expires=datetime.now(timezone.utc) + Config.JWT_REFRESH_EXPIRES
+    )
+    
+    return LoginResponse(
+        access_token=create_token(user, type="access")
+    )
+```
+Using Zod, the frontend is validating what a user is attempting to submit 
+before calling the endpoint. If Zod does not throw an error, our frontend will 
+call our backend endpoint, which also expects the right types to be present.
+Afterwards, the backend will respond back with a response that our frontend 
+will also validate. This allows for a complete multi-directional 
+request -> response type validation!
+
+## Challenges & Roadblocks
+For the most part, there were really no challenges, say for some hiccups here and there.
+Probably the most painful parts were creating unit tests for the frontend, and scraping
+Facebook for a total of 1,384 posts for my client, who wanted the posts imported over.
+As one can imagine, that process is not simple to do manually by hand, so I wrote multiple 
+python scripts using the seleneum library to fetch the posts from the sellers account, a process 
+which took multiple attempts, several overnight scrapes, and lots of data sanitation afterwards. 
+Other than that, everything else was an absolute joy to work on, and I finished the project in under 
+15K LOC.
+
+## Summary
+Sometimes, building a CRUD app can be lots of fun, no matter how many times you've done it before.
+All it takes is adding something new to the stack, and striving to improve the code you write. This
+project was exactly that, a mix of new technologies working together to power a fairly neat site,
+which can be viewed [here](https://reviveauto.parts). Maybe there is a car part there which the reader
+might need. As always, thanks for the read :)

src/src/content/projects/web.mdx

@@ -0,0 +1,36 @@
+---
+title: "Website"
+description: "My personal website and blog"
+githubUrl: "https://github.com/timmypidashev/web"
+demoUrl: "https://timmypidashev.dev"
+techStack: ["Astro", "Typescript", "MDX"]
+date: "2024-10-03"
+image: "/projects/web/thumbnail.jpeg"
+---
+
+## Overview
+A portfolio website and resume for yours truly. 
+
+## Development Highlights
+Building the second version of my website was a dream. This was my first time using Astro,
+and wow, just wow! For starters, The entire site is ~1,500 LOC (excluding MDX). That is 
+small for the amount of things I was able to accomplish. That aside, Astro's simplicity is
+unmatched. Coming from React-based frameworks, the ability to just import react components 
+and have them work out of the box was unexpected. And the astro layout files! They are so 
+easy to look at, it just turns on some kind of code ocd within my head. I can't stop admiring
+it. All this to say, Astro was the perfect choice for my website.
+
+## Challenges & Roadblocks
+Although the development process was extremely simple and fun, there really were no challenges,
+which allowed me to express my creativity to my fullest. Building out Conway's game of life as 
+a canvas background simulation wasn't the first idea I had, and that whole endeavour started as a 
+growing vines simulation similar to that of the old Poptropica flash game loading screens, all the way
+to a full fishtank simulation like Asciiquarium. But, they just never felt final to me, and this simulation
+was simple to implement and most importantly very lightweight compared to the other simulations I was 
+working on.
+
+## Summary
+The result is deeply satisfying - a personal website that authentically reflects my style.
+It captures my minimalist desktop aesthetic, down to the font choices and clean layout.
+After many hours of careful work, I am very proud of what I have created for myself and hope
+the reader agrees :)

src/src/data/blog-posts/corebooting-my-thinkpad.md

@@ -0,0 +1,104 @@
+---
+title: "I corebooted my T440p, here's how I did it."
+author: "Timothy Pidashev"
+date: "2024/06/05"
+description: "This is a sample MDX file."
+tags: ["coreboot", "t440p", "dgpu"]
+---
+
+
+```python
+# discord api
+import discord
+from discord.ext import commands
+
+# custom utilities
+from Utilities import log
+
+log = log.Logger("errors")
+
+class Errors(commands.Cog):
+    def __init__(self, client):
+        self.client = client
+
+    @commands.Cog.listener()
+    async def on_ready(self):
+        await log.info("Errors cog loaded.")
+
+    @commands.Cog.listener()
+    async def on_command_error(self, context, error):
+
+        if isinstance(error, commands.CheckFailure):
+            await context.reply(
+                "You are not priveleged enough to use this command.", 
+                mention_author=False
+            )
+
+        else:
+            await context.reply(
+                f"**Error**\n```diff\n- {error}```",
+                mention_author=False
+            )
+
+def setup(client):
+    client.add_cog(Errors(client))
+```
+
+# Heading 1
+
+## Heading 2
+
+### Heading 3
+
+#### Heading 4
+
+##### Heading 5
+
+###### Heading 6
+
+*Italic Text*
+
+_Italic Text_
+
+**Bold Text**
+
+__Bold Text__
+
+* Bullet List
+  * Item 1
+  * Item 2
+    * Subitem 1
+    * Subitem 2
+
+1. Numbered List
+   1. Item 1
+   2. Item 2
+      - Subitem 1
+      - Subitem 2
+
+[Link Text](https://example.com)
+
+![Image Alt Text](https://example.com/image.jpg)
+
+> Blockquote
+>
+> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+
+`Inline Code`
+
+| Table Header 1 | Table Header 2 |
+|----------------|----------------|
+| Table Row 1    | Table Row 1    |
+| Table Row 2    | Table Row 2    |
+
+<sup>Superscript Text</sup>
+
+<sub>Subscript Text</sub>
+
+<mark>Highlighted Text</mark>
+
+<ins>Underlined Text</ins>
+
+<del>Strikethrough Text</del>
+
+<abbr title="Abbreviation">Abbreviation</abbr>

src/src/env.d.ts

@@ -0,0 +1,2 @@
+/// <reference path="../.astro/types.d.ts" />
+/// <reference types="astro/client" />

src/src/layouts/content.astro

@@ -0,0 +1,72 @@
+---
+import "@/style/globals.css";
+import { ClientRouter } from "astro:transitions";
+import Header from "@/components/header";
+import Footer from "@/components/footer";
+import Background from "@/components/background";
+
+export interface Props {
+  title: string;
+  description: string;
+}
+
+const { title, description } = Astro.props;
+const ogImage = "https://timmypidashev.dev/og-image.jpg";
+---
+
+<html lang="en">
+  <head>
+    <title>{title}</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width" />
+    <!-- OpenGraph -->
+    <meta property="og:image" content={ogImage} />
+    <meta property="og:image:width" content="1200" />
+    <meta property="og:image:height" content="630" />
+    <!-- Twitter -->
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:image" content={ogImage} />
+    <meta name="twitter:description" content={description} />
+    <!-- Basic meta description for search engines -->
+    <meta name="description" content={description} />
+    <!-- Also used in OpenGraph for social media sharing -->
+    <meta property="og:description" content={description} />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <ClientRouter 
+      defaultTransition={false}
+      handleFocus={false}
+    />
+
+    <style>
+      ::view-transition-new(:root) {
+        animation: none;
+      }
+      
+      ::view-transition-old(:root) {
+        animation: 90ms ease-out both fade-out;
+      }
+
+      @keyframes fade-out {
+        from { opacity: 1; }
+        to { opacity: 0; }
+      }
+    </style>
+  </head>
+  <body class="bg-background text-foreground">
+    <Header client:load />
+    <main>
+      <div class="max-w-5xl mx-auto pt-12 px-4 py-8">
+        <Background layout="content" position="right" client:only="react" transition:persist />
+        <slot />
+        <Background layout="content" position="left" client:only="react" transition:persist />
+      </div>
+    </main>
+    <Footer client:load transition:persist />
+
+    <script>
+      document.addEventListener("astro:after-navigation", () => {
+        window.scrollTo(0, 0);
+      });
+    </script>
+  </body>
+</html>

src/src/layouts/index.astro

@@ -0,0 +1,50 @@
+---
+const { content } = Astro.props;
+
+import "@/style/globals.css";
+
+import { ClientRouter } from "astro:transitions";
+
+import Header from "@/components/header";
+import Footer from "@/components/footer";
+import Background from "@/components/background";
+
+export interface Props {
+  title: string;
+  description: string;
+}
+
+const { title, description } = Astro.props;
+const ogImage = "https://timmypidashev.dev/og-image.jpg";
+---
+
+<html lang="en">
+  <head>
+    <title>{title}</title>
+		<meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width" />
+    <!-- OpenGraph -->
+    <meta property="og:image" content={ogImage} />
+    <meta property="og:image:width" content="1200" />
+    <meta property="og:image:height" content="630" />
+    <!-- Twitter -->
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:image" content={ogImage} />
+    <meta name="twitter:description" content={description} />
+    <!-- Basic meta description for search engines -->
+    <meta name="description" content={description} />
+    <!-- Also used in OpenGraph for social media sharing -->
+    <meta property="og:description" content={description} />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="sitemap" href="/sitemap-index.xml" />
+    <ClientRouter />
+	</head>
+  <body class="bg-background text-foreground">
+    <Header client:load />
+    <main transition:animate="fade">
+      <Background layout="index" client:only="react" transition:persist />
+      <slot />
+    </main>
+    <Footer client:load transition:persist fixed=true />
+	</body>
+</html>

src/src/lib/getPostData.ts

@@ -0,0 +1,14 @@
+import readingTime from "reading-time";
+
+type Post = {
+  title: string
+  file: string
+  rawContent: () => string
+}
+
+export default function getPostData(post: Post) {
+  return {
+    slug: post.file.split('/').pop().split('.').shift(),
+    readingTime: readingTime(post.rawContent()).text,
+  }
+}

src/src/lib/structuredData.ts

@@ -0,0 +1,59 @@
+import { type Article, type Person, type WebSite, type WithContext } from "schema-dts";
+import type { CollectionEntry } from 'astro:content';
+ 
+export const blogWebsite: WithContext<WebSite> = {
+  '@context': 'https://schema.org',
+  '@type': 'WebSite',
+  url: `${import.meta.env.SITE}/blog/`,
+  name: 'Dzmitry Kozhukh blog',
+  description: 'Frontend insights',
+  inLanguage: 'en_US',
+};
+ 
+export const mainWebsite: WithContext<WebSite> = {
+  "@context": "https://schema.org",
+  "@type": "WebSite",
+  url: import.meta.env.SITE,
+  name: "Timothy Pidashev - Personal website",
+  description: "Timothy Pidashev's contact page, portfolio and blog",
+  inLanguage: "en_US",
+};
+ 
+export const personSchema: WithContext<Person> = {
+  "@context": "https://schema.org",
+  "@type": "Person",
+  name: "Timothy Pidashev",
+  url: "https://timmypidashev.dev",
+  sameAs: [
+    "https://github.com/timmypidashev",
+    "https://www.linkedin.com/in/timothy-pidashev-4353812b8",
+  ],
+  jobTitle: "Software Engineer",
+  worksFor: {
+    "@type": "Organization",
+    name: "Fathers House Christian Center",
+    url: "https://fhccenter.org",
+  },
+};
+ 
+export function getArticleSchema(post: CollectionEntry<"blog">) {
+  const articleStructuredData: WithContext<Article> = {
+    "@context": "https://schema.org",
+    "@type": "Article",
+    headline: post.data.title,
+    url: `${import.meta.env.SITE}/blog/${post.slug}/`,
+    description: post.data.excerpt,
+    datePublished: post.data.date.toString(),
+    publisher: {
+      "@type": "Person",
+      name: "Timothy Pidashev",
+      url: import.meta.env.SITE,
+    },
+    author: {
+      "@type": "Person",
+      name: "Timothy Pidashev",
+      url: import.meta.env.SITE,
+    },
+  };
+  return articleStructuredData;
+}

src/src/pages/404.astro

@@ -0,0 +1,18 @@
+---
+import IndexLayout from "@/layouts/index.astro";
+
+const title = "404 Not Found";
+---
+
+<IndexLayout content={{ title: "404 | Timothy Pidashev" }}>
+  <main class="min-h-screen flex flex-col items-center justify-center p-4 text-center">
+    <h1 class="text-6xl font-bold mb-4">404</h1>
+    <p class="text-xl mb-8">Whoops! This page doesn't exist.</p>
+    <button 
+      onclick="window.history.back()" 
+      class="underline hover:opacity-70 transition-opacity"
+    >
+      go back
+    </button>
+  </main>
+</IndexLayout>

src/src/pages/about.astro

@@ -0,0 +1,30 @@
+---
+import "@/style/globals.css"
+import ContentLayout from "@/layouts/content.astro";
+import Intro from "@/components/about/intro";
+import Timeline from "@/components/about/timeline";
+import CurrentFocus from "@/components/about/current-focus";
+import OutsideCoding from "@/components/about/outside-coding";
+---
+<ContentLayout 
+  title="About | Timothy Pidashev"
+  description="A software engineer passionate about the web, open source, and building innovative solutions."
+>
+  <div class="min-h-screen">
+    <section class="h-screen flex items-center justify-center">
+      <Intro client:load />
+    </section>
+    
+    <section class="flex items-center justify-center py-16">
+      <Timeline client:load />
+    </section>
+
+    <section class="flex items-center justify-center py-16">
+      <CurrentFocus client:load />
+    </section>
+
+    <section class="flex items-center justify-center py-16">
+      <OutsideCoding client:load />
+    </section>
+  </div>
+</MainLayout>

src/src/pages/blog/[...slug].astro

@@ -0,0 +1,76 @@
+---
+import { CollectionEntry, getCollection } from "astro:content";
+import { Image } from "astro:assets";
+import ContentLayout from "@/layouts/content.astro";
+import { getArticleSchema } from "@/lib/structuredData";
+import { blogWebsite } from "@/lib/structuredData";
+
+interface Props {
+  post: CollectionEntry<"blog">;
+}
+export async function getStaticPaths() {
+  const posts = await getCollection("blog");
+  return posts.map((post) => ({
+    params: { slug: post.slug },
+    props: post,
+  }));
+}
+const post = Astro.props;
+const { Content } = await post.render();
+const articleStructuredData = getArticleSchema(post);
+ 
+const breadcrumbsStructuredData = {
+  "@context": "https://schema.org",
+  "@type": "BreadcrumbList",
+  itemListElement: [
+    {
+      "@type": "ListItem",
+      position: 1,
+      name: "Blog",
+      item: `${import.meta.env.SITE}/blog/`,
+    },
+    {
+      "@type": "ListItem",
+      position: 2,
+      name: post.data.title,
+      item: `${import.meta.env.SITE}/blog/${post.slug}/`,
+    },
+  ],
+};
+const jsonLd = {
+  "@context": "https://schema.org",
+  "@graph": [articleStructuredData, breadcrumbsStructuredData, blogWebsite],
+};
+---
+
+<ContentLayout>
+  <script type="application/ld+json" set:html={JSON.stringify(jsonLd)} />
+  <div class="relative max-w-8xl mx-auto">
+    <article class="prose prose-lg mx-auto max-w-4xl">
+      {post.data.image && (
+        <div class="-mx-4 sm:mx-0 mb-8">
+          <Image
+            src={post.data.image}
+            alt={post.data.title}
+            class="w-full h-auto rounded-lg object-cover"
+            width={1200}
+            height={630}
+            quality={100}
+          />
+        </div>
+      )}
+      <h1 class="text-3xl pt-4">{post.data.title}</h1>
+      <p class="lg:text-2xl sm:text-lg">{post.data.description}</p>
+      <p class="text-lg">{post.data.author} | {post.data.date}</p>
+      <div class="flex flex-wrap gap-2 pb-4">
+        {post.data.tags.map((tag) => (
+          <span class="text-sm px-2 py-1 bg-muted rounded-full">
+            #{tag}
+          </span>
+        ))}
+      </div>
+      <hr class="bg-orange" />
+      <Content />
+    </article>
+  </div>
+</ContentLayout>

src/src/pages/blog/index.astro

@@ -0,0 +1,19 @@
+---
+import { getCollection } from "astro:content";
+import ContentLayout from "@/layouts/content.astro";
+
+import { BlogPostList } from "@/components/blog/post-list";
+
+const posts = (await getCollection("blog", ({ data }) => {
+  return data.isDraft !== true;
+})).sort(
+	(a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf()
+);
+---
+
+<ContentLayout 
+  title="Blog | Timothy Pidashev"
+  description="My experiences and technical insights into software development and the ever-evolving world of programming."
+>
+  <BlogPostList posts={posts} client:load />
+</ContentLayout>

src/src/pages/index.astro

@@ -0,0 +1,13 @@
+---
+import "@/style/globals.css"
+
+import IndexLayout from "@/layouts/index.astro";
+import Hero from "@/components/hero";
+---
+
+<IndexLayout 
+  title="Timothy Pidashev" 
+  description="Turning coffee into code since 2018."
+>
+  <Hero client:load />
+</IndexLayout>

src/src/pages/projects/[...slug].astro

@@ -0,0 +1,63 @@
+---
+import { getCollection } from "astro:content";
+import ContentLayout from "@/layouts/content.astro";
+
+export async function getStaticPaths() {
+  const projects = await getCollection("projects");
+  return projects.map(project => ({
+    params: { slug: project.slug },
+    props: { project },
+  }));
+}
+
+const { project } = Astro.props;
+const { Content } = await project.render();
+---
+
+<ContentLayout title={`${project.data.title} | Timothy Pidashev`}>
+  <article class="w-full mx-auto px-4 pt-6 sm:pt-12">
+    {/* Image Section */}
+    {project.data.image && (
+      <div class="w-full rounded-lg overflow-hidden mb-8 border-2 border-foreground/20 aspect-video">
+        <img 
+          src={project.data.image}
+          alt={project.data.title}
+          class="w-full h-full object-cover"
+        />
+      </div>
+    )}
+
+    <header class="mb-8">
+      <h1 class="text-3xl sm:text-4xl font-bold text-yellow-bright mb-4">
+        {project.data.title}
+      </h1>
+      
+      <div class="flex flex-wrap gap-2 mb-4">
+        {project.data.techStack.map(tech => (
+          <span class="text-xs px-2 py-1 rounded-full bg-purple-bright/10 text-purple-bright">
+            {tech}
+          </span>
+        ))}
+      </div>
+
+      <div class="flex gap-4">
+        {project.data.githubUrl && (
+          <a href={project.data.githubUrl} 
+             class="text-foreground/70 hover:text-blue-bright transition-colors">
+            View Source
+          </a>
+        )}
+        {project.data.demoUrl && (
+          <a href={project.data.demoUrl} 
+             class="text-foreground/70 hover:text-green-bright transition-colors">
+            Live Link
+          </a>
+        )}
+      </div>
+    </header>
+
+    <div class="prose prose-invert max-w-none">
+      <Content />
+    </div>
+  </article>
+</ContentLayout>

src/src/pages/projects/index.astro

@@ -0,0 +1,18 @@
+---
+import { getCollection } from "astro:content";
+import ContentLayout from "@/layouts/content.astro";
+import { ProjectList } from "@/components/projects/project-list";
+
+const projects = (await getCollection("projects", ({ data }) => {
+  return data.isDraft !== true;
+})).sort(
+  (a, b) => new Date(b.data.date).getTime() - new Date(a.data.date).getTime()
+);
+---
+
+<ContentLayout 
+  title="Projects | Timothy Pidashev"
+  description="My portfolio of software, including web apps, dev tools, and passion projects."
+>
+  <ProjectList projects={projects} client:load />
+</ContentLayout>

src/src/pages/resume.astro

@@ -0,0 +1,15 @@
+---
+import "@/style/globals.css"
+
+import ContentLayout from "@/layouts/content.astro";
+import Resume from "@/components/resume";
+---
+
+<ContentLayout 
+  title="Resume | Timothy Pidashev"
+  description = "My professional experience, skills, and development journey in software engineering."
+>
+  <div class="flex items-center justify-center w-full">
+    <Resume client:load />
+  </div>
+</ContentLayout>

src/src/pages/robots.txt.ts

@@ -0,0 +1,13 @@
+import type { APIRoute } from "astro";
+
+const getRobotsTxt = (sitemapURL: URL) => `
+User-agent: *
+Allow: /
+
+Sitemap: ${sitemapURL.href}
+`;
+
+export const GET: APIRoute = ({ site }) => {
+  const sitemapURL = new URL("sitemap-index.xml", site);
+  return new Response(getRobotsTxt(sitemapURL));
+};

src/tailwind.config.cjs

@@ -0,0 +1,195 @@
+module.exports = {
+  content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
+  theme: {
+    extend: {
+      colors: {
+        background: "#000000",
+        foreground: "#ebdbb2",
+        red: {
+          DEFAULT: "#cc241d",
+          bright: "#fb4934"
+        },
+        orange: {
+          DEFAULT: "#d65d0e",
+          bright: "#fe8019"
+        },
+        green: {
+          DEFAULT: "#98971a",
+          bright: "#b8bb26"
+        },
+        yellow: {
+          DEFAULT: "#d79921",
+          bright: "#fabd2f"
+        },
+        blue: {
+          DEFAULT: "#458588",
+          bright: "#83a598"
+        },
+        purple: {
+          DEFAULT: "#b16286",
+          bright: "#d3869b"
+        },
+        aqua: {
+          DEFAULT: "#689d6a",
+          bright: "#8ec07c"
+        }
+      },
+      keyframes: {
+        "draw-line": {
+          "0%": { "stroke-dashoffset": "100" },
+          "100%": { "stroke-dashoffset": "0" }
+        }
+      },
+      animation: {
+        "draw-line": "draw-line 0.6s ease-out forwards"
+      },
+      typography: (theme) => ({
+        DEFAULT: {
+          css: {
+            color: theme("colors.foreground"),
+            "--tw-prose-body": theme("colors.foreground"),
+            "--tw-prose-headings": theme("colors.yellow.bright"),
+            "--tw-prose-links": theme("colors.blue.bright"),
+            "--tw-prose-bold": theme("colors.orange.bright"),
+            "--tw-prose-quotes": theme("colors.green.bright"),
+            "--tw-prose-code": theme("colors.purple.bright"),
+            "--tw-prose-hr": theme("colors.foreground"),
+            "--tw-prose-bullets": theme("colors.foreground"),
+
+            // Base text color
+            color: theme("colors.foreground"),
+
+            // Headings
+            h1: {
+              color: theme("colors.yellow.bright"),
+              fontWeight: "700",
+            },
+            h2: {
+              color: theme("colors.yellow.bright"),
+              fontWeight: "600",
+            },
+            h3: {
+              color: theme("colors.yellow.bright"),
+              fontWeight: "600",
+            },
+            h4: {
+              color: theme("colors.yellow.bright"),
+              fontWeight: "600",
+            },
+
+            // Links
+            a: {
+              color: theme("colors.blue.bright"),
+              "&:hover": {
+                color: theme("colors.blue.DEFAULT"),
+              },
+              textDecoration: "none",
+              borderBottom: `1px solid ${theme("colors.blue.bright")}`,
+              transition: "all 0.2s ease-in-out",
+            },
+
+            // Bold
+            strong: {
+              color: theme("colors.orange.bright"),
+              fontWeight: "600",
+            },
+
+            // Lists
+            ul: {
+              li: {
+                "&::before": {
+                  backgroundColor: theme("colors.foreground"),
+                },
+              },
+            },
+
+            // Blockquotes
+            blockquote: {
+              borderLeftColor: theme("colors.green.bright"),
+              color: theme("colors.green.bright"),
+              fontStyle: "italic",
+              quotes: "\"\\201C\"\"\\201D\"\"\\2018\"\"\\2019\"",
+              p: {
+                "&::before": { content: "none" },
+                "&::after": { content: "none" },
+              },
+            },
+
+            // Code
+            code: {
+              color: theme("colors.purple.bright"),
+              backgroundColor: "#282828", // A dark gray that works with black
+              padding: "0.2em 0.4em",
+              borderRadius: "0.25rem",
+              fontWeight: "400",
+              "&::before": {
+                content: "\"\"",
+              },
+              "&::after": {
+                content: "\"\"",
+              },
+            },
+
+            // Inline code
+            "code::before": {
+              content: "\"\"",
+            },
+            "code::after": {
+              content: "\"\"",
+            },
+
+            // Pre
+            pre: {
+              backgroundColor: "#282828",
+              color: theme("colors.foreground"),
+              code: {
+                backgroundColor: "transparent",
+                padding: "0",
+                color: "inherit",
+                fontSize: "inherit",
+                fontWeight: "inherit",
+                "&::before": { content: "none" },
+                "&::after": { content: "none" },
+              },
+            },
+
+            // Horizontal rules
+            hr: {
+              borderColor: theme("colors.foreground"),
+              opacity: "0.2",
+            },
+
+            // Table
+            table: {
+              thead: {
+                borderBottomColor: theme("colors.foreground"),
+                th: {
+                  color: theme("colors.yellow.bright"),
+                },
+              },
+              tbody: {
+                tr: {
+                  borderBottomColor: theme("colors.foreground"),
+                },
+              },
+            },
+
+            // Images
+            img: {
+              borderRadius: "0.375rem",
+            },
+
+            // Figures
+            figcaption: {
+              color: theme("colors.foreground"),
+              opacity: "0.8",
+            },
+          },
+        },
+      }),
+    },
+  },
+  plugins: [
+    require("@tailwindcss/typography"),
+  ],
+};

src/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "astro/tsconfigs/base",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules"]
+}