Crafting my Portfolio - About Page

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

Comments

[Konstantin BIFERT]

Hehe, when will you have your final form? Other ideas in mind? 🤗
Also, I wonder what did you meant there

And finally this is what I went with
Did you used vanilla-tilt/typed or nothing at all? Not sure that I got the last paragraph. 🙂

If you need some help to figure out how to work with vanilla-tilt or alike, maybe I can help. 💪🏻

[Hardeep Kumar]

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.

• I place a colored square in background then placed an image in it. Added tilt js to add the 3d tilted effect.
• another variation i did same as above but with clip path. Had to use postioning properties.
• 2 more where i added backdrop blur also had to use positioning properties.
• i also combined transform properties on hover.

Thanks for the help but I've decided to drop the idea of using tilted js, for now. sometime later maybe.❤

[Konstantin BIFERT]

Alright, perfect! 🙏🏻
Keep up the good work with posting on Dev. 💪🏻