Polishing animations

.caddy/Caddyfile.local

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

.caddy/Caddyfile.release

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

.docker/Dockerfile.local

@@ -24,4 +24,4 @@ RUN echo "PUBLIC_VERSION=${CONTAINER_WEB_VERSION}" > /app/.env && \
 
 EXPOSE 3000
 
-CMD ["pnpm", "install", "&&", "pnpm", "run", "dev"]
+CMD ["pnpm", "run", "dev"]

.docker/Dockerfile.release

@@ -35,11 +35,13 @@ RUN pnpm run build
 FROM node:22-alpine
 WORKDIR /app
 
-# Install serve
-RUN npm install -g serve
-
 # Copy built files
 COPY --from=builder /app/dist ./dist
+COPY --from=builder /app/node_modules ./node_modules
+COPY --from=builder /app/package.json ./package.json
 
+# Expose port 3000
 EXPOSE 3000
-CMD ["serve", "-s", "dist", "-l", "3000"]
+
+# Deployment command
+CMD ["node", "./dist/server/entry.mjs"]

.gitignore

@@ -1,5 +1,8 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
+# Env
+.env 
+
 # astro
 .astro/
 

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "src/public/scripts"]
+	path = src/public/scripts
+	url = https://github.com/timmypidashev/scripts

Makefile

@@ -1,13 +1,13 @@
 PROJECT_NAME							:= "timmypidashev.dev"
 PROJECT_AUTHORS 						:= "Timothy Pidashev (timmypidashev) <pidashev.tim@gmail.com>"
-PROJECT_VERSION 						:= "v1.0.1"
+PROJECT_VERSION 						:= "v2.1.1"
 PROJECT_LICENSE 						:= "MIT"
 PROJECT_SOURCES							:= "https://github.com/timmypidashev/web"
-PROJECT_REGISTRY						:= "ghcr.io/timmypidashev/web"
+PROJECT_REGISTRY						:= "ghcr.io/timmypidashev"
 PROJECT_ORGANIZATION					:= "org.opencontainers"
 
-CONTAINER_WEB_NAME						:= "web"
-CONTAINER_WEB_VERSION					:= "v1.0.1"
+CONTAINER_WEB_NAME						:= "timmypidashev.dev"
+CONTAINER_WEB_VERSION					:= "v2.1.1"
 CONTAINER_WEB_LOCATION					:= "src/"
 CONTAINER_WEB_DESCRIPTION				:= "My portfolio website!"
 
@@ -17,26 +17,41 @@ CONTAINER_WEB_DESCRIPTION				:= "My portfolio website!"
 
 help:
 	@echo "Available targets:"
-	@echo "  run           - Runs the docker compose file with the specified environment (local, dev, preview, or release)"
+	@echo "  run           - Runs the docker compose file with the specified environment (local 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"
+
+run:
+	# Arguments:
+	# [environment]: 'local' or 'release'
+	# 
+	# Explanation:
+	# * Runs the docker compose file with the specified environment(compose.local.yml, or compose.release.yml)
+	# * Passes all generated arguments to the compose file.
+	
+	# Make sure we have been given proper arguments.
+	@if [ "$(word 2,$(MAKECMDGOALS))" = "local" ]; then \
+		echo "Running in local environment"; \
+	elif [ "$(word 2,$(MAKECMDGOALS))" = "release" ]; then \
+		echo "Running in release environment"; \
+	else \
+		echo "Invalid usage. Please use 'make run local' or 'make run release'"; \
+		exit 1; \
+	fi
+
+	docker compose -f compose.$(word 2,$(MAKECMDGOALS)).yml up --remove-orphans
+
 
 build:
 	# Arguments
 	# [container]: Build context(which container to build ['all' to build every container defined])
-	# [environment]: 'local', 'dev', 'preview', or 'release'
+	# [environment]: 'local' 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)))
@@ -49,33 +64,6 @@ build:
 		$(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)
@@ -93,45 +81,7 @@ push:
 	# 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:
@@ -165,21 +115,6 @@ bump:
 	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.
@@ -194,7 +129,6 @@ define args
             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
@@ -221,19 +155,22 @@ define container_build
 	$(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))
