diff --git a/.gitignore b/.gitignore index 21f56b8..f785746 100644 --- a/.gitignore +++ b/.gitignore @@ -1,12 +1,2 @@ -# local env files -.env.local -.env.*.local - -# Editor directories and files -.idea +build/ .vscode -*.suo -*.ntvs* -*.njsproj -*.sln -*.sw? diff --git a/README.md b/README.md new file mode 100644 index 0000000..aed7a9a --- /dev/null +++ b/README.md @@ -0,0 +1,45 @@ +# keyemail.dev + +Welcome to the official repo for the site https://keyemail.dev! This site is to display all about the user `Keyemail`, it displays the About Me, Gallery Photos, Socials, and Videos! This project is done under Go, but was orginally made in Vue. + +## Installation + +### Automatic (Easy Way) + +Make the `build.sh` an executable by: +```console +chmod +x ./build.sh +``` +and then run: +```console +./build.sh +``` + +After that, go into the build folder and run the executable that is in there. + +### Manual (Hard Way) + +First create the directory: +```console +mkdir build/ +``` + +then, copy src to ./build using: +```console +cp -r src/ ./build +``` + +then, build using Go: +```console +go build -o ./build +``` + +Your done! Go into the build folder and run the executable. + +## Support + +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. diff --git a/build.sh b/build.sh new file mode 100755 index 0000000..53fc94a --- /dev/null +++ b/build.sh @@ -0,0 +1,13 @@ +#! /bin/bash +echo "Building.." + +echo "Making build folder" +mkdir build/ + +echo "Copying files into build folder" +cp -r src/ ./build/ + +echo "Building executable" +go build -o ./build/ + +echo "Done building!" diff --git a/go.mod b/go.mod index 7d0df39..fc56b55 100644 --- a/go.mod +++ b/go.mod @@ -1,3 +1,3 @@ -module serve +module keyemail-dev-v1.0 go 1.22.3 diff --git a/main.go b/main.go index 98325e5..dcf1734 100644 --- a/main.go +++ b/main.go @@ -5,31 +5,184 @@ import ( "os" "log" "html/template" + "strings" + "strconv" ) type Index struct { WebpageTitle string + WebpageIcon string + WebpageKeywords string + WebpageDescription string + GalleryItems []GalleryItems + SocialItems []SocialItems + VideoItems []VideoItems + GalleryPhoto *GalleryItems + VideoContent *VideoItems + Nav bool +} + +type GalleryItems struct { + URL string + ID int + Title string +} + +type SocialItems struct { + URL string + Name string + Username string + Icon string + Color string +} + +type VideoItems struct { + URL string + ID int + Title string + Description string + Thumbnail string +} + +var data = &Index { + WebpageTitle: "Keyemail", + WebpageIcon: "/src/assets/main/favicon.ico", + WebpageKeywords: "keyemail", + WebpageDescription: "Welcome to keyemail.dev! A profile based on Keyemail.", + GalleryItems: galleryItems, + SocialItems: socialItems, + VideoItems: videoItems, +} + +var currentData = &Index{} + +var galleryItems = []GalleryItems { + {"/src/assets/gallery/2_cats.jpg", 1, "Resting Day"}, + {"/src/assets/gallery/friend_cat.jpg", 2, "Orange Furr"}, + {"/src/assets/gallery/miku_poster.jpg", 3, "Miku Spotted"}, + {"/src/assets/gallery/networking.jpg", 4, "Wires of Networking"}, + {"/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/movie_picture_1.jpg", 7, "Prime Cut Cafe"}, + {"/src/assets/gallery/movie_picture_2.jpg", 8, "Big Fountain"}, + {"/src/assets/gallery/bird.jpg", 9, "Birds Eye"}, + {"/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_3.jpg", 12, "Bridge of Faith"}, + {"/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_6.jpg", 15, "Beautiful Pond"}, +} + +var socialItems = []SocialItems { + {"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://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"}, +} + +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"}, +} + +func renderTemplate(w http.ResponseWriter, tmpl string, data *Index, nav bool) { + var templateFiles[]string + + templateFiles = append(templateFiles, "src/pages/" + tmpl + ".tmpl", "src/index.tmpl", "src/components/navbar.tmpl") + + templates, err := template.ParseFiles(templateFiles...) + if err != nil { + http.Error(w, err.Error(), http.StatusInternalServerError) + return + } + + data.Nav = nav + + err = templates.ExecuteTemplate(w, "base", data) + if err != nil { + http.Error(w, err.Error(), http.StatusInternalServerError) + } + + log.Println("GET /" + tmpl) +} + +func galleryContentHandler(w http.ResponseWriter, req *http.Request) { + parts := strings.Split(req.URL.Path, "/") + + if len(parts) == 3 && parts[1] == "gallery" { + idStr := parts[2] + id, err := strconv.Atoi(idStr) + if err != nil || id < 1 || id > len(galleryItems) { + renderTemplate(w, "404", data, true) + return + } + + var item GalleryItems + for _, gi := range galleryItems { + if gi.ID == id { + item = gi + break + } + } + + *currentData = *data + currentData.GalleryPhoto = &item + currentData.GalleryItems = nil + + renderTemplate(w, "gallery_content", currentData, true) + return + } + + renderTemplate(w, "404", data, true) +} + +func videoContentHandler(w http.ResponseWriter, req *http.Request) { + parts := strings.Split(req.URL.Path, "/") + + if len(parts) == 3 && parts[1] == "videos" { + idStr := parts[2] + id, err := strconv.Atoi(idStr) + if err!= nil || id < 1 || id > len(videoItems) { + renderTemplate(w, "404", data, true) + return + } + + var item VideoItems + for _, gi := range videoItems { + if gi.ID == id { + item = gi + break + } + } + + *currentData = *data + currentData.VideoContent = &item + currentData.VideoItems = nil + + 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); +} + +func socialsHandler(w http.ResponseWriter, req *http.Request) { + renderTemplate(w, "socials", data, true); +} + +func galleryHandler(w http.ResponseWriter, req *http.Request) { + renderTemplate(w, "gallery", data, true); } func indexHandler(w http.ResponseWriter, req *http.Request) { - tmpl, err := template.ParseFiles("src/index.tmpl") - if err != nil { - http.Error(w, "Error loading template", http.StatusInternalServerError) - log.Println("Error parsing template:", err) - return - } - - data := &Index{ - WebpageTitle: "Keyemail", - } - - err = tmpl.Execute(w, data) - - if err != nil { - http.Error(w, "Error loading template", http.StatusInternalServerError) - log.Println("Error executing template:", err) - return - } + renderTemplate(w, "home", data, true); } func main() { @@ -37,9 +190,17 @@ func main() { log.Fatal("Template file does not exist:\n", err) } + fs := http.FileServer(http.Dir("./src")) + http.Handle("/src/", http.StripPrefix("/src/", fs)) + port := ":3939" http.HandleFunc("/", indexHandler) + http.HandleFunc("/socials", socialsHandler) + http.HandleFunc("/gallery", galleryHandler) + http.HandleFunc("/videos", videoHandler) + http.HandleFunc("/gallery/", galleryContentHandler) + http.HandleFunc("/videos/", videoContentHandler) log.Println("Server running at http://localhost" + port) http.ListenAndServe(port, nil) } diff --git a/serve b/serve deleted file mode 100755 index 0123f65..0000000 Binary files a/serve and /dev/null differ diff --git a/src/assets/badges/code.svg b/src/assets/badges/code.svg new file mode 100644 index 0000000..c85afe8 --- /dev/null +++ b/src/assets/badges/code.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/badges/css.svg b/src/assets/badges/css.svg new file mode 100644 index 0000000..51338c4 --- /dev/null +++ b/src/assets/badges/css.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/badges/golang.svg b/src/assets/badges/golang.svg new file mode 100644 index 0000000..8507a77 --- /dev/null +++ b/src/assets/badges/golang.svg @@ -0,0 +1 @@ + diff --git a/src/assets/badges/html.svg b/src/assets/badges/html.svg new file mode 100644 index 0000000..29382dd --- /dev/null +++ b/src/assets/badges/html.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/badges/js.svg b/src/assets/badges/js.svg new file mode 100644 index 0000000..80a1922 --- /dev/null +++ b/src/assets/badges/js.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/badges/vue.svg b/src/assets/badges/vue.svg new file mode 100644 index 0000000..f861daa --- /dev/null +++ b/src/assets/badges/vue.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/gallery/2_cats.jpg b/src/assets/gallery/2_cats.jpg new file mode 100644 index 0000000..38ea3fd Binary files /dev/null and b/src/assets/gallery/2_cats.jpg differ diff --git a/src/assets/gallery/another_friend_cat.jpg b/src/assets/gallery/another_friend_cat.jpg new file mode 100644 index 0000000..49923d5 Binary files /dev/null and b/src/assets/gallery/another_friend_cat.jpg differ diff --git a/src/assets/gallery/bird.jpg b/src/assets/gallery/bird.jpg new file mode 100644 index 0000000..f236470 Binary files /dev/null and b/src/assets/gallery/bird.jpg differ diff --git a/src/assets/gallery/friend_cat.jpg b/src/assets/gallery/friend_cat.jpg new file mode 100644 index 0000000..f9f4e2e Binary files /dev/null and b/src/assets/gallery/friend_cat.jpg differ diff --git a/src/assets/gallery/japanese_garden_1.jpg b/src/assets/gallery/japanese_garden_1.jpg new file mode 100644 index 0000000..071c3de Binary files /dev/null and b/src/assets/gallery/japanese_garden_1.jpg differ diff --git a/src/assets/gallery/japanese_garden_2.jpg b/src/assets/gallery/japanese_garden_2.jpg new file mode 100644 index 0000000..c87a8e9 Binary files /dev/null and b/src/assets/gallery/japanese_garden_2.jpg differ diff --git a/src/assets/gallery/japanese_garden_3.jpg b/src/assets/gallery/japanese_garden_3.jpg new file mode 100644 index 0000000..baf763d Binary files /dev/null and b/src/assets/gallery/japanese_garden_3.jpg differ diff --git a/src/assets/gallery/japanese_garden_4.jpg b/src/assets/gallery/japanese_garden_4.jpg new file mode 100644 index 0000000..1517587 Binary files /dev/null and b/src/assets/gallery/japanese_garden_4.jpg differ diff --git a/src/assets/gallery/japanese_garden_5.jpg b/src/assets/gallery/japanese_garden_5.jpg new file mode 100644 index 0000000..f24af69 Binary files /dev/null and b/src/assets/gallery/japanese_garden_5.jpg differ diff --git a/src/assets/gallery/japanese_garden_6.jpg b/src/assets/gallery/japanese_garden_6.jpg new file mode 100644 index 0000000..e9f074f Binary files /dev/null and b/src/assets/gallery/japanese_garden_6.jpg differ diff --git a/src/assets/gallery/miku_poster.jpg b/src/assets/gallery/miku_poster.jpg new file mode 100644 index 0000000..4aa7f29 Binary files /dev/null and b/src/assets/gallery/miku_poster.jpg differ diff --git a/src/assets/gallery/movie_picture_1.jpg b/src/assets/gallery/movie_picture_1.jpg new file mode 100644 index 0000000..52187fb Binary files /dev/null and b/src/assets/gallery/movie_picture_1.jpg differ diff --git a/src/assets/gallery/movie_picture_2.jpg b/src/assets/gallery/movie_picture_2.jpg new file mode 100644 index 0000000..6fdf6dd Binary files /dev/null and b/src/assets/gallery/movie_picture_2.jpg differ diff --git a/src/assets/gallery/networking.jpg b/src/assets/gallery/networking.jpg new file mode 100644 index 0000000..193b69b Binary files /dev/null and b/src/assets/gallery/networking.jpg differ diff --git a/src/assets/gallery/pc_case_stickers.jpg b/src/assets/gallery/pc_case_stickers.jpg new file mode 100644 index 0000000..da5cab3 Binary files /dev/null and b/src/assets/gallery/pc_case_stickers.jpg differ diff --git a/src/assets/icons/arrow-left.svg b/src/assets/icons/arrow-left.svg new file mode 100644 index 0000000..b1b6099 --- /dev/null +++ b/src/assets/icons/arrow-left.svg @@ -0,0 +1 @@ + diff --git a/src/assets/icons/discord.svg b/src/assets/icons/discord.svg new file mode 100644 index 0000000..033db31 --- /dev/null +++ b/src/assets/icons/discord.svg @@ -0,0 +1 @@ + diff --git a/src/assets/icons/github.svg b/src/assets/icons/github.svg new file mode 100644 index 0000000..d46872b --- /dev/null +++ b/src/assets/icons/github.svg @@ -0,0 +1 @@ + diff --git a/src/assets/icons/instagram.svg b/src/assets/icons/instagram.svg new file mode 100644 index 0000000..403e6f4 --- /dev/null +++ b/src/assets/icons/instagram.svg @@ -0,0 +1 @@ + diff --git a/src/assets/icons/spotify.svg b/src/assets/icons/spotify.svg new file mode 100644 index 0000000..d4c7c6a --- /dev/null +++ b/src/assets/icons/spotify.svg @@ -0,0 +1 @@ + diff --git a/src/assets/icons/steam.svg b/src/assets/icons/steam.svg new file mode 100644 index 0000000..7be10e3 --- /dev/null +++ b/src/assets/icons/steam.svg @@ -0,0 +1 @@ + diff --git a/src/assets/icons/youtube.svg b/src/assets/icons/youtube.svg new file mode 100644 index 0000000..4b7ce32 --- /dev/null +++ b/src/assets/icons/youtube.svg @@ -0,0 +1 @@ + diff --git a/src/assets/main/favicon.ico b/src/assets/main/favicon.ico new file mode 100644 index 0000000..c9fa5a6 Binary files /dev/null and b/src/assets/main/favicon.ico differ diff --git a/src/assets/profile/profile.jpg b/src/assets/profile/profile.jpg new file mode 100644 index 0000000..222c066 Binary files /dev/null and b/src/assets/profile/profile.jpg differ diff --git a/src/assets/video_thumbnails/JP-Installing-Windows-Project.png b/src/assets/video_thumbnails/JP-Installing-Windows-Project.png new file mode 100644 index 0000000..b984d59 Binary files /dev/null and b/src/assets/video_thumbnails/JP-Installing-Windows-Project.png differ diff --git a/src/assets/video_thumbnails/orange-cat.png b/src/assets/video_thumbnails/orange-cat.png new file mode 100644 index 0000000..5c2549c Binary files /dev/null and b/src/assets/video_thumbnails/orange-cat.png differ diff --git a/src/assets/videos/JP-Installing-Windows-Project.mp4 b/src/assets/videos/JP-Installing-Windows-Project.mp4 new file mode 100644 index 0000000..321761e Binary files /dev/null and b/src/assets/videos/JP-Installing-Windows-Project.mp4 differ diff --git a/src/assets/videos/orange-cat.mp4 b/src/assets/videos/orange-cat.mp4 new file mode 100644 index 0000000..4161813 Binary files /dev/null and b/src/assets/videos/orange-cat.mp4 differ diff --git a/src/components/navbar.tmpl b/src/components/navbar.tmpl new file mode 100644 index 0000000..f6a10fd --- /dev/null +++ b/src/components/navbar.tmpl @@ -0,0 +1,22 @@ +{{ define "navbar" }} + +{{ end }} diff --git a/src/index.tmpl b/src/index.tmpl index a6f9397..a5bff89 100644 --- a/src/index.tmpl +++ b/src/index.tmpl @@ -1,9 +1,25 @@ - - +{{ define "base" }} + + {{ template "head" . }} - + + + + + + + + {{ .WebpageTitle }} + + + + {{ if .Nav }} + {{ template "navbar" . }} + {{ end }} + {{ template "body" . }} +{{ end }} diff --git a/src/pages/404.tmpl b/src/pages/404.tmpl new file mode 100644 index 0000000..caae3d0 --- /dev/null +++ b/src/pages/404.tmpl @@ -0,0 +1,15 @@ + + {{ define "head" }} + + + + {{ end }} + + + {{ define "body" }} +
+

