zoeissleeping/juls07.dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add skill buttons and more

Browse Source
This commit is contained in:
Zoe
2022-11-28 22:12:48 -06:00
parent 012091a865
commit 3b775e1eba
9 changed files with 220 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
assets/css/main.css
View File

@@ -1,5 +1,6 @@
@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap'); @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap');
@import url('https://fonts.googleapis.com/css?family=Inter&display=swap');
@tailwind base; @tailwind base;
@tailwind components; @tailwind components;
@@ -25,6 +26,10 @@ header {
font-family: 'Red Hat Display', sans-serif; font-family: 'Red Hat Display', sans-serif;
} }
.font-inter {
font-family: 'Inter';
}
.love { .love {
text-decoration: underline; text-decoration: underline;
text-decoration-color: #EB0066; text-decoration-color: #EB0066;
@@ -55,11 +60,15 @@ header {
animation-timing-function: linear; animation-timing-function: linear;
} }
.love:hover::after, .love:active::after, .love:focus::after { .love:hover::after,
.love:active::after,
.love:focus::after {
opacity: 1; opacity: 1;
} }
.love:hover::before, .love:active::before, .love:focus::before { .love:hover::before,
.love:active::before,
.love:focus::before {
opacity: 1; opacity: 1;
} }
@@ -109,4 +118,8 @@ header {
.main-content { .main-content {
column-count: 12; column-count: 12;
}
.bg-grid-pink-600\/\[0\.05\] {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32' fill='none' stroke='rgb(90 43 136 / 0.05)'%3e%3cpath d='M0 .5H31.5V32'/%3e%3c/svg%3e");
} }

10
components/skillButton.vue Normal file
View File

@@ -0,0 +1,10 @@
<script>
export default {
props: ['iconSrc', 'name']
}
</script>
<template>
<button class="font-inter md:text-lg w-fit min-w-fit bg-zinc-800 py-1 px-2 rounded shadow flex items-center"><img
:src="iconSrc"
class="mr-2 w-5 h-5" />{{name}}</button>
</template>

2
package-lock.json generated
View File

@@ -1,5 +1,5 @@
{ {
"name": "juls07.dev-rebuild", "name": "juls07.dev-v2",
"lockfileVersion": 2, "lockfileVersion": 2,
"requires": true, "requires": true,
"packages": { "packages": {

29
pages/index.vue
View File

@@ -2,34 +2,43 @@
<div class="h-screen text-white"> <div class="h-screen text-white">
<header class="w-screen h-3/5 sm:h-2/5 md:h-3/5"> <header class="w-screen h-3/5 sm:h-2/5 md:h-3/5">
<div <div
class="p-6 bg-[#12121233] grid grid-cols-12 gap-5 items-center sm:justify-start w-full h-full backdrop-blur-md backdrop-saturate-[1.15]"> class="p-6 bg-[#12121233] justify-center grid sm:grid-cols-12 gap-5 items-center sm:justify-start w-full h-full backdrop-blur-md backdrop-saturate-[1.15]">
<div <div
class="sm:h-32 sm:!col-start-2 sm:col-span-8 md:col-span-6 lg:col-span-5 w-32 sm:w-fit max-h-full md:h-40 items-center grid grid-rows-1 grid-cols-1 sm:grid-cols-2 drop-shadow-md"> class="sm:h-32 sm:!col-start-2 sm:col-span-8 md:col-span-6 lg:col-span-5 w-32 sm:w-fit max-h-full md:h-40 items-center grid grid-rows-1 grid-cols-1 sm:grid-cols-2 drop-shadow-md">
<img src="https://avatars.githubusercontent.com/u/62722391?v=4" <img src="https://avatars.githubusercontent.com/u/62722391"
class="h-32 md:h-40 max-h-full rounded-full mb-3 sm:mb-0 sm:mr-2" /> class="h-32 md:h-40 max-h-full rounded-full mb-3 sm:mb-0 sm:mr-2" />
<div class="grid grid-rows-5 grid-cols-1 h-fit"> <div class="grid grid-rows-5 grid-cols-1 h-fit">
<h1 class="text-4xl md:text-5xl row-span-3 font-jetbrains">Juls07</h1> <h1 class="text-4xl md:text-5xl row-span-3 font-jetbrains">Juls07</h1>
<p class="text-zinc-100 row-span-2 md:text-lg h-fit">Fullstack dev</p> <p class="text-zinc-200 row-span-2 md:text-lg h-fit">Fullstack dev</p>
</div> </div>
</div> </div>
</div> </div>
</header> </header>
<main class="grid grid-cols-12 gap-5"> <main
<section class="py-6 mb-4 lg:col-span-6 md:col-span-8 col-span-10"> class="grid grid-cols-12 inset-0 bg-grid-slate-900/[0.04] bg-grid-pink-600/[0.05] bg-bottom border-[#2d1544]/5 gap-5 justify-center">
<section
class="py-6 mb-4 !col-start-2 md:!col-start-3 lg:!col-start-4 lg:col-span-6 md:col-span-8 col-span-10">
<h2 class="text-rhd md:text-4xl text-3xl mb-1">About me</h2> <h2 class="text-rhd md:text-4xl text-3xl mb-1">About me</h2>
<hr class="border-2 border-[#EB0066] rounded-md w-7/12 min-w-[200px] max-w-xs lg:max-w-sm mb-1" /> <hr class="border-2 border-[#EB0066] rounded-md w-7/12 min-w-[200px] max-w-xs lg:max-w-sm mb-1" />
<p class="max-w-md sm:max-w-xl md:max-w-3xl lg:max-w-4xl"> <p class="max-w-md sm:max-w-xl md:max-w-3xl lg:max-w-4xl mb-3">
Hi there, I'm juls07, I am 14 years old and I <span tabindex="1" Hi there, I'm juls07, I am 14 years old and I <span tabindex="1" class="love">love</span> web
class="love">love</span> web development. I first dabbled in web development development. I first dabbled in web development
when I was ten, and here we are today! I mainly use when I was ten, and here we are today! I mainly use
<a class="text-rose-500 hover:underline visited:bg-rose-700" <a class="text-rose-500 hover:underline visited:bg-rose-700" href="https://nuxtjs.org">NuxtJs</a> to
href="https://nuxtjs.org">NuxtJs</a> to build my websites since I absolutely build my websites since I absolutely
adore Vuejs. For me, I love being able to imagine anything and it to come to life. Finally, go adore Vuejs. For me, I love being able to imagine anything and it to come to life. Finally, go
checkout my <a class="text-rose-500 hover:underline visited:bg-rose-700" checkout my <a class="text-rose-500 hover:underline visited:bg-rose-700"
href="https://github.com/juls0730">Github</a> and also my <a href="https://github.com/juls0730">Github</a> and also my <a
class="text-rose-500 hover:underline visited:bg-rose-700" class="text-rose-500 hover:underline visited:bg-rose-700"
href="https://twitter.com/julie4055_">Twitter</a>. href="https://twitter.com/julie4055_">Twitter</a>.
</p> </p>
<h3 class="text-rhd text-2xl md:text-3xl mb-1">Skills</h3>
<section class="grid grid-flow-col gap-2 justify-start">
<SkillButton name="javascript" iconSrc='/icons/JavaScript.svg' />
<SkillButton name="Vue.js" iconSrc="/icons/Vue.js.svg" />
<SkillButton name="Ruby on rails" iconSrc="/icons/ruby.svg" />
<SkillButton name="php" iconSrc="/icons/Laravel.svg" />
</section>
</section> </section>
</main> </main>
</div> </div>

27
public/icons/JavaScript.svg Normal file
View File

@@ -0,0 +1,27 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="1052.000000pt" height="1052.000000pt" viewBox="0 0 1052.000000 1052.000000"
preserveAspectRatio="xMidYMid meet">
<rect width="1052.000000pt" height="1052.000000pt" fill="#f0db4f" />
<g transform="translate(0.000000,1052.000000) scale(0.100000,-0.100000)"
fill="#323330" stroke="none">
<path d="M7845 5740 c-375 -28 -699 -165 -930 -395 -249 -247 -365 -538 -365
-914 0 -558 230 -948 740 -1256 128 -77 304 -161 615 -295 297 -128 428 -192
536 -261 146 -94 228 -211 248 -355 37 -261 -140 -470 -455 -535 -137 -29
-355 -23 -494 14 -254 66 -452 216 -627 474 -31 46 -60 83 -64 83 -9 0 -770
-439 -786 -454 -10 -9 -2 -30 37 -94 302 -509 785 -814 1415 -897 173 -23 477
-23 645 -1 402 54 710 190 947 419 205 198 325 447 363 751 16 121 8 375 -15
499 -47 257 -160 474 -343 661 -211 215 -487 379 -1033 614 -412 177 -550 253
-641 350 -87 93 -124 202 -116 338 7 108 37 181 103 252 95 103 205 146 375
145 194 0 316 -49 445 -178 45 -44 103 -115 130 -158 27 -43 54 -76 61 -73 11
4 745 473 753 482 7 7 -104 174 -170 257 -262 327 -600 493 -1069 526 -156 12
-156 12 -305 1z"/>
<path d="M4727 3923 l-3 -1768 -22 -83 c-68 -254 -207 -353 -496 -354 -255 -1
-411 108 -589 414 -29 48 -55 87 -58 86 -4 -2 -185 -111 -402 -243 l-395 -239
33 -66 c178 -353 487 -621 859 -745 354 -118 832 -120 1180 -3 504 168 799
558 866 1143 6 58 10 712 10 1858 l0 1767 -490 0 -489 0 -4 -1767z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

1
public/icons/Laravel.svg Normal file
View File

@@ -0,0 +1 @@
<svg width="50" height="52" viewBox="0 0 50 52" xmlns="http://www.w3.org/2000/svg"><title>Logomark</title><path d="M49.626 11.564a.809.809 0 0 1 .028.209v10.972a.8.8 0 0 1-.402.694l-9.209 5.302V39.25c0 .286-.152.55-.4.694L20.42 51.01c-.044.025-.092.041-.14.058-.018.006-.035.017-.054.022a.805.805 0 0 1-.41 0c-.022-.006-.042-.018-.063-.026-.044-.016-.09-.03-.132-.054L.402 39.944A.801.801 0 0 1 0 39.25V6.334c0-.072.01-.142.028-.21.006-.023.02-.044.028-.067.015-.042.029-.085.051-.124.015-.026.037-.047.055-.071.023-.032.044-.065.071-.093.023-.023.053-.04.079-.06.029-.024.055-.05.088-.069h.001l9.61-5.533a.802.802 0 0 1 .8 0l9.61 5.533h.002c.032.02.059.045.088.068.026.02.055.038.078.06.028.029.048.062.072.094.017.024.04.045.054.071.023.04.036.082.052.124.008.023.022.044.028.068a.809.809 0 0 1 .028.209v20.559l8.008-4.611v-10.51c0-.07.01-.141.028-.208.007-.024.02-.045.028-.068.016-.042.03-.085.052-.124.015-.026.037-.047.054-.071.024-.032.044-.065.072-.093.023-.023.052-.04.078-.06.03-.024.056-.05.088-.069h.001l9.611-5.533a.801.801 0 0 1 .8 0l9.61 5.533c.034.02.06.045.09.068.025.02.054.038.077.06.028.029.048.062.072.094.018.024.04.045.054.071.023.039.036.082.052.124.009.023.022.044.028.068zm-1.574 10.718v-9.124l-3.363 1.936-4.646 2.675v9.124l8.01-4.611zm-9.61 16.505v-9.13l-4.57 2.61-13.05 7.448v9.216l17.62-10.144zM1.602 7.719v31.068L19.22 48.93v-9.214l-9.204-5.209-.003-.002-.004-.002c-.031-.018-.057-.044-.086-.066-.025-.02-.054-.036-.076-.058l-.002-.003c-.026-.025-.044-.056-.066-.084-.02-.027-.044-.05-.06-.078l-.001-.003c-.018-.03-.029-.066-.042-.1-.013-.03-.03-.058-.038-.09v-.001c-.01-.038-.012-.078-.016-.117-.004-.03-.012-.06-.012-.09v-.002-21.481L4.965 9.654 1.602 7.72zm8.81-5.994L2.405 6.334l8.005 4.609 8.006-4.61-8.006-4.608zm4.164 28.764l4.645-2.674V7.719l-3.363 1.936-4.646 2.675v20.096l3.364-1.937zM39.243 7.164l-8.006 4.609 8.006 4.609 8.005-4.61-8.005-4.608zm-.801 10.605l-4.646-2.675-3.363-1.936v9.124l4.645 2.674 3.364 1.937v-9.124zM20.02 38.33l11.743-6.704 5.87-3.35-8-4.606-9.211 5.303-8.395 4.833 7.993 4.524z" fill="#FF2D20" fill-rule="evenodd"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

9
public/icons/React Logo.svg Normal file
View File

@@ -0,0 +1,9 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-11.5 -10.23174 23 20.46348">
<title>React Logo</title>
<circle cx="0" cy="0" r="2.05" fill="#61dafb"/>
<g stroke="#61dafb" stroke-width="1" fill="none">
<ellipse rx="11" ry="4.2"/>
<ellipse rx="11" ry="4.2" transform="rotate(60)"/>
<ellipse rx="11" ry="4.2" transform="rotate(120)"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 365 B

2
public/icons/Vue.js.svg Normal file
View File

@@ -0,0 +1,2 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1" viewBox="0 0 261.76 226.69" xmlns="http://www.w3.org/2000/svg"><g transform="matrix(1.3333 0 0 -1.3333 -76.311 313.34)"><g transform="translate(178.06 235.01)"><path d="m0 0-22.669-39.264-22.669 39.264h-75.491l98.16-170.02 98.16 170.02z" fill="#41b883"/></g><g transform="translate(178.06 235.01)"><path d="m0 0-22.669-39.264-22.669 39.264h-36.227l58.896-102.01 58.896 102.01z" fill="#34495e"/></g></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 466 B

136
public/icons/ruby.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB