initial commit
This commit is contained in:
37
pages/index.vue
Normal file
37
pages/index.vue
Normal file
@@ -0,0 +1,37 @@
|
||||
<template>
|
||||
<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]">
|
||||
<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"
|
||||
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>
|
||||
</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">
|
||||
<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
|
||||
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
|
||||
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>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user