404 Page

+

This page has not been found, click here to return back home.

+
+ {{ end }} + diff --git a/src/pages/gallery.tmpl b/src/pages/gallery.tmpl new file mode 100644 index 0000000..3e7a203 --- /dev/null +++ b/src/pages/gallery.tmpl @@ -0,0 +1,24 @@ + + {{ define "head" }} + + + + {{ end }} + + + {{ define "body" }} +
+

My Gallery!

+
+ {{ end }} + diff --git a/src/pages/gallery_content.tmpl b/src/pages/gallery_content.tmpl new file mode 100644 index 0000000..f9a987e --- /dev/null +++ b/src/pages/gallery_content.tmpl @@ -0,0 +1,22 @@ + + {{ define "head" }} + + + + {{ end }} + + + {{ define "body" }} +
+
+ + + +

{{ .GalleryPhoto.Title }}

+
+ + {{ .GalleryPhoto.Title }} + +
+ {{ end }} + diff --git a/src/pages/home.tmpl b/src/pages/home.tmpl index e69de29..4e0bb00 100644 --- a/src/pages/home.tmpl +++ b/src/pages/home.tmpl @@ -0,0 +1,56 @@ + + {{ define "head" }} + + + + {{ end }} + + + {{ define "body" }} +
+ + + +
+

