Educational Project Website

This project is a Next.js-based website designed to provide an interactive learning experience, showcasing educational videos and synchronized presentation slides. The project includes a user-friendly interface for navigating through various educational content, organized into separate projects with unique pages for each.

Features

• Responsive Design: The website adapts to different screen sizes for an optimal user experience.
• Video-Slide Synchronization: Videos and slides are uploaded and displayed in sync, offering a cohesive learning experience.
• Project Showcase: The homepage features a main page displaying various educational projects, each with its own dedicated page.
• User-Friendly Navigation: Uses Link components with the legacyBehavior method to fix navigation issues in Next.js.
• Organized File Structure: Educational content (videos and slides) is organized into dedicated folders for easy management.

Project Structure

Public
  ├── slides/                # Folder containing presentation slides
  ├── videos/                # Folder containing educational videos
  ├── slideMetadata.json     # JSON file containing metadata for slides

components
  ├── SlideViewer.tsx        # Component for viewing slides in sync with videos
  ├── VideoPlayer.tsx        # Component for video player integration
  ├── BackgroundLines.tsx    # Background animation component for a dynamic interface

pages
  ├── projects
  │   ├── project1.tsx       # Page for the first educational project
  │   ├── project2.tsx       # Page for the second educational project
  ├── _app.tsx               # App component for initializing the Next.js app
  ├── index.tsx             # Homepage showcasing all projects
  ├── about.tsx              # About page
  ├── contact.tsx            # Contact page

types
  └── index.d.ts             # TypeScript types for the project

Installation

To run the project locally, follow these steps:

1. Clone the repository:

   git clone https://github.com/usama7871/usama-apps.git

2. Navigate to the project directory:

   cd usama-apps

3. Install the dependencies:

   npm install

4. Run the development server:

   npm run dev

5. Open your browser and visit http://localhost:3000 to view the website.

Technologies Used

• Next.js: React framework for building server-side rendered applications.
• TypeScript: JavaScript with type safety for a better development experience.
• React: A JavaScript library for building user interfaces.
• CSS: Styling for layout and design (includes responsive design).

How to Contribute

1. Fork the repository.
2. Create a new branch (git checkout -b feature-name).
3. Make your changes and commit them (git commit -am 'Add new feature').
4. Push to the branch (git push origin feature-name).
5. Open a pull request with a description of your changes.

License

This project is licensed under the MIT License.

---