🌊 TechTide Studio

A modern, responsive, and visually engaging digital agency website built with React, Vite, and Tailwind CSS.

TechTide Studio showcases services, portfolio projects, testimonials, team members, and contact details with sleek animations and an intuitive user experience.

---

🚀 Overview

The TechTide Studio website is designed to create a strong digital presence for a tech agency or creative studio.

It includes:

• Responsive and mobile-friendly design
• Smooth animations and transitions
• Interactive sections and modern layouts
• Service showcase and project portfolio
• Contact and lead generation forms

---

✨ Features

🎨 Modern UI/UX

• Clean and minimal interface
• Fully responsive on all devices
• Smooth scrolling and section navigation

🎬 Animations & Motion Effects

Powered by:

• Framer Motion
• GSAP

Used for:

• Hero section animations
• Scroll-triggered transitions
• Interactive hover effects

📂 Portfolio Showcase

Display projects with:

• Images
• Descriptions
• Technologies used

💬 Testimonials

Client reviews and feedback section for trust-building.

📩 Contact Integration

Includes:

• Contact forms
• Social links
• Email / phone details

---

🛠️ Tech Stack

Frontend

• React
• Vite
• Tailwind CSS
• React Router DOM

Animation Libraries

• Framer Motion
• GSAP

Icons & Utilities

• Lucide React
• Custom reusable components

---

📁 Project Structure

TechTideStudio/
│
├── public/                  # Static assets
│
├── src/
│   ├── assets/              # Images, icons, logos
│   ├── components/          # Reusable components
│   │   ├── Navbar.jsx
│   │   ├── Hero.jsx
│   │   ├── About.jsx
│   │   ├── Services.jsx
│   │   ├── Portfolio.jsx
│   │   ├── Testimonials.jsx
│   │   ├── Contact.jsx
│   │   └── Footer.jsx
│   │
│   ├── pages/               # Route pages if applicable
│   ├── App.jsx
│   └── main.jsx
│
├── package.json
├── vite.config.js
└── README.md

---

⚙️ Installation

Clone the repository:

git clone <your-repo-url>
cd TechTideStudio

Install dependencies:

npm install

---

▶️ Run Locally

Start the development server:

npm run dev

Build for production:

npm run build

Preview production build:

npm run preview

---

📸 Website Sections

Includes:

• Hero Section
• About Us
• Services
• Portfolio / Projects
• Testimonials
• Contact Form
• Footer

---

🚀 Deployment

Deploy easily on:

• Vercel
• Netlify
• GitHub Pages
• Firebase Hosting

Build output folder:

dist/

---

🤝 Contributing

Contributions are welcome.

Steps:

1. Fork the repository
2. Create a feature branch
3. Commit your changes
4. Push your branch
5. Open a Pull Request

---

📄 License

This project is licensed under the MIT License.

---

💡 Author

Malki Aman