DEV Community: Hardeep Kumar

Crafting my Portfolio - Projects

Hardeep Kumar — Sun, 08 Jan 2023 17:50:28 +0000

A Portfolio is incomplete without projects.

Decisions Decisions

TLDR below

When I started to formulate the system(?) of Projects, the first thing that came to my mind was, "How would I manage the data for my Projects System?" I could just add the static data and call it a day. Or maybe I could use a Headless CMS like strapi etc. Or I could always write an API with python. After all, I'm a Backend developer first, spinning up a fully featured API or two is a matter of few hours for me.

So I thought and thought, First I laid out my needs. "I need an ecosystem so that I can manage the data for the projects. And also I need that ecosystem to be used for Blog system a well."

Without any 2nd thought, I thought of writing my own API backend. But with Heroku free tier gone and since Railway's free tier gives only 20 days of project uptime unless verified with a Credit Card (which I don't have), I backed off quickly. Next up, I thought of using a Headless CMS. I've been eyeing Contentful for a while now. And its community plan is quite good. So I thought of using it. But It was kinda overkill for something very small. Then I came back to the static way. But I don't want to have all the data layout out in various component and all.

Then I recalled about Content. It's a file-based Headless CMS which use files of extension .md, .yml, .csv and .json a data layer for the application. And its MDC syntax is cherry on top. So I came with a plan to use .json files to handle project data. Basically, I'll just create a projects section using Content, put my projects in .json files, use the Querying functionality of Content to fetch them and populate the Components as needed.

And for blog, I'll just use .md files, maybe even use MDC syntax too. Which will give me the static system (good for SEO), have control on each aspect of data and no need of external hosting. But wait, there is a little problem, Media files (images etc.). The biggest obstacle here is how to manage them? I could always just put all the images in source code, but over time, it will increase the source code size by a huge margin. So I thought of using a CDN like Cloudinary for this. But the media files are not going to get uploaded on their own to it, and then I'll need to reference the images in the Content as well. So the only option left is to manually upload images to Cloudinary and reference in the Content data wherever I need to.

To make it a bit easier, It would be great having something that will reference the media files on its own by just passing the filename, instead of passing the whole URL for the file. For this, I could use the Nuxt Image module that comes with support to show images from Cloudinary by just passing filename(partial path to file) and even allow further manipulation of images (Cloudinary features).

TLDR

I'm installing 2 more packages, named content and Image, from Nuxt ecosystem. Content to manage data for my projects section and Blogs too, in future and Image to easily show images in my site from Cloudinary.

Content Setup

I'll now follow the Installation guide for adding Content in Existing Project.

First add the package.

yarn add --dev @nuxt/content

Next, I'll add @nuxt/content to the modules section of nuxt.config.ts

....
modules: ['@nuxtjs/tailwindcss', '@nuxtjs/google-fonts', '@nuxt/content'],

content: {},
....

Create a new folder named content in project root.

mkdir content

Image Setup

I'll simply follow the installation instructions from here.

Note: Image for Nuxt 3 is still in experimenal state.

Install the package.

yarn add --dev @nuxt/image-edge

Now add @nuxt/image-edge to modules in nuxt.config.ts and set baseUrl for Cloudinary importing cloud name from .env file.

NUXT_CLOUDINARY_CLOUD_NAME=mycloudname

....
modules: [
  '@nuxtjs/tailwindcss',
  '@nuxtjs/google-fonts',
  '@nuxt/content',
  '@nuxt/image-edge',
],

// @nuxt/image-edge: https://v1.image.nuxtjs.org/get-started
image: {
  cloudinary: {
    baseURL: `https://res.cloudinary.com/${process.env.NUXT_CLOUDINARY_CLOUD_NAME}/image/upload/`,
  },
},
....

With this image setup, I only need to pass folder and filename with or without extension, since either way, quality and image format will be auto decided. e.g. <folder>/<filename(.ext)>

Project Content

Inside the content folder, I'll create a new folder named project where I'll put all my project related files. I decided to use json for my projects because I want to style stuff my way. This is how my content directory will look like.

content
└── project
    ├── 1.<file_name>.json
    ├── 2.<file_name>.json
    ├── 3.<file_name>.json
    ├── 4.<file_name>.json
    ├── 5.<file_name>.json

Noticed the numbers suffixed with .? That's how you tell the ordering in content. I'm going to use something like this in my json files for storing content for projects.

{
  "title": "",
  "description": "",
  "technology": [
    {
      "name": "",
      "link": ""
    }
  ],
  "github": "",
  "live": ""
}

I'll use conditionals to show UI for parts that might be empty in jdon files. Now I'll a new page for Project. I'm using directory like structure in case in future i wanna add screenshots and stuff so that I can route them to their separate pages.

npx nuxi add page project/index

Now add a component so that I can reuse and customize the way I want each item to look.

npx nuxi add component Project/Item

Project Logic

In order to display projects list, I want to get all of them, sorted in a specific order. Then I'll iterate over them and style data using my custom component. For listing data, I'm ContentList component. This is the code my project page have.

<script lang="ts" setup>
import type { QueryBuilderParams } from '@nuxt/content/dist/runtime/types';

const query: QueryBuilderParams = {
  path: '/project/',
  sort: [{ _id: -1, $numeric: true }],
};
</script>

<template>
  <main class="container mx-auto px-4">
    <section
      class="prose max-w-none prose-headings:mt-2 prose-headings:mb-2 prose-p:font-serif prose-p:prose-2xl"
    >
      <ContentList :query="query">
        <template v-slot="{ list }">
          <ProjectItem :projects="list" />
        </template>

        <template #not-found>
          <p>No projects found.</p>
        </template>
      </ContentList>
    </section>
  </main>
</template>

<style scoped></style>

Now for the component named ProjectItem, I'll just stylize the data passed by projects prop. But first I'll add types for the Project data. And no it's not just normal type, I'll first have to extend the ParsedContent type and then add my own data to it.

// ProjectData.d.ts
import type { ParsedContent } from '@nuxt/content/dist/runtime/types';

export interface TechnologyTypes {
  name: string;
  link: string;
}

export interface ProjectsDataTypes extends ParsedContent {
  technology: TechnologyTypes[];
  github: string;
  live: string;
}

Now to the Component. Just some basic Vue code. I'll also add in a small function to randomize the button colors for technology.

<script lang="ts" setup>
import { ProjectsDataTypes } from '../../types/ProjectData';

const props = defineProps<{
  projects: [ProjectsDataTypes];
}>();

function setRandomBtnColor() {
  const btnColors = [
    'btn-primary',
    'btn-secondary',
    'btn-accent',
    'btn-neutral',
    'btn-info',
    'btn-success',
    'btn-warning',
    'btn-error',
    'btn-base-100',
  ];
  return btnColors[Math.floor(Math.random() * btnColors.length)];
}
</script>