Keyemail

+ +
+
+ +
+

Hi, I'm Keyemail or Patrick.

+

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!

+
+ + +
Nothing...
+ + + + {{ end }} + diff --git a/src/pages/socials.tmpl b/src/pages/socials.tmpl new file mode 100644 index 0000000..7ac45ea --- /dev/null +++ b/src/pages/socials.tmpl @@ -0,0 +1,25 @@ + + {{ define "head" }} + + + + {{ end }} + + + {{ define "body" }} +
+

My Socials!

+ +
+ {{ end }} + diff --git a/src/pages/video.tmpl b/src/pages/video.tmpl new file mode 100644 index 0000000..1211038 --- /dev/null +++ b/src/pages/video.tmpl @@ -0,0 +1,26 @@ + + {{ define "head" }} + + + + {{ end }} + + + {{ define "body" }} +
+

My Videos

+ +
+ {{ end }} + diff --git a/src/pages/video_content.tmpl b/src/pages/video_content.tmpl new file mode 100644 index 0000000..eb422fa --- /dev/null +++ b/src/pages/video_content.tmpl @@ -0,0 +1,20 @@ + + {{ define "head" }} + + + + {{ end }} + + + {{ define "body" }} +
+ +
+

{{ .VideoContent.Title }}

+

{{ .VideoContent.Description }}

