Skip to content

README.md

Latest commit

 

History

History
135 lines (99 loc) · 3.84 KB

README.md

File metadata and controls

135 lines (99 loc) · 3.84 KB

Dan Letscher - Personal Portfolio

A modern, animated personal portfolio website built with Next.js 14, Tailwind CSS, and Framer Motion.

✨ Features

  • Modern Stack: Built with Next.js 14, TypeScript, and Tailwind CSS
  • Smooth Animations: Powered by Framer Motion for buttery-smooth transitions
  • Responsive Design: Looks great on all devices
  • Scrollspy Navigation: Active section highlighting as you scroll
  • Dark Theme: Sleek dark mode with bold accent colors
  • Performance Optimized: Static export for lightning-fast loading
  • SEO Ready: Full meta tags, Open Graph, and structured data

🚀 Getting Started

Prerequisites

  • Node.js 18.17 or later
  • npm, yarn, or pnpm

Installation

  1. Install dependencies:

    npm install

  2. Start the development server:

    npm run dev

  3. Open http://localhost:3000 in your browser.

📦 Building for Production

To create a static export for GitHub Pages:

npm run build

The static files will be generated in the out/ directory.

🚀 GitHub Pages Deployment

This site is configured for automatic deployment to GitHub Pages using GitHub Actions.

Automatic Deployment

  1. Push to main branch - The GitHub Actions workflow will automatically:

    • Install dependencies
    • Build the static site
    • Deploy to GitHub Pages

  2. Enable GitHub Pages (first-time setup):

    • Go to your repository Settings → Pages
    • Under "Build and deployment", set Source to GitHub Actions

  3. View your site at https://<username>.github.io or your custom domain

Workflow Details

The deployment workflow (.github/workflows/deploy.yml) performs:

Checkout → Setup Node.js 20 → Install deps → Build → Deploy to Pages

Manual Deployment

If you prefer manual deployment:

# Build the static site
npm run build

# The `out/` directory contains the static files
# Upload these to any static hosting provider

Custom Domain

To use a custom domain:

  1. Add your domain to the CNAME file in the repository root
  2. Configure DNS settings with your domain provider
  3. Enable HTTPS in GitHub Pages settings

🎨 Design Features

  • Gradient Text Effects: Beautiful animated gradients on headings
  • Glass Morphism: Frosted glass effects on cards and navigation
  • Glow Effects: Subtle glow animations on interactive elements
  • Timeline Layout: Alternating timeline for work experience
  • Floating Elements: Animated background orbs and decorations
  • Scroll Progress: Visual scroll progress indicator at the top

🛠️ Tech Stack

  • Framework: Next.js 14 (App Router)
  • Language: TypeScript
  • Styling: Tailwind CSS
  • Animations: Framer Motion
  • Icons: Lucide React
  • Deployment: Static Export (GitHub Pages ready)

📁 Project Structure

├── src/
│   ├── app/
│   │   ├── globals.css      # Global styles and Tailwind
│   │   ├── layout.tsx       # Root layout with metadata
│   │   └── page.tsx         # Main page component
│   └── components/
│       ├── AnimatedSection.tsx
│       ├── EducationSection.tsx
│       ├── ExperienceSection.tsx
│       ├── Footer.tsx
│       ├── HeroSection.tsx
│       ├── Navigation.tsx
│       ├── ScrollProgress.tsx
│       ├── Timeline.tsx
│       └── index.ts
├── public/                   # Static assets
├── .github/
│   └── workflows/
│       └── deploy.yml       # GitHub Pages deployment workflow
├── next.config.js           # Next.js configuration
├── tailwind.config.ts       # Tailwind configuration
├── package.json             # Dependencies and scripts
└── tsconfig.json            # TypeScript configuration