<template>
  <div class="flex flex-col gap-28 relative py-20">
    <!-- center line -->
    <div
      class="absolute bg-primary w-0.5 top-0 bottom-0 left-0 right-0 m-auto"
    ></div>

    <!-- card -->
    <template v-for="item in props.projects" :key="item._path">
      <div
        class="card lg:card-side bg-base-100 shadow-xl border border-primary"
      >
        <!-- rounded circle on top -->
        <div
          class="bg-primary w-4 h-4 absolute left-0 right-0 mx-auto -mt-6 rounded-full"
        ></div>

        <!-- content -->
        <div class="card-body">
          <h1>{{ item.title }}</h1>
          <p class="whitespace-pre-line" v-html="item.description"></p>

          <h2>Technology</h2>
          <template v-if="item.technology.length != 0">
            <div class="flex gap-2 flex-wrap">
              <a
                v-for="tech in item.technology"
                class="btn btn-sm"
                :class="setRandomBtnColor()"
                :href="tech.link"
                target="_blank"
              >
                {{ tech.name }}
              </a>
            </div>
          </template>
          <template v-else><p>No Technology Found</p></template>

          <div class="card-actions justify-start mt-4">
            <a
              v-if="item.github.length"
              :href="`https://github.com/${item.github}`"
              target="_blank"
            >
              <v-icon
                name="ri-github-fill"
                scale="1.2"
                class="hover:text-primary"
              />
            </a>

            <a v-if="item.live.length" :href="item.live" target="_blank">
              <v-icon
                name="ri-external-link-line"
                scale="1.2"
                class="hover:text-primary"
              />
            </a>
          </div>
        </div>
      </div>
    </template>
  </div>
</template>

<style scoped></style>

Results

Closing Thoughts

I think I like it. Good enough.
It's been more than a month since I last wrote!! Sheesh. I was busy with my Internship so couldnt even look at my portfolio. Let's hope I'll be able to squeeze some time out of my schedule. Anyways, coming backand looking at my site, I feel a bit cringed looking at fonts. Hmmm... might change them to my all time favourite Poppins.

Cover Credits: Headway

Crafting my Portfolio - Meta Tags for SEO

Hardeep Kumar — Wed, 30 Nov 2022 08:58:02 +0000

This is a Series of Posts where I'm sharing my journey (sort of) while I craft my Portfolio.

Writing this post reminds me of my days with WordPress. I still remember Rank Math was the new kid in the town and I decided to use it because its name sounded cool. Turned out it taught me a few things about SEO. Anyway, The whole game of SEO starts from Meta Tags. Without Meta Tags, there won't be enough information for search engine to act on, causing its visibility to drop. Moreover, say you shared your cool looking website on a social media platform or WhatsApp'd your friend. It's just going to be a link with nothing to say about it.

