add skill buttons and more
This commit is contained in:
@@ -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=JetBrains+Mono&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css?family=Inter&display=swap');
|
||||
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@@ -25,6 +26,10 @@ header {
|
||||
font-family: 'Red Hat Display', sans-serif;
|
||||
}
|
||||
|
||||
.font-inter {
|
||||
font-family: 'Inter';
|
||||
}
|
||||
|
||||
.love {
|
||||
text-decoration: underline;
|
||||
text-decoration-color: #EB0066;
|
||||
@@ -55,11 +60,15 @@ header {
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
|
||||
.love:hover::after, .love:active::after, .love:focus::after {
|
||||
.love:hover::after,
|
||||
.love:active::after,
|
||||
.love:focus::after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.love:hover::before, .love:active::before, .love:focus::before {
|
||||
.love:hover::before,
|
||||
.love:active::before,
|
||||
.love:focus::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@@ -110,3 +119,7 @@ header {
|
||||
.main-content {
|
||||
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
10
components/skillButton.vue
Normal 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
2
package-lock.json
generated
@@ -1,5 +1,5 @@
|
||||
{
|
||||
"name": "juls07.dev-rebuild",
|
||||
"name": "juls07.dev-v2",
|
||||
"lockfileVersion": 2,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
|
||||
@@ -2,34 +2,43 @@
|
||||
<div class="h-screen text-white">
|
||||
<header class="w-screen h-3/5 sm:h-2/5 md:h-3/5">
|
||||
<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
|
||||
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" />
|
||||
<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>
|
||||
<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>
|
||||
</header>
|
||||
<main class="grid grid-cols-12 gap-5">
|
||||
<section class="py-6 mb-4 lg:col-span-6 md:col-span-8 col-span-10">
|
||||
<main
|
||||
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>
|
||||
<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">
|
||||
Hi there, I'm juls07, I am 14 years old and I <span tabindex="1"
|
||||
class="love">love</span> web development. I first dabbled in web development
|
||||
<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" class="love">love</span> web
|
||||
development. I first dabbled in web development
|
||||
when I was ten, and here we are today! I mainly use
|
||||
<a class="text-rose-500 hover:underline visited:bg-rose-700"
|
||||
href="https://nuxtjs.org">NuxtJs</a> to build my websites since I absolutely
|
||||
<a class="text-rose-500 hover:underline visited:bg-rose-700" href="https://nuxtjs.org">NuxtJs</a> to
|
||||
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
|
||||
checkout my <a class="text-rose-500 hover:underline visited:bg-rose-700"
|
||||
href="https://github.com/juls0730">Github</a> and also my <a
|
||||
class="text-rose-500 hover:underline visited:bg-rose-700"
|
||||
href="https://twitter.com/julie4055_">Twitter</a>.
|
||||
</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>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
27
public/icons/JavaScript.svg
Normal file
27
public/icons/JavaScript.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
1
public/icons/Laravel.svg
Normal file
1
public/icons/Laravel.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 2.0 KiB |
9
public/icons/React Logo.svg
Normal file
9
public/icons/React Logo.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 365 B |
2
public/icons/Vue.js.svg
Normal file
2
public/icons/Vue.js.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 466 B |
136
public/icons/ruby.svg
Normal file
136
public/icons/ruby.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 19 KiB |
Reference in New Issue
Block a user