Clau's Kitchen: My mom's tool to share what she loves most 👩🏻‍🍳

Clau's Kitchen is a warm and welcoming recipe website built with Astro, designed to celebrate Paraguayan cuisine and share meaningful dishes with the world. From traditional chipas to heartfelt cooking tips, Clau’s Kitchen brings homemade joy to your browser. This is a mini webdev project where I am applying what I learned about Astro, CSS, and HTML during my Cardinal Quarter experience. I made this webpage for my mom because she loves cooking and sharing her recipes with family and friends.

First of all, I started this project with a minimal Astro template. npm create astro@latest -- --template minimal

I made use of AI as a tutor, using Copilot and ChatGPT-4. This static webpage taught me a lot, and I am pleased with the result!

🌐 Live Website

You can visit the live site here:
https://sofislas05.github.io/claus-kitchen/ BEST VIEWED USING CHROME

🚀 Features

• 📸 Beautiful landing page with custom images and a handwritten-style font.
• 📚 Individual pages for Clau's favorite recipes.
• 🧭 Navigation bar with active link highlighting.
• 💕 Responsive design with love and simplicity in mind.
• 🌍 Hosted on GitHub Pages with static generation via Astro.

🛠️ Tech Stack

• Framework: Astro
• Languages: HTML, CSS, a bit of JavaScript
• Deployment: GitHub Pages
• Tools: npm, Astro static adapter

🧩 Setup and Development

To run this project locally:

# Clone the repository
git clone https://github.com/sofislas05/claus-kitchen.git

# Navigate into the folder
cd claus-kitchen

# Install dependencies
npm install

# Run the local dev server
npm run dev

🧪 Build and Deploy

To build the static site for GitHub Pages:

# Build the project
npm run build

# Deploy (using gh-pages or other method)
npm run deploy

Make sure the base path is set to /claus-kitchen/ in your astro.config.mjs.

✨ Acknowledgments

This project is lovingly created by Sofía Islas, as part of a personal journey into web development and digital storytelling.