Updated home page, added bluesky removed instagram
16
main.go
|
@ -47,7 +47,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",
|
||||
|
@ -82,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://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{
|
||||
|
@ -197,9 +197,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)
|
||||
|
|
1
src/assets/icons/bluesky.svg
Normal file
|
@ -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>
|
After Width: | Height: | Size: 672 B |
|
@ -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>
|
Before Width: | Height: | Size: 1,018 B |
Before Width: | Height: | Size: 128 KiB |
BIN
src/assets/main/favicon.png
Normal file
After Width: | Height: | Size: 1.1 MiB |
BIN
src/assets/profile/header.png
Normal file
After Width: | Height: | Size: 8.7 MiB |
Before Width: | Height: | Size: 38 KiB After Width: | Height: | Size: 597 KiB |
|
@ -8,72 +8,76 @@
|
|||
<body>
|
||||
{{ define "body" }}
|
||||
<header>
|
||||
<a class="pfp" href="https://www.pixiv.net/en/artworks/118037520">
|
||||
<div id="headerImg">
|
||||
<img src="/src/assets/profile/header.png">
|
||||
</div>
|
||||
<a class="pfp" href="/src/assets/profile/profile.jpg">
|
||||
<img src="/src/assets/profile/profile.jpg"/>
|
||||
</a>
|
||||
<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 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>
|
||||
<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 development, and unity work for development. Use to run a Linux setup (Arch Linux), but now I use Windows 11 with linux on WSL. I also use VR, and you will usually find me on VRChat, so if you see me dont 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 }}
|
||||
|
|
|
@ -7,16 +7,10 @@ body {
|
|||
|
||||
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: 430px;
|
||||
width: 100%;
|
||||
border-radius: 10px;
|
||||
font-family: 'Rubik', sans-serif;
|
||||
|
@ -24,7 +18,21 @@ header {
|
|||
h1 {
|
||||
color: white;
|
||||
font-size: 3rem;
|
||||
margin-left: 20px;
|
||||
}
|
||||
p {
|
||||
color: white;
|
||||
font-size: 1.5rem;
|
||||
margin-left: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
#headercontent {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.pfp {
|
||||
|
@ -34,11 +42,12 @@ header {
|
|||
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;
|
||||
|
||||
|
@ -50,8 +59,25 @@ header {
|
|||
}
|
||||
}
|
||||
|
||||
#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);
|
||||
|
@ -89,7 +115,6 @@ header {
|
|||
position: relative;
|
||||
display: inherit;
|
||||
text-decoration: none;
|
||||
background-color: var(--bg-alt-color);
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
padding: 3px;
|
||||
|
@ -136,27 +161,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 {
|
||||
|
@ -167,8 +172,14 @@ 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;
|
||||
|
@ -176,6 +187,7 @@ header {
|
|||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-left: 0;
|
||||
margin-top: 10px;
|
||||
ul {
|
||||
justify-content: center;
|
||||
}
|
||||
|
@ -183,6 +195,10 @@ header {
|
|||
|
||||
header h1 {
|
||||
margin-left: 0px;
|
||||
font-size: 2rem;
|
||||
}
|
||||
header p {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
#intro h1 {
|
||||
font-size: 3rem;
|
||||
|
|