HMV Portfolio

A modern, full-stack portfolio web application featuring a responsive UI, animated transitions, and a Node.js backend. Built with Vite, React, TypeScript, Tailwind CSS, Framer Motion, shadcn-ui, and Express.

---

Table of Contents

• Project Info
• Features
• Tech Stack
• Monorepo Structure
• Getting Started
  • Prerequisites
  • Installation
  • Running the Development Servers
• Project Scripts
• Configuration
• Deployment
• Custom Domain
• Contributing
• License

---

Project Info

Live URL: https://portfolio-brown-nu-26.vercel.app/

A showcase portfolio for developers, featuring a beautiful UI, dark/light theme toggle, and smooth animations. Easily customizable for your own needs.

---

Features

• Responsive navigation bar with theme toggle (light/dark)
• Animated transitions using Framer Motion
• Mobile-friendly menu and navigation
• Modern UI with Tailwind CSS and shadcn-ui components
• Modular React components for easy customization
• Backend API with Express (Node.js)
• Environment variable support for configuration
• Ready for deployment on Vercel, Netlify, or Lovable

---

Tech Stack

Frontend:

• Vite
• React
• TypeScript
• Tailwind CSS
• shadcn-ui
• Framer Motion
• Radix UI (for accessible UI primitives)
• Axios (for HTTP requests)

Backend:

• Node.js
• Express

---

Monorepo Structure

off-portfolio/
│
├── Readme.md                # Project root README
├── Client/                  # Frontend (React)
│   ├── src/                 # React source code
│   ├── public/              # Static assets
│   ├── package.json         # Frontend dependencies & scripts
│   └── ...                  # Config files (Vite, Tailwind, etc.)
│
└── server/                  # Backend (Node.js/Express)
    ├── index.js             # Express server entry
    ├── package.json         # Backend dependencies & scripts
    └── ...                  # Config files

---

Getting Started

Prerequisites

• Node.js (v16+ recommended)
• npm or yarn

Installation

Clone the repository and install dependencies for both frontend and backend:

git clone https://github.com/AmjustGettingStarted/off-portfolio.git
cd off-portfolio

# Install frontend dependencies
cd Client
npm install

# Install backend dependencies
cd ../server
npm install

Running the Development Servers

Start the backend (Express server):

cd server
npm run start

By default, the backend runs at http://localhost:8080.

Start the frontend (React app):

Open a new terminal:

cd Client
npm run dev

The frontend runs at http://localhost:5173 (or as indicated in your terminal).

---

Project Scripts

Frontend (Client/package.json):

• npm run dev – Start Vite dev server
• npm run build – Build for production
• npm run preview – Preview production build
• npm run lint – Lint code with ESLint

Backend (server/package.json):

• npm run start – Start Express server

---

Configuration

• Frontend environment variables:
  Place variables in Client/.env (see Vite docs for variable naming).
• Backend environment variables:
  Place variables in server/.env.

---

Deployment

You can deploy the frontend and backend separately or together, depending on your hosting provider.

• Frontend: Deploy Client to Vercel, Netlify, or Lovable.
• Backend: Deploy server to Vercel, Render, or Railway.

Example: Deploying to Vercel

• Deploy the Client folder as a Vercel project (set build command to npm run build and output directory to dist).
• Deploy the server folder as a separate Vercel project (set build command to npm run start).

---

Custom Domain

Custom domains are not supported directly via Lovable. For custom domains, deploy using Netlify or Vercel and configure your domain settings.

---

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/YourFeature)
3. Commit your changes (git commit -am 'Add some feature')
4. Push to the branch (git push origin feature/YourFeature)
5. Open a pull request

---

License

This project is for personal portfolio use. Feel free to customize and use it for your own projects.

---

"Why do programmers prefer dark mode?

Because light attracts bugs!" 🐞🐞🐞

---

💝 HMV 💝