Skip to content

usama7871/usama-apps

Folders and files

NameName
Last commit message
Last commit date

Latest commit

8423218 · Nov 30, 2024

History

56 Commits
Nov 22, 2024
Nov 30, 2024
Nov 22, 2024
Nov 30, 2024
Nov 30, 2024
Nov 20, 2024
Nov 11, 2024
Nov 14, 2024
Nov 11, 2024
Nov 14, 2024
Nov 14, 2024
Nov 11, 2024
Nov 11, 2024
Nov 11, 2024

Repository files navigation

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.


Releases

No releases published

Packages

No packages published

Languages