+
+
+ {{ end }} + diff --git a/src/scripts/gallery.js b/src/scripts/gallery.js new file mode 100644 index 0000000..e69de29 diff --git a/src/scripts/home.js b/src/scripts/home.js new file mode 100644 index 0000000..dac824d --- /dev/null +++ b/src/scripts/home.js @@ -0,0 +1,6 @@ +function quack() { + const moreArrow = document.getElementById('moreArrow') + + moreArrow.innerHTML = '🦆'; + moreArrow.classList.remove('fa-arrow-down'); +} diff --git a/src/scripts/main.js b/src/scripts/main.js new file mode 100644 index 0000000..e69de29 diff --git a/src/scripts/video.js b/src/scripts/video.js new file mode 100644 index 0000000..e69de29 diff --git a/src/styles/404.css b/src/styles/404.css new file mode 100644 index 0000000..4697b63 --- /dev/null +++ b/src/styles/404.css @@ -0,0 +1,26 @@ +#notFound { + background-color: var(--bg-alt-color); + display: flex; + flex-direction: column; + color: white; + font-family: 'Rubik', sans-serif; + align-items: center; + margin-top: 20px; + text-align: center; + padding: 40px; + border-radius: 20px; + + h1 { + font-size: 70px; + } + p { + font-size: 30px; + } + a { + color: #ADD8E6; + transition: 0.3s color; + } + a:hover { + color: #74d2f1; + } +} diff --git a/src/styles/gallery.css b/src/styles/gallery.css new file mode 100644 index 0000000..69ee6bf --- /dev/null +++ b/src/styles/gallery.css @@ -0,0 +1,82 @@ +.galleryBGAlt { + margin-top: 20px; + background-color: var(--bg-alt-color); + color: white; + font-family: 'Rubik', sans-serif; + padding: 20px; + border-radius: 20px; + + h1 { + font-weight: 500; + font-size: 3.5rem; + text-align: center; + } +} + +#galleryGrid { + display: grid; + list-style: none; + grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); + gap: 40px; + margin-top: 30px; + width: 100%; + + img { + width: 100%; + height: 550px; + border-radius: 15px; + object-fit: cover; + object-position: center; + cursor: pointer; + transition: 0.4s filter; + } + img:hover { + filter: brightness(70%); + } +} + +#galleryContent { + display: flex; + align-items: center; + flex-direction: column; + + div { + width: 100%; + display: inherit; + flex-direction: row; + align-items: inherit; + justify-content: space-between; + + h1 { + font-size: 3rem; + width: 100%; + text-align: center; + margin-right: 30px; + } + img { + height: 30px; + width: 30px; + user-select: none; + pointer-events: none; + } + } +} + +#galleryPhoto { + margin-top: 20px; + + img{ + max-height: calc(100vh - 199px); + width: auto; + max-width: 100%; + border-radius: 15px; + user-select: none; + pointer-events: none; + } +} + +@media screen and (max-width: 480px) { + #galleryGrid { + grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); + } +} diff --git a/src/styles/home.css b/src/styles/home.css new file mode 100644 index 0000000..bd2b224 --- /dev/null +++ b/src/styles/home.css @@ -0,0 +1,181 @@ +header { + display: flex; + align-items: center; + margin-top: 20px; + background: repeating-linear-gradient( + -45deg, + #200080, + #200080 20px, + #090069 20px, + #090069 40px + ); + height: 180px; + width: 100%; + border-radius: 10px; + font-family: 'Rubik', sans-serif; + + h1 { + color: white; + font-size: 3rem; + } +} + +.pfp { + height: 130px !important; + width: 130px !important; + border: solid; + border-width: 4px; + border-radius: 50%; + border-color: white; + overflow: hidden; + margin-left: 20px; + user-select: none; + + img { + width:100%; + height:100%; + object-fit: cover; + background-color: #afb5c8; + } +} + +#name { + margin-left: 20px; + div { + display: none; + 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; + box-sizing: content-box; + border-radius: 5px; + } + + img { + pointer-events: none; + width: 100%; + height: 100%; + } + + ul { + display: flex; + flex-direction: row; + width: fit-content; + gap: 5px; + user-select: none; + } + + li { + position: relative; + display: inherit; + text-decoration: none; + background-color: var(--bg-alt-color); + height: 30px; + width: 30px; + padding: 3px; + border-radius: 5px; + cursor: pointer; + } + + li:hover div { + display: block; + } +} + +#intro { + display: flex; + flex-direction: column; + align-items: center; + margin-top: 40px; + width: 100%; + color: white; + font-family: 'Rubik', sans-serif; + background-color: var(--bg-alt-color); + border-radius: 10px; + padding: 20px; + text-align: center; + box-sizing: border-box; + + h1 { + font-size: 3.5rem; + font-weight: 500; + } + + p { + margin-top: 15px; + font-size: 1.8rem; + font-weight: 400; + max-width: 800px; + } +} + +#moreArrow { + position: relative; + cursor: pointer; + font-size: 40px; + 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; + } +} + +#moreArrow:hover div { + display: flex; +} + +@media screen and (max-width: 450px){ + header { + flex-direction: column; + height: 240px; + justify-content: center; + } + #name { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + margin-left: 0; + } + + header h1 { + margin-left: 0px; + } + #intro h1 { + font-size: 3rem; + } + #intro p { + font-size: 1.8rem; + } + .pfp{ + margin-left: 0px; + } +} + diff --git a/src/styles/main.css b/src/styles/main.css new file mode 100644 index 0000000..ac02509 --- /dev/null +++ b/src/styles/main.css @@ -0,0 +1,141 @@ +@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500&display=swap'); + +:root { + --bg-color: #192236; + --bg-alt-color: #151d2f; + --bg-alt-hover-color: #111726; + --fg-color: #fff; + --padding: 20px; +} + +body { + background-color: var(--bg-color) +} + +html, body { + scroll-behavior: smooth; +} + +body { + display: flex; + flex-direction: column; + max-width: 1920px; + margin: auto; + padding: var(--padding); +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +a { + color: inherit; + text-decoration: none; +} + +nav { + position: relative; + display: flex; + align-items: center; + justify-content: space-between; + color: white; + font-family: 'Rubik', sans-serif; + font-weight: 500; + + h1 { + width: fit-content; + z-index: 10; + } + + ul { + list-style: none; + float: right; + } + + ul li{ + display: inline; + cursor: pointer; + margin-left: 10px; + font-weight: 400; + transition: color 0.3s; + } + + ul a { + text-decoration: none; + color: inherit; + } + + ul li:hover{ + color: #8ee8fc; + } + + i { + float: right; + font-size: 35px; + cursor: pointer; + transition: 0.3s color; + z-index: 10; + } + + i:hover { + color: #74d2f1; + } +} + +#mobileNav { + position: absolute; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.9); + left: 0; + top: 0; + z-index: 9; + + i { + float: right; + font-size: 35px; + cursor: pointer; + transition: 0.3s color; + } + + div { + display: flex; + align-items: center; + justify-content: center; + height: 100%; + } + + div li { + cursor: pointer; + margin-left: 10px; + font-weight: 400; + transition: color 0.3s; + font-size: 40px; + text-align: center; + font-family: 'Rubik', sans-serif; + margin: 10px; + } + + div a { + color: white; + text-decoration: none; + transition: 0.3s color; + } + + + div a:hover { + color: #74d2f1; + } +} + +@media screen and (max-width: 390px) { + nav { + justify-content: center; + + h1 { + display: none; + } + } +} diff --git a/src/styles/socials.css b/src/styles/socials.css new file mode 100644 index 0000000..3ab49b2 --- /dev/null +++ b/src/styles/socials.css @@ -0,0 +1,83 @@ +#socialBGAlt { + background-color: var(--bg-alt-color); + display: flex; + align-items: center; + margin-top: 20px; + flex-direction: column; + color: white; + font-family: 'Rubik', sans-serif; + padding: 20px; + border-radius: 20px; + + h1 { + margin-bottom: 20px; + font-size: 50px; + } +} + +#socialsGrid { + display: grid; + grid-template-columns: auto auto auto; + align-content: start; + grid-gap: 10px; + + li { + margin: 5px; + width: 275px; + height: 170px; + border-radius: 20px; + padding: 10px; + display: flex; + justify-content: space-between; + flex-direction: column; + border-color: white; + box-sizing: border-box; + border: 4px solid transparent; + transition: 0.4s border; + } + li:hover { + cursor: pointer; + border: 4px; + border-style: solid; + } + h2 { + font-size: 30px; + } + img { + width: 35px; + height: 35px; + margin-top: auto; + align-self: flex-end; + } +} + +@media only screen and (max-width: 905px){ + #socialsGrid{ + grid-template-columns: auto auto; + } +} + +@media only screen and (max-width: 615px){ + #socialsGrid{ + grid-template-columns: auto; + width: 80%; + + li { + width: 100%; + margin-left: 0px; + } + } + #socials { + margin-top: 80px; + justify-content: unset; + } +} + +@media only screen and (max-height: 720px){ + #socials { + display: flex; + justify-content: unset; + margin-top: 80px; + } +} + diff --git a/src/styles/video.css b/src/styles/video.css new file mode 100644 index 0000000..3d035f5 --- /dev/null +++ b/src/styles/video.css @@ -0,0 +1,115 @@ +#videosBGAlt { + margin-top: 20px; + background-color: var(--bg-alt-color); + color: white; + font-family: 'Rubik', sans-serif; + padding: 20px; + border-radius: 20px; + + h1 { + font-weight: 500; + font-size: 3.5rem; + text-align: center; + } +} + +#videoGrid { + display: grid; + list-style: none; + grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); + gap: 40px; + margin-top: 30px; + width: 100%; + + li { + display: flex; + flex-direction: column; + align-items: center; + gap: 10px; + padding: 10px; + border-radius: 10px; + width: 350px; + cursor: pointer; + transition: 0.3s background-color; + + h2 { + color: white; + font-family: 'Rubik', sans-serif; + font-weight: 500; + font-size: 1.5rem; + text-align: center; + } + } + + li:hover { + background-color: var(--bg-alt-hover-color); + } + + img { + max-width: 100%; + aspect-ratio: 16 / 9; + pointer-events: none; + user-select: none; + } +} + +#contentBGAlt { + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-between; + margin-top: 20px; + background-color: var(--bg-alt-color); + color: white; + font-family: 'Rubik', sans-serif; + padding: 20px; + border-radius: 20px; + + video { + max-height: calc(100vh - 330px); + max-width: calc(100vw - 40px); + width: max-content; + aspect-ratio: 16 / 9; + margin-top: 20px; + border-radius: 20px; + background-color: black; + } +} + +#info { + display: flex; + flex-direction: column; + gap: 10px; + margin-top: 30px; + border-radius: 10px; + background-color: var(--bg-alt-color); + max-width: 1052px; + + h1 { + color: white; + font-family: 'Rubik', sans-serif; + font-weight: 500; + font-size: 2rem; + } + p { + font-family: 'Rubik', sans-serif; + font-weight: 200; + font-size: 1.3rem; + color: white; + } +} + +@media only screen and (max-width: 779px) { + #videoGrid{ + display: flex; + flex-direction: column; + + li { + width: 100%; + } + a { + max-width: 100%; + } + } +} +