Pokemon Evolution Cards - Customization Guide

A customizable, interactive Pokemon-themed CV/resume website with internationalization support, card animations, and sharing capabilities.

This guide will help you understand how to customize the Pokemon-themed CV/resume website, explaining the logic behind the Pokemon cards and how to work with multiple languages.

Table of Contents

• Overview
• Features
• Installation
• Deployment
• Understanding Pokemon Card Structure
• Customizing Pokemon Cards
• Working with Locales
• Card Components and Rendering
• Adding New Icons
• Customizing Attacks/Skills
• Advanced Customization

Overview

This project creates a Pokemon-themed CV/resume website where each card represents a stage in your professional development. Users can flip cards, view details, and share them on social media.

Features

• 🃏 Interactive Pokemon-style cards with flip animations
• 🌐 Internationalization (currently English and Danish)
• 🌓 Light/dark mode
• 📱 Responsive design for mobile and desktop
• 🎮 Mini-game for engagement
• 📤 Social sharing capabilities
• 🖼️ Custom background images for cards

Installation

Prerequisites

• Node.js 16.8 or later
• npm or yarn

Installation

1. Clone the repository:

   git clone https://github.com/bruadam/pokemon-cv.git
   cd pokemon-cv

2. Install dependencies:

   npm install
   # or
   yarn install

3. Run the development server:

   npm run dev
   # or
   yarn dev

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

Configuration

1. Edit the config.ts file to customize site settings:

   export const siteConfig = {
     name: "Your Name",
     title: "Pokemon CV",
     description: "Your custom description",
     // Other settings...
   }

2. Update the Pokemon data in the locale files (see Customizing Pokemon Cards).

Deployment

Deploy on Vercel

The easiest way to deploy your Pokemon Evolution Cards website is with Vercel, the platform from the creators of Next.js:

1. Sign up for a free account at vercel.com

2. Install the Vercel CLI:

   npm install -g vercel

3. Deploy your project:

   vercel

4. For production deployment:

   vercel --prod

You can also connect your GitHub repository to Vercel for automatic deployments:

1. Push your repository to GitHub
2. Import your project in the Vercel dashboard
3. Configure build settings (typically auto-detected)
4. Deploy

Vercel will automatically build and deploy your site, providing you with a URL to share your Pokemon-themed resume immediately.

Understanding Pokemon Card Structure

Each Pokemon card represents a career stage or professional development phase. The cards are defined by a Pokemon type which includes:

export type Pokemon = {
  id: string;               // Unique identifier
  year: string;             // Year representing this career stage
  name: string;             // Name of this evolution/career stage
  profile_picture: string;  // Image path for the profile picture
  background_image?: string;// Optional background image
  hp?: number;              // HP value (can represent experience)
  colors?: PokemonColors;   // Color scheme for this card
  tagline: string;          // Short tagline/description
  attacks?: Attack[];       // Skills represented as attacks
  bottomDescription: string;// Longer description at bottom of card
  weakness?: PokemonWeakness; // Professional weakness
  resistance?: PokemonResistance; // Professional strength/resistance
  retreat?: PokemonRetreat; // Flexibility/mobility in career
  // ... other properties
}

Customizing Pokemon Cards

1. Edit the Pokemon Data

Pokemon data is stored in locale files under locales/[language]/pokemon.json. To add or modify a Pokemon card:

1. Create a new entry in each language's pokemon.json file
2. Define all required properties (see the Pokemon type above)
3. Add profile pictures in /public/pokemon-images/
4. Add background images in /public/pokemon-images/backgrounds/

Example:

"yournewpokemon": {
  "id": "yournewpokemon",
  "year": "2023",
  "name": "YourNewPokemon",
  "profile_picture": "/pokemon-images/yournewpokemon.jpeg",
  "background_image": "/pokemon-images/backgrounds/yournewpokemon-bg.png",
  "hp": 200,
  "hpText": "HP",
  "hpIcon": "Heart",
  "colors": {
    "primary": "#c6e5f5",
    "secondary": "#5aafda",
    "accent": "#2980b9",
    "text": "#000000",
    "border": "#a09d9b",
    "gradientStart": "#cd7f32",
    "gradientMiddle": "#e6b17f",
    "gradientEnd": "#cd7f32"
  },
  "tagline": "Your custom tagline here!",
  "attacks": [
    {
      "title": "Skill Name",
      "damage": 50,
      "description": "Description of your skill and how it impacts your work.",
      "icon": "Code"
    }
  ],
  "bottomDescription": "Longer description of this career stage.",
  "weakness": {
    "type": "Some Type",
    "value": "x2",
    "icon": "Wind",
    "description": "Description of your professional weakness"
  },
  "resistance": {
    "type": "Some Type",
    "value": "-30",
    "icon": "Mountain",
    "description": "Description of your professional strength"
  },
  "retreat": {
    "cost": 2,
    "icon": "Circle",
    "description": "Description of your career flexibility"
  }
}

