Coca-Cola Animated Page

KUNDAN SOLANKI — Mon, 17 Feb 2025 14:25:26 +0000

This is a submission for Frontend Challenge - February Edition, CSS Art: February.

Inspiration

For this challenge, I wanted to explore the beauty of pure CSS art and push my creativity. Inspired by the elegance of minimalism and the versatility of CSS, I created this artwork to showcase how simple shapes and colors can bring an idea to life.

Demo

You can view my CSS Art live here: https://665f638cf1ccec2f53672412--elaborate-fenglisu-ec5400.netlify.app/

Here’s a preview of the artwork:

Code: https://github.com/KUNDAN1334/Practice_Projects/tree/main/Landing_Page

Journey

Working on this CSS Art challenge was both fun and insightful. I experimented with different CSS properties like clip-path, box-shadow, gradients, and animations to achieve the desired visual effect. Some key takeaways from this project:

Learned how to create complex shapes using clip-path and border-radius.
Explored the use of CSS gradients to add depth and dimension.
Enhanced my understanding of CSS animations to make the artwork dynamic.
I am particularly proud of how everything came together smoothly, and I hope to explore more intricate designs in future challenges

What’s Next?

In upcoming projects, I plan to:

Try more interactive CSS Art using hover effects and animations.
Explore SVGs combined with CSS for even more detailed artworks.
Participate in future frontend challenges to refine my CSS skills further.
If you liked my work, feel free to leave feedback and connect with me! 🚀

pinata-whiteBoard

KUNDAN SOLANKI — Sat, 12 Oct 2024 18:41:31 +0000

This is a submission for the The Pinata Challenge

What I Built

I built a collaborative whiteboard application called "Pinata Whiteboard" using React and Pinata IPFS services. This application allows users to draw, upload images, save their whiteboards to IPFS, and even mint their creations as NFTs

Demo

My Code

https://github.com/KUNDAN1334/pinata-whiteboard

More Details

Here are clear examples of how I used Pinata in my project:

1.Image Upload: When a user uploads an image to the whiteboard, it's stored on IPFS using Pinata's pinning service.

const handleImageUpload = async (file) => {
  const cid = await uploadFile(file);
  const url = getFileUrl(cid);
  canvasRef.current.addImage(url, 0, 0, width, height);
};

2.Saving Whiteboards: Users can save their whiteboards to IPFS, storing the entire whiteboard state.

const handleSave = async () => {
  const whiteboardData = canvasRef.current.getWhiteboardData();
  const cid = await saveWhiteboard(whiteboardData);
  alert(`Whiteboard saved! CID: ${cid}`);
};

3.Loading Whiteboards: Users can load previously saved whiteboards from IPFS.

const handleLoad = async (cid) => {
  const whiteboardData = await loadWhiteboard(cid);
  canvasRef.current.loadWhiteboardData(whiteboardData);
};

4.Listing Saved Whiteboards: The application fetches and displays a list of saved whiteboards using Pinata's Pin List API.

const listWhiteboards = async () => {
  const response = await axios.get(
    'https://api.pinata.cloud/data/pinList?status=pinned',
    {
      headers: {
        pinata_api_key: PINATA_API_KEY,
        pinata_secret_api_key: PINATA_SECRET_API_KEY,
      },
    }
  );
  return response.data.rows.filter(pin => pin.metadata.name === 'Whiteboard');
};

5.NFT Minting: Users can mint their whiteboards as NFTs, storing both the image and metadata on IPFS using Pinata.

const handleMint = async (e) => {
  e.preventDefault();
  const imageBlob = await getWhiteboardImage();
  const imageCID = await uploadFile(new File([imageBlob], 'whiteboard.png'));
  const metadata = {
    name,
    description,
    image: `ipfs://${imageCID}`,
  };
  const metadataCID = await mintNFTMetadata(metadata);
  alert(`NFT minted successfully! Metadata CID: ${metadataCID}`);
};

DEV Community: KUNDAN SOLANKI

Coca-Cola Animated Page

Inspiration

Demo

Journey

What’s Next?

pinata-whiteBoard

What I Built

Demo

My Code

More Details