Raghav Gupta - modern, high-converting personal developer portfolio and interactive CV website for using React, Tailwind CSS, Lucide icons, and...
Generated Prompt
## APPLICATION OVERVIEW This project is a modern, high-converting personal developer portfolio and interactive CV website for Raghav Gupta, designed to showcase his skills, projects, and experiences. The application will utilize React, Tailwind CSS, and various libraries to provide an engaging user experience with smooth navigation and polished animations. ## CORE FEATURES 1. **Header / Navigation**: A fixed navigation bar with links to sections like About, Skills, Projects, Certifications, Education, and Contact, along with action buttons for downloading the CV and toggling the theme. 2. **Hero Section**: Eye-catching introduction with a headline, tagline, badges for technical skills, and direct actions to view projects and contact details. 3. **Skills Matrix**: An interactive display of Raghav’s technical skills organized into categories, using pill cards and tabs for easy navigation. 4. **Featured Projects**: Responsive project cards highlighting live links, GitHub buttons, and tech stack badges for each showcased project. 5. **Certifications & Badges**: Cleanly displayed verified cards showcasing Raghav's certifications with issuer logos and issue dates. 6. **Contact Form**: A quick contact form for users to reach out, complemented by direct contact details and social media links in the footer. ## DESIGN SPECIFICATIONS - **Visual Style**: minimalist - Clean, simple design with plenty of white space, minimal color palette, and focus on typography - **Color Mode**: Light theme with dark text on light backgrounds - **Primary Color**: #1978E5 (accent for buttons, links, highlights) - **Typography**: Use Inter from Google Fonts for headings, Inter for body text and UI elements - **Border Radius**: 8px (moderately rounded) for buttons, cards, and inputs - **Layout**: A structured layout featuring a fixed header, followed by a hero section, skills matrix, featured projects, certifications, experience, education timeline, and a contact section. Each section should be visually distinct yet cohesive, maintaining a clean flow. ## TECHNICAL REQUIREMENTS - **Framework**: React with TypeScript - **Styling**: Tailwind CSS - **UI Components**: Lucide icons and Framer Motion for smooth animations - **State Management**: React's built-in state management (or Context API if needed) ## IMPLEMENTATION STEPS 1. **Set Up Project**: Initialize a new React project with TypeScript and install necessary dependencies (Tailwind CSS, Lucide icons, Framer Motion). 2. **Create Folder Structure**: Organize components, styles, and assets into folders for better maintainability. 3. **Implement Navigation Bar**: Build a responsive navigation bar with links and action buttons, ensuring smooth scrolling to section anchors. 4. **Develop Hero Section**: Create the hero section with a headline, tagline, badges, and action buttons, ensuring accessibility and responsiveness. 5. **Build Skills Matrix**: Implement the skills section using interactive pill cards grouped by categories, utilizing state management for tab selection. 6. **Design Featured Projects**: Create project cards that display information dynamically, including live links and tech tags. 7. **Set Up Certifications Section**: Design the certifications section to present verified cards with proper spacing and icons. 8. **Implement Contact Form**: Build a contact form with validation and toast notifications for success messages. 9. **Finalize Footer**: Add social media links and copyright information in a clean footer design. 10. **Testing and Deployment**: Test the application across different devices and browsers for responsiveness and user experience, then deploy to a hosting platform. ## USER EXPERIENCE Users will experience smooth navigation through a fixed header that allows them to jump between sections easily. The hero section captures their attention with a clear introduction, while the skills matrix and featured projects provide engaging, interactive content. The contact form is straightforward, encouraging potential clients or collaborators to reach out easily. The overall minimalist design enhances readability and usability, ensuring that Raghav's skills and projects are showcased effectively.
Loved by thousands of makers from
From early prototypes to real products, they started here.







































Generate optimized prompts for your vibe coding projects
Generate prompt
Enter a brief description of the app you want to build and get an optimized prompt
Review and use your prompt
Review (and edit if necessary) the generated prompt, then copy it or open it directly in your chosen platform
Get inspired with new ideas
Get AI-generated suggestions to expand your product with features that will surprise your users
Frequently Asked Questions
Everything you need to know about creating better prompts for your Lovable projects
Still have questions?
Can't find what you're looking for? We're here to help!
