Untitled
unknown
plain_text
10 months ago
3.5 kB
17
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