More mobile support on nav + Code fix

.gitignore

@@ -1,2 +1,9 @@
+#IDE Settings
+.vscode/
+
+#Building
 build/
-.vscode
+
+#Heavy data like images or videos
+src/assets/videos/*
+src/assets/gallery/*

README.md

@@ -43,3 +43,6 @@ No support is offered on this package, this is a personal project to learn Go.
 ## Credits
 
 Built by `keyemail`, `kuubeu` helped inspire this project, as well as some svg work.
+
+[BGJar for Backgrounds!](https://bgjar.com/)
+[AwesomeIcons for Icons!](https://fontawesome.com/)

go.mod

@@ -1,3 +1,3 @@
 module keyemail-dev-v1.0
 
-go 1.22.3
+go 1.23

main.go

@@ -1,12 +1,12 @@
 package main
 
 import (
+	"html/template"
+	"log"
 	"net/http"
 	"os"
-  "log"
-  "html/template"
-  "strings"
 	"strconv"
+	"strings"
 )
 
 type Index struct {
@@ -21,11 +21,7 @@ type Index struct {
 	GalleryPhoto       *GalleryItems
 	VideoContent       *VideoItems
 	Nav                bool
-}
-
-type responseWriter struct {
-  http.ResponseWriter
-  status int
+	PageName           string 
 }
 
 type GalleryItems struct {
@@ -52,7 +48,7 @@ type VideoItems struct {
 
 var data = &Index{
 	WebpageTitle:       "Keyemail",
-  WebpageIcon: "/src/assets/main/favicon.ico",
+	WebpageIcon:        "/src/assets/main/favicon.png",
 	WebpageKeywords:    "keyemail",
 	WebpageDescription: "Welcome to keyemail.dev! A profile based on Keyemail.",
 	WebpageURL:         "https://keyemail.dev",
@@ -87,12 +83,11 @@ var socialItems = []SocialItems {
 	{"https://steamcommunity.com/id/keyemail/", "Steam", "Keyemail", "/src/assets/icons/steam.svg", "000000"},
 	{"https://open.spotify.com/user/316yuurxrw3zcprxsnrvgamxktp4", "Spotify", "Keyemail", "/src/assets/icons/spotify.svg", "1DB954"},
 	{"https://www.youtube.com/channel/UCCNkKG8XoZCh52vLCbXYy7g", "YouTube", "Keyemail", "/src/assets/icons/youtube.svg", "CD201F"},
-  {"https://www.instagram.com/keyemail1?igsh=OGQ5ZDc2ODk2ZA%3D%3D&utm_source=qr", "Instagram", "keyemail1", "/src/assets/icons/instagram.svg", "C13584"},
+	{"https://bsky.app/profile/keyemail.dev", "Bluesky", "Keyemail", "/src/assets/icons/bluesky.svg", "1185FE"},
 }
 
 var videoItems = []VideoItems{
-  {"/src/assets/videos/JP-Installing-Windows-Project.mp4", 1, "JP Installing Windows Project", "This is a guide in japanese where I teach you how to install windows completely. This was made because of a JP Project I had to do.", "/src/assets/video_thumbnails/JP-Installing-Windows-Project.png"},
-  {"/src/assets/videos/orange-cat.mp4", 2, "Orange Cat", "Cute little orange cat that my friend has!! Hes so cute lol.", "/src/assets/video_thumbnails/orange-cat.png"},
+	{"/src/assets/videos/orange-cat.mp4", 1, "Orange Cat", "Cute little orange cat that my friend has!! Hes so cute lol.", "/src/assets/video_thumbnails/orange-cat.png"},
 }
 
 func renderTemplate(w http.ResponseWriter, tmpl string, data *Index, nav bool) {
@@ -119,6 +114,7 @@ func renderTemplate(w http.ResponseWriter, tmpl string, data *Index, nav bool) {
 func galleryContentHandler(w http.ResponseWriter, req *http.Request) {
 	parts := strings.Split(req.URL.Path, "/")
 
+	data.PageName = "gallery"
 	if len(parts) == 3 && parts[1] == "gallery" {
 		idStr := parts[2]
 		id, err := strconv.Atoi(idStr)
@@ -149,6 +145,7 @@ func galleryContentHandler(w http.ResponseWriter, req *http.Request) {
 func videoContentHandler(w http.ResponseWriter, req *http.Request) {
 	parts := strings.Split(req.URL.Path, "/")
 
+	data.PageName = "videos"
 	if len(parts) == 3 && parts[1] == "videos" {
 		idStr := parts[2]
 		id, err := strconv.Atoi(idStr)
@@ -177,14 +174,17 @@ func videoContentHandler(w http.ResponseWriter, req *http.Request) {
 }
 
 func videoHandler(w http.ResponseWriter, req *http.Request) {
+	data.PageName = "videos"
 	renderTemplate(w, "video", data, true)
 }
 
 func socialsHandler(w http.ResponseWriter, req *http.Request) {
+	data.PageName = "socials"
 	renderTemplate(w, "socials", data, true)
 }
 
 func galleryHandler(w http.ResponseWriter, req *http.Request) {
+	data.PageName = "gallery"
 	renderTemplate(w, "gallery", data, true)
 }
 
@@ -194,6 +194,7 @@ func indexHandler(w http.ResponseWriter, req *http.Request) {
 		return
 	}
 
+	data.PageName = "home"
 	renderTemplate(w, "home", data, true)
 }
 
@@ -203,9 +204,17 @@ func main() {
 	}
 
 	fs := http.FileServer(http.Dir("./src"))
-  http.Handle("/src/", http.StripPrefix("/src/", fs))
 
-  port := ":3939"
+	http.HandleFunc("/src/", func(w http.ResponseWriter, r *http.Request) {
+		if r.URL.Path[len(r.URL.Path)-1] == '/' {
+			renderTemplate(w, "404", data, true)
+			return
+		}
+
+		http.StripPrefix("/src/", fs).ServeHTTP(w,r)
+	})
+
+	port := ":3940"
 
 	http.HandleFunc("/", indexHandler)
 	http.HandleFunc("/socials", socialsHandler)

src/assets/background.svg

@@ -0,0 +1,23 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs" width="1920" height="1080" preserveAspectRatio="none" viewBox="0 0 1920 1080">
+    <g mask="url(&quot;#SvgjsMask1324&quot;)" fill="none">
+        <path d="M4 1080L1084 0L1357 0L277 1080z" fill="url(&quot;#SvgjsLinearGradient1325&quot;)"></path>
+        <path d="M663.6 1080L1743.6 0L2645.1 0L1565.1 1080z" fill="url(&quot;#SvgjsLinearGradient1325&quot;)"></path>
+        <path d="M1845 1080L765 0L531 0L1611 1080z" fill="url(&quot;#SvgjsLinearGradient1326&quot;)"></path>
+        <path d="M1207.4 1080L127.40000000000009 0L-730.5999999999999 0L349.4000000000001 1080z" fill="url(&quot;#SvgjsLinearGradient1326&quot;)"></path>
+        <path d="M897.0260320421177 1080L1920 57.02603204211766L1920 1080z" fill="url(&quot;#SvgjsLinearGradient1325&quot;)"></path>
+        <path d="M0 1080L1022.9739679578823 1080L 0 57.02603204211766z" fill="url(&quot;#SvgjsLinearGradient1326&quot;)"></path>
+    </g>
+    <defs>
+        <mask id="SvgjsMask1324">
+            <rect width="1920" height="1080" fill="#ffffff"></rect>
+        </mask>
+        <linearGradient x1="0%" y1="100%" x2="100%" y2="0%" id="SvgjsLinearGradient1325">
+            <stop stop-color="rgba(7, 44, 119, 0.2)" offset="0"></stop>
+            <stop stop-opacity="0" stop-color="rgba(7, 44, 119, 0.2)" offset="0.66"></stop>
+        </linearGradient>
+        <linearGradient x1="100%" y1="100%" x2="0%" y2="0%" id="SvgjsLinearGradient1326">
+            <stop stop-color="rgba(7, 44, 119, 0.2)" offset="0"></stop>
+            <stop stop-opacity="0" stop-color="rgba(7, 44, 119, 0.2)" offset="0.66"></stop>
+        </linearGradient>
+    </defs>
+</svg>

src/assets/badges/git.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="#f03c2e" d="M439.6 236.1L244 40.5a28.9 28.9 0 0 0 -40.8 0l-40.7 40.6 51.5 51.5c27.1-9.1 52.7 16.8 43.4 43.7l49.7 49.7c34.2-11.8 61.2 31 35.5 56.7-26.5 26.5-70.2-2.9-56-37.3L240.2 199v121.9c25.3 12.5 22.3 41.9 9.1 55a34.3 34.3 0 0 1 -48.6 0c-17.6-17.6-11.1-46.9 11.3-56v-123c-20.8-8.5-24.6-30.7-18.6-45L142.6 101 8.5 235.1a28.9 28.9 0 0 0 0 40.8l195.6 195.6a28.9 28.9 0 0 0 40.8 0l194.7-194.7a28.9 28.9 0 0 0 0-40.8z"/></svg>

src/assets/badges/java.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="#ed2025" d="M277.7 312.9c9.8-6.7 23.4-12.5 23.4-12.5s-38.7 7-77.2 10.2c-47.1 3.9-97.7 4.7-123.1 1.3-60.1-8 33-30.1 33-30.1s-36.1-2.4-80.6 19c-52.5 25.4 130 37 224.5 12.1zm-85.4-32.1c-19-42.7-83.1-80.2 0-145.8C296 53.2 242.8 0 242.8 0c21.5 84.5-75.6 110.1-110.7 162.6-23.9 35.9 11.7 74.4 60.2 118.2zm114.6-176.2c.1 0-175.2 43.8-91.5 140.2 24.7 28.4-6.5 54-6.5 54s62.7-32.4 33.9-72.9c-26.9-37.8-47.5-56.6 64.1-121.3zm-6.1 270.5a12.2 12.2 0 0 1 -2 2.6c128.3-33.7 81.1-118.9 19.8-97.3a17.3 17.3 0 0 0 -8.2 6.3 70.5 70.5 0 0 1 11-3c31-6.5 75.5 41.5-20.6 91.4zM348 437.4s14.5 11.9-15.9 21.2c-57.9 17.5-240.8 22.8-291.6 .7-18.3-7.9 16-19 26.8-21.3 11.2-2.4 17.7-2 17.7-2-20.3-14.3-131.3 28.1-56.4 40.2C232.8 509.4 401 461.3 348 437.4zM124.4 396c-78.7 22 47.9 67.4 148.1 24.5a185.9 185.9 0 0 1 -28.2-13.8c-44.7 8.5-65.4 9.1-106 4.5-33.5-3.8-13.9-15.2-13.9-15.2zm179.8 97.2c-78.7 14.8-175.8 13.1-233.3 3.6 0-.1 11.8 9.7 72.4 13.6 92.2 5.9 233.8-3.3 237.1-46.9 0 0-6.4 16.5-76.2 29.7zM260.6 353c-59.2 11.4-93.5 11.1-136.8 6.6-33.5-3.5-11.6-19.7-11.6-19.7-86.8 28.8 48.2 61.4 169.5 25.9a60.4 60.4 0 0 1 -21.1-12.8z"/></svg>

src/assets/badges/linux.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="#fff" d="M220.8 123.3c1 .5 1.8 1.7 3 1.7 1.1 0 2.8-.4 2.9-1.5 .2-1.4-1.9-2.3-3.2-2.9-1.7-.7-3.9-1-5.5-.1-.4 .2-.8 .7-.6 1.1 .3 1.3 2.3 1.1 3.4 1.7zm-21.9 1.7c1.2 0 2-1.2 3-1.7 1.1-.6 3.1-.4 3.5-1.6 .2-.4-.2-.9-.6-1.1-1.6-.9-3.8-.6-5.5 .1-1.3 .6-3.4 1.5-3.2 2.9 .1 1 1.8 1.5 2.8 1.4zM420 403.8c-3.6-4-5.3-11.6-7.2-19.7-1.8-8.1-3.9-16.8-10.5-22.4-1.3-1.1-2.6-2.1-4-2.9-1.3-.8-2.7-1.5-4.1-2 9.2-27.3 5.6-54.5-3.7-79.1-11.4-30.1-31.3-56.4-46.5-74.4-17.1-21.5-33.7-41.9-33.4-72C311.1 85.4 315.7 .1 234.8 0 132.4-.2 158 103.4 156.9 135.2c-1.7 23.4-6.4 41.8-22.5 64.7-18.9 22.5-45.5 58.8-58.1 96.7-6 17.9-8.8 36.1-6.2 53.3-6.5 5.8-11.4 14.7-16.6 20.2-4.2 4.3-10.3 5.9-17 8.3s-14 6-18.5 14.5c-2.1 3.9-2.8 8.1-2.8 12.4 0 3.9 .6 7.9 1.2 11.8 1.2 8.1 2.5 15.7 .8 20.8-5.2 14.4-5.9 24.4-2.2 31.7 3.8 7.3 11.4 10.5 20.1 12.3 17.3 3.6 40.8 2.7 59.3 12.5 19.8 10.4 39.9 14.1 55.9 10.4 11.6-2.6 21.1-9.6 25.9-20.2 12.5-.1 26.3-5.4 48.3-6.6 14.9-1.2 33.6 5.3 55.1 4.1 .6 2.3 1.4 4.6 2.5 6.7v.1c8.3 16.7 23.8 24.3 40.3 23 16.6-1.3 34.1-11 48.3-27.9 13.6-16.4 36-23.2 50.9-32.2 7.4-4.5 13.4-10.1 13.9-18.3 .4-8.2-4.4-17.3-15.5-29.7zM223.7 87.3c9.8-22.2 34.2-21.8 44-.4 6.5 14.2 3.6 30.9-4.3 40.4-1.6-.8-5.9-2.6-12.6-4.9 1.1-1.2 3.1-2.7 3.9-4.6 4.8-11.8-.2-27-9.1-27.3-7.3-.5-13.9 10.8-11.8 23-4.1-2-9.4-3.5-13-4.4-1-6.9-.3-14.6 2.9-21.8zM183 75.8c10.1 0 20.8 14.2 19.1 33.5-3.5 1-7.1 2.5-10.2 4.6 1.2-8.9-3.3-20.1-9.6-19.6-8.4 .7-9.8 21.2-1.8 28.1 1 .8 1.9-.2-5.9 5.5-15.6-14.6-10.5-52.1 8.4-52.1zm-13.6 60.7c6.2-4.6 13.6-10 14.1-10.5 4.7-4.4 13.5-14.2 27.9-14.2 7.1 0 15.6 2.3 25.9 8.9 6.3 4.1 11.3 4.4 22.6 9.3 8.4 3.5 13.7 9.7 10.5 18.2-2.6 7.1-11 14.4-22.7 18.1-11.1 3.6-19.8 16-38.2 14.9-3.9-.2-7-1-9.6-2.1-8-3.5-12.2-10.4-20-15-8.6-4.8-13.2-10.4-14.7-15.3-1.4-4.9 0-9 4.2-12.3zm3.3 334c-2.7 35.1-43.9 34.4-75.3 18-29.9-15.8-68.6-6.5-76.5-21.9-2.4-4.7-2.4-12.7 2.6-26.4v-.2c2.4-7.6 .6-16-.6-23.9-1.2-7.8-1.8-15 .9-20 3.5-6.7 8.5-9.1 14.8-11.3 10.3-3.7 11.8-3.4 19.6-9.9 5.5-5.7 9.5-12.9 14.3-18 5.1-5.5 10-8.1 17.7-6.9 8.1 1.2 15.1 6.8 21.9 16l19.6 35.6c9.5 19.9 43.1 48.4 41 68.9zm-1.4-25.9c-4.1-6.6-9.6-13.6-14.4-19.6 7.1 0 14.2-2.2 16.7-8.9 2.3-6.2 0-14.9-7.4-24.9-13.5-18.2-38.3-32.5-38.3-32.5-13.5-8.4-21.1-18.7-24.6-29.9s-3-23.3-.3-35.2c5.2-22.9 18.6-45.2 27.2-59.2 2.3-1.7 .8 3.2-8.7 20.8-8.5 16.1-24.4 53.3-2.6 82.4 .6-20.7 5.5-41.8 13.8-61.5 12-27.4 37.3-74.9 39.3-112.7 1.1 .8 4.6 3.2 6.2 4.1 4.6 2.7 8.1 6.7 12.6 10.3 12.4 10 28.5 9.2 42.4 1.2 6.2-3.5 11.2-7.5 15.9-9 9.9-3.1 17.8-8.6 22.3-15 7.7 30.4 25.7 74.3 37.2 95.7 6.1 11.4 18.3 35.5 23.6 64.6 3.3-.1 7 .4 10.9 1.4 13.8-35.7-11.7-74.2-23.3-84.9-4.7-4.6-4.9-6.6-2.6-6.5 12.6 11.2 29.2 33.7 35.2 59 2.8 11.6 3.3 23.7 .4 35.7 16.4 6.8 35.9 17.9 30.7 34.8-2.2-.1-3.2 0-4.2 0 3.2-10.1-3.9-17.6-22.8-26.1-19.6-8.6-36-8.6-38.3 12.5-12.1 4.2-18.3 14.7-21.4 27.3-2.8 11.2-3.6 24.7-4.4 39.9-.5 7.7-3.6 18-6.8 29-32.1 22.9-76.7 32.9-114.3 7.2zm257.4-11.5c-.9 16.8-41.2 19.9-63.2 46.5-13.2 15.7-29.4 24.4-43.6 25.5s-26.5-4.8-33.7-19.3c-4.7-11.1-2.4-23.1 1.1-36.3 3.7-14.2 9.2-28.8 9.9-40.6 .8-15.2 1.7-28.5 4.2-38.7 2.6-10.3 6.6-17.2 13.7-21.1 .3-.2 .7-.3 1-.5 .8 13.2 7.3 26.6 18.8 29.5 12.6 3.3 30.7-7.5 38.4-16.3 9-.3 15.7-.9 22.6 5.1 9.9 8.5 7.1 30.3 17.1 41.6 10.6 11.6 14 19.5 13.7 24.6zM173.3 148.7c2 1.9 4.7 4.5 8 7.1 6.6 5.2 15.8 10.6 27.3 10.6 11.6 0 22.5-5.9 31.8-10.8 4.9-2.6 10.9-7 14.8-10.4s5.9-6.3 3.1-6.6-2.6 2.6-6 5.1c-4.4 3.2-9.7 7.4-13.9 9.8-7.4 4.2-19.5 10.2-29.9 10.2s-18.7-4.8-24.9-9.7c-3.1-2.5-5.7-5-7.7-6.9-1.5-1.4-1.9-4.6-4.3-4.9-1.4-.1-1.8 3.7 1.7 6.5z"/></svg>

src/assets/badges/nginx.svg

@@ -0,0 +1 @@
+<svg width="800px" height="800px" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path d="M15.948,2h.065a10.418,10.418,0,0,1,.972.528Q22.414,5.65,27.843,8.774a.792.792,0,0,1,.414.788c-.008,4.389,0,8.777-.005,13.164a.813.813,0,0,1-.356.507q-5.773,3.324-11.547,6.644a.587.587,0,0,1-.657.037Q9.912,26.6,4.143,23.274a.7.7,0,0,1-.4-.666q0-6.582,0-13.163a.693.693,0,0,1,.387-.67Q9.552,5.657,14.974,2.535c.322-.184.638-.379.974-.535" style="fill:#019639"/><path d="M8.767,10.538q0,5.429,0,10.859a1.509,1.509,0,0,0,.427,1.087,1.647,1.647,0,0,0,2.06.206,1.564,1.564,0,0,0,.685-1.293c0-2.62-.005-5.24,0-7.86q3.583,4.29,7.181,8.568a2.833,2.833,0,0,0,2.6.782,1.561,1.561,0,0,0,1.251-1.371q.008-5.541,0-11.081a1.582,1.582,0,0,0-3.152,0c0,2.662-.016,5.321,0,7.982-2.346-2.766-4.663-5.556-7-8.332A2.817,2.817,0,0,0,10.17,9.033,1.579,1.579,0,0,0,8.767,10.538Z" style="fill:#fff"/></svg>

src/assets/icons/bluesky.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path fill="#ffffff" d="M111.8 62.2C170.2 105.9 233 194.7 256 242.4c23-47.6 85.8-136.4 144.2-180.2c42.1-31.6 110.3-56 110.3 21.8c0 15.5-8.9 130.5-14.1 149.2C478.2 298 412 314.6 353.1 304.5c102.9 17.5 129.1 75.5 72.5 133.5c-107.4 110.2-154.3-27.6-166.3-62.9l0 0c-1.7-4.9-2.6-7.8-3.3-7.8s-1.6 3-3.3 7.8l0 0c-12 35.3-59 173.1-166.3 62.9c-56.5-58-30.4-116 72.5-133.5C100 314.6 33.8 298 15.7 233.1C10.4 214.4 1.5 99.4 1.5 83.9c0-77.8 68.2-53.4 110.3-21.8z"/></svg>

src/assets/icons/instagram.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="#ffffff" d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"/></svg>

src/assets/main/close.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path fill="#ffffff" d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/></svg>

src/assets/main/menu.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path fill="#ffffff" d="M0 96C0 78.3 14.3 64 32 64l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 128C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 288c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32L32 448c-17.7 0-32-14.3-32-32s14.3-32 32-32l384 0c17.7 0 32 14.3 32 32z"/></svg>

src/components/navbar.tmpl

@@ -2,21 +2,69 @@
 <nav>
   <h1>Keyemail</h1>
   <ul>
-    <li>
-      <a href="/">Home</a>
+    <a href="/">
+      <li class="{{ if eq .PageName "home" }}active{{ end }}" style="border-top-left-radius: 10%; border-bottom-left-radius: 10%;">
+        Home
       </li>
-    <li>
-      <a href="/gallery">Gallery</a>
+    </a>
+    <a href="/gallery">
+      <li class="{{ if eq .PageName "gallery" }}active{{ end }}">
+        Gallery
       </li>
-    <li>
-      <a href="/socials">Socials</a>
+    </a>
+    <a href="/socials">
+      <li class="{{ if eq .PageName "socials" }}active{{ end }}">
+        Socials
       </li>
+    </a>
+    <a href="/videos" class="{{ if eq .PageName "videos" }}active{{ end }}">
       <li>
-      <a href="/videos">Videos</a>
+        Videos
       </li>
-    <li>
-      <a href="https://git.keyemail.dev/explore/">Git</a>
+    </a> 
+    <a href="https://git.keyemail.dev/explore/">
+      <li style="border-top-right-radius: 10%; border-bottom-right-radius: 10%;">
+        Git
       </li>
+    </a>
   </ul>
+  <img id="NavButton" src="/src/assets/main/menu.svg"/>
 </nav>
+<div id="NavMobile">
+  <div>
+    <a class="pfp" href="/src/assets/profile/profile.jpg">
+      <img src="/src/assets/profile/profile.jpg"/>
+    </a>
+    <h1>Keyemail</h1>
+    <img id="NavClose" src="/src/assets/main/close.svg"/>
+  </div>
+  <ul>
+    <a href="/">
+      <li class="{{ if eq .PageName "home" }}active{{ end }}">
+        Home
+      </li>
+    </a>
+    <a href="/gallery">
+      <li class="{{ if eq .PageName "gallery" }}active{{ end }}">
+        Gallery
+      </li>
+    </a>
+    <a href="/socials">
+      <li class="{{ if eq .PageName "socials" }}active{{ end }}">
+        Socials
+      </li>
+    </a>
+    <a href="/videos" class="{{ if eq .PageName "videos" }}active{{ end }}">
+      <li>
+        Videos
+      </li>
+    </a> 
+    <a href="https://git.keyemail.dev/explore/">
+      <li>
+        Git
+      </li>
+    </a>
+  </ul>
+</div>
+<script src="/src/scripts/navbar.js"></script>
 {{ end }}

src/index.tmpl

@@ -12,7 +12,7 @@
     <meta name="theme-color" content="#192236">
     <title>{{ .WebpageTitle }}</title>
     <link rel="icon" type="image/x-icon" href="{{ .WebpageIcon }}">
-    <link rel="stylesheet" href="/src/styles/main.css">
+    <link rel="stylesheet" href="/src/styles/main.css?version=022825">
     <script src="https://kit.fontawesome.com/d18ce6e9fb.js" crossorigin="anonymous"></script>
   </head>
   <body>

src/pages/404.tmpl

@@ -1,6 +1,6 @@
 <head>
   {{ define "head" }}
-  <link rel="stylesheet" href="/src/styles/404.css">
+  <link rel="stylesheet" href="/src/styles/404.css?version=022825">
   <meta property="description" content="{{ .WebpageDescription }}"/>
   <meta property="og:description" content="{{ .WebpageDescription }}">
   {{ end }}

src/pages/gallery.tmpl

@@ -1,6 +1,6 @@
 <head>
   {{ define "head" }}
-  <link rel="stylesheet" href="/src/styles/gallery.css">
+  <link rel="stylesheet" href="/src/styles/gallery.css?version=022825">
   <meta property="description" content="{{ .WebpageDescription }}"/>
   <meta property="og:description" content="{{ .WebpageDescription }}">
   {{ end }}

src/pages/gallery_content.tmpl

@@ -1,6 +1,6 @@
 <head>
   {{ define "head" }}
-  <link rel="stylesheet" href="/src/styles/gallery.css">
+  <link rel="stylesheet" href="/src/styles/gallery.css?version=022825">
   <meta property="og:image" content="{{ .WebpageURL }}{{ .GalleryPhoto.URL }}"/>
   <meta name="twitter:card" content="summary_large_image"/>
   {{ end }}

src/pages/home.tmpl

@@ -1,6 +1,6 @@
 <head>
   {{ define "head" }}
-  <link rel="stylesheet" href="/src/styles/home.css"/>
+  <link rel="stylesheet" href="/src/styles/home.css?version=022825"/>
   <meta property="description" content="{{ .WebpageDescription }}"/>
   <meta property="og:description" content="{{ .WebpageDescription }}">
   {{ end }}
@@ -8,11 +8,14 @@
 <body>
   {{ define "body" }}
   <header>
-    <a class="pfp" href="https://www.pixiv.net/en/artworks/118037520">
+    <a id="headerImg" href="/src/assets/profile/header.jpg">
+      <img src="/src/assets/profile/header.jpg">
+    </a>
+    <a class="pfp" href="/src/assets/profile/profile.jpg">
       <img src="/src/assets/profile/profile.jpg"/>
     </a>
+    <div id="headercontent">
       <div id="name">
-      <h1>Keyemail</h1>
         <ul>
           <li>
            <img src="/src/assets/badges/code.svg" aria-label="CODE"/>
@@ -46,18 +49,35 @@
             <img src="/src/assets/badges/golang.svg" aria-label="GOLANG"/>
             <div>Go</div>
           </li>
+          <li>
+            <img src="/src/assets/badges/git.svg" aria-label="GIT"/>
+            <div>Git</div>
+          </li>
+          <li>
+            <img src="/src/assets/badges/linux.svg" aria-label="LINUX"/>
+            <div>Linux</div>
+          </li>
+          <li>
+            <img src="/src/assets/badges/nginx.svg" aria-label="NGINX"/>
+            <div>nginx</div>
+          </li>
+          <li>
+            <img src="/src/assets/badges/java.svg" aria-label="JAVA"/>
+            <div>Java</div>
+          </li>
         </ul>
       </div>
+    </div>
+    <h1>Keyemail・Patrick</h1>
+    <p>He/Him</p>
   </header>
 
   <div id="intro">
-    <h1>Hi, I'm Keyemail or Patrick.</h1>
-    <p>I specialize in IT and web development-related stuff, but I also love doing a variety of different hobbies such as Flight Simulator, or learning Japanese. I daily run an Arch Linux machine as my main system and support Linux in every way. I'm glad to meet you! </p>
+    <h1>Hi, I'm Keyemail or Patrick!</h1>
+    <p>A person who loves to play with all types of technology! Does web, and Unity work for development. Used to run a Linux setup (Arch Linux), but now I use Windows 11 with Linux on WSL. Also use VR, and you will usually find me on VRChat, so if you see me don't be afraid to say hi!</p>
   </div>
 
-  <i class="fa-solid fa-arrow-down" id="moreArrow" onclick="quack()">
-    <div>Nothing...</div>
-  </i>
+  <i class="fa-solid fa-arrow-down" id="moreArrow" onclick="quack()"></i>
 
   <script src="/src/scripts/home.js"></script>
   {{ end }}

src/pages/socials.tmpl

@@ -1,6 +1,6 @@
 <head>
   {{ define "head" }}
-  <link rel="stylesheet" href="/src/styles/socials.css">
+  <link rel="stylesheet" href="/src/styles/socials.css?version=022825">
   <meta property="description" content="{{ .WebpageDescription }}"/>
   <meta property="og:description" content="{{ .WebpageDescription }}">
   {{ end }}

src/pages/video.tmpl

@@ -1,6 +1,6 @@
 <head>
   {{ define "head" }}
-  <link rel="stylesheet" href="/src/styles/video.css"/>
+  <link rel="stylesheet" href="/src/styles/video.css?version=022825"/>
   <meta property="description" content="{{ .WebpageDescription }}"/>
   <meta property="og:description" content="{{ .WebpageDescription }}">
   {{ end }}

src/pages/video_content.tmpl

@@ -1,6 +1,6 @@
 <head>
   {{ define "head" }}
-  <link rel="stylesheet" href="/src/styles/video.css"/>
+  <link rel="stylesheet" href="/src/styles/video.css?version=022825"/>
   <meta property="og:image" content="{{ .WebpageURL }}{{ .VideoContent.Thumbnail }}"/>
   <meta name="twitter:card" content="summary_large_image"/>
   {{ end }}

src/scripts/navbar.js

@@ -0,0 +1,15 @@
+let navbarButton = document.getElementById("NavButton");
+let navbarMobile = document.getElementById("NavMobile");
+let navbarClose = document.getElementById("NavClose");
+
+navbarButton.addEventListener('click', function(event) {
+    if (navbarMobile.style.display === 'none' || navbarMobile.style.display === '') {
+        navbarMobile.style.display = 'flex';
+    }
+})
+
+navbarClose.addEventListener('click', function(event) {
+    if (navbarMobile.style.display === 'flex' || navbarMobile.style.display === '') {
+        navbarMobile.style.display = 'none';
+    }
+})

src/styles/gallery.css

@@ -5,6 +5,7 @@
   font-family: 'Rubik', sans-serif;
   padding: 20px;
   border-radius: 20px;
+  flex-grow: 1;
 
   h1 {
     font-weight: 500;

src/styles/home.css

@@ -1,35 +1,49 @@
+body {
+  background-image: url("/src/assets/background.svg");
+  background-repeat: no-repeat;
+  background-size:cover;
+  background-position: center;
+}
+
 header {
   display: flex;
-  align-items: center;
+  flex-direction: column;
   margin-top: 20px;
-  background: repeating-linear-gradient(
-    -45deg,
-    #200080,
-    #200080 20px,
-    #090069 20px,
-    #090069 40px
-  );
-  height: 180px;
+  background-color: var(--bg-alt-color);
+  height: 420px;
   width: 100%;
   border-radius: 10px;
   font-family: 'Rubik', sans-serif;
+  padding-bottom: 15px;
+  box-sizing: content-box;
 
   h1 {
     color: white;
-    font-size: 3rem; 
+    font-size: 2.5rem;
+    margin-left: 20px;
+    line-height: 1.2;
   }
+  p {
+    color: white;
+    font-size: 1.5rem;
+    margin-left: 20px;
   }
 
   .pfp {
+    display: flex;
+    align-items: center;
+    justify-content: center;
     height: 130px !important;
     width: 130px !important;
     border: solid;
-  border-width: 4px;
+    border-width: 6px;
     border-radius: 50%;
-  border-color: white;
+    border-color: var(--bg-alt-color);
     overflow: hidden;
     margin-left: 20px;
+    margin-top: -50px;
     user-select: none;
+    flex-shrink: 0;
     
     img {
       width:100%;
@@ -38,9 +52,34 @@ header {
       background-color: #afb5c8;
     }
   }
+}
+
+#headercontent {
+  display: flex;
+  height: 100%;
+  width: 100%;
+  align-items: center;
+}
+
+#headerImg {
+  height: 250px;
+  width: 100%;
+  user-select: none;
+  overflow: hidden;
+  border-top-left-radius: inherit;
+  border-top-right-radius: inherit;
+  flex-grow: 1;
+  flex-shrink: 0;
+  img {
+    height: 100%;
+    width: 100%;
+    object-fit: cover;
+  }
+}
 
 #name {
-  margin-left: 20px;
+  margin-top: -80px;
+  margin-left: 160px;
   div {
     display: none;
     top: calc(100% + 5px);
@@ -68,7 +107,8 @@ header {
   ul {
     display: flex;
     flex-direction: row;
-    width: fit-content;
+    flex-wrap: wrap;
+    max-width: 300px;
     gap: 5px;
     user-select: none;
   }
@@ -77,7 +117,6 @@ header {
     position: relative;
     display: inherit;
     text-decoration: none;
-    background-color: var(--bg-alt-color);
     height: 30px;
     width: 30px;
     padding: 3px;
@@ -124,27 +163,7 @@ header {
   color: white;
   margin: 40px auto;
   margin-top: 80px;
-
-  div {
-    display: none;
-    align-items: center;
-    top: calc(100% + 5px);
-    left: 50%;
-    pointer-events: none;
-    position: absolute;
-    translate: -50%;
-    z-index: 1;
-    white-space: nowrap;
-    padding: 5px;
-    height: 20px;
-    background-color: #151d2f;
-    color: white;
-    font-family: 'Rubik', sans-serif;
-    font-size: 1rem;
-    font-weight: 200;
-    box-sizing: content-box;
-    border-radius: 5px;
-  }
+  margin-bottom: 0;
 }
 
 #moreArrow:hover div {
@@ -154,8 +173,15 @@ header {
 @media screen and (max-width: 450px){
   header {
     flex-direction: column;
-    height: 240px;
+    height: fit-content;
     justify-content: center;
+    align-items: center;
+  }
+  #headerImg {
+    height: 150px;
+  }
+  #headercontent {
+    max-width: 300px;
   }
   #name {
     display: flex;
@@ -163,10 +189,18 @@ header {
     justify-content: center;
     align-items: center;
     margin-left: 0;
+    margin-top: 10px;
+    ul {
+      justify-content: center;
+    }
   }
 
   header h1 {
     margin-left: 0px;
+    font-size: 2rem;
+  }
+  header p {
+    font-size: 1.5rem;
   }
   #intro h1 {
     font-size: 3rem;

src/styles/main.css

@@ -9,7 +9,8 @@
 }
 
 body {
-  background-color: var(--bg-color)
+  background-color: var(--bg-color);
+  min-height: 100vh;
 }
 
 html, body {
@@ -41,25 +42,38 @@ nav {
   align-items: center;
   justify-content: space-between;
   color: white;
+  height: 50px;
   font-family: 'Rubik', sans-serif;
   font-weight: 500;
+  background-color: var(--bg-alt-color);
+  border-radius: 10px;
   
   h1 {
     width: fit-content;
     z-index: 10;
+    margin-left: 13px;
   }
 
   ul {
     list-style: none;
     float: right;
+    display: flex;
+    margin-left: 10px;
   }
 
   ul li{
-    display: inline;
+    display: flex;
     cursor: pointer;
-    margin-left: 10px;
     font-weight: 400;
     transition: color 0.3s;
+    align-items: center;
+    height: 50px;
+    padding: 0 13px;
+    transition: 0.3s background-color;
+  }
+
+  ul li:hover {
+    background-color: #2269d4;
   }
 
   ul a {
@@ -67,10 +81,6 @@ nav {
     color: inherit;
   }
 
-  ul li:hover{
-    color: #8ee8fc;
-  }
-
   i {
     float: right;
     font-size: 35px;
@@ -82,9 +92,130 @@ nav {
   i:hover {
     color: #74d2f1;
   }
+
+  .active {
+    background-color: #2269d4 !important;
+  }
 }
 
-@media screen and (max-width: 430px) {
+#NavButton {
+  display: none;
+  width: 30px;
+  height: 100%;
+  padding: 0 13px;
+  box-sizing: content-box;
+  border-top-right-radius: 10px;
+  border-bottom-right-radius: 10px;
+  cursor: pointer;
+}
+
+#NavButton:hover {
+  background-color: #2269d4;
+}
+
+#NavMobile {
+  display: none;
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  background-color: var(--bg-color);
+  margin: -20px;
+  z-index: 999;
+  color: white;
+  font-family: 'Rubik', sans-serif;
+  font-weight: 500;
+  flex-direction: column;
+  align-items: center;
+
+  div {
+    display: flex;
+    align-items: center;
+    margin-top: 20px;
+    justify-content: center;
+    width: 90%;
+    height: 50px;
+    border-radius: 10%;
+    background-color: var(--bg-alt-color);
+    z-index: 1000;
+
+    h1 {
+      text-align: center;
+      width: fit-content;
+      font-size: 1.5rem;
+    }
+  }
+
+  ul {
+    position: absolute;
+    height: 100%;
+    width: 90%;
+    display: flex;
+    flex-direction: column;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    text-align: center;
+    justify-content: center;
+  }
+
+  ul li {
+    width: 100%;
+    text-align: center;
+    padding: 15px 0;
+    background-color: var(--bg-alt-color);
+    margin: 5px 0;
+    border-radius: 10px;
+  }
+
+  ul li:hover {
+    background-color: #2269d4;
+  }
+
+  #NavClose {
+    position: absolute;
+    right: 20px;
+    width: 30px;
+    padding: 0 13px;
+    box-sizing: content-box;
+    height: 50px;
+    border-top-right-radius: 10%;
+    border-bottom-right-radius: 10%;
+    cursor: pointer;
+  }
+
+  #NavClose:hover {
+    background-color: #2269d4;
+  }
+
+  .active {
+    background-color: #2269d4 !important;
+  }
+
+  .pfp {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 45px !important;
+    width: 45px !important;
+    border: solid;
+    border-width: 6px;
+    border-radius: 50%;
+    border-color: var(--bg-alt-color);
+    overflow: hidden;
+    user-select: none;
+    flex-shrink: 0;
+    
+    img {
+      width:100%;
+      height:100%;
+      object-fit: cover;
+      background-color: #afb5c8;
+    }
+  }
+}
+
+
+@media screen and (max-width: 540px) {
   nav {
     justify-content: center;
 
@@ -93,3 +224,21 @@ nav {
     }
   }
 }
+
+@media screen and (max-width: 400px) {
+  nav {
+    justify-content:space-between;
+
+    ul {
+      display: none;
+    }
+
+    h1 {
+      display: block;
+    }
+  }
+
+  #NavButton {
+    display: block;
+  }
+}

src/styles/socials.css

@@ -8,6 +8,8 @@
   font-family: 'Rubik', sans-serif;
   padding: 20px;
   border-radius: 20px;
+  flex-grow: 1;
+  justify-content: center;
   
   h1 {
     margin-bottom: 20px;

src/styles/video.css

@@ -5,6 +5,7 @@
   font-family: 'Rubik', sans-serif;
   padding: 20px;
   border-radius: 20px; 
+  flex-grow: 1;
 
   h1 {
     font-weight: 500;