Tailwind Resources Logo Tailwind Resources
Website screenshot

Website

Author Avatar Theme by Eggsy
Updated: 15 Feb 2025
323 Stars

Source code of my personal website. Everything is included. Written in NuxtJS, TypeScript and Windi CSS!

Github Live Preview

Categories

Nuxt Vue Scss Firebase Blog Portfolio

Overview:

My personal portfolio website is built using Nuxt.js, Windi CSS, TypeScript, and Firebase. It boasts various custom-built systems, integrations, and pages, including projects, experiences, skills, GitHub repositories, favorite songs, and contact pages. The website also features a fully static markdown-driven blog with Nuxt Content, Firebase integration, real-time Discord profile data using Lanyard API, and Last.fm API integration to display top tracks and recently played songs. The website is written in TypeScript and includes numerous handmade custom components.

Features:

  • Custom-built systems and integrations
  • Projects, experiences, skills, GitHub Repositories, favorite songs, and contact pages
  • Fully static markdown-driven blog with Nuxt Content
  • Firebase integration
  • Real-time Discord profile data using Lanyard API
  • Last.fm API integration for displaying top tracks and recently played songs
  • Written in TypeScript
  • Handmade custom components

Installation:

  1. Ensure Node.js and Git are installed on your machine.
  2. Clone the repository using: git clone https://github.com/eggsy/website
  3. Install dependencies using your preferred package manager:
    • With pnpm: pnpm install
    • With NPM: npm install
  4. If using Firebase, rename .env.example to .env and provide the necessary configuration.
  5. To start the app for development:
    • With pnpm: pnpm dev
    • With NPM: npm run dev
  6. To build and compile the app:
    • With pnpm: pnpm generate (or pnpm build)
    • With NPM: npm run generate (or npm run build)

Summary:

The personal portfolio website, built with Nuxt.js, Windi CSS, TypeScript, and Firebase, offers a range of features including custom systems, integrations, static blog, and APIs for real-time data. By following the provided installation guide, users can easily set up the website for development or production, with the option to exclude Firebase integration if desired. The website’s use of custom components and TypeScript adds to its appeal for developers and visitors alike.