🛠️ Tech Stack

• Framework: Next.js 16.0.7
• Language: TypeScript 5
• UI Library: React 19.2.1
• Styling: Tailwind CSS 3.4.1
• Animation: Motion 12.23.25
• Text Animation: Split Type 0.3.4
• Utility: Tailwind Merge 2.5.5
• Development: ESLint 9.39.1, PostCSS 8

📦 Prerequisites

Before you begin, ensure you have the following installed:

• Node.js 18.17 or later
• npm, yarn, pnpm, or bun (recommended: pnpm)
• Git (for version control)

🚀 Installation

1. Clone the repository

git clone https://github.com/jmarellanes/single-page-portfolio-site.git
cd minimal-single-page-portfolio

2. Install dependencies

pnpm install

Or with your preferred package manager:

npm install
# or
yarn install
# or
bun install

🏃 Getting Started

Development

Start the development server:

pnpm dev

Open http://localhost:3000 in your browser to see the portfolio.

The app will automatically reload when you make changes to files. Start editing src/app/page.tsx to customize your portfolio content and see updates in real time.

Building for Production

Create an optimized production build:

pnpm build

Starting the Production Server

After building, start the production server:

pnpm start

📁 Project Structure

src/
├── app/
│   ├── page.tsx           # Main portfolio page
│   ├── layout.tsx         # Root layout component
│   └── globals.css        # Global styles
├── components/
│   ├── Button.tsx         # Reusable button component
│   └── Testimonial.tsx    # Testimonial card component
├── sections/
│   ├── Header.tsx         # Header/Navigation section
│   ├── Hero.tsx           # Hero/Introduction section
│   ├── Intro.tsx          # About/Intro section
│   ├── Projects.tsx       # Projects showcase section
│   ├── Testimonials.tsx   # Client testimonials section
│   ├── FAQs.tsx           # Frequently asked questions
│   └── Footer.tsx         # Footer section
├── hooks/
│   └── useTextRevealAnimation.ts  # Custom text reveal animation hook
├── assets/
│   ├── icons/             # SVG icons
│   └── images/            # Images and graphics
public/                    # Static assets

Configuration Files:
├── next.config.mjs        # Next.js configuration
├── tailwind.config.ts     # Tailwind CSS configuration
├── tsconfig.json          # TypeScript configuration
├── postcss.config.mjs     # PostCSS configuration
└── package.json           # Project dependencies

📜 Available Scripts

⚙️ Configuration

Tailwind CSS

Customize colors, fonts, spacing, and other design tokens in tailwind.config.ts to match your brand identity.

TypeScript

Modify TypeScript settings in tsconfig.json. The project is pre-configured with strict type checking for better code quality.

Next.js

Configure Next.js behavior in next.config.mjs (e.g., image optimization, rewrite rules, environment variables).

Animations

• Motion: Configure animation behaviors in your components using the motion library
• Text Animations: Use the useTextRevealAnimation hook for custom text reveal effects
• Split Type: Leverage Split Type for advanced text manipulation

Environment Variables

Create a .env.local file in the root directory for environment-specific variables:

# .env.local
NEXT_PUBLIC_SITE_URL=https://yourportfolio.com
NEXT_PUBLIC_EMAIL=your.email@example.com

🌐 Deployment

Deploy on Vercel (Recommended)

The easiest way to deploy is using Vercel, created by the Next.js team:

1. Push your code to GitHub, GitLab, or Bitbucket
2. Visit Vercel Dashboard
3. Click "New Project" and import your repository
4. Click "Deploy"

Your portfolio will be live with automatic deployments on every push to your main branch.

Deploy Elsewhere

Netlify

# Configure build settings
Build command: pnpm build
Publish directory: .next

Connect your GitHub repo to Netlify and follow the setup wizard.

Docker

FROM node:18-alpine AS base
WORKDIR /app

FROM base AS deps
COPY package.json pnpm-lock.yaml ./
RUN npm install -g pnpm && pnpm install --frozen-lockfile

FROM base AS builder
COPY package.json pnpm-lock.yaml ./
RUN npm install -g pnpm && pnpm install --frozen-lockfile
COPY . .
RUN pnpm build

FROM base AS runtime
RUN npm install -g pnpm
COPY --from=deps /app/node_modules ./node_modules
COPY --from=builder /app/.next ./.next
COPY --from=builder /app/public ./public
COPY --from=builder /app/package.json ./package.json

EXPOSE 3000
CMD ["pnpm", "start"]

Other Platforms

• AWS Amplify: Follow the AWS Amplify Next.js deployment guide
• GitHub Pages: Use next export (static export) for static hosting
• Firebase: Deploy using Firebase Hosting with Cloud Functions

🎨 Customization Tips

1. Update your content in the respective section components (Header.tsx, Hero.tsx, etc.)
2. Customize colors in tailwind.config.ts
3. Modify animations by adjusting Motion library props
4. Add your images to src/assets/images/
5. Update metadata in src/app/layout.tsx for SEO

🚀 Performance Tips

• Use Next.js Image component for optimized image loading
• Implement lazy loading for sections below the fold
• Monitor bundle size with npm run build
• Use TypeScript strict mode to catch potential issues early

🤝 Contributing

Contributions are welcome! Please follow these steps:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit changes (git commit -m 'Add amazing feature')
4. Push to branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License. See LICENSE for details.

🔗 Resources

• Next.js Documentation
• React Documentation
• Tailwind CSS Documentation
• Motion Documentation
• Split Type Documentation
• TypeScript Handbook

💬 Support

For issues, questions, or suggestions, please open an issue on the repository.

Made with ❤️ by the Frontend Tribe