Tirth Dadhaniya

Objective:

- Strengthen skills in layout design, media queries, design-to-code conversion, layout alignment, responsive techniques and component styling by replicating a real-world product's homepage without using frameworks or templates.

Key Features:

- Hero banner with promotional text and CTA buttons.
- Fully responsive using Flexbox and media queries.
- Styled navigation and footer similar to Netflix.
- Clean, accessible design with reusable CSS components.

Tech Stack:

- HTML
- CSS

Skills Used:

- UI replication, Flexbox, Media Queries, Responsive Design, Visual Accuracy, Debugging.

Github:

Objective:

- To design and develop a cutting-edge marketing website that highlights product features, pricing, and customer testimonials, while ensuring a seamless and engaging user experience across devices.

Key Features:

- Modern Design: Dark gradient theme with purple/blue accents.
- Hero Section: Glassmorphism effects, compelling CTA, and animated headline
- Feature Highlights: AI-driven marketing features displayed with icons and micro-interactions.
- Interactive Pricing Calculator: Personalized pricing based on user input.
- Pricing Plans: Starter, Pro, and Enterprise tiers with responsive comparison.
- Testimonials Carousel: Auto-rotating customer stories with smooth transitions
- FAQ Accordion: Accessible and interactive question/answer section.
- Contact Form: Lead generation with form validation.

Tech Stack:

- Built with Next.js 15 (App Router) and TypeScript for scalability and maintainability.
- Tailwind CSS for utility-first responsive design.
- Framer Motion for animations and transitions.
- Radix UI and Lucide Icons for accessible, modern UI components.
- Integrated React Hook Form with Zod validation for contact forms.

Skills Used:

- Front-end engineering, responsive design, UI/UX principles, animation design, component-based architecture, and AI-assisted development for rapid prototyping.

Github:

Objective:

- Enhance practical front-end development skills while implementing dynamic DOM manipulation and persistent data handling.

Key Features:

- Add, edit, and delete tasks with smooth UI interactions.
- Check/uncheck tasks with visual state changes.
- In-place editing with intuitive behavior.
- Fully responsive layout for mobile and desktop.
- Persistent task list using localStorage.

Tech Stack:

- HTML
- CSS
- JavaScript

Skills Used:

- DOM manipulation, localStorage, responsive design, clean UI practices.

Github:

Objective:

- Create a functional prototype to promote book reuse in colleges, with features focused on user interaction and listing management.

Key Features:

- Homepage with categories and featured books.
- Add/list books for sale with basic details.
- Search and filter functionality (planned).
- Team-based UI planning and Figma wireframing.
- Potential for backend integration (Node.js planned)

Tech Stack:

- HTML
- CSS
- JavaScript

Skills Used:

- Front-end development, teamwork, user flow design, UI prototyping.

Objective:

- Promote collaborative learning by allowing users to contribute and discover curated skill-building resources online.

Key Features:

- Course listing cards with tags and categories.
- User-submitted links for courses/tutorials.
- Minimalist design with focus on clarity and speed.
- Mobile-friendly layout and custom section designs.
- Ideathon project: team pitch + prototype demo.

Tech Stack:

- HTML
- CSS
- JavaScript

Skills Used:

- UI/UX design, ideation, problem-solving, mobile-first development.