Untitled

 avatar
unknown
plain_text
10 months ago
3.5 kB
18
Indexable
Build a modern, professional full-stack developer portfolio website using React.js and Tailwind CSS.  

Requirements:  
1. Layout & Navigation:  
   - Clean, minimalistic, and responsive design.  
      - Sticky header with smooth scroll navigation (Home, About, Skills, Projects, Experience, Contact).  
         - Mobile-friendly hamburger menu.  

         2. Hero Section:  
            - Full-screen intro with name, title (Full-Stack Developer), and a short tagline.  
               - Call-to-action buttons (Download CV, Contact Me).  
                  - Background animation (subtle gradient, particles, or code-themed pattern).  

                  3. About Section:  
                     - Professional photo placeholder.  
                        - Short bio highlighting experience in React, Next.js, Node.js, Laravel, and Tailwind.  
                           - Key stats (Years of Experience, Projects Completed, Clients).  

                           4. Skills Section:  
                              - Grid-based skill cards with logos/icons (React, Next.js, Node.js, Express, Laravel, MySQL, MongoDB, TypeScript, Tailwind).  
                                 - Hover effects to highlight expertise.  

                                 5. Projects Section:  
                                    - Showcase at least 6 projects in a grid with image previews, short description, tech stack, and "View Code / Live Demo" buttons.  
                                       - Use elegant hover animations.  

                                       6. Experience / Timeline Section:  
                                          - Vertical timeline with job roles, companies, and key achievements.  
                                             - Emphasize role-based multi-tenant CRM, inventory & logistics projects.  

                                             7. Contact Section:  
                                                - Contact form with validation (Name, Email, Message).  
                                                   - Social links (GitHub, LinkedIn, Twitter).  
                                                      - Map embed option.  

                                                      8. Footer:  
                                                         - Minimal footer with © year, name, and quick links.  

                                                         9. General UI/UX Guidelines:  
                                                            - Smooth animations using Framer Motion.  
                                                               - Dark + Light mode toggle.  
                                                                  - Use Tailwind typography and consistent spacing.  
                                                                     - Rounded card corners (2xl), soft shadows, modern gradients.  
                                                                        - Accessible color contrast and keyboard navigation.  

                                                                        Output:  
                                                                        - React.js functional components with Tailwind classes.  
                                                                        - Well-structured file organization.  
                                                                        - Reusable UI components (Navbar, Button, Card, SectionTitle).
Editor is loading...
Leave a Comment