dev-shetty / css-is-fun

CSS-Is-Fun is a collection of creative and fun CSS animations and effects to enhance your web projects.

Namaste 🌍, I am Deveesh Shetty

Frontend Developer | Open Source Enthusiast

---

So who am I? 🙃

Well as you already know my name. Let me tell you something else. I started as a Python programmer and then switched to Web Development. And yes I love working with CSS and know how to center a div 😄 — currently working with TNT Stack 💣 - TypeScript, NextJS, TailwindCSS.

Always ready to collaborate on projects and work together with SOSC. Feel free to reach out on socials :)

Also interested in DevOps so that's in the pipeline (no pun intended) 😉

• 🚀 I’m currently learning Full Stack Development

• 👨‍💻 My Portfolio Website https://deveesh.vercel.app

• 💬 Ask me about Frontend Development

• 📫 Contact me at [email protected]

• ⚡ Fun fact I am not a night owl but an early bird 🐓...Surprised?

You can find me on

---

Currently Focussing on

 ██████╗ ██████╗ ███████╗███╗   ██╗
██╔═══██╗██╔══██╗██╔════╝████╗  ██║
██║   ██║██████╔╝█████╗  ██╔██╗ ██║
██║   ██║██╔═══╝ ██╔══╝  ██║╚██╗██║
╚██████╔╝██║     ███████╗██║ ╚████║
 ╚═════╝ ╚═╝     ╚══════╝╚═╝  ╚═══╝

███████╗ ██████╗ ██╗   ██╗██████╗  ██████╗███████╗
██╔════╝██╔═══██╗██║   ██║██╔══██╗██╔════╝██╔════╝
███████╗██║   ██║██║   ██║██████╔╝██║     █████╗
╚════██║██║   ██║██║   ██║██╔══██╗██║     ██╔══╝
███████║╚██████╔╝╚██████╔╝██║  ██║╚██████╗███████╗
╚══════╝ ╚═════╝  ╚═════╝ ╚═╝  ╚═╝ ╚═════╝╚══════╝

---

Languages, Frameworks and Tools

Checkout my Blog Posts 📚

• Javascript History API
• CSS Art: Paneer Tikka
• Finding Issues for Hacktoberfest

css-is-fun's Issues

Come up with a great idea to showcase the project in the file.

[FEATURE] Update `CONTRIBUTING.md`

Currently, the contributing file is not that clear, just review it once and tell the new contributor how to contribute to the project.
This should include the following points, along with installing the project locally and setting it up.

• Where to put the new snippet, which is inside the UI Snippets folder
• Add their new snippet to the code pen.
• Add an image as well which is needed for the UI.
• Add about it in the snippets.json file so we can render it in the UI.

Update the `snippets.json` file seeing the recent PRs.

The current snippet.json file is outdated and the snippets which were added recently are not present in it.

If the Image link is not present in the PR take one screenshot and add the relative path to the file.
If the codepen link is not mentioned put empty strings.

This is the sample snippet.json file

{
	"name": "Social Login",
	"codepen-link": "https://codepen.io/pen/KKejzVy",
	"image-link": "https://github.com/Deveesh-Shetty/CSS-Is-Fun/assets/89470104/18d4af5d-459e-4b45-8c51-aa253ff88da9",
	"author": "Deveesh-Shetty"
},

[UI] Add your UI Snippet or Project

Show Off your UI Snippets

Add your UI snippet in the repo. It can be anything, a small counter, a cool CSS-Pattern, or a CSS + JS monstrosity 🔥.

Your contributions are always welcome.

✅ Make sure the UI is not already on the list of UIs.

Well, If it is on the list then what? Simple Solution, make your project a little unique by adding some twists and turns and be as creative as you like.✨.

CSS file not linked to HTML file

A UI named Loading Page has a small issue regarding its style.css file not linked to index.html

The source code link doesn't work in your Snippets section

A screensaver UI snippet.

A UI snippet of a screensaver which consists of animations repeated at time instance built with HTML CSS and Javascript.

I would like to add a login portal ui snippet

A login portal with username and password intake would be nice to be added in UI snippets.

Add a table of content with a link to snippets so it is easier to navigate the readme file.

I would like to add some button animations

Describe the UI snippet
A clear and concise description of the UI snippet you want to add.

Why is this UI snippet useful?
Explain the benefits and use cases for this UI snippet.

Design or mockup
If possible, provide a design or mockup of the UI snippet.

Additional context
Add any other context or information about the UI snippet here.

[FEATURE] Create a a file called `snippets.json` which will list all the projects

Example for an object in the file

[
  {
    "name": "Cart Item",
    "codepen-link": "https://codepen.io/deveesh_shetty_12/pen/rNKXvKm",
    "image-link": "https://github.com/Deveesh-Shetty/CSS-Is-Fun/assets/89470104/9b12a923-f70a-411e-8964-0273e507576a",
    "folder-link": "https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/Cart%20Item",
    "author": "Deveesh-Shetty"
  }
]

You can get all these details from the Readme.md file for all the available sniipets

Why this?

Because I want to have a frontend for this project, it will be easier to access all the data from the JSON file and put it in the UI.

Feel free to ask questions about it!

[DOCS] Update the documentation

Improve the readme file

The Readme file currently looks a bit incomplete.

Potential Ideas

• #7
• #5
• #6

Open to more ideas 🚀

[UI] Create a random password generator

Use HTML, CSS, and JavaScript to create a Random Password Generator.

Feel free to ask for any help!

[UI] Build a Flipcard

Give a good description of the project

[UI] Digital Clock

A UI snippet of digital clock using html css and javascript in 12 hour format

Used to record time; Hour: Minute: Seconds