Patrick Felber - Portfolio Website

A modern, responsive portfolio website built with Next.js, TypeScript, and Tailwind CSS to showcase AI engineering projects and professional experience.

🚀 Features

• Responsive Design: Works seamlessly on desktop, tablet, and mobile devices
• Dark Mode Support: Automatic dark mode based on system preferences
• Project Filtering: Filter projects by type (Professional/Hobby) and category (AI/ML, Web Dev, Game Dev, etc.)
• Fast Performance: Static site generation with Next.js for optimal speed
• SEO Optimized: Proper meta tags and semantic HTML for better search visibility

📁 Project Structure

website_portfolio/
├── src/
│   ├── app/
│   │   ├── about/page.tsx           # About page
│   │   ├── contact/page.tsx         # Contact page
│   │   ├── projects/
│   │   │   └── page.tsx             # Projects listing with filters
│   │   ├── layout.tsx               # Root layout with navigation
│   │   ├── page.tsx                 # Homepage
│   │   └── globals.css              # Global styles
│   ├── components/
│   │   └── Navigation.tsx           # Navigation component
│   └── data/
│       └── projects.ts              # Project data
├── public/                          # Static assets
└── README.md

🛠️ Tech Stack

• Framework: Next.js 14+ with App Router
• Language: TypeScript
• Styling: Tailwind CSS
• Deployment: Vercel

💻 Local Development

Prerequisites

• Node.js 18+ installed
• npm or yarn package manager

Installation

1. Clone the repository (or navigate to the project folder)

2. Install dependencies:

npm install

3. Run the development server:

npm run dev

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

Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run start - Start production server
• npm run lint - Run ESLint

🚢 Deployment to Vercel

Option 1: Deploy via Vercel Dashboard (Easiest)

1. Push your code to GitHub
2. Go to vercel.com
3. Click "New Project"
4. Import your GitHub repository
5. Vercel will auto-detect Next.js and configure everything
6. Click "Deploy"

Your site will be live at https://your-project.vercel.app

Option 2: Deploy via Vercel CLI

1. Install Vercel CLI:

npm install -g vercel

2. Login to Vercel:

vercel login

3. Deploy:

vercel

4. For production deployment:

vercel --prod

Custom Domain

To add a custom domain (e.g., patrickfelber.dev):

1. Go to your project in Vercel dashboard
2. Navigate to Settings → Domains
3. Add your domain
4. Update your DNS records as instructed by Vercel

📝 Adding New Projects

To add a new project to your portfolio:

1. Open src/data/projects.ts
2. Add a new project object to the projects array:

{
  id: 'unique-id',
  title: 'Project Title',
  type: 'professional', // or 'hobby'
  category: 'AI/ML', // or other categories
  timeline: '2024',
  role: 'Your Role',
  status: 'Deployed', // optional
  summary: 'Brief project description',
  technologies: ['Tech1', 'Tech2', 'Tech3'],
  highlights: [
    'Achievement 1',
    'Achievement 2'
  ],
  slug: 'project-url-slug'
}

3. Save the file - the project will automatically appear on the site!

🎨 Customization

Changing Colors

Edit tailwind.config.ts to customize the color scheme.

Updating Content

• Contact Info: Edit src/app/contact/page.tsx
• About Page: Edit src/app/about/page.tsx
• Homepage: Edit src/app/page.tsx

Adding Images

1. Place images in the public/ folder
2. Reference them in your code: <Image src="/image-name.jpg" alt="..." />

📄 Resume PDF

To add a downloadable resume PDF:

1. Place your resume PDF in the public/ folder as resume.pdf
2. The download link is already configured in the Contact page

🔧 VS Code Integration

A development task is already configured. To start the dev server:

1. Press Ctrl+Shift+P (or Cmd+Shift+P on Mac)
2. Type "Tasks: Run Task"
3. Select "Start Dev Server"

Or simply run npm run dev in the terminal.

📊 Analytics (Optional)

To add analytics:

Vercel Analytics

1. Install: npm install @vercel/analytics
2. Add to layout.tsx:

import { Analytics } from '@vercel/analytics/react';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Analytics />
      </body>
    </html>
  );
}

📞 Support

For questions or issues:

• Email: patrick.felber@gmx.at
• Check Next.js documentation: nextjs.org/docs
• Check Vercel documentation: vercel.com/docs

---

Built with ❤️ using Next.js and deployed on Vercel