GithubHelp home page GithubHelp logo

openlake / pixoss Goto Github PK

View Code? Open in Web Editor NEW
22.0 2.0 51.0 310 KB

Deployment of our Canvas

Home Page: https://pixoss.netlify.app/

License: MIT License

JavaScript 1.91% HTML 0.81% TypeScript 95.95% CSS 1.09% Shell 0.23%
art community iitbhilai web

pixoss's Introduction

Pixels Website

Welcome to the Pixels, a collaborative platform for creative individuals to color pixels, leave their mark, and express themselves through art! On Pixels, you have the opportunity to contribute to a collective canvas by coloring individual pixels and sharing your unique identity with the world.

Getting Started

To get started with coloring pixels and leaving your mark on the canvas, follow these simple steps:

  1. Explore the Canvas: Visit the Pixels website and explore the interactive canvas filled with blank pixels waiting to be colored. Each pixel represents a tiny square on the canvas.

  2. Choose Your Color: Select your preferred color from the color palette available. We offer a diverse range of colors to choose from, allowing you to create eye-catching and imaginative designs.

  3. Color a Pixel: Click on an individual pixel to color it with your chosen color. Watch as your pixel contributes to the evolving masterpiece on the canvas.

  4. Leave Your Mark: Alongside your colored pixel, you can leave your name, profile picture (pfp), and a brief message. This helps you express your identity and share your thoughts with other participants.

  5. Submit Your Contribution: Once you've colored your pixel and provided your details, you can submit your contribution. Your colored pixel, along with your name, pfp, and message, will become a part of the larger artwork.

Why Pixels?

  • Collaborative Art: Pixels is all about collaborative art. Watch as the canvas transforms from a blank slate into a colorful and vibrant masterpiece created by artists and enthusiasts like you from around the world.

  • Self-Expression: Express yourself through colors, shapes, and messages. Your pixel and accompanying details reflect your personality, interests, and creativity.

  • Community Interaction: Engage with a global community of artists and art lovers. Explore the diverse contributions, appreciate others' work, and connect with fellow creatives.

  • Endless Possibilities: With an ever-growing canvas and an array of colors at your fingertips, the creative possibilities are endless. Your pixel could be the missing piece that completes an intricate design.

How to Contribute

Contributing to the Pixels canvas is easy and enjoyable:

  1. Choose Your Pixel: Select a pixel you'd like to color.

  2. Pick Your Color: Click on the pixel and choose your preferred color from the palette.

  3. Add Your Details: Provide your name, upload your profile picture (pfp), and leave a short message to accompany your pixel.

  4. Submit: Create a PR and await for our review.

Guidelines

To ensure a positive and inclusive experience for all participants, please adhere to the following guidelines:

  • Be respectful and considerate of others' contributions and messages.
  • Use appropriate and respectful language in your messages.
  • Avoid any content that may be offensive, discriminatory, or inappropriate.

pixoss's People

Contributors

aayushkatariaa avatar adismort14 avatar aditya062003 avatar aneesh02 avatar anirudh-ranga avatar ayush-mishra-0-0 avatar bhavya930636 avatar bhoomigoyal avatar chetaniitbhilai avatar chiefravinder avatar gaurshivangi avatar immortalcodes avatar itzpushan avatar jaeaeich avatar karankumbhar47 avatar kiran-bsv avatar kirtiraj2215 avatar krishnan05 avatar kritiarora2003 avatar kunalthgr8 avatar nandostream11 avatar parthu-19 avatar piyush-c38 avatar roshanjha-dev avatar rounak161 avatar shashankpantiitbhilai avatar srs-sudeep avatar suraj-g862 avatar tusharbansal22 avatar vedant-udan avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

pixoss's Issues

fix: Github star

Description

Wrong api link in the github star showing wrong data.

Expected outcome

Correct info about the number of stars being displayed.

Proposed solution

Add the correct API link

[Pixel][3,1]Fill the Pixel!

I wish to fill pixel [3,1] with saffron colour
Name : Parth Sarwade
ID : 12241220
Batch : 2022
Colour : Saffron

fix(lintstaged): Setup lintstaged

Description

Lintstaged is installed, but its functionality is not used to its full extent. Husky is linting and formatting every file, but the expected behavior should be that only the changed files should be linted and formatted.

Expected outcome

Commits shouldn't require linting and formatting all the files.

Proposed solution

Change the config file, specify which files need to be linted and formatted, and then use git hook (husky) to lint only staged files, use lintstaged as the library is already installed.

feat: Add year based canvas

Description

Add a dropdown to the navbar so that each year's canvas can be easily navigated.

Expected outcome

A year-wise canvas that would store and display different canvases across different years.

Proposed solution

Change the data and add an extra field that shows the year from which the data belongs; based on this, render the canvas.

feat(modal): Add socials of user to the pixel

Description

Currently the modal only shows the person's name, pfp and message, add their socials like LinkedIn and Github to it.

Expected outcome

Social handles being displayed in the modal of the user.

Proposed solution

Change the data (pixel.ts) schema and add the above-mentioned attribute and then render the same in the modal.

feat(grid): Introduce responsive and interactive grid

Description

The current grid can be made responsive to the device's height and width. And interactive for users to zoom into the grid if need be.

Expected outcome

The grid can accustom itself to the device it's been viewed on, and pixels can be zoomed in.

Proposed solution

Create a container for the grid and style using tailwind to achieve the above-mentioned outcome.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.