# Professional Resume Builder

**Created by David Valera Melendez** | david@valera-melendez.de | Made in Germany 🇩🇪

A modern, professional resume builder application built with Next.js, TypeScript, and Tailwind CSS. Designed specifically for creating impressive resumes for job applications.

## 🚀 Features

- **Professional Design**: Clean, modern interface optimized for professional use
- **Real-time Preview**: See your resume as you build it
- **Multiple Sections**: Personal info, experience, education, skills, languages, certifications, and projects
- **Responsive Design**: Works perfectly on desktop and mobile devices
- **Export Options**: Generate PDF versions of your resume (coming soon)
- **TypeScript**: Fully typed for better development experience
- **Tailwind CSS**: Modern styling with custom professional theme

## 🛠️ Tech Stack

- **Framework**: Next.js 14+ with App Router
- **Language**: TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: Custom React components
- **Icons**: Emoji-based icons for better compatibility
- **Export**: HTML to PDF conversion (planned)

## 📦 Installation

1. **Prerequisites**: Node.js 18+ and npm 9+

2. **Install dependencies**:

```bash
npm install
```

3. **Run development server**:

```bash
npm run dev
```

4. **Open in browser**:
   Navigate to [http://localhost:3000](http://localhost:3000)

## 🚀 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
- `npm run type-check` - Run TypeScript compiler check
- `npm run format` - Format code with Prettier
- `npm run format:check` - Check code formatting

## 📁 Project Structure

```
src/
├── app/                    # Next.js App Router
│   ├── globals.css        # Global styles
│   ├── layout.tsx         # Root layout
│   └── page.tsx          # Home page
├── components/            # React components
│   ├── layout/           # Layout components
│   │   └── Header.tsx    # App header
│   └── resume/           # Resume-specific components
│       ├── ResumeBuilder.tsx    # Main builder interface
│       ├── ResumePreview.tsx    # Live preview
│       └── forms/               # Form components
│           ├── PersonalInfoForm.tsx
│           ├── ExperienceForm.tsx
│           ├── EducationForm.tsx
│           └── SkillsForm.tsx
├── types/                 # TypeScript type definitions
│   └── resume.ts         # Resume data types
└── utils/                # Utility functions (future)
```

## 🎨 Design System

### Colors

- **Primary**: Blue theme (#0ea5e9 variations) - Professional and trustworthy
- **Secondary**: Gray theme - Clean and readable text
- **Accent**: Purple theme - Highlights and interactive elements
- **Semantic**: Success, warning, and error colors

### Typography

- **Primary Font**: Inter (Google Fonts)
- **Responsive Sizes**: Configured for optimal readability
- **Professional Styling**: Clean, modern typography

### Components

- **Cards**: Elevated surfaces for content sections
- **Buttons**: Multiple variants (primary, secondary, outline, ghost)
- **Forms**: Consistent input styling with validation states
- **Navigation**: Clean, intuitive section navigation

## 🎯 Usage

1. **Personal Information**: Start by filling in your basic contact details and professional summary
2. **Work Experience**: Add your employment history with achievements and responsibilities
3. **Education**: Include your academic background and qualifications
4. **Skills**: Categorize your technical and soft skills with proficiency levels
5. **Preview**: Use the live preview to see how your resume looks
6. **Export**: Download your finished resume as PDF (feature in development)

## 🔧 Development Guidelines

### Code Standards

- All components use TypeScript with strict typing
- Follow the established component structure
- Use Tailwind CSS classes for styling
- Include proper error handling
- Maintain accessibility standards

### Component Development

- Use 'use client' for interactive components
- Follow PascalCase naming convention
- Include comprehensive prop interfaces
- Add meaningful comments and documentation

### Professional Quality

- Code is production-ready and employer-review friendly
- Comprehensive TypeScript coverage
- Responsive design implementation
- Clean, maintainable architecture

## 📱 Browser Support

- Chrome (recommended)
- Firefox
- Safari
- Edge

## 🚀 Deployment

The application is configured for static export and can be deployed on:

- Vercel (recommended for Next.js)
- Netlify
- GitHub Pages
- Any static hosting service

Build command: `npm run build`
Output directory: `out/`

## 👨‍💻 Author

**David Valera Melendez**

- Email: david@valera-melendez.de
- Location: Germany 🇩🇪
- Created: August 7, 2025

## 📄 License

MIT License - Feel free to use this project for your professional resume needs.

## 🤝 Contributing

This project is designed as a professional showcase. If you'd like to contribute or suggest improvements, please reach out via email.

---

**Professional Resume Builder** - Helping professionals create outstanding resumes | Made in Germany 🇩🇪