Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/xylium117/codepen-gallery

A gallery of my CodePen creations.
https://github.com/xylium117/codepen-gallery

chess codepen fluid-dynamics hangman ik inverse-kinematics memory-game rubiks-cube showcase-website simulation snake stack tetris threejs tic-tac-toe traffic-runner

Last synced: 1 day ago
JSON representation

A gallery of my CodePen creations.

Awesome Lists containing this project

README

        

# Codepen Gallery 🚀

Welcome to my Codepen Gallery! Here, you'll find a collection of my creative projects and experiments hosted on [Codepen](https://codepen.io/). Feel free to explore, fork, or get inspired by the code snippets and web designs I've created. 🎨✨

![HTML5](https://img.shields.io/badge/HTML5-E34F26?style=for-the-badge&logo=html5&logoColor=white)
![CSS3](https://img.shields.io/badge/CSS3-1572B6?style=for-the-badge&logo=css3&logoColor=white)
![Sass]( https://img.shields.io/badge/Sass-CC6699?style=for-the-badge&logo=sass&logoColor=white)

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

## Table of Contents 📜

- [Overview 🌟](#overview)
- [Projects 📂](#projects)
- [Getting Started 🚀](#getting-started)
- [Contributing 🤝](#contributing)
- [License 📝](#license)

## Overview 🌟

![Codepen Gallery Preview](screen-capture.gif)

In this repository, I've curated a selection of my best work from [Codepen](https://codepen.io/). Whether you're a developer looking for code inspiration or just a curious soul exploring creative web projects, you've come to the right place! 🌐

## Projects 📂

Here are some of the exciting projects you'll find in this gallery:

1. **Fluid Sim**
- Description: A fluid simulation.
- Technologies:

![Babel](https://img.shields.io/badge/Babel-F9DC3E?style=for-the-badge&logo=babel&logoColor=white)
![React](https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB)

2. **Stack**
- Description: Stack blocks to build the taller stack.
- Technologies:

![SASS](https://img.shields.io/badge/Sass-CC6699?style=for-the-badge&logo=sass&logoColor=white)
![TypeScript](https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge&logo=typescript&logoColor=white)

3. **Hexadecimal Hangman**
- Description: Test your coding knowledge in this "hex"-guesser game
- Technologies:

![Pug](https://img.shields.io/badge/Pug-E3C29B?style=for-the-badge&logo=pug&logoColor=black)
![Stylus](https://img.shields.io/badge/Stylus-333333?style=for-the-badge&logo=stylus&logoColor=white)
![Babel](https://img.shields.io/badge/Babel-F9DC3E?style=for-the-badge&logo=babel&logoColor=white)

4. **The Cube**
- Description: Solve the rubik's cube and share your best time!
- Technologies:

![Sass](https://img.shields.io/badge/Sass-CC6699?style=for-the-badge&logo=sass&logoColor=white)
![Three.JS](https://img.shields.io/badge/ThreeJs-black?style=for-the-badge&logo=three.js&logoColor=white)

Don't hesitate to explore and give these projects a try! Feedback and contributions are always welcome. 🙌

## Getting Started 🚀

To get started with these projects, simply click visit the website URL to see them in action on Codepen. If you want to dive into the code and experiment further, you can also find the CodePen links for each project. 🛠️

### Prerequisites 📋

There are no specific prerequisites to view or fork the Codepen projects. However, if you plan to work with the code locally, make sure you have the necessary development tools and dependencies installed. 🏗️

## Contributing 🤝

Contributions are welcome! If you have any improvements, bug fixes, or new projects to add to this gallery, please follow these steps:

1. Fork this repository.
2. Create a new branch for your feature (`git checkout -b feature-name`).
3. Make your changes and commit them (`git commit -m 'Add new project'`).
4. Push to your branch (`git push origin feature-name`).
5. Open a pull request and describe your changes. 🚀🔗

## License 📝

This repository is licensed under the [MIT License](LICENSE). Feel free to use and modify the code as you see fit.

---
Enjoy exploring my Codepen projects, and let's keep creating awesome web experiences together! 🌟🌐