57 lines
2.7 KiB
Markdown
57 lines
2.7 KiB
Markdown
<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 |
|
|
|-|-|
|
|
| Soft Pastel Green Background | ![#E6F5E5](https://via.placeholder.com/10/E6F5E5?text=+) `#E6F5E5` |
|
|
| Dark Olive Green Text | ![#2E4033](https://via.placeholder.com/10/2E4033?text=+) `#2E4033` |
|
|
| Sage Green Secondary Text | ![#5F7A6D](https://via.placeholder.com/10/5F7A6D?text=+) `#5F7A6D` |
|
|
| Mint Green Accents | ![#88A597](https://via.placeholder.com/10/88A597?text=+) `#88A597` |
|
|
| Dark Mint Green | ![#789085](https://via.placeholder.com/10/789085?text=+) `#789085` |
|
|
| Spring Green | ![#00CC6A](https://via.placeholder.com/10/00CC6A?text=+) `#00CC6A` |
|
|
| Light Mint | ![#CCE3CC](https://via.placeholder.com/10/CCE3CC?text=+) `#CCE3CC` |
|
|
|
|
### 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` |
|
|
| Dusty Lavender | ![#6f7aaa](https://via.placeholder.com/10/6f7aaa?text=+) `#6f7aaa` |
|
|
| Periwinkle Glow | ![#b4c0f4](https://via.placeholder.com/10/b4c0f4?text=+) `#b4c0f4` |
|
|
| Sky Blue | ![#89b4fa](https://via.placeholder.com/10/89b4fa?text=+) `#89b4fa` |
|
|
| Charcoal Abyss | ![#11111b](https://via.placeholder.com/10/11111b?text=+) `#11111b` |
|
|
|
|
## 📜 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".
|
|
|