A Warm Welcome To My Blog

First of all, thank you 🙏 for visiting my site, and a very Happy New Year to all 🎉.

I have been thinking for a long time to have a personal blog where I can share & store some of my programming experience. Through this blog, I will try to share some valuable resources that I have learned or came across during my web development process. I will try to publish at least one article per month on topics like AlpineJS, TailwindCSS, Laravel, Laravel Livewire or share some valuable links.

This website is build with Nuxt Content module and Tailwind CSS 2.0 and hosted on Netlify. I am familiar with Vue so Nuxt didn't take much time to grasp. The Nuxt documentation is very well written along with good examples.

Nuxt.js is a free and open source web application framework based on Vue.js, Node.js, Webpack and Babel.js. The framework is advertised as a "meta-framework for universal applications"

— From Wikipedia

The followings are the plugins or tools that are being used in building this website.

tailwindcss — Image generated by: https://socialify.git.ci

Two Modes

This websites supports both light and dark mode.

nuxt/color-mode

<button title="Switch to dark" @click="$colorMode.preference = 'dark'" v-if="$colorMode.value === 'light'" type="button" class="appearance-none group">
    <svg class="h-6 w-6 fill-current text-gray-500 group-hover:text-copper-rust-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
    </svg>
</button>

<button title="Switch to light" @click="$colorMode.preference = 'light'" v-else type="button" class="appearance-none group">
    <svg class="h-6 w-6 fill-current text-gray-500 group-hover:text-copper-rust-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
    </svg>
</button>

Tailwind CSS Plugins

Tailwind Typography

Icons

Fonts Used

Young Serif Regular & IBM Plex Mono

Syntax Highlightening

Syntax Highlighting to code blocks in markdown is provided by Shiki.

Shiki is a beautiful Syntax Highlighter that uses TextMate grammar and colors the tokens with VS Code themes.

— From Shiki Website

Favicon

The favicon of this website is generated using the below online generator.

https://formito.com/tools/favicon

Signing Off

That's all for now. Feel free to visit my blog for fresh posts and follow me on Twitter to stay updated.