Personal 2024 Christmas Advent Calendar 🎄

Overview

This project is a 25-day Advent Calendar created with love and creativity for Rashad. Each door represents a unique day with surprises, interactive elements, and heartfelt messages leading up to Christmas Day.

• Link to the official website deployed on Netlify here: https://christmas-advent-calendar.netlify.app/#/

Some Key Features

• Interactive Elements:
  • Hover animations for shaking gifts.
  • Hidden surprises revealed with CSS and Typescript.
• Personalized Content:
  • Each day contains a special message, activity, or interactive feature tailored to Rashad.
• Themes and Activities:
  • Halo-themed elements, romantic notes, and playful holiday animations.

Technology Used

• HTML: Structuring the content.
• CSS: Styling and animations, including hover effects and transitions.
• Typescript (Angular): Interactive functionality and dynamic updates for swapping images and toggling visibility.

Project Structure

📂 src
 ├── 📁 assets
 │    ├── robloxgift1.png
 │    ├── robloxgift2.png
 │    ├── robloxgift3.png
 │    ├── opened-gift1.png
 │    ├── opened-gift2.png
 │    ├── opened-gift3.png
 │    └── socks.png
 ├── 📁 app
 │    ├── app.component.html
 │    ├── app.component.ts
 │    └── app.component.css

Key Highlights

1. Door Interactions

Each door reveals a surprise when clicked.

• Example:
  • Day 1: A welcome page/introduction.
  • Day 7: A Scooby-doo-themed brain-teaser challenge.

2. Final Door (25th)

The final door contains a heartfelt letter and a special surprise for Rashad to celebrate Christmas Day.

3. Themes

• Romantic and heartfelt notes.
• Playful and festive activities.
• Halo-inspired elements for a personalized touch.

How to Run

1. Clone this repository:

   git clone https://github.com/your-username/Christmas-Advent-Calendar.git

2. Navigate to the project folder:

   cd christmas-advent-calendar

3. Serve the Angular app locally:

   ng serve

4. Open your browser and go to http://localhost:4200 to view the project.

Acknowledgements

• Inspired by the holiday spirit and my love for Rashad. 🤍
• Special thanks to festive creativity and CSS magic!

License

This project is made with love and is not intended for commercial use. All rights reserved by the author, Dalila Solis.

Merry Christmas and Happy Holidays! 🎁🎅🤍

---

Christmas-Advent-Calendar

This project was generated using Angular CLI version 19.0.3.

Development server

To start a local development server, run:

ng serve

Once the server is running, open your browser and navigate to http://localhost:4200/. The application will automatically reload whenever you modify any of the source files.

Code scaffolding

Angular CLI includes powerful code scaffolding tools. To generate a new component, run:

ng generate component component-name

For a complete list of available schematics (such as components, directives, or pipes), run:

ng generate --help

Building

To build the project run:

ng build

This will compile your project and store the build artifacts in the dist/ directory. By default, the production build optimizes your application for performance and speed.

Running unit tests

To execute unit tests with the Karma test runner, use the following command:

ng test

Running end-to-end tests

For end-to-end (e2e) testing, run:

ng e2e

Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.

Additional Resources

For more information on using the Angular CLI, including detailed command references, visit the Angular CLI Overview and Command Reference page.