Compare commits
1 commit
master
...
ios7-patch
| Author | SHA1 | Date | |
|---|---|---|---|
 ios7
|
63693cb0ac |
23
main.go
23
main.go
|
|
@ -21,7 +21,6 @@ type Index struct {
|
|||
GalleryPhoto *GalleryItems
|
||||
VideoContent *VideoItems
|
||||
Nav bool
|
||||
PageName string
|
||||
}
|
||||
|
||||
type GalleryItems struct {
|
||||
|
|
@ -48,7 +47,7 @@ type VideoItems struct {
|
|||
|
||||
var data = &Index{
|
||||
WebpageTitle: "Keyemail",
|
||||
WebpageIcon: "/src/assets/main/favicon.png",
|
||||
WebpageIcon: "/src/assets/main/favicon.ico",
|
||||
WebpageKeywords: "keyemail",
|
||||
WebpageDescription: "Welcome to keyemail.dev! A profile based on Keyemail.",
|
||||
WebpageURL: "https://keyemail.dev",
|
||||
|
|
@ -83,7 +82,7 @@ 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://bsky.app/profile/keyemail.dev", "Bluesky", "Keyemail", "/src/assets/icons/bluesky.svg", "1185FE"},
|
||||
{"https://www.instagram.com/keyemail1?igsh=OGQ5ZDc2ODk2ZA%3D%3D&utm_source=qr", "Instagram", "keyemail1", "/src/assets/icons/instagram.svg", "C13584"},
|
||||
}
|
||||
|
||||
var videoItems = []VideoItems{
|
||||
|
|
@ -114,7 +113,6 @@ 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)
|
||||
|
|
@ -145,7 +143,6 @@ 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)
|
||||
|
|
@ -174,17 +171,14 @@ 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,7 +188,6 @@ func indexHandler(w http.ResponseWriter, req *http.Request) {
|
|||
return
|
||||
}
|
||||
|
||||
data.PageName = "home"
|
||||
renderTemplate(w, "home", data, true)
|
||||
}
|
||||
|
||||
|
|
@ -204,17 +197,9 @@ func main() {
|
|||
}
|
||||
|
||||
fs := http.FileServer(http.Dir("./src"))
|
||||
http.Handle("/src/", http.StripPrefix("/src/", fs))
|
||||
|
||||
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"
|
||||
port := ":3939"
|
||||
|
||||
http.HandleFunc("/", indexHandler)
|
||||
http.HandleFunc("/socials", socialsHandler)
|
||||
|
|
|
|||
|
|
@ -1 +0,0 @@
|
|||
<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>
|
||||
|
Before Width: | Height: | Size: 672 B |
1
src/assets/icons/instagram.svg
Normal file
1
src/assets/icons/instagram.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<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>
|
||||
|
After Width: | Height: | Size: 1,018 B |
|
|
@ -1 +0,0 @@
|
|||
<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>
|
||||
|
Before Width: | Height: | Size: 525 B |
BIN
src/assets/main/favicon.ico
Normal file
BIN
src/assets/main/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 128 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 MiB |
|
|
@ -1 +0,0 @@
|
|||
<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>
|
||||
|
Before Width: | Height: | Size: 543 B |
Binary file not shown.
|
Before Width: | Height: | Size: 180 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.7 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 93 KiB After Width: | Height: | Size: 38 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 597 KiB |
|
|
@ -2,69 +2,21 @@
|
|||
<nav>
|
||||
<h1>Keyemail</h1>
|
||||
<ul>
|
||||
<a href="/">
|
||||
<li class="{{ if eq .PageName "home" }}active{{ end }}" style="border-top-left-radius: 10%; border-bottom-left-radius: 10%;">
|
||||
Home
|
||||
<li>
|
||||
<a href="/">Home</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/gallery">Gallery</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/socials">Socials</a>
|
||||
</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 style="border-top-right-radius: 10%; border-bottom-right-radius: 10%;">
|
||||
Git
|
||||
</li>
|
||||
</a>
|
||||
<li>
|
||||
<a href="/videos">Videos</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://git.keyemail.dev/explore/">Git</a>
|
||||
</li>
|
||||
</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 }}
|
||||
|
|
|
|||
|
|
@ -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?version=022825">
|
||||
<link rel="stylesheet" href="/src/styles/main.css">
|
||||
<script src="https://kit.fontawesome.com/d18ce6e9fb.js" crossorigin="anonymous"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<head>
|
||||
{{ define "head" }}
|
||||
<link rel="stylesheet" href="/src/styles/404.css?version=022825">
|
||||
<link rel="stylesheet" href="/src/styles/404.css">
|
||||
<meta property="description" content="{{ .WebpageDescription }}"/>
|
||||
<meta property="og:description" content="{{ .WebpageDescription }}">
|
||||
{{ end }}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<head>
|
||||
{{ define "head" }}
|
||||
<link rel="stylesheet" href="/src/styles/gallery.css?version=022825">
|
||||
<link rel="stylesheet" href="/src/styles/gallery.css">
|
||||
<meta property="description" content="{{ .WebpageDescription }}"/>
|
||||
<meta property="og:description" content="{{ .WebpageDescription }}">
|
||||
{{ end }}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<head>
|
||||
{{ define "head" }}
|
||||
<link rel="stylesheet" href="/src/styles/gallery.css?version=022825">
|
||||
<link rel="stylesheet" href="/src/styles/gallery.css">
|
||||
<meta property="og:image" content="{{ .WebpageURL }}{{ .GalleryPhoto.URL }}"/>
|
||||
<meta name="twitter:card" content="summary_large_image"/>
|
||||
{{ end }}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<head>
|
||||
{{ define "head" }}
|
||||
<link rel="stylesheet" href="/src/styles/home.css?version=022825"/>
|
||||
<link rel="stylesheet" href="/src/styles/home.css"/>
|
||||
<meta property="description" content="{{ .WebpageDescription }}"/>
|
||||
<meta property="og:description" content="{{ .WebpageDescription }}">
|
||||
{{ end }}
|
||||
|
|
@ -8,76 +8,72 @@
|
|||
<body>
|
||||
{{ define "body" }}
|
||||
<header>
|
||||
<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">
|
||||
<a class="pfp" href="https://www.pixiv.net/en/artworks/118037520">
|
||||
<img src="/src/assets/profile/profile.jpg"/>
|
||||
</a>
|
||||
<div id="headercontent">
|
||||
<div id="name">
|
||||
<ul>
|
||||
<li>
|
||||
<img src="/src/assets/badges/code.svg" aria-label="CODE"/>
|
||||
<div>Active Developer</div>
|
||||
</li>
|
||||
<li>
|
||||
<img src="/src/assets/badges/html.svg" aria-label="HTML5"/>
|
||||
<div>HTML</div>
|
||||
</li>
|
||||
<li>
|
||||
<img src="/src/assets/badges/css.svg" aria-label="CSS3"/>
|
||||
<div>CSS</div>
|
||||
</li>
|
||||
<li>
|
||||
<img src="/src/assets/badges/js.svg" aria-label="JS"/>
|
||||
<div>Javascript</div>
|
||||
</li>
|
||||
<li>
|
||||
<img src="/src/assets/badges/typescript.svg" aria-label="TS" style="padding: 1px"/>
|
||||
<div>Typescript</div>
|
||||
</li>
|
||||
<li>
|
||||
<img src="/src/assets/badges/vue.svg" aria-label="VUE3"/>
|
||||
<div>Vue 3</div>
|
||||
</li>
|
||||
<li>
|
||||
<img src="/src/assets/badges/react.svg" aria-label="REACT"/>
|
||||
<div>React</div>
|
||||
</li>
|
||||
<li>
|
||||
<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 id="name">
|
||||
<h1>Keyemail</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<img src="/src/assets/badges/code.svg" aria-label="CODE"/>
|
||||
<div>Active Developer</div>
|
||||
</li>
|
||||
<li>
|
||||
<img src="/src/assets/badges/html.svg" aria-label="HTML5"/>
|
||||
<div>HTML</div>
|
||||
</li>
|
||||
<li>
|
||||
<img src="/src/assets/badges/css.svg" aria-label="CSS3"/>
|
||||
<div>CSS</div>
|
||||
</li>
|
||||
<li>
|
||||
<img src="/src/assets/badges/js.svg" aria-label="JS"/>
|
||||
<div>Javascript</div>
|
||||
</li>
|
||||
<li>
|
||||
<img src="/src/assets/badges/typescript.svg" aria-label="TS" style="padding: 1px"/>
|
||||
<div>Typescript</div>
|
||||
</li>
|
||||
<li>
|
||||
<img src="/src/assets/badges/vue.svg" aria-label="VUE3"/>
|
||||
<div>Vue 3</div>
|
||||
</li>
|
||||
<li>
|
||||
<img src="/src/assets/badges/react.svg" aria-label="REACT"/>
|
||||
<div>React</div>
|
||||
</li>
|
||||
<li>
|
||||
<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>
|
||||
<h1>Keyemail・Patrick</h1>
|
||||
<p>He/Him</p>
|
||||
</header>
|
||||
|
||||
<div id="intro">
|
||||
<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>
|
||||
<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 a Windows 11 machine although I support Linux in every way. I'm glad to meet you! </p>
|
||||
</div>
|
||||
|
||||
<i class="fa-solid fa-arrow-down" id="moreArrow" onclick="quack()"></i>
|
||||
<i class="fa-solid fa-arrow-down" id="moreArrow" onclick="quack()">
|
||||
<div>Nothing...</div>
|
||||
</i>
|
||||
|
||||
<script src="/src/scripts/home.js"></script>
|
||||
{{ end }}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<head>
|
||||
{{ define "head" }}
|
||||
<link rel="stylesheet" href="/src/styles/socials.css?version=022825">
|
||||
<link rel="stylesheet" href="/src/styles/socials.css">
|
||||
<meta property="description" content="{{ .WebpageDescription }}"/>
|
||||
<meta property="og:description" content="{{ .WebpageDescription }}">
|
||||
{{ end }}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<head>
|
||||
{{ define "head" }}
|
||||
<link rel="stylesheet" href="/src/styles/video.css?version=022825"/>
|
||||
<link rel="stylesheet" href="/src/styles/video.css"/>
|
||||
<meta property="description" content="{{ .WebpageDescription }}"/>
|
||||
<meta property="og:description" content="{{ .WebpageDescription }}">
|
||||
{{ end }}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<head>
|
||||
{{ define "head" }}
|
||||
<link rel="stylesheet" href="/src/styles/video.css?version=022825"/>
|
||||
<link rel="stylesheet" href="/src/styles/video.css"/>
|
||||
<meta property="og:image" content="{{ .WebpageURL }}{{ .VideoContent.Thumbnail }}"/>
|
||||
<meta name="twitter:card" content="summary_large_image"/>
|
||||
{{ end }}
|
||||
|
|
|
|||
|
|
@ -1,15 +0,0 @@
|
|||
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';
|
||||
}
|
||||
})
|
||||
|
|
@ -7,79 +7,51 @@ body {
|
|||
|
||||
header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-top: 20px;
|
||||
background-color: var(--bg-alt-color);
|
||||
height: 420px;
|
||||
background: repeating-linear-gradient(
|
||||
-45deg,
|
||||
#200080,
|
||||
#200080 20px,
|
||||
#090069 20px,
|
||||
#090069 40px
|
||||
);
|
||||
height: 180px;
|
||||
width: 100%;
|
||||
border-radius: 10px;
|
||||
font-family: 'Rubik', sans-serif;
|
||||
padding-bottom: 15px;
|
||||
box-sizing: content-box;
|
||||
|
||||
|
||||
h1 {
|
||||
color: white;
|
||||
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: 6px;
|
||||
border-radius: 50%;
|
||||
border-color: var(--bg-alt-color);
|
||||
overflow: hidden;
|
||||
margin-left: 20px;
|
||||
margin-top: -50px;
|
||||
user-select: none;
|
||||
flex-shrink: 0;
|
||||
|
||||
img {
|
||||
width:100%;
|
||||
height:100%;
|
||||
object-fit: cover;
|
||||
background-color: #afb5c8;
|
||||
}
|
||||
font-size: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
#headercontent {
|
||||
.pfp {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#headerImg {
|
||||
height: 250px;
|
||||
width: 100%;
|
||||
user-select: none;
|
||||
justify-content: center;
|
||||
height: 130px !important;
|
||||
width: 130px !important;
|
||||
border: solid;
|
||||
border-width: 4px;
|
||||
border-radius: 50%;
|
||||
border-color: white;
|
||||
overflow: hidden;
|
||||
border-top-left-radius: inherit;
|
||||
border-top-right-radius: inherit;
|
||||
flex-grow: 1;
|
||||
margin-left: 20px;
|
||||
user-select: none;
|
||||
flex-shrink: 0;
|
||||
|
||||
img {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
width:100%;
|
||||
height:100%;
|
||||
object-fit: cover;
|
||||
background-color: #afb5c8;
|
||||
}
|
||||
}
|
||||
|
||||
#name {
|
||||
margin-top: -80px;
|
||||
margin-left: 160px;
|
||||
margin-left: 20px;
|
||||
div {
|
||||
display: none;
|
||||
top: calc(100% + 5px);
|
||||
|
|
@ -117,6 +89,7 @@ header {
|
|||
position: relative;
|
||||
display: inherit;
|
||||
text-decoration: none;
|
||||
background-color: var(--bg-alt-color);
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
padding: 3px;
|
||||
|
|
@ -163,7 +136,27 @@ header {
|
|||
color: white;
|
||||
margin: 40px auto;
|
||||
margin-top: 80px;
|
||||
margin-bottom: 0;
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
#moreArrow:hover div {
|
||||
|
|
@ -174,14 +167,8 @@ header {
|
|||
header {
|
||||
flex-direction: column;
|
||||
height: fit-content;
|
||||
padding: 30px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
#headerImg {
|
||||
height: 150px;
|
||||
}
|
||||
#headercontent {
|
||||
max-width: 300px;
|
||||
}
|
||||
#name {
|
||||
display: flex;
|
||||
|
|
@ -189,7 +176,6 @@ header {
|
|||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-left: 0;
|
||||
margin-top: 10px;
|
||||
ul {
|
||||
justify-content: center;
|
||||
}
|
||||
|
|
@ -197,10 +183,6 @@ header {
|
|||
|
||||
header h1 {
|
||||
margin-left: 0px;
|
||||
font-size: 2rem;
|
||||
}
|
||||
header p {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
#intro h1 {
|
||||
font-size: 3rem;
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@
|
|||
|
||||
body {
|
||||
background-color: var(--bg-color);
|
||||
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
|
|
@ -42,38 +43,25 @@ 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: flex;
|
||||
display: inline;
|
||||
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 {
|
||||
|
|
@ -81,6 +69,10 @@ nav {
|
|||
color: inherit;
|
||||
}
|
||||
|
||||
ul li:hover{
|
||||
color: #8ee8fc;
|
||||
}
|
||||
|
||||
i {
|
||||
float: right;
|
||||
font-size: 35px;
|
||||
|
|
@ -92,130 +84,9 @@ nav {
|
|||
i:hover {
|
||||
color: #74d2f1;
|
||||
}
|
||||
|
||||
.active {
|
||||
background-color: #2269d4 !important;
|
||||
}
|
||||
}
|
||||
|
||||
#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) {
|
||||
@media screen and (max-width: 430px) {
|
||||
nav {
|
||||
justify-content: center;
|
||||
|
||||
|
|
@ -224,21 +95,3 @@ nav {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 400px) {
|
||||
nav {
|
||||
justify-content:space-between;
|
||||
|
||||
ul {
|
||||
display: none;
|
||||
}
|
||||
|
||||
h1 {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
#NavButton {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue