172 lines
5.3 KiB
Markdown
172 lines
5.3 KiB
Markdown
# 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 🇩🇪
|