Made background stick

.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/)

main.go

@@ -1,219 +1,213 @@
 package main
 
 import (
-  "net/http"
+	"html/template"
-  "os"
+	"log"
-  "log"
+	"net/http"
-  "html/template"
+	"os"
-  "strings"
+	"strconv"
-  "strconv"
+	"strings"
 )
 
 type Index struct {
-  WebpageTitle string
+	WebpageTitle       string
-  WebpageIcon string
+	WebpageIcon        string
-  WebpageKeywords string
+	WebpageKeywords    string
-  WebpageDescription string
+	WebpageDescription string
-  WebpageURL string
+	WebpageURL         string
-  GalleryItems []GalleryItems
+	GalleryItems       []GalleryItems
-  SocialItems []SocialItems
+	SocialItems        []SocialItems
-  VideoItems []VideoItems
+	VideoItems         []VideoItems
-  GalleryPhoto *GalleryItems
+	GalleryPhoto       *GalleryItems
-  VideoContent *VideoItems
+	VideoContent       *VideoItems
-  Nav bool
+	Nav                bool
-}
-
-type responseWriter struct {
-  http.ResponseWriter
-  status int
 }
 
 type GalleryItems struct {
-  URL string
+	URL   string
-  ID int
+	ID    int
-  Title string
+	Title string
 }
 
 type SocialItems struct {
-  URL string
+	URL      string
-  Name string
+	Name     string
-  Username string
+	Username string
-  Icon string
+	Icon     string
-  Color string
+	Color    string
 }
 
 type VideoItems struct {
-  URL string
+	URL         string
-  ID int
+	ID          int
-  Title string
+	Title       string
-  Description string
+	Description string
-  Thumbnail string
+	Thumbnail   string
 }
 
-var data = &Index {
+var data = &Index{
-  WebpageTitle: "Keyemail",
+	WebpageTitle:       "Keyemail",
-  WebpageIcon: "/src/assets/main/favicon.ico",
+	WebpageIcon:        "/src/assets/main/favicon.ico",
-  WebpageKeywords: "keyemail",
+	WebpageKeywords:    "keyemail",
-  WebpageDescription: "Welcome to keyemail.dev! A profile based on Keyemail.",
+	WebpageDescription: "Welcome to keyemail.dev! A profile based on Keyemail.",
-  WebpageURL: "https://keyemail.dev",
+	WebpageURL:         "https://keyemail.dev",
-  GalleryItems: galleryItems,
+	GalleryItems:       galleryItems,
-  SocialItems: socialItems,
+	SocialItems:        socialItems,
-  VideoItems: videoItems,
+	VideoItems:         videoItems,
 }
 
 var currentData = &Index{}
 
-var galleryItems = []GalleryItems {
+var galleryItems = []GalleryItems{
-  {"/src/assets/gallery/2_cats.jpg", 1, "Resting Day"},
+	{"/src/assets/gallery/2_cats.jpg", 1, "Resting Day"},
-  {"/src/assets/gallery/friend_cat.jpg", 2, "Orange Furr"},
+	{"/src/assets/gallery/friend_cat.jpg", 2, "Orange Furr"},
-  {"/src/assets/gallery/miku_poster.jpg", 3, "Miku Spotted"},
+	{"/src/assets/gallery/miku_poster.jpg", 3, "Miku Spotted"},
-  {"/src/assets/gallery/networking.jpg", 4, "Wires of Networking"},
+	{"/src/assets/gallery/networking.jpg", 4, "Wires of Networking"},
-  {"/src/assets/gallery/another_friend_cat.jpg", 5, "Night Cat"},
+	{"/src/assets/gallery/another_friend_cat.jpg", 5, "Night Cat"},
-  {"/src/assets/gallery/pc_case_stickers.jpg", 6, "I use arch BTW"},
+	{"/src/assets/gallery/pc_case_stickers.jpg", 6, "I use arch BTW"},
-  {"/src/assets/gallery/movie_picture_1.jpg", 7, "Prime Cut Cafe"},
+	{"/src/assets/gallery/movie_picture_1.jpg", 7, "Prime Cut Cafe"},
-  {"/src/assets/gallery/movie_picture_2.jpg", 8, "Big Fountain"},
+	{"/src/assets/gallery/movie_picture_2.jpg", 8, "Big Fountain"},
-  {"/src/assets/gallery/bird.jpg", 9, "Birds Eye"},
+	{"/src/assets/gallery/bird.jpg", 9, "Birds Eye"},
-  {"/src/assets/gallery/japanese_garden_1.jpg", 10, "Pond of Fishes"},
+	{"/src/assets/gallery/japanese_garden_1.jpg", 10, "Pond of Fishes"},
-  {"/src/assets/gallery/japanese_garden_2.jpg", 11, "Waterfall Pond"},
+	{"/src/assets/gallery/japanese_garden_2.jpg", 11, "Waterfall Pond"},
-  {"/src/assets/gallery/japanese_garden_3.jpg", 12, "Bridge of Faith"},
+	{"/src/assets/gallery/japanese_garden_3.jpg", 12, "Bridge of Faith"},
-  {"/src/assets/gallery/japanese_garden_4.jpg", 13, "Little Rocks"},
+	{"/src/assets/gallery/japanese_garden_4.jpg", 13, "Little Rocks"},
-  {"/src/assets/gallery/japanese_garden_5.jpg", 14, "Arc over Pond"},
+	{"/src/assets/gallery/japanese_garden_5.jpg", 14, "Arc over Pond"},
-  {"/src/assets/gallery/japanese_garden_6.jpg", 15, "Beautiful Pond"},
+	{"/src/assets/gallery/japanese_garden_6.jpg", 15, "Beautiful Pond"},
 }
 
-var socialItems = []SocialItems {
+var socialItems = []SocialItems{
-  {"https://discord.gg/VTEn4zuh", "Discord", "keyemail", "/src/assets/icons/discord.svg", "5865F2"},
+	{"https://discord.gg/VTEn4zuh", "Discord", "keyemail", "/src/assets/icons/discord.svg", "5865F2"},
-  {"https://github.com/Keyemail", "GitHub", "Keyemail", "/src/assets/icons/github.svg", "171515"},
+	{"https://github.com/Keyemail", "GitHub", "Keyemail", "/src/assets/icons/github.svg", "171515"},
-  {"https://steamcommunity.com/id/keyemail/", "Steam", "Keyemail", "/src/assets/icons/steam.svg", "000000"},
+	{"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://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.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://www.instagram.com/keyemail1?igsh=OGQ5ZDc2ODk2ZA%3D%3D&utm_source=qr", "Instagram", "keyemail1", "/src/assets/icons/instagram.svg", "C13584"},
 }
 
-var videoItems = []VideoItems {
+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", 1, "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", 2, "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) {
-  var templateFiles[]string
+	var templateFiles []string
 
-  templateFiles = append(templateFiles, "src/pages/" + tmpl + ".tmpl", "src/index.tmpl", "src/components/navbar.tmpl")
+	templateFiles = append(templateFiles, "src/pages/"+tmpl+".tmpl", "src/index.tmpl", "src/components/navbar.tmpl")
 
-  templates, err := template.ParseFiles(templateFiles...)
+	templates, err := template.ParseFiles(templateFiles...)
-  if err != nil {
+	if err != nil {
-    http.Error(w, err.Error(), http.StatusInternalServerError)
+		http.Error(w, err.Error(), http.StatusInternalServerError)
-    return
+		return
-  }
+	}
 
-  data.Nav = nav
+	data.Nav = nav
 
-  err = templates.ExecuteTemplate(w, "base", data)
+	err = templates.ExecuteTemplate(w, "base", data)
-  if err != nil {
+	if err != nil {
-    http.Error(w, err.Error(), http.StatusInternalServerError)
+		http.Error(w, err.Error(), http.StatusInternalServerError)
-  }
+	}
 
-  log.Println("GET /" + tmpl)
+	log.Println("GET /" + tmpl)
 }
 
 func galleryContentHandler(w http.ResponseWriter, req *http.Request) {
-  parts := strings.Split(req.URL.Path, "/") 
+	parts := strings.Split(req.URL.Path, "/")
 
-  if len(parts) == 3 && parts[1] == "gallery" { 
+	if len(parts) == 3 && parts[1] == "gallery" {
-    idStr := parts[2]
+		idStr := parts[2]
-    id, err := strconv.Atoi(idStr)
+		id, err := strconv.Atoi(idStr)
-    if err != nil || id < 1 || id > len(galleryItems) {
+		if err != nil || id < 1 || id > len(galleryItems) {
-      renderTemplate(w, "404", data, true)
+			renderTemplate(w, "404", data, true)
-      return
+			return
-    }
+		}
 
-    var item GalleryItems
+		var item GalleryItems
-    for _, gi := range galleryItems {
+		for _, gi := range galleryItems {
-      if gi.ID == id {
+			if gi.ID == id {
-        item = gi
+				item = gi
-        break
+				break
-      }
+			}
-    }
+		}
 
-    *currentData = *data
+		*currentData = *data
-    currentData.GalleryPhoto = &item
+		currentData.GalleryPhoto = &item
-    currentData.GalleryItems = nil
+		currentData.GalleryItems = nil
 
-    renderTemplate(w, "gallery_content", currentData, true)
+		renderTemplate(w, "gallery_content", currentData, true)
-    return
+		return
-  }
+	}
 
-  renderTemplate(w, "404", data, true)
+	renderTemplate(w, "404", data, true)
 }
 
 func videoContentHandler(w http.ResponseWriter, req *http.Request) {
-  parts := strings.Split(req.URL.Path, "/")
+	parts := strings.Split(req.URL.Path, "/")
 
-  if len(parts) == 3 && parts[1] == "videos" {
+	if len(parts) == 3 && parts[1] == "videos" {
-    idStr := parts[2]
+		idStr := parts[2]
-    id, err := strconv.Atoi(idStr)
+		id, err := strconv.Atoi(idStr)
-    if err!= nil || id < 1 || id > len(videoItems) {
+		if err != nil || id < 1 || id > len(videoItems) {
-      renderTemplate(w, "404", data, true)
+			renderTemplate(w, "404", data, true)
-      return
+			return
-    }
+		}
 
-    var item VideoItems
+		var item VideoItems
-    for _, gi := range videoItems {
+		for _, gi := range videoItems {
-      if gi.ID == id {
+			if gi.ID == id {
-        item = gi
+				item = gi
-        break
+				break
-      }
+			}
-    }
+		}
 
-    *currentData = *data
+		*currentData = *data
-    currentData.VideoContent = &item
+		currentData.VideoContent = &item
-    currentData.VideoItems = nil
+		currentData.VideoItems = nil
-    
-    renderTemplate(w, "video_content", currentData, true)
-    return
-  }
 
-  renderTemplate(w, "404", data, true)
+		renderTemplate(w, "video_content", currentData, true)
+		return
+	}
+
+	renderTemplate(w, "404", data, true)
 }
 
 func videoHandler(w http.ResponseWriter, req *http.Request) {
-  renderTemplate(w, "video", data, true)
+	renderTemplate(w, "video", data, true)
 }
 
 func socialsHandler(w http.ResponseWriter, req *http.Request) {
-  renderTemplate(w, "socials", data, true)
+	renderTemplate(w, "socials", data, true)
 }
 
 func galleryHandler(w http.ResponseWriter, req *http.Request) {
-  renderTemplate(w, "gallery", data, true)
+	renderTemplate(w, "gallery", data, true)
 }
 
 func indexHandler(w http.ResponseWriter, req *http.Request) {
-  if req.URL.Path != "/" {
+	if req.URL.Path != "/" {
-    renderTemplate(w, "404", data, true)
+		renderTemplate(w, "404", data, true)
-    return
+		return
-  }
+	}
 
-  renderTemplate(w, "home", data, true)
+	renderTemplate(w, "home", data, true)
 }
 
 func main() {
-  if _, err := os.Stat("src/index.tmpl"); os.IsNotExist(err) {
+	if _, err := os.Stat("src/index.tmpl"); os.IsNotExist(err) {
-    log.Fatal("Template file does not exist:\n", err)
+		log.Fatal("Template file does not exist:\n", err)
-  }
+	}
 
-  fs := http.FileServer(http.Dir("./src"))
+	fs := http.FileServer(http.Dir("./src"))
-  http.Handle("/src/", http.StripPrefix("/src/", fs))
+	http.Handle("/src/", http.StripPrefix("/src/", fs))
 
-  port := ":3939"
+	port := ":3939"
 
-  http.HandleFunc("/", indexHandler)
+	http.HandleFunc("/", indexHandler)
-  http.HandleFunc("/socials", socialsHandler)
+	http.HandleFunc("/socials", socialsHandler)
-  http.HandleFunc("/gallery", galleryHandler)
+	http.HandleFunc("/gallery", galleryHandler)
-  http.HandleFunc("/videos", videoHandler)
+	http.HandleFunc("/videos", videoHandler)
-  http.HandleFunc("/gallery/", galleryContentHandler) 
+	http.HandleFunc("/gallery/", galleryContentHandler)
-  http.HandleFunc("/videos/", videoContentHandler)
+	http.HandleFunc("/videos/", videoContentHandler)
-  
+
-  log.Println("Server running at http://localhost" + port)
+	log.Println("Server running at http://localhost" + port)
-  http.ListenAndServe(port, nil)
+	http.ListenAndServe(port, nil)
 }

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/pages/home.tmpl

@@ -46,6 +46,22 @@
           <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>
   </header>

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,3 +1,10 @@
+body {
+  background-image: url("/src/assets/background.svg");
+  background-repeat: no-repeat;
+  background-size:cover;
+  background-position: center;
+}
+
 header {
   display: flex;
   align-items: center;
@@ -21,6 +28,9 @@ header {
 }
 
 .pfp {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   height: 130px !important;
   width: 130px !important;
   border: solid;
@@ -30,6 +40,7 @@ header {
   overflow: hidden;
   margin-left: 20px;
   user-select: none;
+  flex-shrink: 0;
   
   img {
     width:100%;
@@ -68,7 +79,8 @@ header {
   ul {
     display: flex;
     flex-direction: row;
-    width: fit-content;
+    flex-wrap: wrap;
+    max-width: 300px;
     gap: 5px;
     user-select: none;
   }
@@ -154,7 +166,8 @@ header {
 @media screen and (max-width: 450px){
   header {
     flex-direction: column;
-    height: 240px;
+    height: fit-content;
+    padding: 30px;
     justify-content: center;
   }
   #name {
@@ -163,6 +176,9 @@ header {
     justify-content: center;
     align-items: center;
     margin-left: 0;
+    ul {
+      justify-content: center;
+    }
   }
 
   header h1 {

src/styles/main.css

@@ -9,7 +9,9 @@
 }
 
 body {
-  background-color: var(--bg-color)
+  background-color: var(--bg-color);
+
+  min-height: 100vh;
 }
 
 html, body {

src/styles/socials.css

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

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;