Thanks to visit codestin.com
Credit goes to GitHub.com

Skip to content

A Ghibli-inspired immersive portfolio themed "Witch's Forest Bakery." Features real-time atmospheric changes and interactive animations built with Vanilla JS and Tailwind CSS.

License

Notifications You must be signed in to change notification settings

imshota1009/Cat-Sweets

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Baking Shota - Witch's Forest Bakery 🍞🌿

Welcome to the official website of Baking Shota (@baking_shota1009). Concept: "A Bakery in the Witch's Forest". We aimed for a Ghibli-esque atmosphere with warm textures, playful gimmicks, and Ghibli-inspired magic.

Project Banner (Note: You can replace this path with an actual screenshot if available)


✨ Features

🎨 Design Concept

  • Ghibli-esque: Uses watercolor textures, paper-like materials, and rounded fonts (Zen Maru Gothic & Kiwi Maru).
  • Responsive: Beautifully displayed on both PC and smartphones.

🪄 7 Magic Spells (Interactive Gimmicks)

This site is filled with hidden elements to entertain visitors:

  1. Time-Shift Atmosphere 🕰️

    • The site's vibe changes in real-time based on your local time.
    • Day (6:00-16:00): Bright sunlight and floating dust motes.
    • Evening (16:00-19:00): Nostalgic sunset orange.
    • Night (19:00-6:00): Deep night, where fireflies dance and your cursor becomes a lantern.
  2. Soot Sprites

    • Small black spirits (Soot Sprites) scurry away when you move your mouse.
  3. Konpeito Magic 🍬

    • Click anywhere to release a burst of colorful star candies (Konpeito).
  4. Scroll Cat 🐈

    • A cat walks along the top edge of the screen to indicate your scroll progress.
  5. Windy Leaves 🍃

    • Occasionally, watercolor leaves dance across the screen carried by the wind.
  6. Jelly Physics 🍮

    • Buttons and images react with a "jelly-like" bounce when clicked or hovered.
  7. Steam ♨️

    • Gentle steam rises from the photos of freshly baked bread.

🛠️ Tech Stack

Built with a lightweight configuration without heavy frameworks:

  • HTML5
  • CSS3 (Tailwind CSS via CDN)
  • JavaScript (Vanilla ES6+)
  • FontAwesome (Icons)
  • Google Fonts (Zen Maru Gothic, Kiwi Maru)

🚀 Usage

No special build environment is required. Just open index.html in your browser.

# Clone
git clone https://github.com/your-username/baking-shota-website.git

# Open Folder
cd baking-shota-website

# Open index.html
# (Using "Live Server" extension in VS Code is recommended)

📂 Directory Structure

.
├── index.html          # Main Source Code
├── README.md           # This File
└── materials/          # Image Assets
    ├── icon.png        # Profile Icon
    ├── myfavorite1-3.jpg 
    └── picture1-9.jpg  # Gallery Images

📜 License

Designed & Developed for Baking Shota.

About

A Ghibli-inspired immersive portfolio themed "Witch's Forest Bakery." Features real-time atmospheric changes and interactive animations built with Vanilla JS and Tailwind CSS.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages