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

Added badges, changed background

Browse source
This commit is contained in:
Patrick Hatsune 2024-06-02 17:44:20 -07:00
parent e767bf856e
commit c1f8d94992
Signed by: keyemail
GPG key ID: 6FD1A0FDB0D914C2
8 changed files with 67 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
public/index.html
View file

@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang=""> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">

1
src/assets/badges/code.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path fill="none" stroke="#06d3d3" stroke-width="64" stroke-linecap="round" stroke-linejoin="round" d="M144 144 32 256 144 368M256 480 384 32M496 144 608 256 496 368"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 236 B

1
src/assets/badges/css.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="#264de4" d="M34.9 427.8 192 480l157.1-52.2L384 32H0m313.1 80-4.8 47.3-115.6 49.4h111.5l-12.8 146.6-98.2 28.7-98.8-29.2-6.4-73.9h48.9l3.2 38.3 52.6 13.3 54.7-15.4 3.7-61.6h-166.3l-3.6-46.3 118.6-49.4H76.7L70.9 112"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 295 B

1
src/assets/badges/html.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="#e34c26" d="M35 428l156.5 52L349 428 384 32H0M308.2 159.9H124.4l4.1 49.4h175.6l-13.6 148.4-99 27.3-98.7-27.3-6-75.8h47.7L138 320l53.5 14.5 53.7-14.5 6-62.2H84.3L71.5 112.2h241.1"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 260 B

1
src/assets/badges/js.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="#f0db4f" d="M0 480H448V32H0M243.8 381.4c0 43.6-25.6 63.5-62.9 63.5-33.7 0-53.2-17.4-63.2-38.5l34.3-20.7c6.6 11.7 12.6 21.6 27.1 21.6s22.6-5.4 22.6-26.5V237.7h42.1m99.6 207.2c-39.1 0-64.4-18.6-76.7-43l34.3-19.8c9 14.7 20.8 25.6 41.5 25.6 17.4 0 28.6-8.7 28.6-20.8 0-14.4-11.4-19.5-30.7-28l-10.5-4.5c-30.4-12.9-50.5-29.2-50.5-63.5 0-31.6 24.1-55.6 61.6-55.6 26.8 0 46 9.3 59.8 33.7L368 290c-7.2-12.9-15-18-27.1-18s-20.1 7.8-20.1 18c0 12.6 7.8 17.7 25.9 25.6l10.5 4.5c35.8 15.3 55.9 31 55.9 66.2 0 37.8-29.8 58.6-69.7 58.6"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 602 B

1
src/assets/badges/vue.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="#3fb27f" d="M0 64H176l48 89 56-89h168L224 448m0-63L392 96H338L224 295 109 96H55"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 162 B

11
src/components/WeatherApp.vue
View file

@ -1,11 +0,0 @@
<template>
</template>
<style>
</style>
<script>
</script>

68
src/views/HomePage.vue
View file

@ -3,7 +3,26 @@
<a class="pfp" href="https://www.pixiv.net/en/artworks/118037520"> <a class="pfp" href="https://www.pixiv.net/en/artworks/118037520">
<img src="@/assets/profile.jpg"/> <img src="@/assets/profile.jpg"/>
</a> </a>
<h1>Keyemail</h1> <div id="name">
<h1>Keyemail</h1>
<ul>
<li>
<img src="@/assets/badges/code.svg" aria-label="CODE" width="25px" height="25px"/>
</li>
<li>
<img src="@/assets/badges/html.svg" aria-label="HTML5" width="25px" height="25px"/>
</li>
<li>
<img src="@/assets/badges/css.svg" aria-label="CSS3" width="25px" height="25px"/>
</li>
<li>
<img src="@/assets/badges/js.svg" aria-label="JS" width="25px" height="25px"/>
</li>
<li>
<img src="@/assets/badges/vue.svg" aria-label="VUE3" width="25px" height="25px"/>
</li>
</ul>
</div>
</header> </header>
<div class="intro"> <div class="intro">
<h1>Hi, I'm Keyemail or Patrick.</h1> <h1>Hi, I'm Keyemail or Patrick.</h1>
@ -28,7 +47,6 @@ export default {
} }
} }
} }
var counter = 0; var counter = 0;
</script> </script>
@ -37,22 +55,47 @@ header {
display: flex; display: flex;
align-items: center; align-items: center;
margin-top: 20px; margin-top: 20px;
background-image: url(@/assets/banner_website.avif); background: repeating-linear-gradient(
background-repeat: no-repeat; -45deg,
background-size: cover; #200080,
background-position: center 20%; #200080 20px,
#090069 20px,
#090069 40px
);
height: 180px; height: 180px;
width: 100%; width: 100%;
background-color: #0df;
border-radius: 10px; border-radius: 10px;
font-family: 'Rubik', sans-serif; font-family: 'Rubik', sans-serif;
} }
#name {
margin-left: 20px;
}
header h1 { header h1 {
color: white; color: white;
margin-left: 20px;
font-size: 3rem; font-size: 3rem;
-webkit-text-stroke: 1px black; }
header ul {
display: flex;
flex-direction: row;
margin-bottom: 10px;
width: fit-content;
}
header li {
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
margin-right: 5px;
background-color: #151d2f;
height: 30px;
width: 30px;
box-sizing: border-box;
border-radius: 5px;
cursor: pointer;
} }
.pfp { .pfp {
@ -163,6 +206,13 @@ article input {
height: 240px; height: 240px;
justify-content: center; justify-content: center;
} }
header #name {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-left: 0;
}
header h1 { header h1 {
margin-left: 0px; margin-left: 0px;
} }