Added badges, changed background
This commit is contained in:
parent
e767bf856e
commit
c1f8d94992
GPG key ID:
6FD1A0FDB0D914C2
|
|
@ -1,5 +1,5 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="">
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
|
|
|
|||
1
src/assets/badges/code.svg
Normal file
1
src/assets/badges/code.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 236 B |
1
src/assets/badges/css.svg
Normal file
1
src/assets/badges/css.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 295 B |
1
src/assets/badges/html.svg
Normal file
1
src/assets/badges/html.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 260 B |
1
src/assets/badges/js.svg
Normal file
1
src/assets/badges/js.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 602 B |
1
src/assets/badges/vue.svg
Normal file
1
src/assets/badges/vue.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 162 B |
|
|
@ -1,11 +0,0 @@
|
|||
<template>
|
||||
|
||||
</template>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
|
||||
<script>
|
||||
|
||||
</script>
|
||||
|
|
@ -2,8 +2,27 @@
|
|||
<header>
|
||||
<a class="pfp" href="https://www.pixiv.net/en/artworks/118037520">
|
||||
<img src="@/assets/profile.jpg"/>
|
||||
</a>
|
||||
<h1>Keyemail</h1>
|
||||
</a>
|
||||
<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>
|
||||
<div class="intro">
|
||||
<h1>Hi, I'm Keyemail or Patrick.</h1>
|
||||
|
|
@ -28,7 +47,6 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
var counter = 0;
|
||||
</script>
|
||||
|
||||
|
|
@ -37,22 +55,47 @@ header {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 20px;
|
||||
background-image: url(@/assets/banner_website.avif);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center 20%;
|
||||
background: repeating-linear-gradient(
|
||||
-45deg,
|
||||
#200080,
|
||||
#200080 20px,
|
||||
#090069 20px,
|
||||
#090069 40px
|
||||
);
|
||||
height: 180px;
|
||||
width: 100%;
|
||||
background-color: #0df;
|
||||
border-radius: 10px;
|
||||
font-family: 'Rubik', sans-serif;
|
||||
}
|
||||
|
||||
#name {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
color: white;
|
||||
margin-left: 20px;
|
||||
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 {
|
||||
|
|
@ -163,6 +206,13 @@ article input {
|
|||
height: 240px;
|
||||
justify-content: center;
|
||||
}
|
||||
header #name {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-left: 0;
|
||||
}
|
||||
header h1 {
|
||||
margin-left: 0px;
|
||||
}
|
||||
|
|
@ -174,6 +224,6 @@ article input {
|
|||
}
|
||||
.pfp{
|
||||
margin-left: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in a new issue