kjelsrud.dev/README.md

<div align="center">
  <img alt="logo" src="/public/mii.webp" width="100" />
</div>
<h1 align="center">
  <a href="https://kjelsrud.dev">kjelsrud.dev</a>
</h1>
<p align="center">
  The third iteration of my personal website, built with <a href="https://astro.build/">Astro</a>.
</p>

## 📝 Info

This is my personal website that I started on during my bachelor-studies. Currently it's on its third version, which is coded in Astro!

Through this project I've learned a lot. Some of this include working with different web-technologies, like TypeScript, Hugo and Astro, getting more familiar with Git, self-hosting the website with Caddy and using GitHub Actions to build and deploy it, as well as grapsing how DNS pointers are utilized and how to structure JSON-docs.

## 🔋 Features

The webpage offers a variety of features including a blog, bookmarks, ways to reach me, my CV, a digital garden for evolving ideas, a gallery for sharing images, a guestbook, logs for books, movies, etc., /now, /uses and /wish, my favorite quotes, my vinyl collection, a world map showing all the places I've been, and a todo list for the website.

## 🤸 Quick Start

1. Install the dependencies: `pnpm i`

2. Start the development server: `pnpm dev`

## 🎨 Color codes

### Light mode

| Color | Hex |
|-|-|
| Coffee Cream | ![#F7F0E8](https://via.placeholder.com/10/F7F0E8?text=+) `#F7F0E8` |
| Espresso Text | ![#3B2C29](https://via.placeholder.com/10/3B2C29?text=+) `#3B2C29` |
| Latte Secondary Text | ![#78605C](https://via.placeholder.com/10/78605C?text=+) `#78605C` |
| Cappuccino Accents | ![#A48B82](https://via.placeholder.com/10/A48B82?text=+) `#A48B82` |
| Caramel Macchiato | ![#B08968](https://via.placeholder.com/10/B08968?text=+) `#B08968` |

### Dark mode

| Color | Hex |
|-|-|
| Midnight Navy | ![#1e1e2e](https://via.placeholder.com/10/1e1e2e?text=+) `#1e1e2e` |
| Lavender Mist | ![#cdd6f4](https://via.placeholder.com/10/cdd6f4?text=+) `#cdd6f4` |
| Amethyst Glow | ![#8f5cf4](https://via.placeholder.com/10/8f5cf4?text=+) `#8f5cf4` |
| Soft Sand | ![#f4e8cd](https://via.placeholder.com/10/f4e8cd?text=+) `#f4e8cd` |
| Periwinkle Glow | ![#b4c0f4](https://via.placeholder.com/10/b4c0f4?text=+) `#b4c0f4` |
| Sky Blue | ![#89b4fa](https://via.placeholder.com/10/89b4fa?text=+) `#89b4fa` |

## 📜 Versionlog

- The first iteration of my website was plain HTML and CSS.
- The second iteration of my website was a Hugo-instance that used a readymade theme called "PaperMod".