An open API service indexing awesome lists of open source software.

https://github.com/muhiris/frontendcollection

A collection showcasing my experience in frontend development. It features experiments, prototypes, and showcases highlighting my skills in HTML, CSS, JavaScript, and other web technologies. By consolidating all my frontend projects, it provides a comprehensive overview of my work and passion for creating intuitive and beautiful web experiences.
https://github.com/muhiris/frontendcollection

frontend-projects-collection gsap-animation-portfolio-examples html-css-js-and-react-projects landing-page-clone-showcase react-ui-design-showcase responsive-web-design-showcase vanilla-js-project-collection weather-api-integration-examples web-development-portfolio-examples web-game-development-project-showcase

Last synced: 11 months ago
JSON representation

A collection showcasing my experience in frontend development. It features experiments, prototypes, and showcases highlighting my skills in HTML, CSS, JavaScript, and other web technologies. By consolidating all my frontend projects, it provides a comprehensive overview of my work and passion for creating intuitive and beautiful web experiences.

Awesome Lists containing this project

README

          

# Frontend Collection

This repository is a collection of frontend projects showcasing HTML, CSS, and JavaScript development, as well as React-based projects. Explore the repository and discover new projects to work on or learn from.


## Table of Contents
1. [Projects](#projects)
2. [How to Use](#how-to-use)
3. [Contributing](#contributing)




## Projects

| Folder | Description | Link |
| --- | --- | --- |
| AAMarketing | A responsive real estate website with 4 pages and animations. | [Link](https://github.com/muhiris/FrontendCollection/tree/main/AAMarketing) |
| Car Workshop | A responsive Car Workshop website with 4 pages. | [Link](https://github.com/muhiris/FrontendCollection/tree/main/CarWorkshop) |
| Dashboard ReactUI | An admin panel with 7 pages and a sidebar, built using React and module.css. | [Link](https://github.com/muhiris/FrontendCollection/tree/main/Dashboard-ReactUI-main) |
| Facebook | A clone of the Facebook landing page. | [Link](https://github.com/muhiris/FrontendCollection/tree/main/Facebook) |
| LinkedIn | A clone of the LinkedIn landing page. | [Link](https://github.com/muhiris/FrontendCollection/tree/main/LinkedIn) |
| OnBoarding | A responsive onboarding page for teachers. | [Link](https://github.com/muhiris/FrontendCollection/tree/main/OnBoarding) |
| Portfolio-1 | A portfolio website with GSAP animations, built for a freelancer. | [Link](https://github.com/muhiris/FrontendCollection/tree/main/Portfolio) |
| Portfolio-2 | A portfolio landing page for a freelancer. | [Link](https://github.com/muhiris/FrontendCollection/tree/main/PortfolioTry) |
| Travel Agency | A landing page for a travel agency. | [Link](https://github.com/muhiris/FrontendCollection/tree/main/TravelAgency) |
| Wakatipu Boat | A 2D game with canvas HTML element, XML reading using JS, and weather API integration. Built with vanilla JS. | [Link](https://github.com/muhiris/FrontendCollection/tree/main/Wakatipu-Boat-Adventure-main) |
| Youtube | A clone of the Youtube landing page. | [Link](https://github.com/muhiris/FrontendCollection/tree/main/Youtube) |
| SCMS Landing | A landing page for an app with a description and beautiful design. | [Link](https://github.com/muhiris/FrontendCollection/tree/main/SCMS%20Landing%20Page) |
| SCMS_secondaryLandingpage | A secondary landing page for an app with a description and beautiful design. | [Link](https://github.com/muhiris/FrontendCollection/tree/main/SCMS_SecondaryLandingPage) |


> Note: Recently added projects that are not included in Frontend showcase Website.
>
> - [React Dashboard UI](https://harisadminpanel.netlify.app)
> - [Teacher Onboarding](https://starlit-fairy-c91d46.netlify.app)


## How to Use

### HTML, CSS, JS Based Full Projects

1. Clone the repository using `git clone https://github.com/muhiris/FrontendCollection.git`.
2. Navigate to the folder of the project you want to run.
3. Open the `index.html` file in your web browser.

### React Based Projects

1. Clone the repository using `git clone https://github.com/muhiris/FrontendCollection.git`.
2. Navigate to the folder of the React project you want to run.
3. Run `npm install` to install dependencies.
4. Start the development server by running `npm start`.

## Contributing
We welcome contributions from the community to improve and expand the collection of projects. To contribute:

1. Fork the repository
2. Create a new branch for your feature or bug fix
3. Make your changes and commit them with descriptive messages
4. Push your changes to your forked repository
5. Submit a pull request with a description of your changes

Thank you for contributing!