This is a Series of Posts where I'm sharing my journey (sort of) while I craft my Portfolio.
The gap between this post and last post is quite... huge. Definitely not because I was stuck what to do for this page.๐
Anyway, I finally jumped back and managed to come up with something for the page. For this One, I'm going to use an Image, introduce about myself, what tech I work with and few other things like Hobbies etc.
There really is not much going on here, neither there is any need to use component strategy. Just some markdown, with an image and few links. That's it.
Start
I decided to start with a very formal start, 'Hii!!!' stolen from a character from a game that I play.๐
Next up place my AI Generated Image using NightCafe. I used my own image to generate it.
<template>
....
<div class="flex gap-2">
<h1 class="mb-12">Hii!!!</h1>
<v-icon
name="md-wavinghand"
scale="2.5"
animation="float"
class="text-primary"
/>
</div>
<div
class="not-prose flex flex-col justify-center items-center relative gap-2"
>
<div
class="absolute top-0 bottom-0 right-0 left-0 mx-auto bg-secondary max-w-full h-auto aspect-square object-cover -rotate-3 md:max-w-sm"
></div>
<div
class="absolute top-0 bottom-0 right-0 left-0 mx-auto bg-primary max-w-full h-auto aspect-square object-cover rotate- md:max-w-sm"
></div>
<img
class="max-w-full h-auto aspect-square object-cover rotate-3 shadow-lg md:max-w-sm"
src="@/assets/image/myself.jpg"
alt="Hardeep Kumar AI genarted art"
/>
<span class="text-center italic"
>generated using
<a class="link link-primary" href="https://creator.nightcafe.studio"
>NightCafe</a
>
with my image as source
</span>
</div>
....
</template>
Sheesh, that AI literally made me quite handsome, eh.๐
Intro
Next up is some Information about what I use etc
<template>
....
<section class="font-serif prose-lg mt-6">
<h2>
I'm <span class="text-primary">Hardeep Kumar</span>, a 22 years old
Web Developer. Nice to meet you:
</h2>
<h3>My stacks looks as follow.</h3>
<ul class="font-bold">
<li>
I develop Full-Stack using
<span class="bg-secondary text-secondary-content px-1 rounded"
>Django</span
>.
</li>
<li>
I develop APIs with
<span class="bg-secondary text-secondary-content px-1 rounded"
>Django REST Framework</span
>
and
<span class="bg-accent text-accent-content px-1 rounded"
>FastAPI</span
>.
</li>
<li>
Vue I develop frontend using
<span class="bg-secondary text-secondary-content px-1 rounded"
>Vue</span
>
and
<span class="bg-accent text-accent-content px-1 rounded"
>Nuxt JS</span
>. Both version 2 and 3.
</li>
<li>
I also develop Full stack with
<span class="bg-secondary text-secondary-content px-1 rounded"
>Django REST Framework</span
>
and
<span class="bg-accent text-accent-content px-1 rounded"
>Vue, Nuxt</span
>. And also with
<span class="bg-secondary text-secondary-content px-1 rounded"
>FastAPI</span
>
and
<span class="bg-accent text-accent-content px-1 rounded"
>Vue, Nuxt</span
>.
</li>
</ul>
<h3>
As you can see, I deal primarily with
<span class="bg-primary text-primary-content px-1 rounded"
>Python</span
>
and
<span class="bg-primary text-primary-content px-1 rounded"
>JavaScript</span
>. But wait, I know
<span class="bg-primary text-primary-content px-1 rounded"
>TypeScript</span
>
as well and prefer to use it over JavaScript when possible.
</h3>
<h3>
Im also skilled at using
<span class="bg-primary text-primary-content px-1 rounded">
Git, GitHub, CI/CD and writing tests using Django's inbuilt Testing
Framework </span
>. Aside fron this, I'm very familiar with PaaS'
<span class="bg-primary text-primary-content px-1 rounded">
Railway, Heroku and Vercel</span
>. And ofcourse I've my fair share with
<span class="bg-primary text-primary-content px-1 rounded">AWS</span>
as well.
</h3>
<h3>
Oh did i mention I use
<span class="bg-primary text-primary-content px-1 rounded shadow"
>Garuda Linux (Arch)</span
>?
</h3>
</section>
....
</template>
Hobbies
Add a few Hobbies as well. I don't have many hobbies to count for though.
<template>
....
<h2 class="text-warning mb-4">Hobbies</h2>
<ul class="font-serif prose-lg font-bold mb-4">
<li>
Gaming, I play
<span class="bg-secondary text-secondary-content px-1 rounded"
>Genshin Impact</span
>
(no, I'm not that type of person),
<span class="bg-secondary text-secondary-content px-1 rounded"
>Honkai Impact</span
>
and
<span class="bg-secondary text-secondary-content px-1 rounded"
>Arknights</span
>
on and off.
</li>
<li>
I like to listen to wide variety of Music from genres like
<span class="bg-secondary text-secondary-content px-1 rounded"
>Chillstep</span
>,
<span class="bg-secondary text-secondary-content px-1 rounded"
>Melodic Dubstep</span
>,
<span class="bg-secondary text-secondary-content px-1 rounded"
>Orchestral</span
>
and
<span class="bg-secondary text-secondary-content px-1 rounded"
>Epic</span
>.
</li>
<li>
I also like to browse through various Technology related Arcticles.
</li>
</ul>
....
</template>
Contact
And finally a contact section with links to GitHub etc. For which I'll reuse the Home Social links component.
<template>
....
<h2 class="text-primary">
I'm not a type of person to indulge much in Conversations but I welcome
them.
</h2>
<HomeHeaderSocials />
....
</template>
Final words
And done. There is pretty much nothing to do here. At first, I was planning to do something using Vanilla-tilt. I started, but then got stuck because it didn't work out as I planned. Then I decided to use typed js to have the whole thing typed out. But it also was not satisfactory. And finally this is what I went with.
Cover Credits: Noah Silliman
Top comments (3)
Hehe, when will you have your final form? Other ideas in mind? ๐ค
Also, I wonder what did you meant there
If you need some help to figure out how to work with
vanilla-tiltor alike, maybe I can help. ๐ช๐ปFinal form no idea. I usually start with ideas and then the moment i touch keyboard, it all poofs.
About the typed js, yes i used it. I made few variations.
Thanks for the help but I've decided to drop the idea of using tilted js, for now. sometime later maybe.โค
Alright, perfect! ๐๐ป
Keep up the good work with posting on Dev. ๐ช๐ป