Creative Coding ✨

A collection of small, interactive web experiments built with Astro — exploring calm design, motion, and creativity through code.
Each project is lightweight, self-contained, and designed to encourage curiosity or reflection rather than competition or distraction.

---

🎨 Overview

This site brings together a series of creative coding sketches, each one exploring how simple shapes, motion, and interaction can influence mood.
Some projects are playful; others are quiet or meditative. All are built for the browser using minimal dependencies, primarily p5.js and vanilla JavaScript.

It’s part of an ongoing exploration into what I call mindful code — creating interactive pieces that help people pause, breathe, and feel more connected while waiting, learning, or simply passing time.

---

🧠 Built With

• Astro – fast static site builder for modern web projects
• p5.js – creative coding library for generative art and motion
• HTML, CSS, and a touch of JavaScript
• Optional: Tailwind CSS or custom utilities for layout and typography (depending on version)

---

🕹 Featured Projects

Project	Description
Mindful Circles	Gentle motion-based sketch where floating circles attract and repel — built to explore calm and focus through physics and motion.
Animal Catcher	A cheerful tap game for toddlers that uses emojis as simple, responsive “animals” to catch. Perfect for waiting rooms.
Tap to Calm	A single-file mindful tool. Tap drifting orbs to release light and move through calm “breath levels.” Built entirely within one HTML file using p5.js.

Each project is available as a standalone demo or embedded within the Astro site.

---

🧩 Project Structure

/
├── public/             # Static assets and site icons
├── src/
│   ├── components/     # Layout and UI components
│   ├── layouts/        # Shared page templates
│   ├── pages/          # Individual project pages (Astro files)
│   └── sketches/       # Contained creative-coding projects
├── package.json
├── astro.config.mjs
└── README.md


🧭 Vision

Creative coding is where art and logic meet. This project exists as a digital playground — a place to explore ideas that might not fit neatly into “apps” or “tools,” but still invite interaction, mindfulness, or curiosity.

Future updates will expand this into a living collection of sketches and micro-games that can be embedded or reimagined as teaching tools.

📜 License

This project is open source under the MIT License
.

Made by Diane Corriette
[Django Developer](https://todiane.com) 

Built with Astro. Inspired by calm, play, and the beauty of small experiments.


# Astro Starter Kit: Minimal

```sh
npm create astro@latest -- --template minimal

🧑‍🚀 Seasoned astronaut? Delete this file. Have fun!

🚀 Project Structure

Inside of your Astro project, you'll see the following folders and files:

/
├── public/
├── src/
│   └── pages/
│       └── index.astro
└── package.json

Astro looks for .astro or .md files in the src/pages/ directory. Each page is exposed as a route based on its file name.

There's nothing special about src/components/, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.

Any static assets, like images, can be placed in the public/ directory.

🧞 Commands

All commands are run from the root of the project, from a terminal:

Command	Action
npm install	Installs dependencies
npm run dev	Starts local dev server at localhost:4321
npm run build	Build your production site to ./dist/
npm run preview	Preview your build locally, before deploying
npm run astro ...	Run CLI commands like astro add, astro check
npm run astro -- --help	Get help using the Astro CLI

👀 Want to learn more?

Feel free to check our documentation or jump into our Discord server.