Now with Nuxt, The good thing is it comes with its inbuilt SEO system. It makes use of vueue/head under the hood to provide an easy-to-access API for manipulating the Meta Tags and other SEO related information in head. More [here].(https://nuxt.com/docs/getting-started/seo-meta)

Title

Now, the first thing I want to do is set a title for my site in Meta Tags. I want it to be like ' | Hardeep Kumar' or just 'Hardeep Kumar' when there is no <page-specified-title>. To do this, I can use titleTemplate. Which could be something like:

useHead({
  titleTemplate: (titleChunk) => {
    return titleChunk ? `${titleChunk} | Hardeep Kumar` : 'Hardeep Kumar';
  },
});

But there is a catch, nuxt.config does not allow functions in it. And it could be bother to mention this in every single page. Also, the later part is supposed to act like a Default or Fallback. Hmm.. Now what? Well, that where plugins system comes in. I can create a Plugin named title and add this logic there, which will be implemented on every page. Also, Nuxt devs mentioned this approach here.

npx nuxi add plugin title

export default defineNuxtPlugin(() => {
  useHead({
    titleTemplate: (titleChunk) => {
      return titleChunk ? `${titleChunk} | Hardeep Kumar` : 'Hardeep Kumar';
    },
  });
});

This will take care of Title.

Find Meta Tags

Title is done, Next up I have to add other relevant Meta Tags to the Pages. But what are those tags going to be? Well One can certainly Google up the answer to that, but it will a bit of trouble to open many websites, write down various tags, then use them etc. To ease the process, I used a site named metaSEO. (I once saw their site https://gprm.itsvg.in in here.)

The process is quite straight forward. I first add my site address.

Then I proceed to add needed Information. It also shows Preview Cards.

And finally, press generate to get all the Meta Tags with data prefilled. And these are exactly the tags that I was looking for.

Implement in Nuxt

With the Meta Tags at hand, next I have to implement in my Application. I'll divide few Tags as default, that will be set by default regardless of page. Like copyright... wait... It's just one tag...

Anyway, time to implement them. In various pages, I'll make use of useHead composable to set Meta's data. But yes the syntax of setting tags is a bit different, we can't just set tags in HTML format, It's JS(TS) we're writing here, it's going to be different.

# nuxt.config.ts
....
app: {
  head: {
    meta: [{ name: 'copyright', content: 'Hardeep Kumar' }],
  },
},
....

On Individual Page, Index Here. I also went ahead and add one more tag og:image:alt for embed image alt text.

<script lang="ts" setup>
useHead({
  meta: [
    {
      name: 'description',
      content:
        "Hi! I'm Hardeep Kumar, a Web Developer. I work with Django. Django REST Framework, FastAPI, Vue JS and Nuxt JS.",
    },
    {
      name: 'keywords',
      content:
        'Hardeep Kumar, wrench1815, portfolio, Hardeep, website, Web Developer, Nuxt Developer, Vue JS Developer, Django Developer, FastAPI Developer',
    },

    // open graph
    { property: 'og:type', content: 'website' },
    { property: 'og:url', content: 'https://hardeepkumar.in' },
    { property: 'og:title', content: 'Hardeep Kumar' },
    {
      property: 'og:description',
      content:
        "Hi! I'm Hardeep Kumar, a Web Developer. I work with Django. Django REST Framework, FastAPI, Vue JS and Nuxt JS.",
    },
    {
      property: 'og:image',
      content:
        'https://res.cloudinary.com/dnzbu6wqv/image/upload/v1669702340/myself/94FKLoemnSP7ikhmOunf--3--2fao5_4x_at5csh.jpg',
    },
    {
      property: 'og:image:alt',
      content: 'Hardeep Kumar AI generated art image',
    },

    // twitter
    { property: 'twitter:card', content: 'summary_large_image' },
    { property: 'twitter:url', content: 'https://hardeepkumar.in' },
    { property: 'twitter:title', content: 'Hardeep Kumar' },
    {
      property: 'twitter:description',
      content:
        "Hi! I'm Hardeep Kumar, a Web Developer. I work with Django. Django REST Framework, FastAPI, Vue JS and Nuxt JS.",
    },
    {
      property: 'twitter:image',
      content:
        'https://res.cloudinary.com/dnzbu6wqv/image/upload/v1669702340/myself/94FKLoemnSP7ikhmOunf--3--2fao5_4x_at5csh.jpg',
    },
  ],
});
</script>

Meta tags in Head of Index.

No Meta tags for about page except title and copyright. Title being set by plugin and copyright being set via nuxt.config.

Now for About Page.

....
useHead({
  title: 'About',

  meta: [
    {
      name: 'description',
      content:
        "Hi! I'm Hardeep Kumar, a Web Developer. I work with Django. Django REST Framework, FastAPI, Vue JS and Nuxt JS.",
    },
    {
      name: 'keywords',
      content:
        'Hardeep Kumar, wrench1815, portfolio, Hardeep, website, Web Developer, Nuxt Developer, Vue JS Developer, Django Developer, FastAPI Developer',
    },

    // open graph
    { property: 'og:type', content: 'website' },
    { property: 'og:url', content: 'https://hardeepkumar.in' },
    { property: 'og:title', content: 'Hardeep Kumar' },
    {
      property: 'og:description',
      content:
        "Hi! I'm Hardeep Kumar, a Web Developer. I work with Django. Django REST Framework, FastAPI, Vue JS and Nuxt JS.",
    },
    {
      property: 'og:image',
      content:
        'https://res.cloudinary.com/dnzbu6wqv/image/upload/v1669702340/myself/94FKLoemnSP7ikhmOunf--3--2fao5_4x_at5csh.jpg',
    },
    {
      property: 'og:image:alt',
      content: 'Hardeep Kumar AI generated art image',
    },

    // twitter
    { property: 'twitter:card', content: 'summary_large_image' },
    { property: 'twitter:url', content: 'https://hardeepkumar.in' },
    { property: 'twitter:title', content: 'Hardeep Kumar' },
    {
      property: 'twitter:description',
      content:
        "Hi! I'm Hardeep Kumar, a Web Developer. I work with Django. Django REST Framework, FastAPI, Vue JS and Nuxt JS.",
    },
    {
      property: 'twitter:image',
      content:
        'https://res.cloudinary.com/dnzbu6wqv/image/upload/v1669702340/myself/94FKLoemnSP7ikhmOunf--3--2fao5_4x_at5csh.jpg',
    },
  ],
});
....

And now About also have its Meta data.

Update

SEO Card Previews

~~The address being used is Preview deployment.~~

Note: Twitter has disabled previews in https://cards-dev.twitter.com/validator for the time bieng.

Twitter Card Preview

Facebook Card Preview

Dev.to Embed preview

I might need to do something about the image... maybe... or maybe not...

Hardeep Kumar

Hi! I'm Hardeep Kumar, a Web Developer. I work with Django. Django REST Framework, FastAPI, Vue JS and Nuxt JS.

hardeepkumar.in

Closing Thoughts

I like the setup so far. It's good for now, but can be improved. I could definitely add a composable to set the meta data by just passing an object with content values. Which I might do, but I still have to run a few tests on how it will behave and how the current setup is behaving on deploy. Or maybe I could have used components instead.
Do tell me for any mistakes or improvements.

Cover Credits: Stephen Phillips - Hostreviews.co.uk

Crafting my Portfolio - About Page

Hardeep Kumar — Tue, 29 Nov 2022 06:06:20 +0000

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

Crafting my Portfolio - Fix Theme switching

Hardeep Kumar — Mon, 07 Nov 2022 11:58:19 +0000

This is a Series of Posts where I'm sharing my journey (sort of) while I craft my Portfolio.

I created the Homepage for my portfolio. (It ain't much, but it's honest work) But, I'm also noticing some bugs in theme switching, so I'll fix them as well.

Theme-o-Fix

TBH, I didn't notice that the theme swapping functionality had few strange bugs. Which are not much of a deal, but since I saw them, It's itching me to fix them. I'll try my best to explain the bugs.

The Problem

When the device preferred theme is dark (prefers-color-scheme="dark"), then the theme would automatically switch to dracula but it does not affect the values in local storage, which means the toggle icons are not correctly synced.
When the theme is set to be pastel in local storage, then the icons will go out of sync.

These bugs are actually not due to theme-change package, but rather because it doesn't provide the behavior that I want. Also, showing the issue is quite not possible since It's rather way too specific.

The preferred functionality is to have sun icon in toggle when the dracula theme is active and moon icon when pastel theme is active. And also I want to track themes correctly when having prefers-color-scheme or so I wanted to, but I don't want to do that functionality now. Instead, I want to manually manage the theme, having Dark by default and able to swap it with light if needed.

Solution

I was using theme-change to handle my theme swapping, but I think It will be better to implement it on my on.
The functionality I want to have for theme swapping now is

Set theme as per prefers-color
Being able to swap between Dark and Light
Track selected theme in local Storage

Theme switching, revisited

First, I'd like to separate the base Markup in a component to better work with it in isolation and have all the UI parts that I want to have.

npx nuxi add component NavBar/ThemeToggle

<script lang="ts" setup></script>

<template>
  <div
    class="btn btn-circle bg-transparent border-none loading disabled text-primary"
  ></div>

  <div
    class="btn-circle swap swap-rotate"
    data-toggle-theme="pastel,dracula"
    data-act-class="swap-active"
  >
    <!-- sun icon -->
    <v-icon name="ri-sun-fill" class="swap-on fill-primary" scale="1.2" />

    <!-- moon icon -->
    <v-icon name="ri-moon-fill" class="swap-off fill-primary" scale="1.2" />
  </div>
</template>

<style scoped></style>

Resulting in

The Themes are swapped using the theme-data attribute on the HTML element, which I'll need to keep in mind while going forward. The theme swapping functionality will be divided in 3 parts:

Initialization
Toggling
Monitoring

Initialization

For the Initialization part, First I want to check the prefers-color to find the user device preference. Which will be either dark or light/unset.

If dark, then check if there is any theme entry in LocalStorage. If there is, get its value.
- If its value is dracula, set dracula theme.
- If its value is pastel, set pastel theme.
- if its value is not acceptable or not set, setpastel theme.
If light or unset, then check if there is any theme entry in LocalStorage. If there is, get its value.
- If its value is dracula, set dracula theme.
- If its value is pastel, set pastel theme.
- if its value is not acceptable or not set, setpastel

After considering all possible edge cases and possibilities, The Initialization phase code looks something like this (thoroughly tested it)

<script lang="ts" setup>
const theme = ref('pastel');
const loading = ref(true);

function initThemeCheck(
  ele: HTMLHtmlElement,
  prefersModeDark: MediaQueryList,
  localTheme: string
) {
  if (prefersModeDark.matches) {
    if (localTheme == 'dracula') {
      localStorage.setItem('theme', 'dracula');
      ele.setAttribute('data-theme', 'dracula');
      theme.value = 'dracula';
    } else if (localTheme == 'pastel') {
      ele.setAttribute('data-theme', 'pastel');
      theme.value = 'pastel';
    } else {
      localStorage.setItem('theme', 'dracula');
      ele.setAttribute('data-theme', 'dracula');
      theme.value = 'dracula';
    }
  } else {
    if (localTheme == 'dracula') {
      ele.setAttribute('data-theme', 'dracula');
      theme.value = 'dracula';
    } else if (localTheme == 'pastel') {
      ele.setAttribute('data-theme', 'pastel');
      theme.value = 'pastel';
    } else {
      localStorage.setItem('theme', 'pastel');
      ele.setAttribute('data-theme', 'pastel');
      theme.value = 'pastel';
    }
  }
}

onMounted(() => {
  const ele = document.querySelector('html');
  const prefersModeDark = window.matchMedia('(prefers-color-scheme: dark)');
  const localTheme = localStorage.getItem('theme');

  initThemeCheck(ele, prefersModeDark, localTheme);

  loading.value = false;
});
</script>

Toggling

This part will take care of toggling the theme using a button like functionality, or let's say a click. On click, it will change to pastel if dracula and vice versa. In addition, It will also update theme item in LocalStorage with the new selected theme. And will also change the value of data-theme attribute on HTML element.

<script lang="ts" setup>
....
function swapTheme() {
  const ele = document.querySelector('html');

  if (theme.value == 'dracula') {
    localStorage.setItem('theme', 'pastel');
    ele.setAttribute('data-theme', 'pastel');
    theme.value = 'pastel';
  } else {
    localStorage.setItem('theme', 'dracula');
    ele.setAttribute('data-theme', 'dracula');
    theme.value = 'dracula';
  }
}
....
</script>

<template>
  <div
    class="btn btn-circle bg-transparent border-none loading disabled text-primary"
    v-if="loading"
  ></div>

  <div
    class="btn-circle swap swap-rotate"
    :class="{
      'swap-active': theme == 'dracula',
      '': theme == 'pastel',
    }"
    @click="swapTheme"
    v-else
  >
    <!-- sun icon -->
    <v-icon name="ri-sun-fill" class="swap-on fill-primary" scale="1.2" />

    <!-- moon icon -->
    <v-icon name="ri-moon-fill" class="swap-off fill-primary" scale="1.2" />
  </div>
</template>

Monitoring

I also want to monitor for changes across multiple tabs, manual clearance of LocalStorage data and changing prefers-color. For that, I'll be adding event listener on LocalStorage and prefers-color and update theme data accordingly.

<script lang="ts" setup>
onMounted(() => {
....
  prefersModeDark.addEventListener('change', () => {
    if (prefersModeDark.matches) {
      localStorage.setItem('theme', 'dracula');
      ele.setAttribute('data-theme', 'dracula');
      theme.value = 'dracula';
    } else {
      localStorage.setItem('theme', 'pastel');
      ele.setAttribute('data-theme', 'pastel');
      theme.value = 'pastel';
    }
  });

  window.onstorage = () => {
    const currentLocalTheme = localStorage.getItem('theme');

    if (currentLocalTheme == 'dracula') {
      localStorage.setItem('theme', 'dracula');
      ele.setAttribute('data-theme', 'dracula');
      theme.value = 'dracula';
    } else if (currentLocalTheme == 'pastel') {
      localStorage.setItem('theme', 'pastel');
      ele.setAttribute('data-theme', 'pastel');
      theme.value = 'pastel';
    } else {
      localStorage.setItem('theme', 'pastel');
      ele.setAttribute('data-theme', 'pastel');
      theme.value = 'pastel';
    }
  };
});
</script>

This takes care of all the functionality needed for theme swapping. Now time to test.

Test 1

Test 2

Test 3

Test 4

Everything's working as expected. All tests passed.

Deployment

I already had an old design of my portfolio, which was deployed to vercel and also had my custom domain mapped, all I have to do is merge the branch into main and vercel will take care of the rest. Here is the link to the deployed site https://hardeepkumar.in

Cover Credits: Cookie the Pom

Crafting my Portfolio - Home Page

Hardeep Kumar — Tue, 01 Nov 2022 12:51:25 +0000

This is a Series of Posts where I'm sharing my journey (sort of) while I craft my Portfolio.

Festivities are over now. Time to get back to coding. Now then, It's time to add a Home Page. This will be the front facing page for my Portfolio, so gotta make it speak for itself about me.

The Plan

Since it's the landing page of my portfolio, I'll need to tell people about whom this site is for, what the person does. For Design, I'm thinking of a heading that tells about the main things that I do. Then followed by few Social handles and then my Image as well. (which I won't mention in this post, but add it later. It's kinda embarrassing 😅)

'Home Sweet Home'

To start off, I'll add a page for Home, which is of course as you have guessed.. named index.vue. Hmm? What? No, It's not named home.vue. Also, it's already added in project during creation, so I can skip that part. Instead, I'll add a page for about since currently it's being an eyesore to have both routes in active state.😑

To add a new page, i can just add a new file named about.vue in pages folder. Or instead, I can use nuxi to create it and add the base boiler, which is what I'm going to do.

npx nuxi add page about

Ignore the zsh: correct 'page' to 'pages' [nyae]? n part, that's just zsh autocorrection kicking in.

<script lang="ts" setup></script>

<template>
  <div>
    Page: foo
  </div>
</template>

<style scoped></style>

Update the navigation link.

<li>
  <NuxtLink to="/about" active-class="active">About</NuxtLink>
</li>

Annnd done. * cricket noises *

The Heading

First, I'll add a heading. The heading will be my name and the stuff that I'm good at. It'll be - "Myself Hardeep Kumar and I develop ". Quite... remarkable right? I know! ahem
Now about that , I'd like to have that Typewriter effect there. Which will loop over my 'stuff' that I want to show there. I'll think about it a bit later. I'll start by adding only One line and see how it goes on.

First, I'll add a Component for Home. I'll be following the file system structure, or so what I call it. Basically a Folder with index as it root, and it will further have all its related components in it. Where the root file will be the main component which will be used.

This will create a component at components/Home/Header/index.vue. Depending on need, I'll have all related Header components in that folder and then return only one after combining Header components in index

npx nuxi add component Home/Header/index

Next, I'll add the text that I want to use for now. And I'll switch to light mode for UI Designing.

# components/Header/Home/index.vue
<script lang="ts" setup></script>

<template>
  <section class="container px-4 mx-auto">
    <div class="prose">
      <h1 class="font-medium">
        Myself Hardeep Kumar and I develop
        <span class="text-primary">Vue/Nuxt</span>
      </h1>
    </div>
  </section>
</template>

<style scoped></style>

# pages/index.vue
....
<HomeHeader />
....

Heh. Not bad. It's taking some shape.

The image

Next I want to have an image of mine there too. I'd like to show it on the right side on tablet and devices bigger than tablet, and at the bottom on devices smaller than Mobile.

For the layout, I'm going to use Hero component from Daisy UI, then further refactor it as per my need. I'm going to use this image from unsplash by
Daniel Lincoln

# components/Home/Header/index.vue
....
<template>
  <section class="container px-4 mx-auto">
    <div class="hero my-">
      <div class="hero-content flex-col-reverse md:flex-row-reverse">
        <img
          src="@/assets/image/person.jpg"
          class="rounded-lg shadow-2xl md:max-w-sm"
        />
        <div class="prose">
          <h1 class="font-medium">
            Myself Hardeep Kumar and I develop
            <span class="text-primary">Vue/Nuxt</span>
          </h1>
          <!-- <p class="py-6"></p> -->
        </div>
      </div>
    </div>
  </section>
</template>
....

Desktop

Mobile

Social Handles

Now, I'll add a few Social Handles so that one can reach out. (which will never going to happen anyway) For handles, I'll be choosing Twitter, Discord, GitHub and Dev.to. Although, dev.to doesn't actually count as a Social Handle, but who cares.

# components/Home/Header.index.vue
...
<div class="prose">
  <h1 class="font-medium">
    Myself Hardeep Kumar and I develop
    <span class="text-primary">Vue/Nuxt</span>
  </h1>
  <h3 class="font-medium text-2xl text-center md:text-start">
    Connect on
  </h3>
  <div
    class="flex flex-row gap-3 flex-wrap justify-center md:justify-start"
  >
    <!-- Start:Github -->
    <a href="https://github.com/wrench1815" target="_blank">
      <OhVueIcon name="ri-github-fill" /> @wrench1815</a
    >
    <!-- End:Github -->

    <!-- Start:Discord -->
    <a
      href="https://discordapp.com/users/457360898122711041"
      target="_blank"
    >
      <OhVueIcon name="si-discord" /> @wrench1815</a
    >
    <!-- End:Discord -->

    <!-- Start:Twitter -->
    <a href="https://twitter.com/wrench1815" target="_blank">
      <OhVueIcon name="ri-twitter-fill" /> @wrench1815</a
    >
    <!-- End:Twitter -->

    <!-- Start:Dev.to -->
    <a href="https://github.com/wrench1815" target="_blank">
      <OhVueIcon name="md-logodev" /> @wrench1815</a
    >
    <!-- End:Dev.to -->
  </div>
</div>
....

Results in

Link Styles

Great. So now I have a layout the way I wanted it to be. Next up is further styling to add that flair that I want to. I'll start by changing the link styles, an underline on hover with the text color changed to another color, which I decided to be error color since it fits nicely on both light and Dark mode.

# components/Home/Header/index.vue
...
<div
  class="flex flex-row gap-3 flex-wrap justify-center md:justify-start"
>
  <!-- Start:Github -->
  <a
    href="https://github.com/wrench1815"
    target="_blank"
    class="after:content-[''] after:block after:w-0 after:h-[0.06rem] after:bg-error after:transition-all after:duration-300 after:ease-in-out hover:text-error hover:after:w-full hover:after:bg-error no-underline"
  >
    <OhVueIcon name="ri-github-fill" /> @wrench1815</a
  >
  <!-- End:Github -->

  <!-- Start:Discord -->
  <a
    href="https://discordapp.com/users/457360898122711041"
    target="_blank"
    class="after:content-[''] after:block after:w-0 after:h-[0.06rem] after:bg-error after:transition-all after:duration-300 after:ease-in-out hover:text-error hover:after:w-full hover:after:bg-error no-underline"
  >
    <OhVueIcon name="si-discord" /> @wrench1815</a
  >
  <!-- End:Discord -->

  <!-- Start:Twitter -->
  <a
    href="https://twitter.com/wrench1815"
    target="_blank"
    class="after:content-[''] after:block after:w-0 after:h-[0.06rem] after:bg-error after:transition-all after:duration-300 after:ease-in-out hover:text-error hover:after:w-full hover:after:bg-error no-underline"
  >
    <OhVueIcon name="ri-twitter-fill" /> @wrench1815</a
  >
  <!-- End:Twitter -->

  <!-- Start:Dev.to -->
  <a
    href="https://github.com/wrench1815"
    target="_blank"
    class="after:content-[''] after:block after:w-0 after:h-[0.06rem] after:bg-error after:transition-all after:duration-300 after:ease-in-out hover:text-error hover:after:w-full hover:after:bg-error no-underline"
  >
    <OhVueIcon name="md-logodev" /> @wrench1815</a
  >
  <!-- End:Dev.to -->
</div>
...

Nice Links.

Hold up. What is that stuff in class? It's way to much. Right? Well.. It can be reduced. The ways it can be done is by

Extracting Classes with @apply
Creating components and looping over it

Since I'm using a Frontend Framework, I'm going with the latter option. I could go with the First option, but that kinda kills the purpose of using a Frontend Framework. No doubt, both option are 100% valid, but I prefer to use the 2nd option.

First I'll create an option with the data for my Links like my username, address etc. Then I'll create a component and loop over it while passing the link data. While I'm at it, I'll also separate all the Social links in its separate component.

Very simple structure. I won't nest link in Socials because there's only one component.

npx nuxi add component Home/Header/Socials
npx nuxi add component Home/Header/Link

# components/Home/Header/Socials.vue
<script lang="ts" setup>
import { addIcons } from 'oh-vue-icons';
import {
  RiGithubFill,
  SiDiscord,
  RiTwitterFill,
  MdLogodev,
} from 'oh-vue-icons/icons';

addIcons(RiGithubFill, SiDiscord, RiTwitterFill, MdLogodev);

const socialLinks = [
  {
    username: 'wrench1815',
    link: 'https://github.com/wrench1815',
    icon: 'ri-github-fill',
  },
  {
    username: 'wrench1815',
    link: 'https://discordapp.com/users/457360898122711041',
    icon: 'si-discord',
  },
  {
    username: 'wrench1815',
    link: 'https://twitter.com/wrench1815',
    icon: 'ri-twitter-fill',
  },
  {
    username: 'wrench1815',
    link: 'https://dev.to/wrench1815',
    icon: 'md-logodev',
  },
];
</script>

<template>
  <h3 class="font-medium text-2xl text-center md:text-start">Connect on</h3>
  <div class="flex flex-row gap-3 flex-wrap justify-center md:justify-start">
    <HomeHeaderLink v-for="(item, i) in socialLinks" :key="i" :social="item" />
  </div>
</template>

<style scoped></style>

# components/Home/Header/link.vue
<script lang="ts" setup>
const props = defineProps<{
  social: {
    link: string;
    username: string;
    icon: string;
  };
}>();
</script>

<template>
  <!-- Start:Social Link -->
  <a
    :href="social.link"
    target="_blank"
    class="after:content-[''] after:block after:w-0 after:h-[0.06rem] after:bg-error after:transition-all after:duration-300 after:ease-in-out hover:text-error hover:after:w-full hover:after:bg-error no-underline"
  >
    <v-icon :name="social.icon" /> @{{ social.username }}</a
  >
  <!-- End:Social Link -->
</template>

<style scoped></style>

# components/Home/Header/index.vue
....
<HomeHeaderSocials />
....

And the result is still same regardless.

oh-vue-icons plugin

While I'm at it, I believe it is a good time to handle the oh-vue-icons a bit different way. I'll create a plugin for them named, ovi and then register it in Nuxt. Then use it to register the component and all the icons that I'll be using, thus preventing duplicated imports in different pages.

npx nuxi add plugin ovi

# plugins/ovi.ts
import { OhVueIcon, addIcons } from 'oh-vue-icons';
import {
  RiGithubFill,
  RiTwitterFill,
  SiDevdotto,
  RiCloseFill,
  RiMenu2Fill,
  RiSunFill,
  RiMoonFill,
} from 'oh-vue-icons/icons';

export default defineNuxtPlugin((nuxtApp) => {
  // register icons
  addIcons(
    RiGithubFill,
    RiTwitterFill,
    SiDevdotto,
    RiCloseFill,
    RiMenu2Fill,
    RiSunFill,
    RiMoonFill
  );

  // register Component
  nuxtApp.vueApp.component('v-icon', OhVueIcon);
});

# nuxt.config.ts
....
build: {
  transpile: ["oh-vue-icons"]
}
....
vite: {
  optimizeDeps: {
    exclude: ['oh-vue-icons/icons'],
  },
},
....

The way Nuxt 3 works, I dont need to register the plugins in nuxt.config.ts as in Nuxt 2. They are automatically imported. But I do need to tell nuxt to transpile the package as per oh-vue-icons docs. Then I'll replace all OhVueIcon refernces in .vue files with v-icon. And since nuxt 3 use vite under the hood, I'll add some config related to it as well as in oh-vue-icons docs.

Final Touches

Now I'll take a look at Image. It's looking a bit too plain. Hmm... I could use blobs to add a bit of flare to it. Lets see. I'll start by separating the Image out into a component. Then add a border radius on image in the form of a Blob.

Blob looks good.

Now, I'll add one more on the outside with primary color.

Add a bit of gap between the image and outer blob.

And finally, I'll animate them both with outer having a bit of delay.

# component/Home/HeaderImage.vue
<script lang="ts" setup></script>

<template>
  <div class="border-solid border-4 blob blob-anim-delay border-primary">
    <img
      src="@/assets/image/person.jpg"
      class="rounded-lg shadow-2xl border-transparent border-solid border-2 md:max-w-sm blob blob-anim"
    />
  </div>
</template>

<style scoped>
.blob-anim {
  border-radius: 30% 70% 70% 30%/30% 30% 70% 70%;
  animation: morphing 10s infinite;
}

.blob {
  border-radius: 30% 70% 70% 30%/30% 30% 70% 70%;
}

.blob-anim-delay {
  border-radius: 30% 70% 70% 30%/30% 30% 70% 70%;
  animation: morphing 10s infinite 0.5s;
}

@keyframes morphing {
  0% {
    border-radius: 30% 70% 70% 30%/30% 30% 70% 70%;
  }
  25% {
    border-radius: 58% 42% 75% 25%/76% 46% 54% 24%;
  }
  50% {
    border-radius: 50% 50% 33% 67%/55% 27% 73% 45%;
  }
  75% {
    border-radius: 33% 67% 58% 42%/63% 68% 32% 37%;
  }
  100% {
    border-radius: 30% 70% 70% 30%/30% 30% 70% 70%;
  }
}
</style>

The final thing that i want to do is to have a typewriter effect to cyc;e through various 'texts' on the heading, to tell the visitor what things I can do. Now for that I could use css combine with js to have what I need. But there i no need to re-invent the wheel. It won't be a good idea to re-invent wheels for your car right? I'm just going to use typed js. I could actually use the vue implementation but the thing is, it's says nothing about vue3 and also it's quite old.

npx nuxi add component Home/Header/AnimText

# components/Home/Header/AnimText.vue
<script lang="ts" setup>
import Typed from 'typed.js';

const typing = ref(null);
const loading = ref(true);

onMounted(() => {
  loading.value = false;

  new Typed(typing.value, {
    strings: ['Full Stack', 'Backend', 'APIs', 'Vue/Nuxt'],
    typeSpeed: 100,
    backSpeed: 30,
    backDelay: 1000,
    loop: true,
  });
});
</script>

<template>
  <h1 class="font-medium">
    Myself Hardeep Kumar and I develop
    <span class="text-primary" v-if="loading">Vue/Nuxt</span>
    <span class="text-primary" ref="typing"></span>
  </h1>
</template>

<style scoped></style>

And with this. the Home page for my Portfolio is finished, for now atleast. When I add more stuff in there like Blog, resume etc, I'll add more section in here but till then, this seems good enough.

Cover Credits: Joe Ng

Crafting my Portfolio - Nav and Footer

Hardeep Kumar — Tue, 18 Oct 2022 20:55:12 +0000

This is a Series of Posts where I'm sharing my journey (sort of) while I craft my Portfolio.

Now, since I prepared base in previous post, Time to add a layout, as per Nuxt terms. It is going to be the base template, sort of, that will hold the UI elements that are going to be shared by all the pages and the UI elements that are going to be injected into it. The shared UI element won't change much and even if they do, that won't be big of a change. The injected UI elements will change, like on Home, About etc. they'll have different content.

Layout

Hmm... as per Nuxt Docs on Layouts, they say

If you only have a single layout in your application, we recommend using app.vue instead.

Now currently this portfolio of mine is gonna have only 1 layout, yes. This is the base one to view all pages, sharing the Nav, Footer etc. But going further, I might want to add a Blog in there with a bit different layout. Like for Blog with a sidebar section showing recent posts. So I want to be prepared for it, and that's why I'll go with layouts approach instead of app.vue approach.

Now the first thing to do is add a layout, which I will name Default and add an index page, the entry page of my Portfolio and delete the initial app.vue page since I'm gonna use pages now. To do that, I'll use nuxi to generate a layout and page for me.

npx nuxi add layout default

which will give me

<script lang="ts" setup></script>

<template>
  <div>
    Layout: default
    <slot />
  </div>
</template>

<style scoped></style>

and for index page

npx nuxi add page index

and I'll get

<script lang="ts" setup></script>

<template>
  <div>
    Page: foo
  </div>
</template>

<style scoped></style>

and delete the app.vue. Btw, adding a page activated the router functionality in Nuxt 3. In case you don't know, Nuxt takes care of everything behind the scene and allows the developer to focus on building the application rather than configuring, the majority of it not everything. Like activating store only if store is needed, activating router only if pages are defined, auto import plugins and also auto importing components. End of all Headaches.

Doing all this gave me this Astronomical UI which is.... empty... very.

Well, for now, I'll add some pointers to it, so I can tell what and where I'm gonna put them. A 'Navbar', a 'Footer' and a 'to up' floating button.

Icons

I'll be using Icons at many places like Menu, Social, etc. So I'm gonna add some icons to my project first. I love Remix Icons. I always use them in the majority of my things. But many times there is a need to use some other icons which are not in one Icon provider, like, say an 'x' icon is not in Remix Icons but is in Box Icons. So either copy SVG file or install them as well. Quite cumbersome.

Solution? Oh, Vue Icons!. (No, I mean, that's literally the name. Come on I not joking 😑) It come with 20 Icon packs including Bootstrap, Font Awesome and even Remix Icons. I can import only the icons i will use of just dump all of them, I'll use the first approach btw. (no Box Icons, sadge but soon will) Check their docs for more. To install, I'll just

yarn add --dev oh-vue-icons

and all set. For now at least.

Nav/Drawer

Since I'm building a responsive Site (of course, who doesn't do so in year 2022) well do I need to even say? Of course first Mobile UI then Desktop. I decided to go with Hamburger Menu with full screen Menu panel on Mobile. And used this as an inspiration material. As for desktop, I'll just keep it simple, 3-4 links in a line as usual.

I'm going to use the Drawer component from DaisyUI for creating my mobile Navigation. and as for Desktop, I'll just use the typical links in a strip on top as usual. This Drawer markup is closer to what I want, I'll use this one then.

Hmm... so I'll take the Boiler then add it all in layouts/default.vue Refactor it and separate portions into components. Then update it as per need. Good. I'll create few components before hand. I'll use a folder approach, or so I call it. Basically I'll create a folder with the name NavBar then add an index.vue file as components/NavBar/index.vue. This file will be the entry point of the NavBar component. Then I'll create a new component in it as named Drawer as components/NavBar/Drawer.vue where I'll keep drawer sidebar code. I'll also add ability to switch themes. I'll make it such that It'll be in loading state intially so that I can better track theme change and what theme is currently active. Chop-Chop, Time to wear Developer Cap on.

npx nuxi add component NavBar/index
npx nuxi add component NavBar/Drawer

# layouts/default.vue
<script lang="ts" setup></script>

<template>
  <div>
    <div class="drawer drawer-end">
      <input id="mainDrawer" type="checkbox" class="drawer-toggle" />
      <div class="drawer-content flex flex-col">
        <!-- Navbar -->
        <NavBar />

        <!-- content -->
        <slot />
        <!-- content -->
      </div>
      <NavBarDrawer />
    </div>
  </div>
</template>

<style scoped></style>

# components/NavBar/index.vue
<script lang="ts" setup>
import { OhVueIcon, addIcons } from 'oh-vue-icons';
import { RiMenu2Fill, RiSunFill, RiMoonFill } from 'oh-vue-icons/icons';
import { themeChange } from 'theme-change';

const themeLoaderSet = ref(false);

onMounted(() => {
  themeChange(false);
  themeLoaderSet.value = true;
});

addIcons(RiMenu2Fill, RiSunFill, RiMoonFill);
</script>

<template>
  <div class="w-full navbar bg-base-100">
    <!-- Brand -->
    <div class="flex-1">
      <NuxtLink to="/" class="normal-case text-3xl text-primary">HK</NuxtLink>
    </div>

    <div class="flex-1 hidden lg:block">
      <ul class="menu menu-horizontal menu-compact gap-1 p-1">
        <!-- Navbar menu content here -->
        <li>
          <NuxtLink to="/" active-class="active">Home</NuxtLink>
        </li>
        <li>
          <NuxtLink to="/" active-class="active">About</NuxtLink>
        </li>
      </ul>
    </div>

    <!-- start:Theme Toggle -->
    <div class="flex-none">
      <div
        class="btn btn-circle bg-transparent border-none loading disabled text-primary"
        v-show="!themeLoaderSet"
      ></div>

      <div
        class="btn-circle swap swap-rotate"
        data-toggle-theme="pastel,dracula"
        data-act-class="swap-active"
        v-show="themeLoaderSet"
      >
        <!-- sun icon -->
        <OhVueIcon
          name="ri-sun-fill"
          class="swap-on fill-primary"
          scale="1.2"
        />

        <!-- moon icon -->
        <OhVueIcon
          name="ri-moon-fill"
          class="swap-off fill-primary"
          scale="1.2"
        />
      </div>
    </div>
    <!-- end:Theme Toggle -->

    <div class="flex-none lg:hidden">
      <label for="mainDrawer" class="btn btn-primary"
        ><OhVueIcon name="ri-menu-2-fill" class="text-white"
      /></label>
    </div>
  </div>
</template>

<style scoped></style>

# components/NavBar/Drawer.vue
<script lang="ts" setup>
import { OhVueIcon, addIcons } from 'oh-vue-icons';
import { RiCloseFill } from 'oh-vue-icons/icons';

addIcons(RiCloseFill);
</script>

<template>
  <div class="drawer-side">
    <label for="mainDrawer" class="drawer-overlay"></label>
    <div class="w-full bg-base-100 md:w-80">
      <div class="flex justify-end m-2 lg:hidden">
        <label
          for="mainDrawer"
          class="m-2 p-1 border border-primary rounded-full cursor-pointer"
        >
          <OhVueIcon name="ri-close-fill" scale="1.2" class="text-primary" />
        </label>
      </div>

      <ul class="menu p-4 gap-2 overflow-y-auto">
        <!-- Sidebar content here -->
        <li>
          <NuxtLink
            to="/"
            class="flex justify-center items-center"
            active-class="active"
            >Home</NuxtLink
          >
        </li>
        <li>
          <NuxtLink
            to="/"
            class="flex justify-center items-center"
            active-class="active"
            >About</NuxtLink
          >
        </li>
      </ul>
    </div>
  </div>
</template>

<style scoped></style>

Results

Viewport Height Issue

ViewPort Height is kinda funky on mobile devices. And as it is now , I don't like it. 'Cuz it's messing up my drawer plans. Now why is it funky and what is funky? Well.. Instead of me explaining it, just read this CSS Tricks article. It also gives the solution, which I'm gonna use actually.

The Issue.

To fix this funkiness, I'll reassign the viewport height to be the window height minus any browser UI. i.e, the inner height of the window. So first I'll get the innerHeight of window, then I'll assign the height to be the new viewport height. I'll also add an event listener for resize.

....
function setVH() {
  let vh = window.innerHeight * 0.01;
  document.documentElement.style.setProperty('--vh', `${vh}px`);
}

onMounted(() => {
  setVH();
  window.addEventListener('resize', () => {
    setVH();
  });
});
....

Now I need to tell TailwindCss to use my way of setting viewport height. I honestly don't know if this is the correct way to overide the default classes. I just wanted to overide only one, but doing so removed others so i used this default config file in their github repo to get the default values and add mine in combination. (Do tell me if there is a better way to do this.)

....
// overide height
height: (theme) => ({
  auto: 'auto',
  ...theme('spacing'),
  '1/2': '50%',
  '1/3': '33.333333%',
  '2/3': '66.666667%',
  '1/4': '25%',
  '2/4': '50%',
  '3/4': '75%',
  '1/5': '20%',
  '2/5': '40%',
  '3/5': '60%',
  '4/5': '80%',
  '1/6': '16.666667%',
  '2/6': '33.333333%',
  '3/6': '50%',
  '4/6': '66.666667%',
  '5/6': '83.333333%',
  full: '100%',
  screen: 'calc(var(--vh) * 100)',
  min: 'min-content',
  max: 'max-content',
  fit: 'fit-content',
}),

// overide min-height
minHeight: {
  0: '0px',
  full: '100%',
  screen: 'calc(var(--vh) * 100)',
  min: 'min-content',
  max: 'max-content',
  fit: 'fit-content',
},

// overide max-height
maxHeight: (theme) => ({
  ...theme('spacing'),
  full: '100%',
  screen: 'calc(var(--vh) * 100)',
  min: 'min-content',
  max: 'max-content',
  fit: 'fit-content',
}),
....

Result

Footer

Next up is Footer. There is nothing fancy to add here so one of the components from Daisy UI will work. I decided to use this one. Its got the Favicon, copyright text and some social icons too. Good enough for me. So I'll create a new component with nuxi and then update it as per my preference

npx nuxi add component Footer

# components/Footer.vue
<script lang="ts" setup>
import { OhVueIcon, addIcons } from 'oh-vue-icons';
import { RiGithubFill, RiTwitterFill, SiDevdotto } from 'oh-vue-icons/icons';

addIcons(RiGithubFill, RiTwitterFill, SiDevdotto);
</script>

<template>
  <footer class="footer items-center p-4 bg-neutral text-neutral-content">
    <div class="items-center grid-flow-col">
      <!-- Brand -->
      <NuxtLink to="/" class="normal-case text-3xl text-primary">HK</NuxtLink>
      <p>Copyright © {{ new Date().getFullYear() }} - All right reserved</p>
    </div>
    <div class="grid-flow-col gap-4 md:place-self-center md:justify-self-end">
      <a href="https://twitter.com/wrench1815" target="_blank">
        <OhVueIcon name="ri-twitter-fill" scale="1.2" />
      </a>
      <a href="https://dev.to/wrench1815/" target="_blank">
        <OhVueIcon name="si-devdotto" scale="1.5" />
      </a>
      <a href="https://github.com/wrench1815/" target="_blank">
        <OhVueIcon name="ri-github-fill" scale="1.2" />
      </a>
    </div>
  </footer>
</template>

<style scoped></style>

# layouts/default.vue
....
<!-- Footer -->
<Footer />
....

Yep, good enough for me.

Well Nav and Footer are done, for now. I'll start creating Home Page in next part.

Cover Credits: Jean-Frederic Fortier

Crafting my Portfolio - Preparing Base

Hardeep Kumar — Sat, 15 Oct 2022 20:29:16 +0000

This is a Series of Posts where I'm sharing my journey(sort of) while i craft my Portfolio.

I've been a fan of Vue and Nuxt ever since I first found out about it thanks to dev.to. To me, a JS allergic person, it was the sanest framework ever in my personal opinion and I still think so. The reason was simple enough, the syntax is easily understandable. Like, even if I show some Vue code to a newbie dev, they'll instantly understand it. The next day, the first thing I did was open MDN and started learning JS (which I still haven't finished learning even half since last 2 years)

ahem.. anyway, time to start the post.

Deciding Stack

So it is already clear I'll Nuxt. Although the current stable release is version 2 and version 3 is still in RC status, I'll still use version 3.

CSS Framework

I'm a huge fan of MDB. Bootstrap + Material Design, what else can one ask for. Instantly beautiful sites with least effort. But this time I'll be using Tailwind CSS. Reason? I just feel like it, and also 'cuz of Daisy UI. I absolutely love how it reduces the amount of classes needed to design stuff. Since it's a Component library for Tailwind, it can also use normal Tailwind classes.

In addition, I also decided to use tailwind typography plugin. As it adds some default style for Typography and Daisy UI also recommended it.

Fonts

For fonts, ofcourse... I decided to use something fancy. I decided to use:

Mansalva as Sans Font.
Nanum Pen Script as Serif Font.
Fira Code as Mono Font.

Quite a pairing, right? I know.

Setting Up

Finaly time to start with the Setup. I'll first setup an empty projecy using nuxi then I'll start adding modules needed one by one.

1. Initialize Project

Following the Docs, first I'll use

npx nuxi init portfolio

'portfolio' being the name of my project. Next cd into the directory created

cd portfolio

And finally download the Depden... Dependec... Deps

yarn install

This will provide me a directory tree like this

2. Add Modules

> Tailwind CSS

First, I'll start by adding Tailwind CSS. Luckily, there is a Nuxt module for it and it also supports Nuxt 3, which means less work for me. Following Nuxt Tailwind Docs, I'll first install Tailwind module with

yarn add --dev @nuxtjs/tailwindcss

Next I'll add it into modules section of nuxt.config.ts and tailwindcss property

....
modules: ['@nuxtjs/tailwindcss']

// tailwind
tailwindcss: {},
....

Next, I'll generate the base tailwind.config.js file with

npx tailwindcss init

This will generate me an empty config file

Although the Tailwind module for Nuxt automatically handle adding a base CSS file, I'll still add it or else the VS Code extension for tailwind won't work. I'll name it tailwind.css and add it in assets/css/tailwind.css

@tailwind base;
@tailwind components;
@tailwind utilities;

> Daisy UI and Typography plugin

Time to add Daisy UI. From its Docs, first I'll add it in deps. Also, I'll be adding all modules as 'dev' to see what will happen when the project is moved into production.

yarn add --dev daisyui

Next we add it in 'plugins' array in tailwind.config.js

....
plugins: [require("daisyui")],
....

I'll also install Tailwind Typography plugin

yarn add --dev @tailwindcss/typography

Now into the tailwind.config.js it goes. It must be before Daisy UI.

....plugins: [require('@tailwindcss/typography'), require('daisyui')],
....

Now tailwind.config.js looks like this

> Theme Change

Daisy UI comes with multiple themes, and I want to be able to toggle between themes by toggling a button. As per Daisy UI Docs, it is recommended to use Theme Change package to help to easily toggle themes and also stores theme preference in Local Storage.

yarn add --dev theme-change

> Google Fonts

I also need to load my Fancy Font pairing in my Portfolio. We could just load font files... or we could install one more package to manage it for us. (Yeah, I know the build size will increase, and I honestly don't care about it) And luckily there is a Nuxt module that is also compatible with Nuxt 3.

Install it

yarn add --dev @nuxtjs/google-fonts

Add it in modules in nuxt.config.ts

....
modules: ['@nuxtjs/tailwindcss', '@nuxtjs/google-fonts'],
....

This concludes Installation.

3. Configuration

Time to configure all the packages I installed previously. First, I'll configure daisy UI. It by default comes with few themes and came to like its 'Pastel' and 'Dracula' themes, and I'll be using them as themes for Light and Dark mode respectively.

To tell Daisy UI to only include those 2 themes in my build, I'll add the following the theme names in the themes array (or whatever it might be called) in tailwind.config.js. I'll also be telling it what dark theme I'll be using.

....
// daisyUI config
daisyui: {
  themes: ['pastel', 'dracula'],
  darkTheme: 'dracula',
},
....

Next I'll add my fonts into the Project. For that I'll add some configurations for handling fonts and font families in nuxt.config.ts which are documented here. I'll also import the types at top. (Pardon if I'm using wrong method for importing types, I'm new to TS)

import GoogleFontsModule from '@nuxtjs/google-fonts'; // for types

....
// @nuxtjs/google-fonts: https://google-fonts.nuxtjs.org/setup
googleFonts: {
  display: 'swap',
  download: true,
  overwriting: false,
  inject: true,
  families: {
    Mansalva: true,
    'Nanum Pen Script': true,
    'Fira Code': true,
  },
},
....

Next I'll tell Tailwind about my fonts and update its default Sans, Serif and Mono font families.

....
theme: {
  extend: {},
  fontFamily: {
    sans: ['Mansalva', 'cursive'],
    serif: ['"Nanum Pen Script"', 'cursive'],
    mono: ['"Fira Code"', 'monospace'],
  },
},
....

This is how my nuxt.config.ts and tailwind.config.js files look like now.

Demo Component

As a tradition, we usually create a Hello World Program when we start out. In similar manner, I'll create a Component to test if everything is working correctly or not.

I'll use nuxi to create a new Component named 'HelloDaisyUi'. It will create a component folder and my component file in it as well with some boiler code.

npx nuxi add component HelloDaisyUI

Now for this Component, I'll add a centered Card with a Title, some text, Two Buttons and a toggle for toggling themes. First the Card

<script lang="ts" setup></script>

<template>
  <div class="container mx-auto">
    <section
      class="flex flex-col justify-center items-center h-screen px-2 gap-6"
    >
      <div class="card bg-base-100 shadow-xl border border-accent">
        <div class="card-body">
          <h2 class="card-title text-2xl">Hello Daisy UI</h2>
          <p class="font-serif text-2xl">Hello and Welcome.</p>
          <p class="font-serif text-2xl">
            This a mix of Tailwind with Daisy UI. Ain't it
            <span class="font-bold">Awesome?</span>
          </p>
          <div class="card-actions justify-end">
            <button class="btn btn-primary">Yes</button>
            <button class="btn btn-danger">Yesss!</button>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<style scoped></style>

This will result into this UI. As expected, everything is working normal and the light theme and Fonts working as well.

Next, I'll add some markup for theme toggle. Looking at Daisy UI docs, I'll use Swap with button to implement the toggle component.

....
<div class="text-center">
  <p class="text-xl pb-3">Try swapping Themes</p>
  <button class="btn btn-circle swap swap-rotate">
    <!-- sun icon -->
    <svg
      class="swap-off fill-current w-10 h-10"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
    >
      <path
        d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z"
      />
    </svg>

    <!-- moon icon -->
    <svg
      class="swap-on fill-current w-10 h-10"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
    >
      <path
        d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z"
      />
    </svg>
  </button>
</div>
....

The code will result in this UI.

Now time to implement theme toggling. Consulting docs, I'll use the toggle method, well of course after all I just have 2 themes.

In the script tag of the component, first I'll import 'theme change' then when the component is mounted, I'll initialize and also add the data attributes to my button to toggle the theme. Also using the vue magic and the data-act-class="" attribute, I'll make it handle the state of swap on it's own. Basically this attribute add a class when the theme toggle is in active state.

<script lang="ts" setup>
import { themeChange } from 'theme-change';

onMounted(() => {
  themeChange(false);
});
</script>
....
<button
  class="btn btn-circle swap swap-rotate"
  data-toggle-theme="pastel,dracula"
  data-act-class="swap-active"
>
....
</button>
....

The code will result in following behaviour.

HAA EZZZZ Dark Theme setup for my Portfolio. And this Concludes the Base Setup Part. See ya in next part.

Cover Credits: Artem Maltsev