Skip to content

README.md

Latest commit

 

History

History
90 lines (65 loc) · 3.9 KB

README.md

File metadata and controls

90 lines (65 loc) · 3.9 KB
Raw

Abdul Haseeb — Portfolio

Personal portfolio site for Abdul Haseeb, a Senior Full-Stack Engineer. Built with Nuxt 4 (Vue 3, <script setup lang="ts">) and Tailwind CSS, and shipped as a statically generated site.

Tech Stack

  • Nuxt 4 (Vue 3, TypeScript) — statically generated (SSG)
  • Tailwind CSS (@nuxtjs/tailwindcss) + global CSS variables in assets/css/main.css
  • Nuxt modules: @nuxt/fonts, @nuxt/image, nuxt-aos (scroll animations)
  • Vitest + jsdom for unit tests
  • pnpm as the package manager

Getting Started

Requires pnpm (see the packageManager field in package.json).

pnpm install   # install dependencies
pnpm dev       # start the dev server on http://localhost:3000

Copy .env.example to .env and adjust as needed (see Configuration).

Scripts

Command What it does
pnpm dev Start the dev server on http://localhost:3000
pnpm generate Production build — static site in .output/public (used for deployment)
pnpm build / pnpm preview SSR server build + local preview
pnpm test Run the Vitest unit tests once
pnpm test:watch Run the tests in watch mode

The deployed artifact is produced by pnpm generate, not pnpm build.

Project Structure

app.vue                 # root — all SEO/useHead metadata (OG, Twitter, JSON-LD)
layouts/default.vue     # global nav + footer; hosts the project-image lightbox
pages/
  index.vue             # home, composed of Home/* section components
  projects/
    index.vue           # project gallery
    <slug>.vue          # one case-study page per project
    PATTERN.md          # the shared structure every project page follows
components/             # auto-imported by path (e.g. Home/, Project/, Icons/)
composables/            # auto-imported (e.g. useProjectObserver — scroll-spy TOC)
data/reviews.ts         # typed client testimonials
utils/lightbox.ts       # lightbox trigger logic (unit-tested)
assets/css/main.css     # :root design tokens (colors, fluid type)
tests/                  # Vitest unit tests

Conventions

  • Auto-imports: components are referenced by path — components/Home/UpworkReviews.vue → <HomeUpworkReviews/>; the Lazy* prefix lazy-loads. Composables and utils/ are auto-imported too.
  • Project pages: every page under pages/projects/ shares one structure. Read pages/projects/PATTERN.md before adding or editing one.
  • Upwork gating: config.public.upwork (env NUXT_PUBLIC_UPWORK) toggles between showing social links and Upwork review cards/CTAs.
  • Styling: use the CSS variables in assets/css/main.css (e.g. var(--primary-color)) rather than hardcoding colors.

Testing

Testing is deliberately minimal — Vitest + jsdom cover only genuine logic (e.g. utils/lightbox.ts), not presentational markup or copy.

pnpm test

Configuration

Runtime config is environment-driven (nuxt.config.ts → runtimeConfig.public). See .env.example:

Variable Purpose Default
NUXT_PUBLIC_UPWORK Upwork feature flag (hide socials, show Upwork reviews) false
NUXT_PUBLIC_DOMAIN Canonical domain for SEO (canonical/OG URLs) zrinasoft.com
NUXT_BASE_URL App base URL /
UPWORK_PROFILE_LINK Upwork profile URL —

Deployment

Two targets, each on its own branch:

  • GitHub Pages (.github/workflows/github-pages.yml) — on push to master, runs pnpm generate with NUXT_PUBLIC_UPWORK=true and NUXT_PUBLIC_DOMAIN=code-creeper.github.io, then publishes .output/public to the gh-pages branch.
  • EC2 (.github/workflows/deploy-ec2.yml) — on push to ec2, SSHes into the host and rebuilds inside the portfolio_node_container Docker container (Node 22 alpine, port 3000).

Changelog

See CHANGELOG.md for notable changes.