keyemail/keyemail-dev
1
2
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Updated home page, added bluesky removed instagram

Browse source
This commit is contained in:
Patrick Hatsune 2025-02-26 09:26:16 +09:00
parent 82229b324e
commit 826a08ea7d
Signed by: keyemail
GPG key ID: 44F70572EFE0033A
11 changed files with 128 additions and 100 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

0
build.sh Executable file → Normal file
View file

2
go.mod
View file

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

16
main.go
View file

@ -47,7 +47,7 @@ type VideoItems struct {
var data = &Index{ var data = &Index{
WebpageTitle: "Keyemail", WebpageTitle: "Keyemail",
WebpageIcon: "/src/assets/main/favicon.ico", WebpageIcon: "/src/assets/main/favicon.png",
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",
@ -82,7 +82,7 @@ var socialItems = []SocialItems{
{"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://bsky.app/profile/keyemail.dev", "Bluesky", "Keyemail", "/src/assets/icons/bluesky.svg", "1185FE"},
} }
var videoItems = []VideoItems{ var videoItems = []VideoItems{
@ -197,9 +197,17 @@ func main() {
} }
fs := http.FileServer(http.Dir("./src")) 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("/", indexHandler)
http.HandleFunc("/socials", socialsHandler) http.HandleFunc("/socials", socialsHandler)

1
src/assets/icons/bluesky.svg Normal file
View 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>
Side by side

After

Width:  |  Height:  |  Size: 672 B

1
src/assets/icons/instagram.svg
View file

@ -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>
Side by side

Before

Width:  |  Height:  |  Size: 1,018 B

BIN
src/assets/main/favicon.ico
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 128 KiB

BIN
src/assets/main/favicon.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.1 MiB

BIN
src/assets/profile/header.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 8.7 MiB

BIN
src/assets/profile/profile.jpg
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 38 KiB

After

Width:  |  Height:  |  Size: 597 KiB

120
src/pages/home.tmpl
View file

@ -8,72 +8,76 @@
<body> <body>
{{ define "body" }} {{ define "body" }}
<header> <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"/> <img src="/src/assets/profile/profile.jpg"/>
</a> </a>
<div id="name"> <div id="headercontent">
<h1>Keyemail</h1> <div id="name">
<ul> <ul>
<li> <li>
<img src="/src/assets/badges/code.svg" aria-label="CODE"/> <img src="/src/assets/badges/code.svg" aria-label="CODE"/>
<div>Active Developer</div> <div>Active Developer</div>
</li> </li>
<li> <li>
<img src="/src/assets/badges/html.svg" aria-label="HTML5"/> <img src="/src/assets/badges/html.svg" aria-label="HTML5"/>
<div>HTML</div> <div>HTML</div>
</li> </li>
<li> <li>
<img src="/src/assets/badges/css.svg" aria-label="CSS3"/> <img src="/src/assets/badges/css.svg" aria-label="CSS3"/>
<div>CSS</div> <div>CSS</div>
</li> </li>
<li> <li>
<img src="/src/assets/badges/js.svg" aria-label="JS"/> <img src="/src/assets/badges/js.svg" aria-label="JS"/>
<div>Javascript</div> <div>Javascript</div>
</li> </li>
<li> <li>
<img src="/src/assets/badges/typescript.svg" aria-label="TS" style="padding: 1px"/> <img src="/src/assets/badges/typescript.svg" aria-label="TS" style="padding: 1px"/>
<div>Typescript</div> <div>Typescript</div>
</li> </li>
<li> <li>
<img src="/src/assets/badges/vue.svg" aria-label="VUE3"/> <img src="/src/assets/badges/vue.svg" aria-label="VUE3"/>
<div>Vue 3</div> <div>Vue 3</div>
</li> </li>
<li> <li>
<img src="/src/assets/badges/react.svg" aria-label="REACT"/> <img src="/src/assets/badges/react.svg" aria-label="REACT"/>
<div>React</div> <div>React</div>
</li> </li>
<li> <li>
<img src="/src/assets/badges/golang.svg" aria-label="GOLANG"/> <img src="/src/assets/badges/golang.svg" aria-label="GOLANG"/>
<div>Go</div> <div>Go</div>
</li> </li>
<li> <li>
<img src="/src/assets/badges/git.svg" aria-label="GIT"/> <img src="/src/assets/badges/git.svg" aria-label="GIT"/>
<div>Git</div> <div>Git</div>
</li> </li>
<li> <li>
<img src="/src/assets/badges/linux.svg" aria-label="LINUX"/> <img src="/src/assets/badges/linux.svg" aria-label="LINUX"/>
<div>Linux</div> <div>Linux</div>
</li> </li>
<li> <li>
<img src="/src/assets/badges/nginx.svg" aria-label="NGINX"/> <img src="/src/assets/badges/nginx.svg" aria-label="NGINX"/>
<div>nginx</div> <div>nginx</div>
</li> </li>
<li> <li>
<img src="/src/assets/badges/java.svg" aria-label="JAVA"/> <img src="/src/assets/badges/java.svg" aria-label="JAVA"/>
<div>Java</div> <div>Java</div>
</li> </li>
</ul> </ul>
</div>
</div> </div>
<h1>Keyemail・Patrick</h1>
<p>He/Him</p>
</header> </header>
<div id="intro"> <div id="intro">
<h1>Hi, I'm Keyemail or Patrick.</h1> <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> <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> </div>
<i class="fa-solid fa-arrow-down" id="moreArrow" onclick="quack()"> <i class="fa-solid fa-arrow-down" id="moreArrow" onclick="quack()"></i>
<div>Nothing...</div>
</i>
<script src="/src/scripts/home.js"></script> <script src="/src/scripts/home.js"></script>
{{ end }} {{ end }}

88
src/styles/home.css
View file

@ -7,24 +7,32 @@ body {
header { header {
display: flex; display: flex;
align-items: center; flex-direction: column;
margin-top: 20px; margin-top: 20px;
background: repeating-linear-gradient( background-color: var(--bg-alt-color);
-45deg, height: 430px;
#200080,
#200080 20px,
#090069 20px,
#090069 40px
);
height: 180px;
width: 100%; width: 100%;
border-radius: 10px; border-radius: 10px;
font-family: 'Rubik', sans-serif; font-family: 'Rubik', sans-serif;
h1 { h1 {
color: white; color: white;
font-size: 3rem; 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 { .pfp {
@ -34,11 +42,12 @@ header {
height: 130px !important; height: 130px !important;
width: 130px !important; width: 130px !important;
border: solid; border: solid;
border-width: 4px; border-width: 6px;
border-radius: 50%; border-radius: 50%;
border-color: white; border-color: var(--bg-alt-color);
overflow: hidden; overflow: hidden;
margin-left: 20px; margin-left: 20px;
margin-top: -50px;
user-select: none; user-select: none;
flex-shrink: 0; 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 { #name {
margin-left: 20px; margin-top: -80px;
margin-left: 160px;
div { div {
display: none; display: none;
top: calc(100% + 5px); top: calc(100% + 5px);
@ -89,7 +115,6 @@ header {
position: relative; position: relative;
display: inherit; display: inherit;
text-decoration: none; text-decoration: none;
background-color: var(--bg-alt-color);
height: 30px; height: 30px;
width: 30px; width: 30px;
padding: 3px; padding: 3px;
@ -136,27 +161,7 @@ header {
color: white; color: white;
margin: 40px auto; margin: 40px auto;
margin-top: 80px; 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 { #moreArrow:hover div {
@ -167,8 +172,14 @@ header {
header { header {
flex-direction: column; flex-direction: column;
height: fit-content; height: fit-content;
padding: 30px;
justify-content: center; justify-content: center;
align-items: center;
}
#headerImg {
height: 150px;
}
#headercontent {
max-width: 300px;
} }
#name { #name {
display: flex; display: flex;
@ -176,6 +187,7 @@ header {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
margin-left: 0; margin-left: 0;
margin-top: 10px;
ul { ul {
justify-content: center; justify-content: center;
} }
@ -183,6 +195,10 @@ header {
header h1 { header h1 {
margin-left: 0px; margin-left: 0px;
font-size: 2rem;
}
header p {
font-size: 1.5rem;
} }
#intro h1 { #intro h1 {
font-size: 3rem; font-size: 3rem;