Portfolio V2: Card Game Edition

A portfolio website reimagined as an interactive card game, inspired by card deck builders like Legends of Runeterra and Hearthstone.

🎯 Concept

Each project, skill, or experience is represented as a card in a deck. Visitors can browse the card collection, view detailed information about each card, and build their own view of who I am by adding cards to a personalized deck.

✨ Features

• Interactive Card Collection: Projects, skills, and experiences represented as collectible cards
• Deck Building: Visitors can create personalized portfolio views by building their own custom
• Card Detail Views: Comprehensive information for each card with smooth animations
• Filterable Collection: Browse cards by type (projects, skills, experiences)
• Responsive Design: Works seamlessly across all devices

🛠️ Technologies Used

• React 19 with TypeScript
• Styled Components for styling
• Framer Motion for animations
• React Router for navigation
• Deployed on GitHub Pages

🚀 Getting Started

Prerequisites

• Node.js (v22 or higher)
• npm or yarn

Installation

1. Clone the repository

   git clone https://github.com/yourusername/Website.git
   cd Website/v2

Backend

2. Install dependencies

   cd api
   npm install

3. Start development server

   npm run dev

Frontend

2. Install dependencies

   cd app
   npm install

3. Start development server

   npm run start

🎮 Key Features

• Card Collection: Browse through a curated collection of cards representing different aspects of my work
• Deck Building: Create personalized decks to showcase specific skills or projects
• Interactive Animations: Smooth transitions and animations powered by Framer Motion
• Responsive Design: Optimized for all screen sizes and devices
• TypeScript: Full type safety and better development experience

📁 Frontend Structure

src/
├── components/     # Reusable UI components
├── pages/         # Page components for different routes
├── hooks/         # Custom React hooks
├── services/      # API and external service integrations
├── styles/        # Global styles and theme
├── types/         # TypeScript type definitions
├── utils/         # Utility functions
└── assets/        # Static assets like images

---

And remember:

10% of the profits should go to Potocki