TechTalks Landing Page | DevBounty Submission

This repository contains a recreation of the TechTalks landing page for the current DevBounty challenge.
The goal was to build a pixel-perfect, responsive landing page that demonstrates modern front-end development skills, component reusability, and smooth animations.

Table of Contents

1. Introduction
2. Screenshots
3. Features
4. Tech Stack
5. Pages & Routes
6. Reusable Components
7. SEO & Accessibility
8. Deployment
9. Disclaimer
10. Author

Introduction

Hi! I'm Chadi Kouzayha, a front-end developer and computer science student.

This project was built as part of the TechTalks DevBounty challenge. The aim was to:

• Deliver a responsive design that works on all devices.
• Use a modern UI with smooth animations.
• Maintain clean and reusable code for scalability.
• Deploy to a live URL for demonstration.

Screenshots

Early development screenshots demonstrating the assembly process and legitimacy:

All other pages are functional and can be added easily thanks to React Router.

Features

• Pixel-perfect, responsive design compatible with desktop and mobile.
• Smooth animations and transitions using Framer Motion.
• Parallax, glow, and hover effects on hero and interactive elements.
• Reusable UI components:
  • IconText – Text paired with icons
  • Button – Gradient, hoverable, scalable
  • GradientText – Multi-color emphasis text
  • FadeUp – Scroll-triggered animations
  • SocialButton – Gradient social icons
• SEO-friendly pages with dynamic <title> and meta tags.
• Lazy-loading and Suspense fallback for smoother performance.

Tech Stack

• Frontend: React 19.2, React Router, Tailwind CSS, Framer Motion
• Icons: Lucide-react
• Build Tool: Vite (fast dev and build times)
• Hosting: Cloudflare Pages (static deployment)

Pages & Routes

The website includes the following routes:

• / – Homepage
• /courses – Courses
• /champions – Champions
• /internships – Internships
• /devbounty – DevBounty Challenge
• /about – About TechTalks
• /contact – Contact
• /terms – Terms & Privacy
• * – 404 / Not Found Page

All routes are fully functional, and additional pages can be added easily thanks to reusable components and React Router.

Reusable Components

This project emphasizes modular, reusable components, ensuring parity and scalability:

• IconText – Icon + text blocks with hover/animation
• Button – Fully customizable buttons with gradient, hover, and icon support
• GradientText – Multi-color text for emphasis
• FadeUp – Scroll-triggered fade-in animation
• SocialButton – Gradient social buttons with hover/animation effects

SEO & Accessibility

• Each page includes unique meta tags for better search engine optimization.
• Semantic HTML and ARIA practices ensure accessibility.
• All interactive elements are keyboard and screen-reader friendly.

Deployment

This project is deployed and accessible at:

[Live Demo URL]

Disclaimer

This project recreates the older TechTalks landing page purely for the DevBounty challenge.
It is not affiliated with the original platform and is intended solely as a development portfolio submission.

Author

Chadi Kouzayha – Front-End Developer & Computer Science Student

• LinkedIn