+	$(eval TAG := $(PROJECT_NAME):$(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'"; \
+	@if [ "$(strip $(ENVIRONMENT))" != "local" ] && [ "$(strip $(ENVIRONMENT))" != "release" ]; then \
+        echo "Invalid environment. Please specify 'local' 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
+	$(if $(filter $(strip $(ENVIRONMENT)),release), \
+		$(eval TAG := $(PROJECT_REGISTRY)/$(PROJECT_NAME):$(VERSION)), \
+	)
+
+	docker buildx build --load -t $(TAG) -f .docker/Dockerfile.$(ENVIRONMENT) ./$(strip $(subst $(SPACE),,$(call container_location,$(CONTAINER))))/. $(ARGS) $(call labels,$(shell echo $(CONTAINER_NAME) | tr '[:lower:]' '[:upper:]')) --no-cache
 endef
 
 define container_location
@@ -241,26 +178,9 @@ define container_location
     $(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 +1,3 @@
+
+![Badge](https://hitscounter.dev/api/hit?url=https%3A%2F%2Ftimmypidashev.dev&label=Visits&icon=eye-fill&color=%23198754)
 <img src=".github/preview.jpeg" title="Preview"/>

compose.dev.yml

@@ -1,35 +0,0 @@
-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

@@ -1,20 +1,28 @@
 services:
   caddy:
-    container_name: proxy
+    container_name: caddy
     image: caddy:latest
     ports:
       - 80:80
       - 443:443
     volumes:
-      - ./.caddy/Caddyfile.dev:/etc/caddy/Caddyfile:rw
+      - ./.caddy/Caddyfile.release:/etc/caddy/Caddyfile:rw
     networks:
       - proxy_network
     depends_on:
-      - release.timmypidashev.dev
+      - timmypidashev.dev
       
-  release.timmypidashev.dev:
-    container_name: timmypidashev
-    image: ghcr.io/timmypidashev/timmypidashev.dev:release
+  watchtower:
+    container_name: updates
+    image: containrrr/watchtower
+    volumes:
+      - /var/run/docker.sock:/var/run/docker.sock
+      - $HOME/.docker/config.json:/config.json
+    command: --interval 120 --cleanup --label-enable
+
+  timmypidashev.dev:
+    container_name: timmypidashev.dev
+    image: ghcr.io/timmypidashev/timmypidashev.dev:latest
     networks:
       - proxy_network
 

package.json

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

pnpm-lock.yaml

@@ -1,90 +0,0 @@
-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

src/astro.config.mjs

@@ -1,14 +1,22 @@
 import { defineConfig } from "astro/config";
+import node from "@astrojs/node";
 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({
+  output: "server",
+  server: {
+    host: true,
+    port: 3000,
+  },
+  adapter: node({
+    mode: "standalone",
+  }),
   site: "https://timmypidashev.dev",
   build: {
     // Enable build-time optimizations
@@ -35,7 +43,7 @@ export default defineConfig({
           rehypePrettyCode,
           {
             theme: {
-              "name": "Custom Gruvbox Dark",
+              "name": "Darkbox",
               "type": "dark",
               "colors": {
                 "editor.background": "#000000",
@@ -163,6 +171,7 @@ export default defineConfig({
                 }
               ],
             },
+            keepBackground: true,
           },
         ],
       ],

src/package.json

@@ -1,6 +1,6 @@
 {
   "name": "src",
-  "version": "v1.0.1",
+  "version": "2.1.1",
   "private": true,
   "scripts": {
     "dev": "astro dev --host",
@@ -8,25 +8,36 @@
     "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"
+    "@astrojs/react": "^5.0.2",
+    "@astrojs/tailwind": "^6.0.2",
+    "@tailwindcss/typography": "^0.5.19",
+    "@types/react": "^18.3.28",
+    "@types/react-dom": "^18.3.7",
+    "astro": "^6.1.2",
+    "tailwindcss": "^3.4.19"
   },
   "dependencies": {
-    "@astrojs/mdx": "^4.0.3",
-    "@astrojs/sitemap": "^3.2.1",
+    "@astrojs/mdx": "^5.0.3",
+    "@astrojs/node": "^10.0.4",
+    "@astrojs/rss": "^4.0.18",
+    "@astrojs/sitemap": "^3.7.2",
+    "@giscus/react": "^3.1.0",
+    "@pilcrowjs/object-parser": "^0.0.4",
+    "@react-hook/intersection-observer": "^3.1.2",
+    "@rehype-pretty/transformers": "^0.13.2",
+    "arctic": "^3.7.0",
     "lucide-react": "^0.468.0",
+    "marked": "^15.0.12",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-responsive": "^10.0.0",
+    "react-icons": "^5.6.0",
+    "react-responsive": "^10.0.1",
     "reading-time": "^1.5.0",
-    "rehype-pretty-code": "^0.14.0",
+    "rehype-pretty-code": "^0.14.3",
     "rehype-slug": "^6.0.0",
-    "schema-dts": "^1.1.2",
-    "typewriter-effect": "^2.21.0"
+    "schema-dts": "^1.1.5",
+    "shiki": "^3.23.0",
+    "typewriter-effect": "^2.22.0",
+    "unist-util-visit": "^5.1.0"
   }
 }

src/pnpm-workspace.yaml

@@ -0,0 +1,3 @@
+onlyBuiltDependencies:
+  - esbuild
+  - sharp

src/public/favicon.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="16.000000pt" height="16.000000pt" viewBox="0 0 16.000000 16.000000"
+ preserveAspectRatio="xMidYMid meet">
+
+<g transform="translate(0.000000,16.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M0 80 l0 -80 30 32 c17 17 30 35 30 39 0 5 12 9 26 9 14 0 22 -4 19
+-10 -6 -10 33 -70 47 -70 4 0 8 36 8 80 l0 80 -80 0 -80 0 0 -80z m105 20 c-3
+-5 -16 -10 -28 -10 -18 0 -19 2 -7 10 20 13 43 13 35 0z"/>
+</g>
+</svg>

src/public/pgp.asc

@@ -0,0 +1,65 @@
+-----BEGIN PGP PUBLIC KEY BLOCK-----
+
+mQINBGTwzLsBEADehIeiC1fV/GiRBclTmM9e6rmG29/YQbrRfJZ+sa1gWlAws/yR
+sXbrCDh1S/JU85lirhc0A2N+OZSqCSkGUtvDhCttxLi5VUyVxgqshJWN/mU5eZEN
+x4/5mpAApV6K2WGjAggJjoHecr/+sRpV3Vq/5ypdp6RLt7zeJolJSzKWpFrGeYTd
+CFaZyZbQVw2NeFe9NBoQHDk0mMS+9bVyXQ2oi4fteKCe205cJkEc4Z8q4NzOlquL
+BbowQwxKoAosCwz19Em5yeND34WUHJPlgoYTf9HRgsQcmI17hn9Q00gzwm7gotbF
+bqWKEMduOzGBRyEEWeZ+l8CcWHAo2NbxZx01L4UsrZ6+MkXWv+2NQBFhPL14UcDg
+uuBVvc5rsgeu7Rm8DE2EXTyA3Bszz1r75TbsQwUianma38kxSuiKArUDE+v5X0vv
+F6e2z6hkDkKCe53EM9yF4lvVHNsQwxT8RBXPj+sc6Sqv3nIkLnan3++aMhW3up9s
+YXKouadmvgB4uGqsBjWOme4ViW46C7rNVRtUKQTdx89cFG1c+GuaI203RbHjAZVJ
+M9fBH5Ycdl0ieSCwmerbHfTRudHqPdNLQMvFYGPEj5pXalwtd3j4CEEC/HqOyklz
+IN9ReIYIYF0pSC5OmWD3c70vj0INsbWp96eB8skjONjHYL3Y2CXIZ0AzRQARAQAB
+tClUaW1vdGh5IFBpZGFzaGV2IDxwaWRhc2hldi50aW1AZ21haWwuY29tPokCTgQT
+AQgAOBYhBGjE1l58MsXUX+ieufe9h7j9i0NOBQJk8My7AhsDBQsJCAcCBhUKCQgL
+AgQWAgMBAh4BAheAAAoJEPe9h7j9i0NOsxwQALfdoZJAdkBpM2AmsVdx6JqvA08I
+p/Xr1YgjwJvziq8fnWpu/AGz9VevFVgAt1h1Dsr4XAolEtQM6+aiNX7HGqyLKqT7
+kum/dpnjw0/tiKvv/P2TRc+YZZLOfb+TYa1bZYGVDzGAHAm17yMJTV3rH8tIKNee
+VaqWmxMuwmUQXutvF9P2bhaJLOTjGCIVxuAMfLIhRGKz8q8+I5g5aLm/JrpHC0OY
+ACGSSj1vP0b5m5BLqqv67GueDHTX6w/7U1LAEspIcs+/GxoA5G9WzZFn4qNdq98h
+RPixuY5y5FYKV6FAVGm5Yu3FSPvKpXAfWZIKM3WzKf7BNhUVaB6HNGbCFAMGDcHz
+dZ9xXRohWlHidft55qBUpTXAjy3vb2k5eMXGPNMCwQvMyzDZzLkYbN3apuWbjzlQ
+ARdlGKpRRzmeAHEmAybX1Fel8dT2DWjP05t2z2BRQAFK9sGE7WzYhvllMp31C7SA
+uJZNzgjjs/aI8oiNc1qpeiQxsEGws3OakHRxd1rnM+d4icwTx13u8lMqHnvORgIe
+rAa6qKIUnfZLo0ut0X5s8iPjoLZr/qjDGRbVmHH5K/D5Ci6VlsEkmcQ0REE1FWPA
+hrlSNfKbeaHWAJ7MFKvNxViy8n7MeoR6Nn7EGoxCfekgGQLWuRNanChJ8dm7HZpq
+o/vu4JH94Ui9xDwBtDlUaW1vdGh5IFBpZGFzaGV2ICh0aW1teXBpZGFzaGV2KSA8
+bWFpbEB0aW1teXBpZGFzaGV2LmRldj6JAlQEEwEIAD4CGwMFCwkIBwICIgIGFQoJ
+CAsCBBYCAwECHgcCF4AWIQRoxNZefDLF1F/onrn3vYe4/YtDTgUCZ5J4fQIZAQAK
+CRD3vYe4/YtDTsGjD/4s/pBI8s+zoV+aBBKi9qmIqFAlZ8+JyY4TzAlIa1qZg/Xk
+GVEN1+Lwa9m4eI1SFZUOprLPiqqFJ+DSHjrua5FGo56uhYGBEbPBlzIJx0XtXclS
+1FmpoDOjY6FFsvrkv19jPYB2oXnPjok/nkRLdNWp1BVqisqFq8f//iynMu6GTndF
+cNHf7iwZ+IHytFTiKFCgMg7jPeXofAkpnFXoOB33wn7ED2I26zhMx9wJE1cKApxv
+ZmxGtkPk0rv6kiQqGE9zTg+AKSy1+jkXp8eFrnA4P9bIDXxcnDyVs/63X6X/qEK5
+Yg1a3Xq1U4d6aoQUqAShpAQGbTmEvKusYXzdd2fFJEd0OExXkG2mWndhkF/9+8Rh
+SroaqS+0G3nG38KTvK7OKnyHhuDVjcvJ5QiWVd1T7M3SBDAZwcOmpkw3SN26b8iS
+i8iHAUQGjKftG+PDrXvRhMn7lpIshJBXopCGJvzPwLIoMvVzgq0gxAeCUHqI0wr2
+EXEgboPW18zcAagI2r4B7p0xVtpJ9qPamYcCPqPMfxA8YYKhyzb8owkFUBboSF8j
+ihBz1NN3ph8ZEa1YbxrdJVMkbOlE/O+DDaegxkXG9gSts/nYZXQx5GZ2LyVlHC4z
+yVUpGwsRLfSejubhBnkRrXzOn1dFhAL4kIXFvFp4t4ZkYssdWzLVx71UVTyGsrkC
+DQRk8My7ARAA1NRA04/vS9Cww0MMFQwaBztEb4INAT3dVxybyPZEIiNGttqGzEc9
+EV+5NlcLwygDraXqw+k5GekIE7Mqf3YukeIqA+4TDVpFv26QbtBnLQ01YM7Z0tU4
+R/X6IJmn/Uudc5hKLOLms3BH4x6O/XQJERJIALOfMWRfsmcUXw8a05HF5OuNVClT
+w8FHVawN7frCJdBsh9g2bGJArwQFCxaLcDgpydUTMxNgxQMLgcAuIk3GiFwwWC4e
+HzrAmp1yHn/iDh+UN8zQBjoi/5Ac4uXJlHKGAiakw/NqYlFccno1vUg5kuW+9QN4
+ch2fa4zAosd7ObR5uZjNn6sggnq4ejA98vtg5DssCSQpTiFqNu3pBLroh4LsRh3r
+THuWnXj4HWKDPZ3odlPVy2sIswtMXO3uygyWLJbPuT824iFwD9imshqsnoMxazb1
+W/GuBFyI7ZM8tzCMVNtZExEBqnOwQdjlSgpla6L3UVWs4KL1UEVWm3doFCGgzQbK
+JVVH3Uk0Z+w+jylZqXdmSSrB/wkg+j9QK2VxewEP0onS4FBhoJsaezLL5fTYpOy5
+yAx2k3lqa3YF51ulPoGGg3u75R/37zt8VT3rfEXuCjtHd/H4fieluAOW2w4phXrC
+u8iMq0eChaedVZsAAsy+DW9Ighf8zy8x/HQ0MKaFGI59B6BOsL6f/2MAEQEAAYkC
+NgQYAQgAIBYhBGjE1l58MsXUX+ieufe9h7j9i0NOBQJk8My7AhsMAAoJEPe9h7j9
+i0NOWvEQAJl5UqnzxM9+aYQcCw1qxGYTxdui7mE8QHDU9L7sz5vPeLVXrkxZfFsR
++2Y6S92ySk+pTZv8/+TztxYczr3tJ/TUpj6jM7jJROo2BUcAph4wSBD/vxqCN40g
+XYcvbzbFvmbXJL+I2h/C3Ja7O0DqlDqRB2icaCYqVK0aDFfe5ldHbfs+w4Ox/zh6
+7kkchA+WauRadwyaqWK3XGdusTw3ZcaFRSGfTRCQfM2U1761mRBppeDhOPoZ6Ymy
+rWUpiOE7SJNe+gxyX0wVGv/CuUr5RaDEwvl7A5fUA9Sdvtxdr3Eixd6lsCRWoAtq
+1woDoqpDZpS0wlb28r7/ZtvAUR1EovAOwy41GNri9AwyMeRSg3NLqb21c9yhEV5a
+cWdGzioSjk89dd1c/pzuHPZ1cTRiizH8SRQjn/rLqJTnH1vVhLFmLv/Ywr9LOw2s
+RcKxrByu0O+j96zR+6dqsiCo4i0CUS7P1shQlzhRuz6o3eZ1IlepAlif2LDW5waO
+KdFJe2hD0oe4JKO9TbzJOeupFW1C/TBzdLif3K7VsKVdfPBL1YWinf7V7gryxJdc
+pAE4764aIhfCkLa85tt7Tn/ii4ZLLMQG+Ww7LJ7BRarMlcyrw3nf0dICLxFgAnMS
+vclOqTbTH082uTM/wa3dhxByz0rKZEz7xXAjPiZfK+2nncOdQhAm
+=T4Wx
+-----END PGP PUBLIC KEY BLOCK-----

src/src/components/404/glitched-text.tsx

@@ -0,0 +1,56 @@
+import React, { useState, useEffect } from "react";
+
+const GlitchText = () => {
+  const originalText = 'Error 404';
+  const [characters, setCharacters] = useState(
+    originalText.split("").map(char => ({ char, isGlitched: false }))
+  );
+  const glitchChars = "!<>-_\\/[]{}—=+*^?#________";
+
+  useEffect(() => {
+    const glitchInterval = setInterval(() => {
+      if (Math.random() < 0.2) { // 20% chance to trigger glitch
+        setCharacters(prev => {
+          return originalText.split('').map((originalChar, index) => {
+            if (Math.random() < 0.3) { // 30% chance to glitch each character
+              return {
+                char: glitchChars[Math.floor(Math.random() * glitchChars.length)],
+                isGlitched: true
+              };
+            }
+            return { char: originalChar, isGlitched: false };
+          });
+        });
+
+        // Reset after short delay
+        setTimeout(() => {
+          setCharacters(originalText.split('').map(char => ({
+            char,
+            isGlitched: false
+          })));
+        }, 100);
+      }
+    }, 50);
+
+    return () => clearInterval(glitchInterval);
+  }, []);
+
+  return (
+    <div className="relative">
+      <h1 className="text-6xl font-bold mb-4 relative">
+        <span className="relative inline-block">
+          {characters.map((charObj, index) => (
+            <span 
+              key={index} 
+              className={charObj.isGlitched ? "text-red" : "text-purple"}
+            >
+              {charObj.char}
+            </span>
+          ))}
+        </span>
+      </h1>
+    </div>
+  );
+};
+
+export default GlitchText;

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

@@ -1,5 +1,57 @@
-import React from 'react';
-import { Code2, BookOpen, RocketIcon, Compass } from 'lucide-react';
+import React, { useEffect, useRef, useState } from "react";
+import { Code2, BookOpen, RocketIcon, Compass } from "lucide-react";
+
+function AnimateIn({ children, delay = 0 }: { children: React.ReactNode; delay?: number }) {
+  const ref = useRef<HTMLDivElement>(null);
+  const [visible, setVisible] = useState(false);
+  const [skip, setSkip] = useState(false);
+
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+
+    const rect = el.getBoundingClientRect();
+    const inView = rect.top < window.innerHeight && rect.bottom > 0;
+    const isReload = performance.getEntriesByType?.("navigation")?.[0]?.type === "reload";
+
+    if (inView && isReload) {
+      setSkip(true);
+      setVisible(true);
+      return;
+    }
+    if (inView) {
+      requestAnimationFrame(() => setVisible(true));
+      return;
+    }
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setVisible(true);
+          observer.disconnect();
+        }
+      },
+      { threshold: 0.15 }
+    );
+
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
+
+  return (
+    <div
+      ref={ref}
+      className={skip ? "" : "transition-all duration-700 ease-out"}
+      style={skip ? {} : {
+        transitionDelay: `${delay}ms`,
+        opacity: visible ? 1 : 0,
+        transform: visible ? "translateY(0)" : "translateY(24px)",
+      }}
+    >
+      {children}
+    </div>
+  );
+}
 
 export default function CurrentFocus() {
   const recentProjects = [
@@ -7,42 +59,46 @@ export default function CurrentFocus() {
       title: "Darkbox",
       description: "My gruvbox theme, with a pure black background",
       href: "/projects/darkbox",
-      tech: ["Neovim", "Lua"]
+      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"]
+      tech: ["Tanstack", "React Query", "Fastapi"],
     },
     {
       title: "Fhccenter",
       description: "Website made for a private school",
       href: "/projects/fhccenter",
-      tech: ["Nextjs", "Typescript", "Prisma"]
-    }
+      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">
+        <AnimateIn>
           <h2 className="text-3xl sm:text-4xl font-bold text-center text-yellow-bright mb-8 sm:mb-12">
             Current Focus
           </h2>
+        </AnimateIn>
 
         {/* Recent Projects Section */}
         <div className="mb-8 sm:mb-16">
+          <AnimateIn delay={100}>
             <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>
+          </AnimateIn>
           <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) => (
+            {recentProjects.map((project, i) => (
+              <AnimateIn key={project.title} delay={200 + i * 100}>
                 <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"
+                  className="block p-4 sm:p-6 rounded-lg border border-foreground/10 hover:border-yellow-bright/50
+                           transition-all duration-300 group bg-background/50 h-full"
                 >
                   <h4 className="font-bold text-lg group-hover:text-yellow-bright transition-colors">
                     {project.title}
@@ -56,14 +112,15 @@ export default function CurrentFocus() {
                     ))}
                   </div>
                 </a>
+              </AnimateIn>
             ))}
           </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">
+          <AnimateIn delay={100}>
+            <div className="space-y-4 p-4 sm:p-6 rounded-lg border border-foreground/10 bg-background/50 h-full">
               <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>
@@ -83,9 +140,10 @@ export default function CurrentFocus() {
                 </li>
               </ul>
             </div>
+          </AnimateIn>
 
-          {/* Project Interests */}
-          <div className="space-y-4 p-4 sm:p-6 rounded-lg border border-foreground/10 bg-background/50">
+          <AnimateIn delay={200}>
+            <div className="space-y-4 p-4 sm:p-6 rounded-lg border border-foreground/10 bg-background/50 h-full">
               <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>
@@ -105,9 +163,10 @@ export default function CurrentFocus() {
                 </li>
               </ul>
             </div>
+          </AnimateIn>
 
-          {/* Areas to Explore */}
-          <div className="space-y-4 p-4 sm:p-6 rounded-lg border border-foreground/10 bg-background/50">
+          <AnimateIn delay={300}>
+            <div className="space-y-4 p-4 sm:p-6 rounded-lg border border-foreground/10 bg-background/50 h-full">
               <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>
@@ -127,6 +186,7 @@ export default function CurrentFocus() {
                 </li>
               </ul>
             </div>
+          </AnimateIn>
         </div>
       </div>
     </div>

src/src/components/about/intro.tsx

@@ -1,43 +1,89 @@
-import React from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { ChevronDownIcon } from "@/components/icons";
 
 export default function Intro() {
+  const [visible, setVisible] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+
+    const rect = el.getBoundingClientRect();
+    const inView = rect.top < window.innerHeight && rect.bottom > 0;
+    const isReload = performance.getEntriesByType?.("navigation")?.[0]?.type === "reload";
+
+    if (inView && isReload) {
+      setVisible(true);
+      return;
+    }
+    if (inView) {
+      // Fresh navigation — animate in
+      requestAnimationFrame(() => setVisible(true));
+      return;
+    }
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setVisible(true);
+          observer.disconnect();
+        }
+      },
+      { threshold: 0.2 }
+    );
+
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
+
   const scrollToNext = () => {
-    window.scrollTo({
-      top: window.innerHeight,
-      behavior: "smooth"
-    });
+    const nextSection = document.querySelector("section")?.nextElementSibling;
+    if (nextSection) {
+      const offset = (nextSection as HTMLElement).offsetTop - (window.innerHeight - (nextSection as HTMLElement).offsetHeight) / 2;
+      window.scrollTo({ top: offset, behavior: "smooth" });
+    }
   };
 
+  const anim = (delay: number) =>
+    ({
+      opacity: visible ? 1 : 0,
+      transform: visible ? "translateY(0)" : "translateY(20px)",
+      transition: `all 0.7s ease-out ${delay}ms`,
+    }) as React.CSSProperties;
+
   return (
-    <div className="w-full max-w-4xl px-4">
+    <div ref={ref} 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">
+          <div
+            className="w-32 h-32 sm:w-48 sm:h-48 shrink-0"
+            style={anim(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">
+          <div className="text-center sm:text-left space-y-4 sm:space-y-6" style={anim(150)}>
             <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">
+              <p className="flex items-center justify-center font-bold sm:justify-start gap-2" style={anim(300)}>
                 <span className="text-blue">Software Systems Engineer</span>
               </p>
-              <p className="flex items-center justify-center font-bold sm:justify-start gap-2">
+              <p className="flex items-center justify-center font-bold sm:justify-start gap-2" style={anim(450)}>
                 <span className="text-green">Open Source Enthusiast</span>
               </p>
-              <p className="flex items-center justify-center font-bold sm:justify-start gap-2">
+              <p className="flex items-center justify-center font-bold sm:justify-start gap-2" style={anim(600)}>
                 <span className="text-yellow">Coffee Connoisseur</span>
               </p>
             </div>
           </div>
         </div>
-        <div className="space-y-8">
+        <div className="space-y-8" style={anim(750)}>
           <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>
@@ -45,7 +91,7 @@ export default function Intro() {
             <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">
+          <div className="flex justify-center" style={anim(900)}>
             <button
               onClick={scrollToNext}
               className="text-foreground/50 hover:text-yellow-bright transition-colors duration-300"

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

@@ -1,64 +1,115 @@
-import React from 'react';
-import { Fish, Mountain, Book, Car } from 'lucide-react';
+import React, { useEffect, useRef, useState } from "react";
+import { Cross, Fish, Mountain, Book } from "lucide-react";
+
+function AnimateIn({ children, delay = 0 }: { children: React.ReactNode; delay?: number }) {
+  const ref = useRef<HTMLDivElement>(null);
+  const [visible, setVisible] = useState(false);
+  const [skip, setSkip] = useState(false);
+
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+
+    const rect = el.getBoundingClientRect();
+    const inView = rect.top < window.innerHeight && rect.bottom > 0;
+    const isReload = performance.getEntriesByType?.("navigation")?.[0]?.type === "reload";
+
+    if (inView && isReload) {
+      setSkip(true);
+      setVisible(true);
+      return;
+    }
+    if (inView) {
+      requestAnimationFrame(() => setVisible(true));
+      return;
+    }
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setVisible(true);
+          observer.disconnect();
+        }
+      },
+      { threshold: 0.15 }
+    );
+
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
+
+  return (
+    <div
+      ref={ref}
+      className={skip ? "" : "transition-all duration-700 ease-out"}
+      style={skip ? {} : {
+        transitionDelay: `${delay}ms`,
+        opacity: visible ? 1 : 0,
+        transform: visible ? "translateY(0) scale(1)" : "translateY(20px) scale(0.97)",
+      }}
+    >
+      {children}
+    </div>
+  );
+}
 
-export default function OutsideCoding() {
 const interests = [
+  {
+    icon: <Cross className="text-red-bright" size={20} />,
+    title: "Faith",
+    description: "My walk with Jesus is the foundation of everything I do, guiding my purpose and perspective",
+  },
   {
     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"
+    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"
+    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"
+    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"
-    }
 ];
 
+export default function OutsideCoding() {
   return (
     <div className="flex justify-center items-center w-full">
       <div className="w-full max-w-4xl px-4 py-8">
+        <AnimateIn>
           <h2 className="text-2xl md:text-4xl font-bold text-center text-yellow-bright mb-8">
             Outside of Programming
           </h2>
+        </AnimateIn>
 
         <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
-          {interests.map((interest) => (
+          {interests.map((interest, i) => (
+            <AnimateIn key={interest.title} delay={100 + i * 100}>
               <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"
+                           hover:border-yellow-bright/50 transition-all duration-300 bg-background/50 h-full"
               >
-              <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 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>
+            </AnimateIn>
           ))}
         </div>
 
+        <AnimateIn delay={500}>
           <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-red-bright"> walking with Christ,</span>
             <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>
+            <span className="text-purple-bright"> or reading books.</span>
           </p>
+        </AnimateIn>
       </div>
     </div>
   );

src/src/components/about/stats-activity.tsx

@@ -0,0 +1,117 @@
+import React from "react";
+
+interface ActivityDay {
+  grand_total: { total_seconds: number };
+  date: string;
+}
+
+interface ActivityGridProps {
+  data: ActivityDay[];
+}
+
+export const ActivityGrid = ({ data }: ActivityGridProps) => {
+  const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+  const days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+
+  const getIntensity = (hours: number) => {
+    if (hours === 0) return 0;
+    if (hours < 2) return 1;
+    if (hours < 4) return 2;
+    if (hours < 6) return 3;
+    return 4;
+  };
+
+  const getColorClass = (intensity: number) => {
+    if (intensity === 0) return "bg-foreground/5";
+    if (intensity === 1) return "bg-green-DEFAULT/30";
+    if (intensity === 2) return "bg-green-DEFAULT/60";
+    if (intensity === 3) return "bg-green-DEFAULT/80";
+    return "bg-green-bright";
+  };
+
+  const weeks: ActivityDay[][] = [];
+  let currentWeek: ActivityDay[] = [];
+
+  if (data && data.length > 0) {
+    data.forEach((day, index) => {
+      currentWeek.push(day);
+      if (currentWeek.length === 7 || index === data.length - 1) {
+        weeks.push(currentWeek);
+        currentWeek = [];
+      }
+    });
+  }
+
+  if (!data || data.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="bg-background border border-foreground/10 rounded-lg p-6 hover:border-foreground/20 transition-colors">
+      <div className="text-lg text-aqua-bright mb-6">Activity</div>
+
+      <div className="flex gap-4">
+        {/* Days labels */}
+        <div className="flex flex-col gap-2 pt-6 text-xs">
+          {days.map((day, i) => (
+            <div key={day} className="h-3 text-foreground/60">{i % 2 === 0 ? day : ""}</div>
+          ))}
+        </div>
+        {/* Grid */}
+        <div className="flex-grow overflow-x-auto">
+          <div className="flex gap-2">
+            {weeks.map((week, weekIndex) => (
+              <div key={weekIndex} className="flex flex-col gap-2">
+                {week.map((day, dayIndex) => {
+                  const hours = day.grand_total.total_seconds / 3600;
+                  const intensity = getIntensity(hours);
+
+                  return (
+                    <div
+                      key={dayIndex}
+                      className={`w-3 h-3 rounded-sm ${getColorClass(intensity)}
+                        hover:ring-1 hover:ring-foreground/30 transition-all cursor-pointer
+                        group relative`}
+                    >
+                      <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 p-2
+                        bg-background border border-foreground/10 rounded-md opacity-0
+                        group-hover:opacity-100 transition-opacity z-10 whitespace-nowrap text-xs">
+                        {hours.toFixed(1)} hours on {day.date}
+                      </div>
+                    </div>
+                  );
+                })}
+              </div>
+            ))}
+          </div>
+          {/* Months labels */}
+          <div className="flex text-xs text-foreground/60 mt-2">
+            {weeks.map((week, i) => {
+              const date = new Date(week[0].date);
+              const isFirstOfMonth = date.getDate() <= 7;
+              return (
+                <div
+                  key={i}
+                  className="w-3 mx-1"
+                  style={{ marginLeft: i === 0 ? "0" : undefined }}
+                >
+                  {isFirstOfMonth && months[date.getMonth()]}
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      </div>
+      {/* Legend */}
+      <div className="flex items-center gap-2 mt-4 text-xs text-foreground/60">
+        <span>Less</span>
+        {[0, 1, 2, 3, 4].map((intensity) => (
+          <div key={intensity} className={`w-3 h-3 rounded-sm ${getColorClass(intensity)}`} />
+        ))}
+        <span>More</span>
+      </div>
+    </div>
+  );
+};
+
+export default ActivityGrid;

src/src/components/about/stats-alltime.tsx

@@ -0,0 +1,159 @@
+import { useState, useEffect, useRef } from "react";
+
+const Stats = () => {
+  const [stats, setStats] = useState<any>(null);
+  const [error, setError] = useState(false);
+  const [count, setCount] = useState(0);
+  const [isVisible, setIsVisible] = useState(false);
+  const [skipAnim, setSkipAnim] = useState(false);
+  const hasAnimated = useRef(false);
+  const sectionRef = useRef<HTMLDivElement>(null);
+
+  // Fetch data on mount
+  useEffect(() => {
+    fetch("/api/wakatime/alltime")
+      .then((res) => {
+        if (!res.ok) throw new Error("API error");
+        return res.json();
+      })
+      .then((data) => setStats(data.data))
+      .catch(() => setError(true));
+  }, []);
+
+  // Observe visibility — skip animation if already in view on mount
+  useEffect(() => {
+    const el = sectionRef.current;
+    if (!el) return;
+
+    const rect = el.getBoundingClientRect();
+    const inView = rect.top < window.innerHeight && rect.bottom > 0;
+    const isReload = performance.getEntriesByType?.("navigation")?.[0]?.type === "reload";
+
+    if (inView && isReload) {
+      setSkipAnim(true);
+      setIsVisible(true);
+      return;
+    }
+    if (inView) {
+      requestAnimationFrame(() => setIsVisible(true));
+      return;
+    }
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setIsVisible(true);
+          observer.disconnect();
+        }
+      },
+      { threshold: 0.3 }
+    );
+
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
+
+  // Start counter when both visible and data is ready
+  useEffect(() => {
+    if (!isVisible || !stats || hasAnimated.current) return;
+    hasAnimated.current = true;
+
+    const totalSeconds = stats.total_seconds;
+    const duration = 2000;
+    const steps = 60;
+    let currentStep = 0;
+
+    const timer = setInterval(() => {
+      currentStep += 1;
+      if (currentStep >= steps) {
+        setCount(totalSeconds);
+        clearInterval(timer);
+        return;
+      }
+      const progress = 1 - Math.pow(1 - currentStep / steps, 4);
+      setCount(Math.floor(totalSeconds * progress));
+    }, duration / steps);
+
+    return () => clearInterval(timer);
+  }, [isVisible, stats]);
+
+  if (error) return null;
+  if (!stats) return <div ref={sectionRef} className="min-h-[50vh]" />;
+
+  const hours = Math.floor(count / 3600);
+  const formattedHours = hours.toLocaleString("en-US", {
+    minimumIntegerDigits: 4,
+    useGrouping: true,
+  });
+
+  return (
+    <div ref={sectionRef} className="flex flex-col items-center justify-center min-h-[50vh] gap-6">
+      <div className={skipAnim ? "text-2xl opacity-80" : `text-2xl opacity-0 ${isVisible ? "animate-fade-in-first" : ""}`}>
+        I've spent
+      </div>
+
+      <div className="relative">
+        <div className="text-8xl text-center relative z-10">
+          <span className="font-bold relative">
+            <span className={skipAnim ? "bg-gradient-text" : `bg-gradient-text opacity-0 ${isVisible ? "animate-fade-in-second" : ""}`}>
+              {formattedHours}
+            </span>
+          </span>
+          <span className={skipAnim ? "text-4xl opacity-60 ml-4" : `text-4xl opacity-0 ${isVisible ? "animate-slide-in-hours" : ""}`}>
+            hours
+          </span>
+        </div>
+      </div>
+
+      <div className="flex flex-col items-center gap-3 text-center">
+        <div className={skipAnim ? "text-xl opacity-80" : `text-xl opacity-0 ${isVisible ? "animate-fade-in-third" : ""}`}>
+          writing code & building apps
+        </div>
+        <div className={skipAnim ? "flex items-center gap-3 text-lg opacity-60" : `flex items-center gap-3 text-lg opacity-0 ${isVisible ? "animate-fade-in-fourth" : ""}`}>
+          <span>since</span>
+          <span className="text-green-bright font-bold">{stats.range.start_text}</span>
+        </div>
+      </div>
+
+      <style jsx>{`
+        .bg-gradient-text {
+          background: linear-gradient(90deg, #fbbf24, #f59e0b, #d97706, #b45309, #f59e0b, #fbbf24);
+          background-size: 200% auto;
+          color: transparent;
+          background-clip: text;
+          -webkit-background-clip: text;
+          -webkit-text-fill-color: transparent;
+        }
+
+        @keyframes fadeInFirst {
+          from { opacity: 0; transform: translateY(20px); }
+          to { opacity: 0.8; transform: translateY(0); }
+        }
+        @keyframes fadeInSecond {
+          from { opacity: 0; transform: translateY(20px); }
+          to { opacity: 1; transform: translateY(0); }
+        }
+        @keyframes slideInHours {
+          from { opacity: 0; transform: translateX(20px); margin-left: 0; }
+          to { opacity: 0.6; transform: translateX(0); margin-left: 1rem; }
+        }
+        @keyframes fadeInThird {
+          from { opacity: 0; transform: translateY(20px); }
+          to { opacity: 0.8; transform: translateY(0); }
+        }
+        @keyframes fadeInFourth {
+          from { opacity: 0; transform: translateY(20px); }
+          to { opacity: 0.6; transform: translateY(0); }
+        }
+
+        .animate-fade-in-first { animation: fadeInFirst 0.7s ease-out forwards; }
+        .animate-fade-in-second { animation: fadeInSecond 0.7s ease-out 0.4s forwards; }
+        .animate-slide-in-hours { animation: slideInHours 0.7s ease-out 0.6s forwards; }
+        .animate-fade-in-third { animation: fadeInThird 0.7s ease-out 0.8s forwards; }
+        .animate-fade-in-fourth { animation: fadeInFourth 0.7s ease-out 1s forwards; }
+      `}</style>
+    </div>
+  );
+};
+
+export default Stats;

src/src/components/about/stats-detailed.tsx

@@ -0,0 +1,231 @@
+import { useState, useEffect, useRef } from "react";
+import { Clock, CalendarClock, CodeXml, Computer } from "lucide-react";
+import { ActivityGrid } from "@/components/about/stats-activity";
+
+const DetailedStats = () => {
+  const [stats, setStats] = useState<any>(null);
+  const [activity, setActivity] = useState<any>(null);
+  const [error, setError] = useState(false);
+  const [visible, setVisible] = useState(false);
+  const [skipAnim, setSkipAnim] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    fetch("/api/wakatime/detailed")
+      .then((res) => {
+        if (!res.ok) throw new Error();
+        return res.json();
+      })
+      .then((data) => setStats(data.data))
+      .catch(() => setError(true));
+
+    fetch("/api/wakatime/activity")
+      .then((res) => {
+        if (!res.ok) throw new Error();
+        return res.json();
+      })
+      .then((data) => setActivity(data.data))
+      .catch(() => {});
+  }, []);
+
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+
+    const rect = el.getBoundingClientRect();
+    const inView = rect.top < window.innerHeight && rect.bottom > 0;
+    const isReload = performance.getEntriesByType?.("navigation")?.[0]?.type === "reload";
+
+    if (inView && isReload) {
+      setSkipAnim(true);
+      setVisible(true);
+      return;
+    }
+    if (inView) {
+      requestAnimationFrame(() => setVisible(true));
+      return;
+    }
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setVisible(true);
+          observer.disconnect();
+        }
+      },
+      { threshold: 0.1, rootMargin: "-15% 0px" }
+    );
+
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [stats]);
+
+  if (error) return null;
+
+  const progressColors = [
+    "bg-red-bright",
+    "bg-orange-bright",
+    "bg-yellow-bright",
+    "bg-green-bright",
+    "bg-blue-bright",
+    "bg-purple-bright",
+    "bg-aqua-bright",
+  ];
+
+  const statCards = stats
+    ? [
+        {
+          title: "Total Time",
+          value: `${Math.round((stats.total_seconds / 3600) * 10) / 10}`,
+          unit: "hours",
+          subtitle: "this week",
+          color: "text-yellow-bright",
+          borderHover: "hover:border-yellow-bright/50",
+          icon: Clock,
+          iconColor: "stroke-yellow-bright",
+        },
+        {
+          title: "Daily Average",
+          value: `${Math.round((stats.daily_average / 3600) * 10) / 10}`,
+          unit: "hours",
+          subtitle: "per day",
+          color: "text-orange-bright",
+          borderHover: "hover:border-orange-bright/50",
+          icon: CalendarClock,
+          iconColor: "stroke-orange-bright",
+        },
+        {
+          title: "Primary Editor",
+          value: stats.editors?.[0]?.name || "None",
+          unit: `${Math.round(stats.editors?.[0]?.percent || 0)}%`,
+          subtitle: "of the time",
+          color: "text-blue-bright",
+          borderHover: "hover:border-blue-bright/50",
+          icon: CodeXml,
+          iconColor: "stroke-blue-bright",
+        },
+        {
+          title: "Operating System",
+          value: stats.operating_systems?.[0]?.name || "None",
+          unit: `${Math.round(stats.operating_systems?.[0]?.percent || 0)}%`,
+          subtitle: "of the time",
+          color: "text-green-bright",
+          borderHover: "hover:border-green-bright/50",
+          icon: Computer,
+          iconColor: "stroke-green-bright",
+        },
+      ]
+    : [];
+
+  const languages =
+    stats?.languages?.slice(0, 7).map((lang: any, index: number) => ({
+      name: lang.name,
+      percent: Math.round(lang.percent),
+      time: Math.round((lang.total_seconds / 3600) * 10) / 10 + " hrs",
+      color: progressColors[index % progressColors.length],
+    })) || [];
+
+  return (
+    <div ref={containerRef} className="flex flex-col gap-10 md:py-32 w-full max-w-[1200px] mx-auto px-4 min-h-[50vh]">
+      {!stats ? null : (
+        <>
+          {/* Header */}
+          <h2
+            className={`text-2xl md:text-4xl font-bold text-center text-yellow-bright ${skipAnim ? "" : "transition-all duration-700 ease-out"}`}
+            style={skipAnim ? {} : {
+              opacity: visible ? 1 : 0,
+              transform: visible ? "translateY(0)" : "translateY(20px)",
+            }}
+          >
+            Weekly Statistics
+          </h2>
+
+          {/* Stat Cards */}
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            {statCards.map((card, i) => {
+              const Icon = card.icon;
+              return (
+                <div
+                  key={card.title}
+                  className={`bg-background border border-foreground/10 rounded-lg p-6 ${card.borderHover} ${skipAnim ? "" : "transition-all duration-500 ease-out"}`}
+                  style={skipAnim ? {} : {
+                    transitionDelay: `${150 + i * 100}ms`,
+                    opacity: visible ? 1 : 0,
+                    transform: visible ? "translateY(0)" : "translateY(24px)",
+                  }}
+                >
+                  <div className="flex gap-4 items-center">
+                    <div className="p-3 rounded-lg bg-foreground/5">
+                      <Icon className={`w-6 h-6 ${card.iconColor}`} strokeWidth={1.5} />
+                    </div>
+                    <div className="flex flex-col">
+                      <div className={`${card.color} text-sm mb-1`}>{card.title}</div>
+                      <div className="flex items-baseline gap-2">
+                        <div className="text-2xl font-bold">{card.value}</div>
+                        <div className="text-lg opacity-80">{card.unit}</div>
+                      </div>
+                      <div className="text-xs opacity-50 mt-0.5">{card.subtitle}</div>
+                    </div>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+
+          {/* Languages */}
+          <div
+            className={`bg-background border border-foreground/10 rounded-lg p-6 hover:border-purple-bright/50 ${skipAnim ? "" : "transition-all duration-700 ease-out"}`}
+            style={skipAnim ? {} : {
+              transitionDelay: "550ms",
+              opacity: visible ? 1 : 0,
+              transform: visible ? "translateY(0)" : "translateY(24px)",
+            }}
+          >
+            <div className="text-purple-bright mb-6 text-lg">Languages</div>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-x-12 gap-y-5">
+              {languages.map((lang: any, i: number) => (
+                <div key={lang.name} className="flex flex-col gap-2">
+                  <div className="flex justify-between items-center">
+                    <span className="text-sm font-medium">{lang.name}</span>
+                    <span className="text-sm opacity-70 tabular-nums">{lang.time}</span>
+                  </div>
+                  <div className="flex gap-3 items-center">
+                    <div className="flex-grow h-2 bg-foreground/5 rounded-full overflow-hidden">
+                      <div
+                        className={`h-full ${lang.color} rounded-full`}
+                        style={{
+                          width: visible ? `${lang.percent}%` : "0%",
+                          opacity: 0.85,
+                          transition: skipAnim ? "none" : `width 1s ease-out ${700 + i * 80}ms`,
+                        }}
+                      />
+                    </div>
+                    <span className="text-xs text-foreground/50 min-w-[36px] text-right tabular-nums">
+                      {lang.percent}%
+                    </span>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* Activity Grid */}
+          {activity && (
+            <div
+              className={skipAnim ? "" : "transition-all duration-700 ease-out"}
+              style={skipAnim ? {} : {
+                transitionDelay: "750ms",
+                opacity: visible ? 1 : 0,
+                transform: visible ? "translateY(0)" : "translateY(24px)",
+              }}
+            >
+              <ActivityGrid data={activity} />
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  );
+};
+
+export default DetailedStats;

src/src/components/about/timeline.tsx

@@ -1,70 +1,125 @@
-import React from "react";
-import { Check, Code, GitBranch, Star } from "lucide-react";
+import React, { useEffect, useRef, useState } from "react";
+import { Check, Code, GitBranch, Star, Rocket } from "lucide-react";
 
-export default function Timeline() {
 const timelineItems = [
   {
-      year: "2024",
+    year: "2026",
     title: "Present",
+    description: "Building domain-specific languages, diving deep into the Salesforce ecosystem, and writing production Java and Python daily. The craft keeps evolving.",
+    technologies: ["Java", "Python", "Salesforce", "DSLs"],
+    icon: <Rocket className="text-red-bright" size={20} />,
+  },
+  {
+    year: "2024",
+    title: "Shipping & Scaling",
     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} />
+    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} />
+    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} />
+    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} />
-    }
+    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" />
+function TimelineCard({ item, index }: { item: (typeof timelineItems)[number]; index: number }) {
+  const ref = useRef<HTMLDivElement>(null);
+  const [visible, setVisible] = useState(false);
+  const [skip, setSkip] = useState(false);
 
-        <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 
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+
+    const rect = el.getBoundingClientRect();
+    const inView = rect.top < window.innerHeight && rect.bottom > 0;
+    const isReload = performance.getEntriesByType?.("navigation")?.[0]?.type === "reload";
+
+    if (inView && isReload) {
+      setSkip(true);
+      setVisible(true);
+      return;
+    }
+    if (inView) {
+      requestAnimationFrame(() => setVisible(true));
+      return;
+    }
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setVisible(true);
+          observer.disconnect();
+        }
+      },
+      { threshold: 0.2 }
+    );
+
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
+
+  const isLeft = index % 2 === 0;
+
+  return (
+    <div ref={ref} className="relative mb-8 md:mb-12 last:mb-0">
+      <div className={`flex flex-col sm:flex-row items-start ${isLeft ? "sm:flex-row-reverse" : ""}`}>
+        {/* Node */}
+        <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">
+            flex items-center justify-center z-10
+            ${skip ? "" : "transition-all duration-500"}
+            ${visible ? "scale-100 opacity-100" : "scale-0 opacity-0"}
+          `}
+        >
           {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">
+
+        {/* Card */}
+        <div
+          className={`
+            w-full sm:w-[calc(50%-32px)]
+            ${isLeft ? "sm:pr-8 md:pr-12" : "sm:pl-8 md:pl-12"}
+            ${skip ? "" : "transition-all duration-700 ease-out"}
+            ${visible
+              ? "opacity-100 translate-x-0"
+              : `opacity-0 ${isLeft ? "sm:translate-x-8" : "sm:-translate-x-8"} translate-y-4 sm:translate-y-0`
+            }
+          `}
+        >
+          <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} 
+                <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">
+                             text-foreground/60 hover:text-yellow-bright transition-colors duration-300"
+                >
                   {tech}
                 </span>
               ))}
@@ -73,6 +128,54 @@ export default function Timeline() {
         </div>
       </div>
     </div>
+  );
+}
+
+export default function Timeline() {
+  const lineRef = useRef<HTMLDivElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [lineHeight, setLineHeight] = useState(0);
+
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          // Animate line to full height over time
+          const el = lineRef.current;
+          if (el) {
+            setLineHeight(100);
+          }
+          observer.disconnect();
+        }
+      },
+      { threshold: 0.1 }
+    );
+
+    observer.observe(container);
+    return () => observer.disconnect();
+  }, []);
+
+  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">
+        My Journey Through Code
+      </h2>
+      <div ref={containerRef} className="relative">
+        {/* Animated vertical line */}
+        <div className="absolute left-4 sm:left-1/2 h-full w-0.5 -translate-x-1/2">
+          <div
+            ref={lineRef}
+            className="w-full bg-foreground/10 transition-all duration-[1500ms] ease-out origin-top"
+            style={{ height: `${lineHeight}%` }}
+          />
+        </div>
+
+        <div className="ml-8 sm:ml-0">
+          {timelineItems.map((item, index) => (
+            <TimelineCard key={item.year} item={item} index={index} />
           ))}
         </div>
       </div>

src/src/components/animate-in.tsx

@@ -0,0 +1,50 @@
+import React, { useEffect, useRef, useState } from "react";
+
+interface AnimateInProps {
+  children: React.ReactNode;
+  delay?: number;
+  threshold?: number;
+}
+
+export function AnimateIn({ children, delay = 0, threshold = 0.15 }: AnimateInProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  const [visible, setVisible] = useState(false);
+
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+
+    const rect = el.getBoundingClientRect();
+    if (rect.top < window.innerHeight && rect.bottom > 0) {
+      requestAnimationFrame(() => setVisible(true));
+      return;
+    }
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setVisible(true);
+          observer.disconnect();
+        }
+      },
+      { threshold }
+    );
+
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [threshold]);
+
+  return (
+    <div
+      ref={ref}
+      className="transition-all duration-700 ease-out"
+      style={{
+        transitionDelay: `${delay}ms`,
+        opacity: visible ? 1 : 0,
+        transform: visible ? "translateY(0)" : "translateY(24px)",
+      }}
+    >
+      {children}
+    </div>
+  );
+}

src/src/components/background/index.tsx

@@ -4,6 +4,7 @@ interface Cell {
   alive: boolean;
   next: boolean;
   color: [number, number, number];
+  baseColor: [number, number, number]; // Original color
   currentX: number;
   currentY: number;
   targetX: number;
@@ -12,8 +13,13 @@ interface Cell {
   targetOpacity: number;
   scale: number;
   targetScale: number;
+  elevation: number; // For 3D effect
+  targetElevation: number;
   transitioning: boolean;
   transitionComplete: boolean;
+  rippleEffect: number; // For ripple animation
+  rippleStartTime: number; // When ripple started
+  rippleDistance: number; // Distance from ripple center
 }
 
 interface Grid {
@@ -24,17 +30,33 @@ interface Grid {
   offsetY: number;
 }
 
+interface MousePosition {
+  x: number;
+  y: number;
+  isDown: boolean;
+  lastClickTime: number;
+  cellX: number;
+  cellY: 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 CELL_SIZE_MOBILE = 15;
+const CELL_SIZE_DESKTOP = 25;
+const TARGET_FPS = 60; // Target frame rate
+const CYCLE_TIME = 3000; // 3 seconds per full cycle, regardless of FPS
+const TRANSITION_SPEED = 0.05;
+const SCALE_SPEED = 0.05;
 const INITIAL_DENSITY = 0.15;
 const SIDEBAR_WIDTH = 240;
+const MOUSE_INFLUENCE_RADIUS = 150; // Radius of mouse influence in pixels
+const COLOR_SHIFT_AMOUNT = 30; // Maximum color shift amount
+const RIPPLE_SPEED = 0.02; // Speed of ripple propagation
+const RIPPLE_ELEVATION_FACTOR = 4; // Height of ripple wave
+const ELEVATION_FACTOR = 8; // Max height for 3D effect - reduced for more subtle effect
 
 const Background: React.FC<BackgroundProps> = ({ 
   layout = 'index',
@@ -43,8 +65,17 @@ const Background: React.FC<BackgroundProps> = ({
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const gridRef = useRef<Grid>();
   const animationFrameRef = useRef<number>();
-  const frameCount = useRef(0);
+  const lastUpdateTimeRef = useRef<number>(0);
+  const lastCycleTimeRef = useRef<number>(0);
   const resizeTimeoutRef = useRef<NodeJS.Timeout>();
+  const mouseRef = useRef<MousePosition>({
+    x: -1000,
+    y: -1000,
+    isDown: false,
+    lastClickTime: 0,
+    cellX: -1,
+    cellY: -1
+  });
 
   const randomColor = (): [number, number, number] => {
     const colors = [
@@ -58,11 +89,18 @@ const Background: React.FC<BackgroundProps> = ({
     return colors[Math.floor(Math.random() * colors.length)];
   };
 
+  const getCellSize = () => {
+    // Check if we're on mobile based on screen width
+    const isMobile = window.innerWidth <= 768;
+    return isMobile ? CELL_SIZE_MOBILE : CELL_SIZE_DESKTOP;
+  };
+
   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);
+    const cellSize = getCellSize();
+    const cols = Math.floor(width / cellSize);
+    const rows = Math.floor(height / cellSize);
+    const offsetX = Math.floor((width - (cols * cellSize)) / 2);
+    const offsetY = Math.floor((height - (rows * cellSize)) / 2);
     return { cols, rows, offsetX, offsetY };
   };
 
@@ -70,10 +108,13 @@ const Background: React.FC<BackgroundProps> = ({
     const { cols, rows, offsetX, offsetY } = calculateGridDimensions(width, height);
     
     const cells = Array(cols).fill(0).map((_, i) => 
-      Array(rows).fill(0).map((_, j) => ({
+      Array(rows).fill(0).map((_, j) => {
+        const baseColor = randomColor();
+        return {
           alive: Math.random() < INITIAL_DENSITY,
           next: false,
-        color: randomColor(),
+          color: [...baseColor] as [number, number, number],
+          baseColor: baseColor,
           currentX: i,
           currentY: j,
           targetX: i,
@@ -82,9 +123,15 @@ const Background: React.FC<BackgroundProps> = ({
           targetOpacity: 0,
           scale: 0,
           targetScale: 0,
+          elevation: 0,
+          targetElevation: 0,
           transitioning: false,
-        transitionComplete: false
-      }))
+          transitionComplete: false,
+          rippleEffect: 0,
+          rippleStartTime: 0,
+          rippleDistance: 0
+        };
+      })
     );
 
     const grid = { cells, cols, rows, offsetX, offsetY };
@@ -121,7 +168,7 @@ const Background: React.FC<BackgroundProps> = ({
         
         if (grid.cells[col][row].alive) {
           neighbors.count++;
-          neighbors.colors.push(grid.cells[col][row].color);
+          neighbors.colors.push(grid.cells[col][row].baseColor);
         }
       }
     }
@@ -144,65 +191,281 @@ const Background: React.FC<BackgroundProps> = ({
   };
 
   const computeNextState = (grid: Grid) => {
+    // First, calculate the next state for all cells based on standard rules
     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);
 
+        // Standard Conway's Game of Life rules
         if (cell.alive) {
           cell.next = count === 2 || count === 3;
         } else {
           cell.next = count === 3;
           if (cell.next) {
-            cell.color = averageColors(colors);
+            cell.baseColor = averageColors(colors);
+            cell.color = [...cell.baseColor];
           }
         }
+      }
+    }
+    
+    // Then, set up animations for cells that need to change state
+    for (let i = 0; i < grid.cols; i++) {
+      for (let j = 0; j < grid.rows; j++) {
+        const cell = grid.cells[i][j];
         
         if (cell.alive !== cell.next && !cell.transitioning) {
           cell.transitioning = true;
           cell.transitionComplete = false;
+          
+          // Random delay for staggered animation effect
+          const delay = Math.random() * 800;
+          
+          setTimeout(() => {
             if (!cell.next) {
               cell.targetScale = 0;
               cell.targetOpacity = 0;
+              cell.targetElevation = 0;
+            } else {
+              cell.targetScale = 1;
+              cell.targetOpacity = 1;
+              cell.targetElevation = 0;
+            }
+          }, delay);
+        }
+      }
+    }
+  };
+
+  const createRippleEffect = (grid: Grid, centerX: number, centerY: number) => {
+    const currentTime = Date.now();
+    
+    for (let i = 0; i < grid.cols; i++) {
+      for (let j = 0; j < grid.rows; j++) {
+        const cell = grid.cells[i][j];
+        
+        // Calculate distance from cell to ripple center
+        const dx = i - centerX;
+        const dy = j - centerY;
+        const distance = Math.sqrt(dx * dx + dy * dy);
+        
+        // Only apply ripple to visible cells
+        if (cell.opacity > 0.1) {
+          cell.rippleStartTime = currentTime + distance * 100; // Delayed start based on distance
+          cell.rippleDistance = distance;
+          cell.rippleEffect = 0;
+        }
+      }
+    }
+  };
+
+  const spawnCellAtPosition = (grid: Grid, x: number, y: number) => {
+    if (x >= 0 && x < grid.cols && y >= 0 && y < grid.rows) {
+      const cell = grid.cells[x][y];
+      
+      if (!cell.alive && !cell.transitioning) {
+        cell.alive = true;
+        cell.next = true;
+        cell.transitioning = true;
+        cell.transitionComplete = false;
+        cell.baseColor = randomColor();
+        cell.color = [...cell.baseColor];
+        cell.targetScale = 1;
+        cell.targetOpacity = 1;
+        cell.targetElevation = 0;
+        
+        // Create a small ripple from the new cell
+        createRippleEffect(grid, x, y);
+      }
+    }
+  };
+
+  const updateCellAnimations = (grid: Grid, deltaTime: number) => {
+    const mouseX = mouseRef.current.x;
+    const mouseY = mouseRef.current.y;
+    const cellSize = getCellSize();
+    
+    // Adjust transition speeds based on time
+    const transitionFactor = TRANSITION_SPEED * (deltaTime / (1000 / TARGET_FPS));
+    const scaleFactor = SCALE_SPEED * (deltaTime / (1000 / TARGET_FPS));
+    
+    for (let i = 0; i < grid.cols; i++) {
+      for (let j = 0; j < grid.rows; j++) {
+        const cell = grid.cells[i][j];
+        
+        // Smooth transitions
+        cell.opacity += (cell.targetOpacity - cell.opacity) * transitionFactor;
+        cell.scale += (cell.targetScale - cell.scale) * scaleFactor;
+        cell.elevation += (cell.targetElevation - cell.elevation) * scaleFactor;
+        
+        // Apply mouse interaction
+        const cellCenterX = grid.offsetX + i * cellSize + cellSize / 2;
+        const cellCenterY = grid.offsetY + j * cellSize + cellSize / 2;
+        const dx = cellCenterX - mouseX;
+        const dy = cellCenterY - mouseY;
+        const distanceToMouse = Math.sqrt(dx * dx + dy * dy);
+        
+        // 3D hill effect based on mouse position
+        if (distanceToMouse < MOUSE_INFLUENCE_RADIUS && cell.opacity > 0.1) {
+          // Calculate height based on distance - peak at center, gradually decreasing
+          const influenceFactor = Math.cos((distanceToMouse / MOUSE_INFLUENCE_RADIUS) * Math.PI / 2);
+          // Only positive elevation (growing upward)
+          cell.targetElevation = ELEVATION_FACTOR * influenceFactor * influenceFactor; // squared for more pronounced effect
+          
+          // Slight color shift as cells rise
+          const colorShift = influenceFactor * COLOR_SHIFT_AMOUNT * 0.5;
+          cell.color = [
+            Math.min(255, Math.max(0, cell.baseColor[0] + colorShift)),
+            Math.min(255, Math.max(0, cell.baseColor[1] + colorShift)),
+            Math.min(255, Math.max(0, cell.baseColor[2] + colorShift))
+          ] as [number, number, number];
+        } else {
+          // Gradually return to base color and zero elevation when mouse is away
+          cell.color[0] += (cell.baseColor[0] - cell.color[0]) * 0.1;
+          cell.color[1] += (cell.baseColor[1] - cell.color[1]) * 0.1;
+          cell.color[2] += (cell.baseColor[2] - cell.color[2]) * 0.1;
+          
+          cell.targetElevation = 0;
+        }
+        
+        // Handle cell state transitions
+        if (cell.transitioning) {
+          // When a cell is completely faded out, update its alive state
+          if (!cell.next && cell.opacity < 0.01 && cell.scale < 0.01) {
+            cell.alive = false;
+            cell.transitioning = false;
+            cell.transitionComplete = true;
+            cell.opacity = 0;
+            cell.scale = 0;
+            cell.elevation = 0;
+          }
+          // When a new cell is born
+          else if (cell.next && !cell.alive && !cell.transitionComplete) {
+            cell.alive = true;
+            cell.transitioning = false;
+            cell.transitionComplete = true;
+          }
+        }
+        
+        // Handle ripple animation
+        if (cell.rippleStartTime > 0) {
+          const elapsedTime = Date.now() - cell.rippleStartTime;
+          if (elapsedTime > 0) {
+            // Calculate ripple progress (0 to 1)
+            const rippleProgress = elapsedTime / 1000; // 1 second for full animation
+            
+            if (rippleProgress < 1) {
+              // Create a smooth wave effect
+              const wavePhase = rippleProgress * Math.PI * 2;
+              const waveHeight = Math.sin(wavePhase) * Math.exp(-rippleProgress * 4);
+              
+              // Apply wave height to cell elevation only if it's not being overridden by mouse
+              if (distanceToMouse >= MOUSE_INFLUENCE_RADIUS) {
+                cell.rippleEffect = waveHeight;
+                cell.targetElevation = RIPPLE_ELEVATION_FACTOR * waveHeight;
+              } else {
+                cell.rippleEffect = waveHeight * 0.3; // Reduced effect when mouse is influencing
+              }
+            } else {
+              // Reset ripple effects
+              cell.rippleEffect = 0;
+              cell.rippleStartTime = 0;
+              if (distanceToMouse >= MOUSE_INFLUENCE_RADIUS) {
+                cell.targetElevation = 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];
+  const handleMouseDown = (e: MouseEvent) => {
+    if (!gridRef.current || !canvasRef.current) return;
 
-        cell.opacity += (cell.targetOpacity - cell.opacity) * TRANSITION_SPEED;
-        cell.scale += (cell.targetScale - cell.scale) * SCALE_SPEED;
+    const canvas = canvasRef.current;
+    const rect = canvas.getBoundingClientRect();
+    const mouseX = e.clientX - rect.left;
+    const mouseY = e.clientY - rect.top;
 
-        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;
+    // Ignore clicks outside the canvas bounds
+    if (mouseX < 0 || mouseX > rect.width || mouseY < 0 || mouseY > rect.height) return;
+
+    // Prevent text selection when interacting with the canvas
+    e.preventDefault();
+
+    const cellSize = getCellSize();
+
+    mouseRef.current.isDown = true;
+    mouseRef.current.lastClickTime = Date.now();
+    
+    const grid = gridRef.current;
+    
+    // Calculate which cell was clicked
+    const cellX = Math.floor((mouseX - grid.offsetX) / cellSize);
+    const cellY = Math.floor((mouseY - grid.offsetY) / cellSize);
+    
+    if (cellX >= 0 && cellX < grid.cols && cellY >= 0 && cellY < grid.rows) {
+      mouseRef.current.cellX = cellX;
+      mouseRef.current.cellY = cellY;
+      
+      const cell = grid.cells[cellX][cellY];
+      
+      if (cell.alive) {
+        // Create ripple effect from existing cell
+        createRippleEffect(grid, cellX, cellY);
+      } else {
+        // Spawn new cell at empty position
+        spawnCellAtPosition(grid, cellX, cellY);
       }
-          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 handleMouseMove = (e: MouseEvent) => {
+    if (!canvasRef.current || !gridRef.current) return;
+    
+    const canvas = canvasRef.current;
+    const rect = canvas.getBoundingClientRect();
+    const cellSize = getCellSize();
+    
+    mouseRef.current.x = e.clientX - rect.left;
+    mouseRef.current.y = e.clientY - rect.top;
+    
+    // Drawing functionality - place cells while dragging
+    if (mouseRef.current.isDown) {
+      const grid = gridRef.current;
+      
+      // Calculate which cell the mouse is over
+      const cellX = Math.floor((mouseRef.current.x - grid.offsetX) / cellSize);
+      const cellY = Math.floor((mouseRef.current.y - grid.offsetY) / cellSize);
+      
+      // Only draw if we're on a new cell
+      if (cellX !== mouseRef.current.cellX || cellY !== mouseRef.current.cellY) {
+        mouseRef.current.cellX = cellX;
+        mouseRef.current.cellY = cellY;
+        
+        // Spawn cell at this position if it's empty
+        if (cellX >= 0 && cellX < grid.cols && cellY >= 0 && cellY < grid.rows) {
+          const cell = grid.cells[cellX][cellY];
+          if (!cell.alive && !cell.transitioning) {
+            spawnCellAtPosition(grid, cellX, cellY);
           }
         }
       }
     }
   };
 
+  const handleMouseUp = () => {
+    mouseRef.current.isDown = false;
+  };
+
+  const handleMouseLeave = () => {
+    mouseRef.current.isDown = false;
+    mouseRef.current.x = -1000;
+    mouseRef.current.y = -1000;
+  };
+
   const setupCanvas = (canvas: HTMLCanvasElement, width: number, height: number) => {
     const ctx = canvas.getContext('2d');
     if (!ctx) return;
@@ -242,12 +505,15 @@ const Background: React.FC<BackgroundProps> = ({
         const ctx = setupCanvas(canvas, displayWidth, displayHeight);
         if (!ctx) return;
 
-        frameCount.current = 0;
+        lastUpdateTimeRef.current = 0;
+        lastCycleTimeRef.current = 0;
+        
+        const cellSize = getCellSize();
         
         // 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.cols !== Math.floor(displayWidth / cellSize) || 
+            gridRef.current.rows !== Math.floor(displayHeight / cellSize)) {
           gridRef.current = initGrid(displayWidth, displayHeight);
         }
       }, 250);
@@ -264,17 +530,57 @@ const Background: React.FC<BackgroundProps> = ({
       gridRef.current = initGrid(displayWidth, displayHeight);
     }
 
-    const animate = () => {
+    // Bind to window so mouse events work even when content overlays the canvas
+    window.addEventListener('mousedown', handleMouseDown, { signal });
+    window.addEventListener('mousemove', handleMouseMove, { signal });
+    window.addEventListener('mouseup', handleMouseUp, { signal });
+
+    const handleVisibilityChange = () => {
+      if (document.hidden) {
+        // Tab is hidden
+        if (animationFrameRef.current) {
+          cancelAnimationFrame(animationFrameRef.current);
+          animationFrameRef.current = undefined;
+        }
+      } else {
+        // Tab is visible again
+        if (!animationFrameRef.current) {
+          // Reset timing references to prevent catching up
+          lastUpdateTimeRef.current = performance.now();
+          lastCycleTimeRef.current = performance.now();
+          animationFrameRef.current = requestAnimationFrame(animate);
+        }
+      }
+    };
+
+    const animate = (currentTime: number) => {
       if (signal.aborted) return;
       
-      frameCount.current++;
-      
-      if (gridRef.current) {
-        if (frameCount.current % CYCLE_FRAMES === 0) {
-          computeNextState(gridRef.current);
+      // Initialize timing if first frame
+      if (!lastUpdateTimeRef.current) {
+        lastUpdateTimeRef.current = currentTime;
+        lastCycleTimeRef.current = currentTime;
       }
       
-        updateCellAnimations(gridRef.current);
+      // Calculate time since last frame
+      const deltaTime = currentTime - lastUpdateTimeRef.current;
+      
+      // Limit delta time to prevent large jumps when tab becomes active again
+      const clampedDeltaTime = Math.min(deltaTime, 100);
+      
+      lastUpdateTimeRef.current = currentTime;
+      
+      // Calculate time since last cycle update
+      const cycleElapsed = currentTime - lastCycleTimeRef.current;
+      
+      if (gridRef.current) {
+        // Check if it's time for the next life cycle
+        if (cycleElapsed >= CYCLE_TIME) {
+          computeNextState(gridRef.current);
+          lastCycleTimeRef.current = currentTime;
+        }
+        
+        updateCellAnimations(gridRef.current, clampedDeltaTime);
       }
       
       // Draw frame
@@ -283,25 +589,49 @@ const Background: React.FC<BackgroundProps> = ({
 
       if (gridRef.current) {
         const grid = gridRef.current;
-        const cellSize = CELL_SIZE * 0.8;
-        const roundness = cellSize * 0.2;
+        const cellSize = getCellSize();
+        const displayCellSize = cellSize * 0.8;
+        const roundness = displayCellSize * 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) {
+            // Draw all transitioning cells, even if they're fading out
+            if ((cell.alive || cell.targetOpacity > 0) && 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;
+              // Base opacity
+              ctx.globalAlpha = cell.opacity * 0.9;
 
-              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 scaledSize = displayCellSize * cell.scale;
+              const xOffset = (displayCellSize - scaledSize) / 2;
+              const yOffset = (displayCellSize - scaledSize) / 2;
+              
+              // Apply 3D elevation effect
+              const elevationOffset = cell.elevation;
+              
+              const x = grid.offsetX + i * cellSize + (cellSize - displayCellSize) / 2 + xOffset;
+              const y = grid.offsetY + j * cellSize + (cellSize - displayCellSize) / 2 + yOffset - elevationOffset;
               const scaledRoundness = roundness * cell.scale;
 
+              // Draw shadow for 3D effect when cell is elevated
+              if (elevationOffset > 0.5) {
+                ctx.fillStyle = `rgba(0, 0, 0, ${0.2 * (elevationOffset / ELEVATION_FACTOR)})`;
+                ctx.beginPath();
+                ctx.moveTo(x + scaledRoundness, y + elevationOffset * 1.1);
+                ctx.lineTo(x + scaledSize - scaledRoundness, y + elevationOffset * 1.1);
+                ctx.quadraticCurveTo(x + scaledSize, y + elevationOffset * 1.1, x + scaledSize, y + elevationOffset * 1.1 + scaledRoundness);
+                ctx.lineTo(x + scaledSize, y + elevationOffset * 1.1 + scaledSize - scaledRoundness);
+                ctx.quadraticCurveTo(x + scaledSize, y + elevationOffset * 1.1 + scaledSize, x + scaledSize - scaledRoundness, y + elevationOffset * 1.1 + scaledSize);
+                ctx.lineTo(x + scaledRoundness, y + elevationOffset * 1.1 + scaledSize);
+                ctx.quadraticCurveTo(x, y + elevationOffset * 1.1 + scaledSize, x, y + elevationOffset * 1.1 + scaledSize - scaledRoundness);
+                ctx.lineTo(x, y + elevationOffset * 1.1 + scaledRoundness);
+                ctx.quadraticCurveTo(x, y + elevationOffset * 1.1, x + scaledRoundness, y + elevationOffset * 1.1);
+                ctx.fill();
+              }
+              
+              // Draw main cell
+              ctx.fillStyle = `rgb(${r},${g},${b})`;
               ctx.beginPath();
               ctx.moveTo(x + scaledRoundness, y);
               ctx.lineTo(x + scaledSize - scaledRoundness, y);
@@ -313,6 +643,22 @@ const Background: React.FC<BackgroundProps> = ({
               ctx.lineTo(x, y + scaledRoundness);
               ctx.quadraticCurveTo(x, y, x + scaledRoundness, y);
               ctx.fill();
+              
+              // Draw highlight on elevated cells
+              if (elevationOffset > 0.5) {
+                ctx.fillStyle = `rgba(255, 255, 255, ${0.1 * (elevationOffset / ELEVATION_FACTOR)})`;
+                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/3);
+                ctx.lineTo(x, y + scaledSize/3);
+                ctx.lineTo(x, y + scaledRoundness);
+                ctx.quadraticCurveTo(x, y, x + scaledRoundness, y);
+                ctx.fill();
+              }
+              
+              // No need for separate ripple drawing since the elevation handles the 3D ripple effect
             }
           }
         }
@@ -323,11 +669,13 @@ const Background: React.FC<BackgroundProps> = ({
       animationFrameRef.current = requestAnimationFrame(animate);
     };
 
+    document.addEventListener('visibilitychange', handleVisibilityChange, { signal });
     window.addEventListener('resize', handleResize, { signal });
-    animate();
+    animate(performance.now());
 
     return () => {
       controller.abort();
+      document.removeEventListener('visibilitychange', handleVisibilityChange);
       window.removeEventListener('resize', handleResize);
       if (animationFrameRef.current) {
         cancelAnimationFrame(animationFrameRef.current);
@@ -336,14 +684,14 @@ const Background: React.FC<BackgroundProps> = ({
         clearTimeout(resizeTimeoutRef.current);
       }
     };
-  }, []); // Empty dependency array since we're managing state internally
+  }, [layout]); // Added layout as a dependency since it's used in the effect
 
   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';
+    const baseClasses = 'fixed top-0 bottom-0 hidden lg:block -z-10';
     return position === 'left' 
       ? `${baseClasses} left-0` 
       : `${baseClasses} right-0`;
@@ -354,8 +702,9 @@ const Background: React.FC<BackgroundProps> = ({
       <canvas
         ref={canvasRef}
         className="w-full h-full bg-black"
+        style={{ cursor: 'default' }} // Changed from cursor-pointer to default
       />
-      <div className="absolute inset-0 bg-black/30 backdrop-blur-sm" />
+      <div className="absolute inset-0 bg-black/30 backdrop-blur-sm pointer-events-none" />
     </div>
   );
 };

src/src/components/blog/comments.tsx

@@ -0,0 +1,34 @@
+import * as React from "react";
+import Giscus from "@giscus/react";
+
+const id = "inject-comments";
+
+export const Comments = () => {
+  const [mounted, setMounted] = React.useState(false);
+  
+  React.useEffect(() => {
+    setMounted(true);
+  }, []);
+  
+  return (
+    <div id={id}>
+      {mounted ? (
+        <Giscus
+          id={id}
+          repo="timmypidashev/web"
+          repoId="MDEwOlJlcG9zaXRvcnkzODYxMjk5Mjk="
+          category="Blog & Project Comments"
+          categoryId="DIC_kwDOFwPgCc4CpKtV"
+          theme="https://timmypidashev.us-sea-1.linodeobjects.com/comments.css"
+          mapping="pathname"
+          strict="0"
+          reactionsEnabled="1"
+          emitMetadata="0"
+          inputPosition="bottom"
+          lang="en"
+          loading="eager"
+        />
+      ) : null}
+    </div>
+  );
+};

src/src/components/blog/header.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import { RssIcon, TagIcon, TrendingUpIcon } from "lucide-react";
+import { AnimateIn } from "@/components/animate-in";
+
+export const BlogHeader = () => {
+  return (
+    <div className="w-full max-w-6xl mx-auto px-4 pt-24 sm:pt-24">
+      <AnimateIn>
+        <h1 className="text-2xl sm:text-3xl font-bold text-purple mb-3 text-center px-4 leading-relaxed">
+          Latest Thoughts <br className="sm:hidden" />
+          & Writings
+        </h1>
+      </AnimateIn>
+      <AnimateIn delay={100}>
+        <div className="flex flex-wrap justify-center gap-4 mb-12 text-sm sm:text-base">
+          <a
+            href="/rss"
+            className="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-background border border-foreground/20 text-orange hover:text-orange-bright hover:border-orange/50 transition-colors duration-200"
+          >
+            <RssIcon className="w-4 h-4" />
+            <span>RSS Feed</span>
+          </a>
+
+          <a
+            href="/blog/tags"
+            className="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-background border border-foreground/20 text-aqua hover:text-aqua-bright hover:border-aqua/50 transition-colors duration-200"
+          >
+            <TagIcon className="w-4 h-4" />
+            <span>Browse Tags</span>
+          </a>
+
+          <a
+            href="/blog/popular"
+            className="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-background border border-foreground/20 text-blue hover:text-blue-bright hover:border-blue/50 transition-colors duration-200"
+          >
+            <TrendingUpIcon className="w-4 h-4" />
+            <span>Most Popular</span>
+          </a>
+        </div>
+      </AnimateIn>
+    </div>
+  );
+};

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

@@ -1,7 +1,8 @@
 import React from "react";
+import { AnimateIn } from "@/components/animate-in";
 
 type BlogPost = {
-  slug: string;
+  id: string;
   data: {
     title: string;
     author: string;
@@ -27,22 +28,18 @@ const formatDate = (dateString: string) => {
 
 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>
-
+    <div className="w-full max-w-6xl mx-auto">
       <ul className="space-y-6 md:space-y-10">
-        {posts.map((post) => (
-          <li key={post.slug} className="group px-4 md:px-0">
+        {posts.map((post, i) => (
+          <AnimateIn key={post.id} delay={i * 80}>
+            <li className="group px-4 md:px-0">
               <a
-              href={`/blog/${post.slug}`}
+                href={`/blog/${post.id}`}
                 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">
+                <article className="flex flex-col md:flex-row md:items-center gap-4 md:gap-8 p-2 md:p-4 border-b border-foreground/20 last:border-b-0 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">
+                  <div className="w-full md:w-1/3 aspect-[16/9] overflow-hidden rounded-lg bg-background flex-shrink-0">
                     <img
                       src={post.data.image || "/blog/placeholder.png"}
                       alt={post.data.title}
@@ -52,7 +49,7 @@ export const BlogPostList = ({ posts }: BlogPostListProps) => {
                   </div>
 
                   {/* Content container */}
-                <div className="w-full md:w-2/3 flex flex-col gap-2 md:gap-4 py-1 md:py-2">
+                  <div className="w-full md:w-2/3 flex flex-col gap-2 md:gap-3">
                     {/* 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">
@@ -97,6 +94,7 @@ export const BlogPostList = ({ posts }: BlogPostListProps) => {
                 </article>
               </a>
             </li>
+          </AnimateIn>
         ))}
       </ul>
     </div>

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

@@ -0,0 +1,114 @@
+import React, { useMemo } from 'react';
+
+interface BlogPost {
+  title: string;
+  data: {
+    tags: string[];
+  };
+}
+
+interface TagListProps {
+  posts: BlogPost[];
+}
+
+const TagList: React.FC<TagListProps> = ({ posts }) => {
+  const spectrumColors = [
+    'text-red-bright',
+    'text-orange-bright',
+    'text-yellow-bright',
+    'text-green-bright',
+    'text-aqua-bright',
+    'text-blue-bright',
+    'text-purple-bright'
+  ];
+
+  const tagData = useMemo(() => {
+    if (!Array.isArray(posts)) return [];
+    
+    const tagMap = new Map();
+    posts.forEach(post => {
+      if (post?.data?.tags && Array.isArray(post.data.tags)) {
+        post.data.tags.forEach(tag => {
+          if (!tagMap.has(tag)) {
+            tagMap.set(tag, {
+              name: tag,
+              count: 1
+            });
+          } else {
+            const data = tagMap.get(tag);
+            data.count++;
+          }
+        });
+      }
+    });
+
+    const tagArray = Array.from(tagMap.values());
+    const maxCount = Math.max(...tagArray.map(t => t.count));
+    
+    return tagArray
+      .sort((a, b) => b.count - a.count)
+      .map((tag, index) => ({
+        ...tag,
+        color: spectrumColors[index % spectrumColors.length],
+        frequency: tag.count / maxCount
+      }));
+  }, [posts]);
+
+  if (tagData.length === 0) {
+    return (
+      <div className="flex-1 w-full min-h-[16rem] flex items-center justify-center text-foreground opacity-60">
+        No tags available
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex-1 w-full bg-background p-4">
+      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+        {tagData.map(({ name, count, color, frequency }) => (
+          <a
+            key={name}
+            href={`/blog/tags/${encodeURIComponent(name)}`}
+            className={`
+              group relative
+              flex flex-col items-center justify-center
+              min-h-[5rem]
+              px-6 py-4 rounded-lg
+              text-xl
+              transition-all duration-300 ease-in-out
+              hover:scale-105
+              hover:bg-foreground/5
+              ${color}
+            `}
+          >
+            {/* Main tag display */}
+            <div className="font-medium text-center">
+              #{name}
+            </div>
+            
+            {/* Post count */}
+            <div className="mt-2 text-base opacity-60">
+              {count} post{count !== 1 ? 's' : ''}
+            </div>
+
+            {/* Background gradient */}
+            <div 
+              className="absolute inset-0 -z-10 rounded-lg opacity-10"
+              style={{
+                background: `
+                  linear-gradient(
+                    45deg,
+                    currentColor ${frequency * 100}%,
+                    transparent
+                  )
+                `
+              }}
+            />
+          </a>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default TagList;

src/src/components/footer/index.tsx

@@ -12,8 +12,8 @@ export default function Footer({ fixed = false }) {
   ));
 
   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">
+    <footer className={`w-full font-bold pointer-events-none ${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 pointer-events-none [&_a]:pointer-events-auto">
         {footerLinks}
       </div>
     </footer>

src/src/components/header/index.tsx

@@ -87,16 +87,19 @@ export default function Header() {
         fixed z-50 top-0 left-0 right-0 
         font-bold 
         transition-transform duration-300
+        pointer-events-none
         ${visible ? "translate-y-0" : "-translate-y-full"}
       `}
     >
       <div className={`
         w-full flex flex-row items-center justify-center
+        pointer-events-none
         ${!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
+          pointer-events-none [&_a]:pointer-events-auto
           ${!isIndexPage ? 'bg-black md:px-20' : ''}
         `}>
           {headerLinks}

src/src/components/hero/index.tsx

@@ -72,8 +72,8 @@ export default function Hero() {
   };
 
   return (
-    <div className="flex justify-center items-center min-h-screen">
-      <div className="text-4xl font-bold text-center">
+    <div className="flex justify-center items-center min-h-screen pointer-events-none">
+      <div className="text-4xl font-bold text-center pointer-events-none [&_a]:pointer-events-auto">
         <Typewriter
           options={typewriterOptions}
           onInit={handleInit}

src/src/components/mdx/command.tsx

@@ -0,0 +1,264 @@
+import React, { useState } from 'react';
+import { Terminal, Copy, Check } from 'lucide-react';
+// Import all required icons from react-icons
+import { FaDebian, FaFedora } from 'react-icons/fa6';
+import { SiGentoo, SiNixos, SiArchlinux } from 'react-icons/si';
+
+// Component for multi-line command sequences
+const CommandSequence = ({ 
+  commands, 
+  description, 
+  shell = "bash" 
+}) => {
+  const [copied, setCopied] = useState(false);
+  
+  // Join the commands with newlines for copying
+  const fullCommandText = Array.isArray(commands) 
+    ? commands.join('\n') 
+    : commands;
+  
+  const copyToClipboard = () => {
+    navigator.clipboard.writeText(fullCommandText)
+      .then(() => {
+        setCopied(true);
+        setTimeout(() => setCopied(false), 2000);
+      })
+      .catch(err => {
+        console.error('Failed to copy: ', err);
+      });
+  };
+
+  return (
+    <div className="w-full rounded-md overflow-hidden border border-foreground/20 bg-background my-4" style={{ maxWidth: '95vw' }}>
+      {/* Header with Terminal Icon and Copy Button */}
+      <div className="bg-background border-b border-foreground/20 text-foreground p-2 flex items-center justify-between">
+        <div className="flex items-center">
+          <Terminal size={20} className="mr-2 text-yellow-bright" />
+          <div className="text-sm font-comic-code">
+            {description || "Terminal Commands"}
+          </div>
+        </div>
+        <button 
+          onClick={copyToClipboard}
+          className="bg-background hover:bg-foreground/10 text-foreground text-xs px-2 py-1 rounded flex items-center"
+        >
+          {copied ? (
+            <>
+              <Check size={14} className="mr-1 text-green-bright" />
+            </>
+          ) : (
+            <>
+              <Copy size={14} className="mr-1 text-foreground/70" />
+            </>
+          )}
+        </button>
+      </div>
+      
+      {/* Command Display */}
+      <div className="text-foreground p-3 overflow-x-auto">
+        <div className="font-comic-code text-sm">
+          {Array.isArray(commands) 
+            ? commands.map((cmd, index) => (
+                <div key={index} className="flex items-start mb-2 last:mb-0">
+                  <span className="text-orange-bright mr-2 flex-shrink-0">$</span>
+                  <span className="text-purple-bright overflow-x-auto whitespace-nowrap">
+                    {cmd}
+                  </span>
+                </div>
+              ))
+            : (
+                <div className="flex items-start">
+                  <span className="text-orange-bright mr-2 flex-shrink-0">$</span>
+                  <span className="text-purple-bright overflow-x-auto whitespace-nowrap">
+                    {commands}
+                  </span>
+                </div>
+              )
+          }
+        </div>
+      </div>
+    </div>
+  );
+};
+
+// Original Commands component with tabs for different distros
+const Commands = ({ 
+  commandId, 
+  description,
+  archCommand,
+  debianCommand,
+  fedoraCommand,
+  gentooCommand,
+  nixCommand
+}) => {
+  const [activeTab, setActiveTab] = useState('arch');
+  const [copied, setCopied] = useState(false);
+
+  const distros = [
+    { 
+      id: 'arch', 
+      name: 'Arch',
+      icon: SiArchlinux,
+      command: archCommand || 'echo "No command specified for Arch"'
+    },
+    { 
+      id: 'debian', 
+      name: 'Debian/Ubuntu',
+      icon: FaDebian,
+      command: debianCommand || 'echo "No command specified for Debian/Ubuntu"'
+    },
+    { 
+      id: 'fedora', 
+      name: 'Fedora',
+      icon: FaFedora,
+      command: fedoraCommand || 'echo "No command specified for Fedora"'
+    },
+    { 
+      id: 'gentoo', 
+      name: 'Gentoo',
+      icon: SiGentoo,
+      command: gentooCommand || 'echo "No command specified for Gentoo"'
+    },
+    { 
+      id: 'nix', 
+      name: 'NixOS',
+      icon: SiNixos,
+      command: nixCommand || 'echo "No command specified for NixOS"'
+    }
+  ];
+
+  const copyToClipboard = (text) => {
+    navigator.clipboard.writeText(text)
+      .then(() => {
+        setCopied(true);
+        setTimeout(() => setCopied(false), 2000);
+      })
+      .catch(err => {
+        console.error('Failed to copy: ', err);
+      });
+  };
+
+  return (
+    <div className="w-full rounded-md overflow-hidden border border-foreground/20 bg-background my-4" style={{ maxWidth: '95vw' }}>
+      {/* Header with Terminal Icon and Copy Button */}
+      <div className="bg-background border-b border-foreground/20 text-foreground p-2 flex items-center justify-between">
+        <div className="flex items-center">
+          <Terminal size={20} className="mr-2 text-yellow-bright" />
+          <div className="text-sm font-comic-code">
+            {description || "Terminal Command"}
+          </div>
+        </div>
+        <button 
+          onClick={() => copyToClipboard(distros.find(d => d.id === activeTab).command)}
+          className="bg-background hover:bg-foreground/10 text-foreground text-xs px-2 py-1 rounded flex items-center"
+        >
+          {copied ? (
+            <>
+              <Check size={14} className="mr-1 text-green-bright" />
+              <span>Copied</span>
+            </>
+          ) : (
+            <>
+              <Copy size={14} className="mr-1 text-foreground/70" />
+              <span>Copy</span>
+            </>
+          )}
+        </button>
+      </div>
+      
+      {/* Tabs */}
+      <div className="flex flex-wrap border-b border-foreground/20 bg-background">
+        {distros.map((distro) => {
+          const IconComponent = distro.icon;
+          
+          return (
+            <button
+              key={distro.id}
+              className={`px-3 py-2 text-sm font-medium flex items-center ${
+                activeTab === distro.id
+                  ? 'bg-background border-b-2 border-blue-bright text-blue-bright'
+                  : 'text-foreground/80 hover:text-foreground hover:bg-foreground/5'
+              }`}
+              onClick={() => setActiveTab(distro.id)}
+            >
+              <span className="mr-1 inline-flex items-center">
+                <IconComponent size={16} />
+              </span>
+              {distro.name}
+            </button>
+          );
+        })}
+      </div>
+      
+      {/* Command Display with Horizontal Scrolling */}
+      <div className="text-foreground p-3 overflow-x-auto">
+        <div className="flex items-center font-comic-code text-sm whitespace-nowrap">
+          <span className="text-orange-bright mr-2">$</span>
+          <span className="text-purple-bright">
+            {distros.find(d => d.id === activeTab).command}
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+// Single command component
+const Command = ({ 
+  command, 
+  description, 
+  shell = "bash" 
+}) => {
+  const [copied, setCopied] = useState(false);
+  
+  const copyToClipboard = () => {
+    navigator.clipboard.writeText(command)
+      .then(() => {
+        setCopied(true);
+        setTimeout(() => setCopied(false), 2000);
+      })
+      .catch(err => {
+        console.error('Failed to copy: ', err);
+      });
+  };
+
+  return (
+    <div className="w-full rounded-md overflow-hidden border border-foreground/20 bg-background my-4" style={{ maxWidth: '95vw' }}>
+      {/* Header with Terminal Icon and Copy Button */}
+      <div className="bg-background border-b border-foreground/20 text-foreground p-2 flex items-center justify-between">
+        <div className="flex items-center">
+          <Terminal size={20} className="mr-2 text-yellow-bright" />
+          <div className="text-sm font-comic-code">
+            {description || "Terminal Command"}
+          </div>
+        </div>
+        <button 
+          onClick={copyToClipboard}
+          className="bg-background hover:bg-foreground/10 text-foreground text-xs px-2 py-1 rounded flex items-center"
+        >
+          {copied ? (
+            <>
+              <Check size={14} className="mr-1 text-green-bright" />
+            </>
+          ) : (
+            <>
+              <Copy size={14} className="mr-1 text-foreground/70" />
+            </>
+          )}
+        </button>
+      </div>
+      
+      {/* Command Display with Horizontal Scrolling */}
+      <div className="text-foreground p-3 overflow-x-auto">
+        <div className="flex items-center font-comic-code text-sm whitespace-nowrap">
+          <span className="text-orange-bright mr-2">$</span>
+          <span className="text-purple-bright">
+            {command}
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export { Commands, Command, CommandSequence };

src/src/components/mdx/video.tsx

@@ -0,0 +1,68 @@
+// src/components/mdx/Video.tsx
+import React, { useRef } from "react";
+import { Play } from "lucide-react";
+
+type VideoProps = {
+  url: string;
+  title: string;
+  attribution?: string;
+  className?: string;
+};
+
+export function Video({ url, title, attribution, className }: VideoProps) {
+  const videoRef = useRef<HTMLVideoElement>(null);
+  const overlayRef = useRef<HTMLButtonElement>(null);
+
+  const handlePlay = () => {
+    if (!videoRef.current || !overlayRef.current) return;
+
+    // Show browser native controls on play
+    videoRef.current.controls = true;
+    videoRef.current.play();
+
+    // Hide the overlay
+    overlayRef.current.style.display = "none";
+  };
+
+  return (
+    <figure className={`w-full ${className ?? ""}`}>
+      <div className="relative w-full bg-background rounded-lg overflow-hidden">
+        <video
+          ref={videoRef}
+          className="w-full h-auto bg-black cursor-pointer rounded-lg block"
+          preload="metadata"
+          playsInline
+          title={title}
+        >
+          <source src={url} type="video/mp4" />
+          Your browser does not support the video tag.
+        </video>
+
+        {/* Big overlay play button */}
+        <button
+          ref={overlayRef}
+          onClick={handlePlay}
+          className="absolute inset-0 flex items-center justify-center bg-background/90 text-foreground hover:text-yellow-bright transition"
+          aria-label={`Play ${title}`}
+        >
+          <Play size={64} strokeWidth={1.5} />
+        </button>
+      </div>
+
+      {/* Title + attribution */}
+      <figcaption className="mt-2 text-xs text-foreground flex justify-between items-center">
+        <span>{title}</span>
+        {attribution && (
+          <a
+            href={attribution}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="underline hover:text-blue-bright"
+          >
+          {attribution}
+          </a>
+        )}
+      </figcaption>
+    </figure>
+  );
+}

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

@@ -1,78 +0,0 @@
-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

@@ -1,49 +1,100 @@
 import React from "react";
 import type { CollectionEntry } from "astro:content";
-import { ProjectCard } from "@/components/projects/project-card";
+import { AnimateIn } from "@/components/animate-in";
 
 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">
+    <div className="w-full max-w-6xl mx-auto pt-24 sm:pt-32 px-4">
+      <AnimateIn>
+        <h1 className="text-2xl sm:text-3xl font-bold text-blue mb-12 text-center leading-relaxed">
           Here's what I've been <br className="sm:hidden" />
           building lately
         </h1>
+      </AnimateIn>
 
-      <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>
+      <ul className="space-y-6 md:space-y-10">
+        {projects.map((project, i) => (
+          <AnimateIn key={project.id} delay={i * 80}>
+            <li className="group">
+              <a href={`/projects/${project.id}`} className="block">
+                <article className="flex flex-col md:flex-row md:items-center gap-4 md:gap-8 p-2 md:p-4 border-b border-foreground/20 last:border-b-0 rounded-lg group-hover:outline group-hover:outline-2 group-hover:outline-blue transition-all duration-200">
+                  {/* Image */}
+                  <div className="w-full md:w-1/3 aspect-[16/9] overflow-hidden rounded-lg bg-foreground/5 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>
+
+                  {/* Content */}
+                  <div className="w-full md:w-2/3 flex flex-col gap-2 md:gap-3">
+                    <h2 className="text-lg md:text-2xl font-semibold text-yellow group-hover:text-blue transition-colors duration-200 line-clamp-2">
+                      {project.data.title}
+                    </h2>
+
+                    <p className="text-foreground/90 text-sm md:text-lg leading-relaxed line-clamp-2">
+                      {project.data.description}
+                    </p>
+
+                    {/* Tech stack */}
+                    <div className="flex flex-wrap gap-1.5 md:gap-2 mt-1">
+                      {project.data.techStack.map((tech) => (
+                        <span
+                          key={tech}
+                          className="text-xs md:text-sm px-2 py-0.5 rounded-full bg-purple-bright/10 text-purple-bright"
+                        >
+                          {tech}
+                        </span>
+                      ))}
+                    </div>
+
+                    {/* Links */}
+                    {(project.data.githubUrl || project.data.demoUrl) && (
+                      <div className="flex gap-4 mt-1">
+                        {project.data.githubUrl && (
+                          <span
+                            className="text-sm text-foreground/50 hover:text-blue-bright transition-colors"
+                            onClick={(e) => {
+                              e.preventDefault();
+                              e.stopPropagation();
+                              window.open(project.data.githubUrl, "_blank");
+                            }}
+                          >
+                            Source
+                          </span>
+                        )}
+                        {project.data.demoUrl && (
+                          <span
+                            className="text-sm text-foreground/50 hover:text-green-bright transition-colors"
+                            onClick={(e) => {
+                              e.preventDefault();
+                              e.stopPropagation();
+                              window.open(project.data.demoUrl, "_blank");
+                            }}
+                          >
+                            Live
+                          </span>
+                        )}
+                      </div>
+                    )}
+                  </div>
+                </article>
+              </a>
+            </li>
+          </AnimateIn>
+        ))}
+      </ul>
+    </div>
   );
 }

src/src/components/resume/index.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useRef, useState } from "react";
 import {
   FileDown,
   Github,
@@ -6,6 +6,144 @@ import {
   Globe
 } from "lucide-react";
 
+// --- Typewriter hook ---
+
+function useTypewriter(text: string, trigger: boolean, speed = 12) {
+  const [displayed, setDisplayed] = useState("");
+  const [done, setDone] = useState(false);
+
+  useEffect(() => {
+    if (!trigger) return;
+
+    let i = 0;
+    setDisplayed("");
+    setDone(false);
+
+    const interval = setInterval(() => {
+      i++;
+      setDisplayed(text.slice(0, i));
+      if (i >= text.length) {
+        setDone(true);
+        clearInterval(interval);
+      }
+    }, speed);
+
+    return () => clearInterval(interval);
+  }, [trigger, text, speed]);
+
+  return { displayed, done };
+}
+
+// --- Visibility hook ---
+
+function useScrollVisible(threshold = 0.1) {
+  const ref = useRef<HTMLDivElement>(null);
+  const [visible, setVisible] = useState(false);
+
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+
+    const rect = el.getBoundingClientRect();
+    if (rect.top < window.innerHeight && rect.bottom > 0) {
+      requestAnimationFrame(() => setVisible(true));
+      return;
+    }
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setVisible(true);
+          observer.disconnect();
+        }
+      },
+      { threshold }
+    );
+
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [threshold]);
+
+  return { ref, visible };
+}
+
+// --- Section fade-in ---
+
+function Section({ children, delay = 0 }: { children: React.ReactNode; delay?: number }) {
+  const { ref, visible } = useScrollVisible();
+
+  return (
+    <div
+      ref={ref}
+      className="transition-all duration-700 ease-out"
+      style={{
+        transitionDelay: `${delay}ms`,
+        opacity: visible ? 1 : 0,
+        transform: visible ? "translateY(0)" : "translateY(24px)",
+      }}
+    >
+      {children}
+    </div>
+  );
+}
+
+// --- Typed heading + fade-in body ---
+
+function TypedSection({
+  heading,
+  headingClass = "text-3xl font-bold text-yellow-bright",
+  children,
+}: {
+  heading: string;
+  headingClass?: string;
+  children: React.ReactNode;
+}) {
+  const { ref, visible } = useScrollVisible();
+  const { displayed, done } = useTypewriter(heading, visible, 20);
+
+  return (
+    <div ref={ref} className="space-y-4">
+      <h3 className={headingClass} style={{ minHeight: "1.2em" }}>
+        {visible ? displayed : "\u00A0"}
+        {visible && !done && <span className="animate-pulse text-foreground/40">|</span>}
+      </h3>
+      <div
+        className="transition-all duration-500 ease-out"
+        style={{
+          opacity: done ? 1 : 0,
+          transform: done ? "translateY(0)" : "translateY(12px)",
+        }}
+      >
+        {children}
+      </div>
+    </div>
+  );
+}
+
+// --- Staggered skill tags ---
+
+function SkillTags({ skills, trigger }: { skills: string[]; trigger: boolean }) {
+  return (
+    <div className="flex flex-wrap gap-3">
+      {skills.map((skill, i) => (
+        <span
+          key={i}
+          className="border border-foreground/20 px-4 py-2 rounded-lg hover:border-foreground/40 transition-all duration-500 ease-out"
+          style={{
+            transitionDelay: `${i * 60}ms`,
+            opacity: trigger ? 1 : 0,
+            transform: trigger ? "translateY(0) scale(1)" : "translateY(12px) scale(0.95)",
+          }}
+        >
+          {skill}
+        </span>
+      ))}
+    </div>
+  );
+}
+
+// --- Data ---
+
 const resumeData = {
   name: "Timothy Pidashev",
   title: "Software Engineer",
@@ -45,7 +183,7 @@ const resumeData = {
       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",
+        "Implemented a filter provider to further narrow down search results and enhance the user experience",
         "Created a smooth and responsive infinitely scrollable listings page",
         "Automated deployment & testing processes reducing downtime by 60%"
       ]
@@ -57,22 +195,17 @@ const resumeData = {
       school: "Clark College",
       location: "Vancouver, WA",
       period: "Graduating 2026",
-      achievements: []
+      achievements: [] as string[]
     }
   ],
   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"
-    }
-  ]
 };
 
+// --- Component ---
+
 const Resume = () => {
   const handleDownloadPDF = () => {
     window.open("/timothy-pidashev-resume.pdf", "_blank");
@@ -83,8 +216,13 @@ const Resume = () => {
       <div className="space-y-16">
         {/* Header */}
         <header className="text-center space-y-6">
+          <Section>
             <h1 className="text-6xl font-bold text-aqua-bright">{resumeData.name}</h1>
+          </Section>
+          <Section delay={150}>
             <h2 className="text-3xl text-foreground/80">{resumeData.title}</h2>
+          </Section>
+          <Section delay={300}>
             <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}
@@ -96,6 +234,8 @@ const Resume = () => {
               <span className="hidden md:inline">•</span>
               <span>{resumeData.contact.location}</span>
             </div>
+          </Section>
+          <Section delay={450}>
             <div className="flex justify-center items-center gap-6 text-lg">
               <a href={`https://${resumeData.contact.github}`}
                  target="_blank"
@@ -104,7 +244,6 @@ const Resume = () => {
                 <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"
@@ -120,19 +259,20 @@ const Resume = () => {
                 Resume
               </button>
             </div>
+          </Section>
         </header>
 
         {/* Summary */}
-        <section className="space-y-4">
-          <h3 className="text-3xl font-bold text-yellow-bright">Professional Summary</h3>
+        <TypedSection heading="Professional Summary">
           <p className="text-xl leading-relaxed">{resumeData.summary}</p>
-        </section>
+        </TypedSection>
 
         {/* Experience */}
-        <section className="space-y-8">
-          <h3 className="text-3xl font-bold text-yellow-bright">Experience</h3>
+        <TypedSection heading="Experience">
+          <div className="space-y-8">
             {resumeData.experience.map((exp, index) => (
-            <div key={index} className="space-y-4">
+              <Section key={index} delay={index * 100}>
+                <div 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>
@@ -141,19 +281,22 @@ const Resume = () => {
                     <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>
+                    {exp.achievements.map((a, i) => (
+                      <li key={i} className="text-lg leading-relaxed">{a}</li>
                     ))}
                   </ul>
                 </div>
+              </Section>
             ))}
-        </section>
+          </div>
+        </TypedSection>
 
         {/* Contract Work */}
-        <section className="space-y-8">
-          <h3 className="text-3xl font-bold text-yellow-bright">Contract Work</h3>
+        <TypedSection heading="Contract Work">
+          <div className="space-y-8">
             {resumeData.contractWork.map((project, index) => (
-            <div key={index} className="space-y-4">
+              <Section key={index} delay={index * 100}>
+                <div 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">
@@ -164,7 +307,6 @@ const Resume = () => {
                             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>
@@ -179,8 +321,8 @@ const Resume = () => {
                       <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>
+                          {project.responsibilities.map((r, i) => (
+                            <li key={i} className="text-lg leading-relaxed">{r}</li>
                           ))}
                         </ul>
                       </div>
@@ -189,22 +331,25 @@ const Resume = () => {
                       <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>
+                          {project.achievements.map((a, i) => (
+                            <li key={i} className="text-lg leading-relaxed">{a}</li>
                           ))}
                         </ul>
                       </div>
                     )}
                   </div>
                 </div>
+              </Section>
             ))}
-        </section>
+          </div>
+        </TypedSection>
 
         {/* Education */}
-        <section className="space-y-8">
-          <h3 className="text-3xl font-bold text-yellow-bright">Education</h3>
+        <TypedSection heading="Education">
+          <div className="space-y-8">
             {resumeData.education.map((edu, index) => (
-            <div key={index} className="space-y-4">
+              <Section key={index}>
+                <div 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>
@@ -212,59 +357,57 @@ const Resume = () => {
                     </div>
                     <div className="text-foreground/60 text-lg font-medium">{edu.period}</div>
                   </div>
+                  {edu.achievements.length > 0 && (
                     <ul className="list-disc pl-6 space-y-3">
-                {edu.achievements.map((achievement, i) => (
-                  <li key={i} className="text-lg leading-relaxed">{achievement}</li>
+                      {edu.achievements.map((a, i) => (
+                        <li key={i} className="text-lg leading-relaxed">{a}</li>
                       ))}
                     </ul>
+                  )}
                 </div>
+              </Section>
             ))}
-        </section>
+          </div>
+        </TypedSection>
 
         {/* 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>
-        */}
+        <SkillsSection />
       </div>
     </div>
   );
 };
 
+// --- Skills section ---
+
+function SkillsSection() {
+  const { ref, visible } = useScrollVisible();
+  const { displayed, done } = useTypewriter("Skills", visible, 20);
+
+  return (
+    <div ref={ref} className="space-y-8">
+      <h3 className="text-3xl font-bold text-yellow-bright" style={{ minHeight: "1.2em" }}>
+        {visible ? displayed : "\u00A0"}
+        {visible && !done && <span className="animate-pulse text-foreground/40">|</span>}
+      </h3>
+
+      <div
+        className="grid grid-cols-1 md:grid-cols-2 gap-8 transition-all duration-500 ease-out"
+        style={{
+          opacity: done ? 1 : 0,
+          transform: done ? "translateY(0)" : "translateY(12px)",
+        }}
+      >
+        <div className="space-y-4">
+          <h4 className="text-2xl font-semibold text-green-bright">Technical Skills</h4>
+          <SkillTags skills={resumeData.skills.technical} trigger={done} />
+        </div>
+        <div className="space-y-4">
+          <h4 className="text-2xl font-semibold text-green-bright">Soft Skills</h4>
+          <SkillTags skills={resumeData.skills.soft} trigger={done} />
+        </div>
+      </div>
+    </div>
+  );
+}
+
 export default Resume;

src/src/content.config.ts

@@ -1,18 +1,24 @@
 import { defineCollection, z } from "astro:content";
+import { glob } from "astro/loaders";
 
 export const collections = {
   blog: defineCollection({
+    loader: glob({ pattern: "**/*.mdx", base: "./src/content/blog" }),
     schema: z.object({
       title: z.string(),
       description: z.string(),
       author: z.string(),
       tags: z.array(z.string()),
-      date: z.string(),
+      date: z.coerce.date().transform((date) => {
+        return new Date(date.setUTCHours(12, 0, 0, 0));
+      }),
       image: z.string().optional(),
       imagePosition: z.string().optional(),
+      isDraft: z.boolean().optional()
     }),
   }),
   projects: defineCollection({
+    loader: glob({ pattern: "**/*.mdx", base: "./src/content/projects" }),
     schema: z.object({
       title: z.string(),
       description: z.string(),
@@ -20,7 +26,7 @@ export const collections = {
       demoUrl: z.string().url().optional(),
       techStack: z.array(z.string()),
       date: z.string(),
-      image: z.string().optional(),
-    }),
+      image: z.string().optional()
     }),
+  })
 };

src/src/content/blog/breaking-the-chromebook-cage.mdx

@@ -0,0 +1,9 @@
+---
+title: Breaking the Chromebook Cage
+description: From breaking Chromebooks as a student to breaking Chromebooks to stop students from breaking Chromebooks
+author: Timothy Pidashev
+tags: ["uefi", "coreboot", "firmware", "chromebooks"]
+date: 2025-09-15
+image: "/blog/breaking-the-chromebook-cage/thumbnail.png"
+isDraft: true
+---

src/src/content/blog/components/thinkpad-t440p-coreboot-guide/advertisement.tsx

@@ -0,0 +1,104 @@
+import React from 'react';
+
+interface T440pAdProps {
+  className?: string;
+}
+
+const Advertisement: React.FC<T440pAdProps> = ({ className = '' }) => {
+  return (
+    <div className={`bg-gradient-to-br from-blue-50 to-indigo-100 border-2 border-blue-200 rounded-lg p-6 my-8 shadow-lg ${className}`}>
+      <div className="flex items-start gap-4">
+        {/* Icon/Logo placeholder */}
+        <div className="flex-shrink-0 w-12 h-12 bg-blue-600 rounded-lg flex items-center justify-center">
+          <svg 
+            className="w-8 h-8 text-white" 
+            fill="none" 
+            stroke="currentColor" 
+            viewBox="0 0 24 24"
+          >
+            <path 
+              strokeLinecap="round" 
+              strokeLinejoin="round" 
+              strokeWidth={2} 
+              d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" 
+            />
+          </svg>
+        </div>
+
+        <div className="flex-1">
+          <div className="flex items-center gap-3 mb-3">
+            <h3 className="text-xl font-bold text-gray-900">
+              Custom Corebooted ThinkPad T440p
+            </h3>
+            <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
+              Available Now
+            </span>
+          </div>
+
+          <p className="text-gray-700 mb-4">
+            Skip the technical complexity and get a professionally corebooted ThinkPad T440p 
+            built to your specifications. Each laptop is carefully modified and tested to ensure 
+            optimal performance and reliability.
+          </p>
+
+          <div className="grid md:grid-cols-2 gap-4 mb-4">
+            <div>
+              <h4 className="font-semibold text-gray-900 mb-2">✨ What's Included:</h4>
+              <ul className="text-sm text-gray-700 space-y-1">
+                <li>• Coreboot firmware pre-installed</li>
+                <li>• IPS 1080p display upgrade</li>
+                <li>• RAM options: 4GB, 8GB, or 16GB</li>
+                <li>• CPU choice available</li>
+                <li>• Battery upgrade option</li>
+                <li>• Thorough testing & quality assurance</li>
+              </ul>
+            </div>
+            
+            <div>
+              <h4 className="font-semibold text-gray-900 mb-2">🔧 Benefits:</h4>
+              <ul className="text-sm text-gray-700 space-y-1">
+                <li>• Faster boot times</li>
+                <li>• Open-source BIOS</li>
+                <li>• Enhanced security</li>
+                <li>• No proprietary firmware</li>
+                <li>• Full hardware control</li>
+                <li>• Professional installation</li>
+              </ul>
+            </div>
+          </div>
+
+          <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 pt-4 border-t border-blue-200">
+            <div className="flex items-baseline gap-2">
+              <span className="text-3xl font-bold text-blue-600">$500</span>
+              <span className="text-sm text-gray-600">USD (base configuration)</span>
+            </div>
+            
+            <div className="flex gap-3">
+              <a 
+                href="https://ebay.com" 
+                target="_blank" 
+                rel="noopener noreferrer"
+                className="inline-flex items-center px-4 py-2 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 transition-colors"
+              >
+                <svg className="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 24 24">
+                  <path d="M8.5 2A1.5 1.5 0 007 3.5v1A1.5 1.5 0 008.5 6h7A1.5 1.5 0 0017 4.5v-1A1.5 1.5 0 0015.5 2h-7zM10 3h4v1h-4V3z"/>
+                  <path d="M6 7.5A1.5 1.5 0 017.5 6h9A1.5 1.5 0 0118 7.5v9a1.5 1.5 0 01-1.5 1.5h-9A1.5 1.5 0 016 16.5v-9z"/>
+                </svg>
+                Order on eBay
+              </a>
+              
+              <button className="inline-flex items-center px-4 py-2 border border-blue-600 text-blue-600 font-medium rounded-lg hover:bg-blue-50 transition-colors">
+                <svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                </svg>
+                Ask Questions
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Advertisement;

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

@@ -3,7 +3,7 @@ title: My First Post!
 description: A quick introduction
 author: Timothy Pidashev
 tags: [greeting]
-date: January 9, 2025
+date: 2025-01-09
 image: "/blog/my-first-post/thumbnail.png"
 imagePosition: "center 30%"
 ---

src/src/content/blog/thinkpad-t440p-coreboot-guide.mdx

@@ -0,0 +1,351 @@
+---
+title: Thinkpad T440p Coreboot Guide
+description: The definitive guide on corebooting a Thinkpad T440p
+author: Timothy Pidashev
+tags: [t440p, coreboot, thinkpad]
+date: 2025-01-15
+image: "/blog/thinkpad-t440p-coreboot-guide/thumbnail.png"
+isDraft: true
+---
+
+import { Commands, Command, CommandSequence } from "@/components/mdx/command";
+import Advertisement from '@/content/blog/components/thinkpad-t440p-coreboot-guide/advertisement';
+
+> **Interactive Script Available!**  
+> Want to skip the manual steps in this guide? 
+> I've created an interactive script that can automate the entire process step by step as you follow along.
+> This script supports Arch, Debian, Fedora, Gentoo, and Nix!
+
+<Command 
+  description="Interactive script"
+  command="curl -fsSL https://timmypidashev.dev/scripts/run.sh | sh -s -- -t coreboot-t440p"
+  client:load
+/>
+
+Don't pipe anyone's scripts to **sh** blindly, including mine - <a href="https://github.com/timmypidashev/scripts" target="_blank" rel="noopener noreferrer">audit the source</a>.
+
+## Getting Started 
+
+The Thinkpad T440p is a powerful and versatile laptop that can be further enhanced by installing coreboot, 
+an open-source BIOS replacement. This guide will walk you through the process of corebooting your T440p, 
+including flashing the BIOS chip and installing the necessary software.
+
+## What You'll Need
+
+Before getting started corebooting your T440p, make sure you have the following:
+
+- **Thinkpad T440p**: This guide is specifically for the T440p model.
+- **CH341A Programmer**: This is a USB device used to flash the BIOS chip.
+- **Screwdriver**: A torx screwdriver is needed to open the laptop.
+
+## Installing Dependencies
+
+Install the following programs. These will be needed to compile coreboot and flash the BIOS.
+
+<Commands
+  description="Install prerequisite packages"
+  archCommand="sudo pacman -S base-devel curl git gcc-ada ncurses zlib nasm sharutils unzip flashrom"
+  debianCommand="sudo apt install build-essential curl git gnat libncurses-dev zlib1g-dev nasm sharutils unzip flashrom"
+  fedoraCommand="sudo dnf install @development-tools curl git gcc-gnat ncurses-devel zlib-devel nasm sharutils unzip flashrom"
+  gentooCommand="sudo emerge --ask sys-devel/base-devel net-misc/curl dev-vcs/git sys-devel/gcc ncurses dev-libs/zlib dev-lang/nasm app-arch/sharutils app-arch/unzip sys-apps/flashrom"
+  nixCommand="nix-env -i stdenv curl git gcc gnat ncurses zlib nasm sharutils unzip flashrom"
+  client:load
+/>
+
+## Disassembling the Laptop
+1. **Power off your laptop**: Make sure your T440p is completely powered off and unplugged from any power source.
+2. **Remove the battery**: Flip the laptop over and remove the battery by sliding the latch to the unlock position and lifting it out.
+3. **Unscrew the back panel**: Use a torx screwdriver to remove the screws securing the back panel.
+
+## Locating the EEPROM Chips
+
+In order to flash the laptop, you will need to have access to two EEPROM chips located next to the sodimm RAM.
+
+![EEPROM Chips Location](/blog/thinkpad-t440p-coreboot-guide/eeprom_chips_location.png)
+
+## Assembling the SPI Flasher
+
+Place the SPI flasher ribbon cable into the correct slot and make sure its the 3.3v variant
+
+![SPI Flasher Assembly](/blog/thinkpad-t440p-coreboot-guide/spi_flasher_assembly.png)
+
+After the flasher is ready, connect it to your machine and ensure its ready to use:
+
+<Command 
+  description="Ensure the CH341A flasher is being detected"
+  command="flashrom --programmer ch341a_spi"
+/>
+
+Flashrom should report that programmer initialization was a success.
+
+## Extracting Original BIOS
+
+To begin, first create a clean directory where all work to coreboot
+the T440p will be done.
+
+<Command 
+  description="Create a directory where all work will be done"
+  command="mkdir ~/t440p-coreboot"
+  client:load
+/>
+
+Next, extract the original rom from both EEPROM chips. This is 
+done by attaching the programmer to the correct chip and running
+the subsequent commands. It may take longer than expected, and 
+ensuring the bios was properly extracted is important before proceeding
+further.
+
+<CommandSequence 
+  commands={[
+    "sudo flashrom --programmer ch341a_spi -r 4mb_backup1.bin",
+    "sudo flashrom --programmer ch341a_spi -r 4mb_backup2.bin",
+    "diff 4mb_backup1.bin 4mb_backup2.bin"
+  ]}
+  description="Backup and verify 4MB chip"
+  client:load
+/>
+
+<CommandSequence
+  commands={[
+    "sudo flashrom --programmer ch341a_spi -r 8mb_backup1.bin",
+    "sudo flashrom --programmer ch341a_spi -r 8mb_backup2.bin",
+    "diff 8mb_backup1.bin 8mb_backup2.bin"
+  ]}
+  description="Backup and verify 8MB chip"
+  client:load
+/>
+
+If the diff checks pass, combine both files into one ROM.
+
+<Command
+  description="Combine 4MB & 8MB into one ROM"
+  command="cat 8mb_backup_1.bin 4mb_backup1.bin > t440p-original.rom"
+  client:load
+/>
+
+## Building Required Tools
+
+Now that the original bios has been successfuly extracted, it is time 
+to clone the coreboot repository and build every tool needed to build
+a new bios image.
+
+<CommandSequence
+  commands={[
+    "git clone https://review.coreboot.org/coreboot ~/t440p-coreboot/coreboot",
+    "cd ~/t440p-coreboot/coreboot",
+    "git checkout e1e762716cf925c621d58163133ed1c3e006a903",
+    "git submodule update --init --checkout"
+  ]}
+  description="Clone coreboot and checkout to the correct commit"
+  client:load
+/>
+
+We will need to build `idftool`, which will be used to export all necessary blobs
+from our original bios, and `cbfstool`, which will be used to extract __mrc.bin__(a blob 
+from a haswell chromebook peppy image).
+
+<Command 
+  description="Build util/ifdtool"
+  command="cd ~/t440p-coreboot/coreboot/util/ifdtool && make"
+  client:load
+/>
+
+<Command
+  description="Build util/cbfstool"
+  command="cd ~/t440p-coreboot/coreboot/ && make -C util/cbfstool"
+  client:load
+/>
+
+## Exporting Firmware Blobs
+
+Once the necessary tools have been built, we can export the
+3 flash regions from our original bios image.
+
+<CommandSequence
+  commands={[
+    "cd ~/t440p-coreboot/coreboot/util/ifdtool",
+    "./ifdtool -x ~/t440p-coreboot/t440p-original.rom",
+    "mv flashregion_0_flashdescriptor.bin ~/t440p-coreboot/ifd.bin",
+    "mv flashregion_2_intel_me.bin ~/t440p-coreboot/me.bin",
+    "mv flashregion_3_gbe.bin ~/t440p-coreboot/gbe.bin"
+  ]}
+  description="Export firmware blobs"
+  client:load
+/>
+
+## Obtaining mrc.bin
+
+In order to obtain __mrc.bin__, we need the chromeos peppy image.
+This can be pulled by running the `crosfirmware.sh` script found in util/chromeos.
+
+<Command
+  description="Download peppy chromeos image"
+  command="cd ~/t440p-coreboot/coreboot/util/chromeos && ./crosfirmware.sh peppy"
+  client:load
+/>
+
+
+We can now obtain __mrc.bin__ using cbfstool to extract the blob from the image.
+
+<CommandSequence
+  commands={[
+    "cd ~/t440p-coreboot/coreboot/util/chromeos",
+    "../cbfstool/cbfstool coreboot-*.bin extract -f mrc.bin -n mrc.bin -r RO_SECTION",
+    "mv mrc.bin ~/t440p-coreboot/mrc.bin"
+  ]}
+  description="Extract mrc.bin using cbfstool"
+  client:load
+/>
+
+## Configuring Coreboot
+
+Configuring coreboot is really where most of your time will be spent. To help out, 
+I've created several handy configs that should suit most use cases, and can be easily
+tweaked to your liking. Here is a list of whats available:
+
+### 1. GRUB2 (Recommended)
+
+GRUB2 is the recommended payload for most users. It boots Linux directly without needing a
+separate bootloader installation on disk. This configuration includes three secondary payloads:
+
+- **memtest86+** - Memory testing utility
+- **nvramcui** - CMOS/NVRAM settings editor
+- **coreinfo** - System information viewer
+
+If your T440p has the optional GT730M dGPU, the GRUB2 config also includes the
+necessary VGA option ROM for it.
+
+### 2. SeaBIOS
+
+SeaBIOS provides a traditional BIOS interface, making it the most compatible option.
+Choose this if you need to boot operating systems that expect a legacy BIOS, such
+as Windows or BSD.
+
+### 3. edk2 (UEFI)
+
+edk2 provides a UEFI firmware interface. Choose this if you prefer UEFI boot or
+need UEFI-specific features.
+
+---
+
+If using the interactive script, it will prompt you to choose a payload and apply
+a preset configuration automatically. You can also choose to open the full
+configuration menu (`make nconfig`) to customize further.
+
+For manual configuration, first copy the extracted blobs into place:
+
+<CommandSequence
+  commands={[
+    "mkdir -p ~/t440p-coreboot/coreboot/3rdparty/blobs/mainboard/lenovo/haswell",
+    "mkdir -p ~/t440p-coreboot/coreboot/3rdparty/blobs/cpu/intel/haswell",
+    "cp ~/t440p-coreboot/ifd.bin ~/t440p-coreboot/coreboot/3rdparty/blobs/mainboard/lenovo/haswell/descriptor.bin",
+    "cp ~/t440p-coreboot/me.bin ~/t440p-coreboot/coreboot/3rdparty/blobs/mainboard/lenovo/haswell/me.bin",
+    "cp ~/t440p-coreboot/gbe.bin ~/t440p-coreboot/coreboot/3rdparty/blobs/mainboard/lenovo/haswell/gbe.bin",
+    "cp ~/t440p-coreboot/mrc.bin ~/t440p-coreboot/coreboot/3rdparty/blobs/cpu/intel/haswell/mrc.bin"
+  ]}
+  description="Copy firmware blobs into the coreboot source tree"
+  client:load
+/>
+
+Then open the configuration menu:
+
+<Command
+  description="Open coreboot configuration"
+  command="cd ~/t440p-coreboot/coreboot && make nconfig"
+  client:load
+/>
+
+Key settings to configure:
+
+- **Mainboard** &rarr; Mainboard vendor: **Lenovo** &rarr; Mainboard model: **ThinkPad T440p**
+- **Chipset** &rarr; Add Intel descriptor.bin, ME firmware, and GbE configuration (set paths to your blobs)
+- **Chipset** &rarr; Add haswell MRC file (set path to mrc.bin)
+- **Payload** &rarr; Choose your preferred payload (GRUB2, SeaBIOS, or edk2)
+
+## Building and Flashing 
+
+After configuring coreboot, it is time to build and flash it onto your unsuspecting T440p :D
+
+<CommandSequence
+  commands={[
+    "cd ~/t440p-coreboot/coreboot",
+    "make crossgcc-i386 CPUS=$(nproc)",
+    "make"
+  ]}
+  description="Build coreboot"
+  client:load 
+/>
+
+Once the coreboot build has completed, split the built ROM for the 8MB(bottom) chip & 4MB(top) chip.
+
+<CommandSequence
+  commands={[
+    "cd ~/t440p-coreboot/coreboot/build",
+    "dd if=coreboot.rom of=bottom.rom bs=1M count=8",
+    "dd if=coreboot.rom of=top.rom bs=1M skip=8"
+  ]}
+  description="Split the built ROM for both EEPROM chips"
+  client:load
+/>
+
+Now flash the new bios onto your thinkpad!
+
+<Command
+  description="Flash the 4MB chip"
+  command="sudo flashrom --programmer ch341a_spi -w top.rom"
+/>
+
+<Command
+  description="Flash the 8MB chip"
+  command="sudo flashrom --programmer ch341a_spi -w bottom.rom"
+/>
+
+Thats it! If done properly, your thinkpad should now boot!
+
+## Reverting to Original
+
+If for some reason you feel the need to revert back, or your T440p can't boot, 
+here are the steps needed to flash the original image back.
+
+### Can't Boot
+
+<CommandSequence 
+  commands={[
+    "cd ~/t440p-coreboot/",
+    "dd if=t440p-original.rom of=bottom.rom bs=1M count=8",
+    "dd if=t440p-original.rom of=top.rom bs=1M skip=8"
+  ]}
+  description="Split original bios image for both EEPROM chips"
+  client:load
+/>
+
+<Command 
+  description="Flash the 4MB chip"
+  command="sudo flashrom --programmer ch341a_spi -w top.rom"
+/>
+
+<Command 
+  description="Flash the 8MB chip"
+  command="sudo flashrom --programmer ch341a_spi -w bottom.rom"
+/>
+
+### Can Boot
+
+<CommandSequence
+  commands={[
+    "sudo sed -i '/GRUB_CMDLINE_LINUX_DEFAULT/ s/\"/ iomem=relaxed\"/2' /etc/default/grub",
+    "sudo grub-mkconfig -o /boot/grub/grub.cfg",
+  ]}
+  description="Set kernel flag iomem=relaxed and update grub config"
+  client:load
+/>
+
+Reboot to apply `iomem=relaxed`
+
+<Command
+  description="Flash the original bios"
+  command="sudo flashrom -p internal:laptop=force_I_want_a_brick -r ~/t440p-coreboot/t440p-original.rom"
+/>
+
+And that about wraps it up! If you liked the guide, leave a reaction or comment any changes or fixes
+I should make below. Your feedback is greatly appreciated!

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

@@ -1,104 +0,0 @@
----
-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

@@ -1,2 +1,9 @@
 /// <reference path="../.astro/types.d.ts" />
 /// <reference types="astro/client" />
+
+declare namespace App {
+	interface Locals {
+		user: import("./lib/user").User | null;
+		session: import("./lib/session").Session | null;
+	}
+}

src/src/layouts/content.astro

@@ -1,6 +1,7 @@
 ---
 import "@/style/globals.css";
 import { ClientRouter } from "astro:transitions";
+
 import Header from "@/components/header";
 import Footer from "@/components/footer";
 import Background from "@/components/background";
@@ -31,12 +32,11 @@ const ogImage = "https://timmypidashev.dev/og-image.jpg";
     <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="icon" type="image/jpeg" href="/me.jpeg" />
     <ClientRouter 
       defaultTransition={false}
       handleFocus={false}
     />
-
     <style>
       ::view-transition-new(:root) {
         animation: none;
@@ -45,24 +45,26 @@ const ogImage = "https://timmypidashev.dev/og-image.jpg";
       ::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">
+  <body class="bg-background text-foreground min-h-screen flex flex-col">
     <Header client:load />
-    <main>
-      <div class="max-w-5xl mx-auto pt-12 px-4 py-8">
+    <main class="flex-1 flex flex-col">
+      <div class="max-w-5xl mx-auto pt-12 px-4 py-8 flex-1">
         <Background layout="content" position="right" client:only="react" transition:persist />
+        <div>
           <slot />
+        </div>
         <Background layout="content" position="left" client:only="react" transition:persist />
       </div>
     </main>
+    <div class="mt-auto">
       <Footer client:load transition:persist />
-
+    </div>
     <script>
       document.addEventListener("astro:after-navigation", () => {
         window.scrollTo(0, 0);

src/src/layouts/index.astro

@@ -35,7 +35,7 @@ const ogImage = "https://timmypidashev.dev/og-image.jpg";
     <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="icon" type="image/jpeg" href="/me.jpeg" />
     <link rel="sitemap" href="/sitemap-index.xml" />
     <ClientRouter />
 	</head>

src/src/layouts/resource.astro

@@ -0,0 +1,70 @@
+---
+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/jpeg" href="/me.jpeg" />
+    <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 min-h-screen flex flex-col">
+    <main class="flex-1 flex flex-col">
+      <div class="max-w-5xl mx-auto pt-12 px-4 py-8 flex-1">
+        <Background layout="content" position="right" client:only="react" transition:persist />
+        <div>
+          <slot />
+        </div>
+        <Background layout="content" position="left" client:only="react" transition:persist />
+      </div>
+    </main>
+    <script>
+      document.addEventListener("astro:after-navigation", () => {
+        window.scrollTo(0, 0);
+      });
+    </script>
+  </body>
+</html>

src/src/lib/structuredData.ts

@@ -2,12 +2,12 @@ import { type Article, type Person, type WebSite, type WithContext } from "schem
 import type { CollectionEntry } from 'astro:content';
  
 export const blogWebsite: WithContext<WebSite> = {
-  '@context': 'https://schema.org',
-  '@type': 'WebSite',
+  "@context": "https://schema.org",
+  "@type": "WebSite",
   url: `${import.meta.env.SITE}/blog/`,
-  name: 'Dzmitry Kozhukh blog',
-  description: 'Frontend insights',
-  inLanguage: 'en_US',
+  name: "Timothy Pidsashev - Blog",
+  description: "Timothy Pidsashev's blog",
+  inLanguage: "en_US",
 };
  
 export const mainWebsite: WithContext<WebSite> = {
@@ -41,7 +41,7 @@ export function getArticleSchema(post: CollectionEntry<"blog">) {
     "@context": "https://schema.org",
     "@type": "Article",
     headline: post.data.title,
-    url: `${import.meta.env.SITE}/blog/${post.slug}/`,
+    url: `${import.meta.env.SITE}/blog/${post.id}/`,
     description: post.data.excerpt,
     datePublished: post.data.date.toString(),
     publisher: {

src/src/pages/404.astro

@@ -1,16 +1,16 @@
 ---
 import IndexLayout from "@/layouts/index.astro";
-
+import GlitchText from "@/components/404/glitched-text";
 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>
+    <GlitchText client:only />
+    <p class="text-xl text-orange mb-8">Whoops! This page doesn't exist :(</p>
     <button 
       onclick="window.history.back()" 
-      class="underline hover:opacity-70 transition-opacity"
+      class="underline text-green hover:opacity-70 transition-opacity"
     >
       go back
     </button>

src/src/pages/about.astro

@@ -2,6 +2,8 @@
 import "@/style/globals.css"
 import ContentLayout from "@/layouts/content.astro";
 import Intro from "@/components/about/intro";
+import AllTimeStats from "@/components/about/stats-alltime";
+import DetailedStats from "@/components/about/stats-detailed";
 import Timeline from "@/components/about/timeline";
 import CurrentFocus from "@/components/about/current-focus";
 import OutsideCoding from "@/components/about/outside-coding";
@@ -15,16 +17,24 @@ import OutsideCoding from "@/components/about/outside-coding";
       <Intro client:load />
     </section>
 
-    <section class="flex items-center justify-center py-16">
+    <section class="min-h-[60vh] flex items-center justify-center py-16">
+      <AllTimeStats client:load />
+    </section>
+
+    <section class="min-h-screen flex items-center justify-center py-16">
+      <DetailedStats client:load />
+    </section>
+
+    <section class="min-h-[80vh] flex items-center justify-center py-16">
       <Timeline client:load />
     </section>
 
-    <section class="flex items-center justify-center py-16">
+    <section class="min-h-[80vh] flex items-center justify-center py-16">
       <CurrentFocus client:load />
     </section>
 
-    <section class="flex items-center justify-center py-16">
+    <section class="min-h-[50vh] flex items-center justify-center py-16">
       <OutsideCoding client:load />
     </section>
   </div>
-</MainLayout>
+</ContentLayout>

src/src/pages/api/wakatime/activity.ts

@@ -0,0 +1,39 @@
+import type { APIRoute } from 'astro';
+
+export const GET: APIRoute = async () => {
+  const WAKATIME_API_KEY = import.meta.env.WAKATIME_API_KEY;
+
+  if (!WAKATIME_API_KEY) {
+    return new Response(
+      JSON.stringify({ error: "WAKATIME_API_KEY not configured" }),
+      { status: 503, headers: { "Content-Type": "application/json" } }
+    );
+  }
+
+  try {
+    const response = await fetch(
+      'https://wakatime.com/api/v1/users/current/summaries?range=last_6_months', {
+        headers: {
+          'Authorization': `Basic ${Buffer.from(WAKATIME_API_KEY).toString('base64')}`
+        }
+      }
+    );
+
+    const data = await response.json();
+    return new Response(
+      JSON.stringify({ data: data.data }),
+      {
+        status: 200,
+        headers: {
+          'Content-Type': 'application/json'
+        }
+      }
+    );
+  } catch (error) {
+    console.error('API Error:', error);
+    return new Response(
+      JSON.stringify({ error: 'Failed to fetch WakaTime data' }),
+      { status: 500 }
+    );
+  }
+}

src/src/pages/api/wakatime/alltime.ts

@@ -0,0 +1,35 @@
+import type { APIRoute } from "astro";
+
+export const GET: APIRoute = async () => {
+  const WAKATIME_API_KEY = import.meta.env.WAKATIME_API_KEY;
+
+  if (!WAKATIME_API_KEY) {
+    return new Response(
+      JSON.stringify({ error: "WAKATIME_API_KEY not configured" }),
+      { status: 503, headers: { "Content-Type": "application/json" } }
+    );
+  }
+
+  try {
+    const response = await fetch(
+      "https://wakatime.com/api/v1/users/current/all_time_since_today",
+      {
+        headers: {
+          Authorization: `Basic ${Buffer.from(WAKATIME_API_KEY).toString("base64")}`,
+        },
+      }
+    );
+
+    const data = await response.json();
+    return new Response(JSON.stringify(data), {
+      status: 200,
+      headers: { "Content-Type": "application/json" },
+    });
+  } catch (error) {
+    console.error("WakaTime alltime API error:", error);
+    return new Response(
+      JSON.stringify({ error: "Failed to fetch stats" }),
+      { status: 500, headers: { "Content-Type": "application/json" } }
+    );
+  }
+};

src/src/pages/api/wakatime/detailed.ts

@@ -0,0 +1,40 @@
+// src/pages/api/wakatime/detailed.ts
+import type { APIRoute } from 'astro';
+
+export const GET: APIRoute = async () => {
+  const WAKATIME_API_KEY = import.meta.env.WAKATIME_API_KEY;
+
+  if (!WAKATIME_API_KEY) {
+    return new Response(
+      JSON.stringify({ error: "WAKATIME_API_KEY not configured" }),
+      { status: 503, headers: { "Content-Type": "application/json" } }
+    );
+  }
+
+  try {
+    const response = await fetch(
+      'https://wakatime.com/api/v1/users/current/stats/last_7_days?timeout=15', {
+        headers: {
+          'Authorization': `Basic ${Buffer.from(WAKATIME_API_KEY).toString('base64')}`
+        }
+      }
+    );
+
+    const data = await response.json();
+    return new Response(
+      JSON.stringify({ data: data.data }),
+      {
+        status: 200,
+        headers: {
+          'Content-Type': 'application/json'
+        }
+      }
+    );
+  } catch (error) {
+    console.error('API Error:', error);
+    return new Response(
+      JSON.stringify({ error: 'Failed to fetch WakaTime data' }),
+      { status: 500 }
+    );
+  }
+}

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

@@ -1,22 +1,35 @@
 ---
-import { CollectionEntry, getCollection } from "astro:content";
+import { getCollection, render } from "astro:content";
 import { Image } from "astro:assets";
 import ContentLayout from "@/layouts/content.astro";
 import { getArticleSchema } from "@/lib/structuredData";
 import { blogWebsite } from "@/lib/structuredData";
+import { Comments } from "@/components/blog/comments";
 
-interface Props {
-  post: CollectionEntry<"blog">;
-}
-export async function getStaticPaths() {
+// This is a dynamic route in SSR mode
+const { slug } = Astro.params;
+
+// Fetch blog posts
 const posts = await getCollection("blog");
-  return posts.map((post) => ({
-    params: { slug: post.slug },
-    props: post,
-  }));
+const post = posts.find(post => post.id === slug);
+
+if (!post || (!import.meta.env.DEV && post.data.isDraft === true)) {
+  return new Response(null, {
+    status: 404,
+    statusText: "Not found"
+  });
 }
-const post = Astro.props;
-const { Content } = await post.render();
+
+// Dynamically render the content
+const { Content } = await render(post);
+
+// Format the date
+const formattedDate = new Date(post.data.date).toLocaleDateString("en-US", {
+  year: "numeric",
+  month: "long",
+  day: "numeric"
+});
+
 const articleStructuredData = getArticleSchema(post);
 
 const breadcrumbsStructuredData = {
@@ -33,22 +46,26 @@ const breadcrumbsStructuredData = {
       "@type": "ListItem",
       position: 2,
       name: post.data.title,
-      item: `${import.meta.env.SITE}/blog/${post.slug}/`,
+      item: `${import.meta.env.SITE}/blog/${post.id}/`,
     },
   ],
 };
+
 const jsonLd = {
   "@context": "https://schema.org",
   "@graph": [articleStructuredData, breadcrumbsStructuredData, blogWebsite],
 };
 ---
 
-<ContentLayout>
+<ContentLayout
+  title={`${post.data.title} | Timothy Pidashev`}
+  description={post.data.description}
+>
   <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">
+    <article class="prose prose-invert prose-lg mx-auto max-w-4xl">
       {post.data.image && (
-        <div class="-mx-4 sm:mx-0 mb-8">
+        <div class="-mx-4 sm:mx-0 mb-4">
           <Image
             src={post.data.image}
             alt={post.data.title}
@@ -59,18 +76,29 @@ const jsonLd = {
           />
         </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">
+      <h1 class="text-3xl !mt-2 !mb-2">{post.data.title}</h1>
+      <p class="lg:text-2xl sm:text-lg !mt-0 !mb-3">{post.data.description}</p>
+      <div class="flex flex-wrap items-center gap-2 md:gap-3 text-sm md:text-base text-foreground/80">
+        <span class="text-orange">{post.data.author}</span>
+        <span class="text-foreground/50">•</span>
+        <time dateTime={post.data.date instanceof Date ? post.data.date.toISOString() : post.data.date} class="text-blue">
+          {formattedDate}
+        </time>
+      </div>
+      <div class="flex flex-wrap gap-2 mt-2">
         {post.data.tags.map((tag) => (
-          <span class="text-sm px-2 py-1 bg-muted rounded-full">
+          <span
+            class="text-xs md:text-base text-aqua hover:text-aqua-bright transition-colors duration-200"
+            onclick={`window.location.href='/blog/tag/${tag}'`}
+          >
             #{tag}
           </span>
         ))}
       </div>
-      <hr class="bg-orange" />
+      <div class="prose prose-invert prose-lg max-w-none">
         <Content />
+      </div>
     </article>
+    <Comments client:idle />
   </div>
 </ContentLayout>

src/src/pages/blog/index.astro

@@ -1,19 +1,29 @@
 ---
 import { getCollection } from "astro:content";
 import ContentLayout from "@/layouts/content.astro";
-
+import { BlogHeader } from "@/components/blog/header";
 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()
-);
+  return import.meta.env.DEV || data.isDraft !== true;
+})).sort((a, b) => {
+  return b.data.date.valueOf() - a.data.date.valueOf()
+}).map(post => ({
+  ...post,
+  data: {
+    ...post.data,
+    date: post.data.date.toLocaleDateString("en-US", {
+      year: "numeric",
+      month: "long",
+      day: "numeric"
+    })
+  }
+}));
 ---
-
 <ContentLayout 
   title="Blog | Timothy Pidashev"
   description="My experiences and technical insights into software development and the ever-evolving world of programming."
 >
+  <BlogHeader client:load />
   <BlogPostList posts={posts} client:load />
 </ContentLayout>

src/src/pages/blog/tags/index.astro

@@ -0,0 +1,28 @@
+---
+import { getCollection } from "astro:content";
+import ContentLayout from "@/layouts/content.astro";
+
+import TagList from "@/components/blog/tag-list";
+
+const posts = (await getCollection("blog", ({ data }) => {
+  return import.meta.env.DEV || data.isDraft !== true;
+})).sort((a, b) => {
+  return b.data.date.valueOf() - a.data.date.valueOf()
+}).map(post => ({
+  ...post,
+  data: {
+    ...post.data,
+    date: post.data.date.toLocaleDateString("en-US", {
+      year: "numeric",
+      month: "long",
+      day: "numeric"
+    })
+  }
+}));
+---
+<ContentLayout 
+  title="Blog | Timothy Pidashev"
+  description="My experiences and technical insights into software development and the ever-evolving world of programming."
+>
+  <TagList posts={posts} />
+</ContentLayout>

src/src/pages/index.astro

@@ -1,4 +1,6 @@
 ---
+export const prerender = false;
+
 import "@/style/globals.css"
 
 import IndexLayout from "@/layouts/index.astro";
@@ -7,7 +9,7 @@ import Hero from "@/components/hero";
 
 <IndexLayout 
   title="Timothy Pidashev" 
-  description="Turning coffee into code since 2018."
+  description="Software engineer passionate about systems programming, artificial intelligence, and building innovative solutions. Personal site featuring my projects, technical blog, and research."
 >
   <Hero client:load />
 </IndexLayout>

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

@@ -1,17 +1,21 @@
 ---
-import { getCollection } from "astro:content";
+export const prerender = true;
+
+import { getCollection, render } from "astro:content";
+
 import ContentLayout from "@/layouts/content.astro";
+import { Comments } from "@/components/blog/comments";
 
 export async function getStaticPaths() {
   const projects = await getCollection("projects");
   return projects.map(project => ({
-    params: { slug: project.slug },
+    params: { slug: project.id },
     props: { project },
   }));
 }
 
 const { project } = Astro.props;
-const { Content } = await project.render();
+const { Content } = await render(project);
 ---
 
 <ContentLayout title={`${project.data.title} | Timothy Pidashev`}>
@@ -56,8 +60,9 @@ const { Content } = await project.render();
       </div>
     </header>
 
-    <div class="prose prose-invert max-w-none">
+    <div class="prose prose-invert prose-lg max-w-none">
       <Content />
     </div>
   </article>
+  <Comments client:idle />
 </ContentLayout>

src/src/pages/rss.ts

@@ -0,0 +1,29 @@
+import rss from "@astrojs/rss";
+import { getCollection } from "astro:content";
+import type { APIContext } from "astro";
+
+export async function GET(context: APIContext) {
+  const blog = await getCollection("blog");
+  
+  const sortedPosts = blog
+    .sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf());
+  
+  return rss({
+    title: "Timothy Pidashev",
+    description: "My experiences and technical insights into software development and the ever-evolving world of programming.",
+    site: context.site!,
+    items: sortedPosts.map((post) => ({
+      title: post.data.title,
+      pubDate: post.data.date,
+      description: post.data.description,
+      link: `/blog/${post.id}/`,
+      author: post.data.author,
+      categories: post.data.tags,
+      enclosure: post.data.image ? {
+        url: new URL(`blog/${post.id}/thumbnail.png`, context.site).toString(),
+        type: 'image/jpeg',
+        length: 0
+      } : undefined
+    })),
+  });
+}

src/src/style/comments.css

@@ -0,0 +1,348 @@
+/*!
+ * Gruvbox Dark Theme for Giscus - Minimalist Edition
+ * Pure black background with simplified design
+ * Hosted on a linode bucket
+ */
+
+main {
+  /* Syntax highlighting colors */
+  --color-prettylights-syntax-comment: #928374;
+  --color-prettylights-syntax-constant: #83a598;
+  --color-prettylights-syntax-entity: #d3869b;
+  --color-prettylights-syntax-storage-modifier-import: #ebdbb2;
+  --color-prettylights-syntax-entity-tag: #b8bb26;
+  --color-prettylights-syntax-keyword: #fb4934;
+  --color-prettylights-syntax-string: #83a598;
+  --color-prettylights-syntax-variable: #fe8019;
+  --color-prettylights-syntax-brackethighlighter-unmatched: #fb4934;
+  --color-prettylights-syntax-invalid-illegal-text: #ebdbb2;
+  --color-prettylights-syntax-invalid-illegal-bg: #cc241d;
+  --color-prettylights-syntax-carriage-return-text: #ebdbb2;
+  --color-prettylights-syntax-carriage-return-bg: #cc241d;
+  --color-prettylights-syntax-string-regexp: #b8bb26;
+  --color-prettylights-syntax-markup-list: #fabd2f;
+  --color-prettylights-syntax-markup-heading: #83a598;
+  --color-prettylights-syntax-markup-italic: #ebdbb2;
+  --color-prettylights-syntax-markup-bold: #fe8019;
+  --color-prettylights-syntax-markup-deleted-text: #fb4934;
+  --color-prettylights-syntax-markup-deleted-bg: #000000;
+  --color-prettylights-syntax-markup-inserted-text: #b8bb26;
+  --color-prettylights-syntax-markup-inserted-bg: #000000;
+  --color-prettylights-syntax-markup-changed-text: #fabd2f;
+  --color-prettylights-syntax-markup-changed-bg: #000000;
+  --color-prettylights-syntax-markup-ignored-text: #ebdbb2;
+  --color-prettylights-syntax-markup-ignored-bg: #000000;
+  --color-prettylights-syntax-meta-diff-range: #d3869b;
+  --color-prettylights-syntax-brackethighlighter-angle: #928374;
+  --color-prettylights-syntax-sublimelinter-gutter-mark: #928374;
+  --color-prettylights-syntax-constant-other-reference-link: #83a598;
+
+  /* Button colors */
+  --color-btn-text: #ebdbb2;
+  --color-btn-bg: #000000;
+  --color-btn-border: #3c3836;
+  --color-btn-shadow: 0 0 #0000;
+  --color-btn-inset-shadow: 0 0 #0000;
+  --color-btn-hover-bg: #282828;
+  --color-btn-hover-border: #504945;
+  --color-btn-active-bg: #1d2021;
+  --color-btn-active-border: #504945;
+  --color-btn-selected-bg: #000000;
+  
+  /* Primary button colors */
+  --color-btn-primary-text: #ebdbb2;
+  --color-btn-primary-bg: #458588;
+  --color-btn-primary-border: #000000;
+  --color-btn-primary-shadow: 0 0 #0000;
+  --color-btn-primary-inset-shadow: 0 0 #0000;
+  --color-btn-primary-hover-bg: #83a598;
+  --color-btn-primary-hover-border: #000000;
+  --color-btn-primary-selected-bg: #458588;
+  --color-btn-primary-selected-shadow: 0 0 #0000;
+  --color-btn-primary-disabled-text: #ebdbb280;
+  --color-btn-primary-disabled-bg: #45858899;
+  --color-btn-primary-disabled-border: #000000;
+  
+  /* Control colors */
+  --color-action-list-item-default-hover-bg: #28282850;
+  --color-segmented-control-bg: #28282850;
+  --color-segmented-control-button-bg: #000000;
+  --color-segmented-control-button-selected-border: #504945;
+  
+  /* Foreground colors */
+  --color-fg-default: #ebdbb2;
+  --color-fg-muted: #a89984;
+  --color-fg-subtle: #7c6f64;
+  
+  /* Background colors - pure black */
+  --color-canvas-default: #000000;
+  --color-canvas-overlay: #000000;
+  --color-canvas-inset: #000000;
+  --color-canvas-subtle: #0a0a0a;
+  
+  /* Border colors - minimal */
+  --color-border-default: #28282880;
+  --color-border-muted: #28282850;
+  --color-neutral-muted: #28282840;
+  
+  /* Accent colors */
+  --color-accent-fg: #83a598;
+  --color-accent-emphasis: #458588;
+  --color-accent-muted: #83a59866;
+  --color-accent-subtle: #83a5981a;
+  
+  /* Status colors */
+  --color-success-fg: #b8bb26;
+  --color-attention-fg: #fabd2f;
+  --color-attention-muted: #fabd2f66;
+  --color-attention-subtle: #fabd2f26;
+  --color-danger-fg: #fb4934;
+  --color-danger-muted: #fb493466;
+  --color-danger-subtle: #fb49341a;
+  
+  /* Shadow color */
+  --color-primer-shadow-inset: 0 0 #0000;
+  
+  /* Scale colors */
+  --color-scale-gray-7: #282828;
+  --color-scale-blue-8: #458588;
+  
+  /* Social reaction colors */
+  --color-social-reaction-bg-hover: #28282850;
+  --color-social-reaction-bg-reacted-hover: #45858850;
+}
+
+/* Loader SVG */
+main .pagination-loader-container {
+  background-image: url(https://github.com/images/modules/pulls/progressive-disclosure-line-dark.svg);
+}
+
+/* Custom Giscus styles - Minimalist */
+.gsc-reactions-count {
+  display: none;
+}
+
+.gsc-timeline {
+  flex-direction: column-reverse;
+}
+
+.gsc-header {
+  padding-bottom: 1rem;
+  font-family: "Comic Code", monospace;
+  border-bottom: none;
+}
+
+.gsc-comments > .gsc-header {
+  order: 1;
+}
+
+.gsc-comments > .gsc-comment-box {
+  margin-bottom: 1rem;
+  order: 2;
+  font-family: "Comic Code", monospace;
+  background-color: #000000;
+  border-radius: 0.25rem;
+  border: 1px solid #28282850;
+}
+
+.gsc-comments > .gsc-timeline {
+  order: 3;
+}
+
+.gsc-homepage-bg {
+  background-color: #000000;
+}
+
+/* Loading image */
+main .gsc-loading-image {
+  background-image: url(https://github.githubassets.com/images/mona-loading-dimmed.gif);
+}
+
+/* Additional custom styles - Minimalist */
+.gsc-comment {
+  border: 1px solid #28282850;
+  border-radius: 0.25rem;
+  margin-bottom: 1rem;
+  background-color: #000000;
+  transition: border-color 0.2s ease;
+}
+
+.gsc-comment-header {
+  background-color: #0a0a0a;
+  padding: 0.75rem;
+  border-bottom: 1px solid #28282830;
+  font-family: "Comic Code", monospace;
+}
+
+.gsc-comment-content {
+  padding: 1rem;
+  font-family: "Comic Code", monospace;
+}
+
+.gsc-comment-author {
+  color: var(--color-fg-default);
+  font-weight: 600;
+}
+
+.gsc-comment-author-avatar img {
+  border-radius: 50%;
+}
+
+.gsc-comment-reactions {
+  border-top: none;
+  padding-top: 0.5rem;
+}
+
+.gsc-reply-box {
+  background-color: #000000;
+  border-radius: 0.25rem;
+  margin-top: 0.5rem;
+  margin-left: 1rem;
+  font-family: "Comic Code", monospace;
+  border: 1px solid #28282840;
+}
+
+/* Text input areas */
+.gsc-comment-box-textarea {
+  background-color: #0a0a0a;
+  border: 1px solid #28282850;
+  border-radius: 0.25rem;
+  color: var(--color-fg-default);
+  font-family: "Comic Code", monospace;
+  padding: 0.75rem;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.gsc-comment-box-textarea:focus {
+  border-color: var(--color-accent-fg);
+  box-shadow: 0 0 0 2px #45858830;
+  outline: none;
+}
+
+/* Buttons */
+.gsc-comment-box-buttons button {
+  font-family: "Comic Code", monospace;
+  border-radius: 0.25rem;
+  transition: background-color 0.2s ease, border-color 0.2s ease;
+}
+
+/* Code block styling */
+.gsc-comment pre {
+  background-color: #0a0a0a;
+  border-radius: 0.25rem;
+  padding: 1rem;
+  overflow-x: auto;
+  border: 1px solid #28282840;
+}
+
+.gsc-comment code {
+  font-family: "Comic Code", monospace;
+  background-color: #0a0a0a;
+  color: var(--color-prettylights-syntax-entity);
+  padding: 0.2em 0.4em;
+  border-radius: 0.25rem;
+}
+
+/* Add hover effects - subtle */
+.gsc-comment:hover {
+  border-color: #504945;
+}
+
+.gsc-social-reaction-summary-item:hover {
+  background-color: #28282850;
+}
+
+/* Dark scrollbar - minimal */
+.gsc-timeline::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+.gsc-timeline::-webkit-scrollbar-track {
+  background: #000000;
+  border-radius: 4px;
+}
+
+.gsc-timeline::-webkit-scrollbar-thumb {
+  background: #28282880;
+  border-radius: 4px;
+}
+
+.gsc-timeline::-webkit-scrollbar-thumb:hover {
+  background: #3c3836;
+}
+
+/* Remove unnecessary borders and separators */
+.gsc-comment-footer, 
+.gsc-comment-footer-separator,
+.gsc-reactions-button,
+.gsc-social-reaction-summary-item:not(:hover) {
+  border: none;
+}
+
+.gsc-upvote svg {
+  fill: #83a598;
+}
+
+.gsc-downvote svg {
+  fill: #fb4934;
+}
+
+/* Add subtle hover transitions */
+.gsc-comment-box,
+.gsc-comment,
+.gsc-comment-reactions,
+button,
+.gsc-reply-box {
+  transition: all 0.2s ease-in-out;
+}
+
+.gsc-main {
+  border: none !important;
+}
+
+.gsc-left-header {
+  background-color: #000000 !important;
+}
+
+.gsc-right-header {
+  background-color: #000000 !important;
+}
+
+.gsc-header-status {
+  background-color: #000000 !important;
+}
+
+/* Remove any additional borders */
+.gsc-comment-box,
+.gsc-comment-box-md-toolbar,
+.gsc-comment-box-buttons {
+  border: none !important;
+}
+
+.gsc-comment-box-md-toolbar-item {
+  color: #83a598 !important;
+}
+
+/* Simplify the editor toolbar */
+.gsc-comment-box-md-toolbar {
+  background-color: #0a0a0a !important;
+  padding: 0.5rem !important;
+}
+
+/* Hide the "powered by giscus" text */
+.gsc-comments .gsc-powered-by {
+  display: none !important;
+}
+
+/* Alternative approach if the above doesn't work */
+.gsc-comments footer {
+  display: none !important;
+}
+
+/* Another approach targeting specifically the text */
+.gsc-comments .gsc-powered-by a {
+  color: #000000 !important;
+  opacity: 0 !important;
+  visibility: hidden !important;
+}

src/tailwind.config.cjs

@@ -2,6 +2,9 @@ module.exports = {
   content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
   theme: {
     extend: {
+      fontFamily: {
+        "comic-code": ["Comic Code", "monospace"],
+      },
       colors: {
         background: "#000000",
         foreground: "#ebdbb2",
@@ -38,10 +41,15 @@ module.exports = {
         "draw-line": {
           "0%": { "stroke-dashoffset": "100" },
           "100%": { "stroke-dashoffset": "0" }
+        },
+        "fade-in": {
+          "0%": { opacity: "0" },
+          "100%": { opacity: "1" }
         }
       },
       animation: {
-        "draw-line": "draw-line 0.6s ease-out forwards"
+        "draw-line": "draw-line 0.6s ease-out forwards",
+        "fade-in": "fade-in 0.3s ease-in-out forwards"
       },
       typography: (theme) => ({
         DEFAULT: {
@@ -88,6 +96,56 @@ module.exports = {
               transition: "all 0.2s ease-in-out",
             },
 
+            // Code
+            'code:not([data-language])': {
+              color: theme('colors.purple.bright'),
+              backgroundColor: '#282828',
+              padding: '0',
+              borderRadius: '0.25rem',
+              fontFamily: 'Comic Code, monospace',
+              fontWeight: '400',
+              fontSize: 'inherit', // Match the parent text size
+              '&::before': { content: 'none' },
+              '&::after': { content: 'none' },
+            },
+
+            'pre': {
+              backgroundColor: '#282828',
+              color: theme("colors.foreground"),
+              borderRadius: '0.5rem',
+              overflow: 'visible', // This allows the copy button to be positioned outside
+              position: 'relative', // For the copy button positioning
+              marginTop: '1.5rem', // Space for the copy button and language label
+              fontSize: 'inherit', // Match the parent font size
+            },
+
+            'pre code': {
+              display: 'block',
+              fontFamily: 'Comic Code, monospace',
+              fontSize: '1em', // This will inherit from the prose-lg setting
+              padding: '0',
+              overflow: 'auto', // Enable horizontal scrolling
+              whiteSpace: 'pre',
+              '&::before': { content: 'none' },
+              '&::after': { content: 'none' },
+            },
+
+
+            '[data-rehype-pretty-code-fragment]:nth-of-type(2) pre': {
+              '[data-line]::before': {
+                content: 'counter(line)',
+                counterIncrement: 'line',
+                display: 'inline-block',
+                width: '1rem',
+                marginRight: '1rem',
+                textAlign: 'right',
+                color: '#86e1fc',
+              },
+              '[data-highlighted-line]::before': {
+                color: '#86e1fc',
+              },
+            },
+
             // Bold
             strong: {
               color: theme("colors.orange.bright"),
@@ -115,44 +173,6 @@ module.exports = {
               },
             },
 
-            // 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"),
@@ -186,6 +206,13 @@ module.exports = {
             },
           },
         },
+        lg: {
+          css: {
+            "pre code": {
+              fontSize: "1rem",
+            },
+          },
+        },
       }),
     },
   },