A comprehensive AI-powered productivity platform that helps users transform hours of work into minutes using artificial intelligence. This project is a complete recreation of the BlinkFind website with enhanced features and a modern light theme design.
Resume Builder is an innovative AI platform designed for busy professionals who want to maximize their productivity. The platform offers a suite of AI-powered tools, with the flagship AI Resume Builder that creates ATS-optimized resumes in minutes.
- AI Resume Builder: Create professional, ATS-optimized resumes with AI assistance
- Multi-step Form Process: Comprehensive resume building with progress tracking
- Real-time ATS Scoring: Live feedback on resume optimization (0-100 scale)
- Dynamic Content Management: Add/remove multiple education, experience, and project entries
- Progress Tracking: Individual field completion percentages and overall progress
- Issue Detection: Automatic identification of missing critical sections
- Responsive Design: Fully responsive across all device sizes
- Modern UI/UX: Clean, professional interface with smooth animations
- Form Validation: Real-time validation with progress indicators
- Interactive Elements: Hover effects, transitions, and dynamic content
- Accessibility: WCAG compliant with proper ARIA labels and keyboard navigation
resume-builder/
├── app/ # Next.js App Router
│ ├── globals.css # Global styles and CSS variables
│ ├── layout.tsx # Root layout component
│ ├── page.tsx # Homepage
│ ├── about/
│ │ └── page.tsx # About page
│ └── resume-builder/
│ └── page.tsx # Resume builder application
├── components/
│ ├── ui/ # Reusable UI components
│ │ ├── button.tsx
│ │ ├── card.tsx
│ │ ├── input.tsx
│ │ ├── label.tsx
│ │ ├── textarea.tsx
│ │ ├── tabs.tsx
│ │ ├── progress.tsx
│ │ └── badge.tsx
│ └── theme-provider.tsx # Theme management
├── lib/
│ └── utils.ts # Utility functions
├── public/ # Static assets
├── styles/ # Additional stylesheets
└── README.md # Project documentation
- Framework: Next.js 15.2.4 with App Router
- Language: TypeScript
- Styling: Tailwind CSS with custom design system
- UI Components: Radix UI primitives
- Icons: Lucide React
- State Management: React useState hooks
- Form Handling: Controlled components with real-time validation
- Node.js 18.0 or higher
- npm, yarn, or pnpm package manager
-
Clone the repository
git clone https://github.com/vchaitanyachowdari/Resume-Builder.git cd blinkfind-clone -
Install dependencies
npm install # or yarn install # or pnpm install
-
Run the development server
npm run dev # or yarn dev # or pnpm dev
-
Open your browser Navigate to http://localhost:3000 to see the application.
npm run build
npm start- Hero Section: Main value proposition with gradient text effects
- Product Showcase: AI Resume Builder feature card
- Navigation: Responsive navigation with login/signup buttons
- Background Effects: Animated gradient backgrounds
- Company Story: Mission, vision, and team information
- Feature Cards: Interactive cards showcasing company values
- Call-to-Action: Conversion-focused sections
- Multi-step Form: Four main sections (Personal, Education, Experience, Skills)
- Progress Tracking: Real-time completion percentages
- ATS Scoring: Dynamic scoring with suggestions
- Form Management: Add/remove dynamic entries
/* Primary Colors */
--primary: #6366f1 /* Indigo-500 */
--primary-foreground: #ffffff
/* Background Colors */
--background: #ffffff /* White */
--card: #f8fafc /* Slate-50 */
--muted: #f1f5f9 /* Slate-100 */
/* Text Colors */
--foreground: #0f172a /* Slate-900 */
--muted-foreground: #64748b /* Slate-500 */
/* Accent Colors */
--accent: #e0e7ff /* Indigo-100 */
--secondary: #f1f5f9 /* Slate-100 */- Font Family: Inter (system font fallback)
- Headings: Bold weights with proper hierarchy
- Body Text: Regular weight with optimal line height
- Code: Monospace font for technical content
- Container: Max-width with responsive padding
- Grid System: CSS Grid and Flexbox for layouts
- Spacing Scale: Consistent 4px base unit scaling
<Button variant="default" size="lg" className="custom-class">
Click me
</Button>Variants: default, destructive, outline, secondary, ghost, link Sizes: default, sm, lg, icon
<Card>
<CardHeader>
<CardTitle>Title</CardTitle>
<CardDescription>Description</CardDescription>
</CardHeader>
<CardContent>
Content goes here
</CardContent>
</Card><div className="space-y-2">
<Label htmlFor="input">Label</Label>
<Input id="input" placeholder="Enter text..." />
</div><Progress value={75} className="w-full" />- First Name* (Required)
- Last Name* (Required)
- Email Address* (Required)
- Phone Number
- Location
- LinkedIn Profile
- Portfolio/Website
- Professional Summary* (Required)
- Degree/Qualification* (Required)
- Institution/University* (Required)
- Location
- GPA (Optional)
- Start Date
- End Date
- Relevant Coursework, Projects, or Achievements
- Job Title
- Company
- Location
- Start Date
- End Date
- Job Description
- Skills (Technical and soft skills)
- Projects with:
- Project Name
- Description
- Technologies Used
The ATS score is calculated based on:
- Personal information completeness (20 points)
- Professional summary quality (30 points)
- Education details (20 points)
- Work experience (20 points)
- Skills section (10 points)
interface FormData {
firstName: string
lastName: string
email: string
phone: string
location: string
linkedin: string
portfolio: string
summary: string
education: EducationEntry[]
experience: ExperienceEntry[]
skills: string
projects: ProjectEntry[]
}- Individual field progress: 0% (empty) or 100% (filled)
- Overall progress: Percentage of required fields completed
- Section progress: Calculated per form section
- Hover Effects: Smooth transitions on buttons and cards
- Focus States: Clear focus indicators for accessibility
- Loading States: Visual feedback during interactions
- Error Handling: User-friendly error messages
- Mobile First: Optimized for mobile devices
- Tablet Support: Adapted layouts for medium screens
- Desktop Enhancement: Full-featured desktop experience
- Keyboard Navigation: Full keyboard support
- Screen Reader Support: Proper ARIA labels
- Color Contrast: WCAG AA compliant contrast ratios
- Focus Management: Logical tab order
- Connect your GitHub repository to Vercel
- Configure build settings (auto-detected for Next.js)
- Deploy with automatic CI/CD
npm run build
npm run export # For static export if needed- All pages load correctly
- Navigation works across all pages
- Form validation functions properly
- Progress tracking updates in real-time
- ATS scoring calculates correctly
- Responsive design works on all screen sizes
- Accessibility features function properly
- PDF Generation: Export resumes as PDF files
- Template Selection: Multiple resume templates
- AI Content Suggestions: Smart content recommendations
- User Authentication: Save and manage multiple resumes
- Database Integration: Persistent data storage
- Payment Integration: Premium features
- Performance Optimization: Code splitting and lazy loading
- SEO Enhancement: Meta tags and structured data
- Analytics Integration: User behavior tracking
- Error Monitoring: Crash reporting and monitoring
- Follow TypeScript best practices
- Use consistent naming conventions
- Write descriptive commit messages
- Test thoroughly before submitting PRs
- Update documentation for new features
- Use Prettier for code formatting
- Follow ESLint rules
- Use meaningful variable names
- Add comments for complex logic
This project is licensed under the MIT License - see the LICENSE file for details.
- Original Design: Inspired by BlinkFind.in
- UI Components: Built with Radix UI primitives
- Icons: Lucide React icon library
- Styling: Tailwind CSS framework
For support, email [email protected] or create an issue in the GitHub repository.
Built with ❤️ using Next.js, TypeScript, and Tailwind CSS