2023-06-11 06:50:41 +00:00
|
|
|
<div align="center">
|
2023-12-17 10:55:04 +00:00
|
|
|
<img alt="logo" src="/public/favicon.svg" width="100" />
|
2023-06-11 06:50:41 +00:00
|
|
|
</div>
|
|
|
|
<h1 align="center">
|
|
|
|
<a href="https://kjelsrud.dev">kjelsrud.dev</a>
|
|
|
|
</h1>
|
|
|
|
<p align="center">
|
2023-12-10 01:05:59 +00:00
|
|
|
The third iteration of my personal website, built with <a href="https://astro.build/">Astro</a>.
|
2023-06-11 06:50:41 +00:00
|
|
|
</p>
|
|
|
|
|
|
|
|
## 📝 Info
|
2023-04-14 09:18:14 +00:00
|
|
|
|
|
|
|
### What I've learned from the project so far
|
|
|
|
|
2023-12-10 00:39:57 +00:00
|
|
|
- Coding with HTML, CSS, TypeScript, etc.
|
|
|
|
- Usage of SSG/frameworks like Hugo or Astro
|
2023-06-11 06:50:41 +00:00
|
|
|
- How to use Git
|
2024-03-17 11:57:19 +00:00
|
|
|
- How to selfhost websites using Caddy
|
2023-04-14 09:18:14 +00:00
|
|
|
- Some understanding of Github Actions + Pages
|
|
|
|
- How to create websites that are faster, more secure, and easier to maintain
|
|
|
|
- How to use templates to generate static websites
|
2023-05-04 10:07:35 +00:00
|
|
|
- How to use DNS pointers (A- & CNAME records)
|
2023-06-05 10:31:23 +00:00
|
|
|
- How to create & use layouts for a static website
|
|
|
|
- How to write JSON-docs and use data from it
|
2023-04-14 09:18:14 +00:00
|
|
|
|
2023-06-11 06:50:41 +00:00
|
|
|
### Features
|
2023-04-14 09:18:14 +00:00
|
|
|
|
2023-12-10 00:39:57 +00:00
|
|
|
- Blog
|
2024-01-04 12:10:21 +00:00
|
|
|
- Bookmarks
|
|
|
|
- Connect
|
2024-01-06 20:38:13 +00:00
|
|
|
- CV
|
2023-12-11 09:53:02 +00:00
|
|
|
- Digital garden
|
2024-01-04 12:10:21 +00:00
|
|
|
- Gallery
|
2024-03-17 11:57:19 +00:00
|
|
|
- Guestbook
|
2024-01-04 12:10:21 +00:00
|
|
|
- Logs
|
2024-03-17 11:57:19 +00:00
|
|
|
- Now
|
2023-12-13 13:20:26 +00:00
|
|
|
- Uses
|
|
|
|
- Vinyl collection
|
2023-04-14 09:18:14 +00:00
|
|
|
|
|
|
|
### Future plans:
|
|
|
|
|
2023-12-10 00:39:57 +00:00
|
|
|
- [ ] Food wall
|
2024-03-17 11:57:19 +00:00
|
|
|
- [ ] Worldmap of places I've been
|
|
|
|
- [ ] Page filled with q<D->uotes I like
|
2022-10-21 15:29:15 +00:00
|
|
|
|
2023-06-11 06:50:41 +00:00
|
|
|
## 🛠️ How do I run it locally?
|
2022-10-21 15:29:15 +00:00
|
|
|
|
2023-12-10 00:39:57 +00:00
|
|
|
1. Install the dependencies: `yarn`
|
2023-07-20 20:12:00 +00:00
|
|
|
|
2023-12-10 00:39:57 +00:00
|
|
|
2. Start the development server: `yarn dev`
|
2023-07-20 20:12:00 +00:00
|
|
|
|
|
|
|
## 🎨 Color codes
|
2023-12-23 20:56:13 +00:00
|
|
|
|
|
|
|
### Light mode
|
|
|
|
|
|
|
|
| Color | Hex |
|
|
|
|
|-|-|
|
2024-02-21 21:17:46 +00:00
|
|
|
| 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` |
|
2023-12-23 20:56:13 +00:00
|
|
|
|
|
|
|
### Dark mode
|
|
|
|
|
2023-12-10 00:39:57 +00:00
|
|
|
| Color | Hex |
|
|
|
|
|-|-|
|
2024-02-21 21:17:46 +00:00
|
|
|
| Deep Ocean | ![#0F1A1C](https://via.placeholder.com/10/0F1A1C?text=+) `#0F1A1C` |
|
|
|
|
| Mint Foam Text | ![#9AD3BB](https://via.placeholder.com/10/9AD3BB?text=+) `#9AD3BB` |
|
|
|
|
| Coral Reef Accent | ![#3A6F7F](https://via.placeholder.com/10/3A6F7F?text=+) `#3A6F7F` |
|
|
|
|
| Seaweed Highlight | ![#2B4F60](https://via.placeholder.com/10/2B4F60?text=+) `#2B4F60` |
|
|
|
|
| Lagoon | ![#1A333F](https://via.placeholder.com/10/1A333F?text=+) `#1A333F` |
|
|
|
|
| Aquamarine | ![#7FCDCD](https://via.placeholder.com/10/7FCDCD?text=+) `#7FCDCD` |
|
2023-07-20 20:12:00 +00:00
|
|
|
|
|
|
|
## Versionlog
|
2023-12-10 01:05:59 +00:00
|
|
|
- The first iteration of my website was plain html and css..
|
2023-12-23 20:56:13 +00:00
|
|
|
- The second iteration of my website was a Hugo-instance that used a readymade theme called "PaperMod".
|
|
|
|
|