2. Customize Colors

Each Pokemon card can have its own color scheme defined in the colors property:

"colors": {
  "primary": "#c6e5f5",      // Primary background color
  "secondary": "#5aafda",    // Secondary/accent color
  "accent": "#2980b9",       // Accent color for icons
  "text": "#000000",         // Text color
  "border": "#a09d9b",       // Border color
  "gradientStart": "#cd7f32", // Gradient start (card background)
  "gradientMiddle": "#e6b17f", // Gradient middle
  "gradientEnd": "#cd7f32"    // Gradient end
}

Working with Locales

The project supports multiple languages through locale files in the locales directory. Each language has its own folder:

• locales/en/: English
• locales/da/: Danish
• locales/fr/: French

Within each language folder, there are several JSON files:

1. index.json: General UI translations
2. pokemon.json: Pokemon card data for that language
3. battle-skills.json: Skills/attacks for the battle game

Adding a New Language

1. Create a new folder in locales/ with your language code (e.g., locales/es/ for Spanish)
2. Copy all JSON files from an existing language folder
3. Translate all values (keeping the keys the same)
4. Update the contexts/language-context.tsx file to add your new language:

// Import base translations
import esIndex from "@/locales/es/index.json"
import esPokemon from "@/locales/es/pokemon.json"
import esBattleSkills from "@/locales/es/battle-skills.json"

// Add to language types
type Language = "en" | "da" | "fr" | "es"

// Add to locales record
const locales: Record<Language, LocaleData> = {
  en: { index: enIndex, pokemon: enPokemon, battleSkills: enBattleSkills },
  da: { index: daIndex, pokemon: daPokemon, battleSkills: daBattleSkills },
  fr: { index: frIndex, pokemon: frPokemon, battleSkills: frBattleSkills },
  es: { index: esIndex, pokemon: esPokemon, battleSkills: esBattleSkills },
}

Card Components and Rendering

The Pokemon cards are rendered using two main components:

• CardFront.tsx: Renders the front of the card with name, picture, attacks, etc.
• CardBack.tsx: Renders the back of the card with additional information

These components handle the styling and layout based on the Pokemon data.

Adding New Icons

The project uses Lucide React for icons. To add a new icon:

1. Import the icon in card-front.tsx or card-back.tsx:

   import { YourNewIcon } from "lucide-react"

2. Add the icon rendering logic in the renderIcon function:

   case "YourIconName":
     iconColor = "#your-hex-color"
     return <YourNewIcon size={size} style={{ color: iconColor, filter: "drop-shadow(1px 1px 2px rgba(0,0,0,0.3))" }} />

3. Use the icon name in your Pokemon data:

   "attacks": [
     {
       "title": "Skill Name",
       "damage": 50,
       "description": "Skill description",
       "icon": "YourIconName"
     }
   ]

Customizing Attacks/Skills

Skills are represented as attacks on the Pokemon cards. Each attack has:

• title: Name of the skill
• damage: Numeric value representing the skill's strength (0-100)
• description: Description of the skill
• icon: Icon name from Lucide React

To add a new skill category or skill:

1. Add it to locales/[language]/battle-skills.json:

"skills": [
  {
    "id": "your-new-skill",
    "name": "Your New Skill",
    "power": 85,
    "type": "technical",
    "description": "Description of your skill",
    "icon": "YourIconName"
  }
]

2. Use it in your Pokemon data:

"attacks": [
  {
    "title": "Your New Skill",
    "damage": 85,
    "description": "Description of your skill",
    "icon": "YourIconName"
  }
]

Advanced Customization

For more advanced customization, you may need to modify the React components directly:

• components/pokemon/: Contains all Pokemon card related components
• contexts/language-context.tsx: Handles language switching
• lib/pokemon.ts: Contains type definitions and utility functions

With these guidelines, you should be able to fully customize the Pokemon-themed CV/resume website to showcase your own professional journey!