Skip to content

README.md

Latest commit

 

History

History
25 lines (19 loc) · 1.5 KB

README.md

File metadata and controls

25 lines (19 loc) · 1.5 KB
Raw

🎤 Miku Contact List 🎶

A vibrant, Hatsune Miku-themed contact directory created for a WebDev1 project. This application combines fundamental web development practices with a fun, Vocaloid-inspired aesthetic, featuring fully functional contact management logic! 💙

Experience the Live Site Here!

✨ Project Features

This isn't just a static page; it includes fully custom Vanilla JavaScript functionality:

  • CRUD Operations: Users can Create, Read, Update, and Delete contacts seamlessly.
  • Live Search: A dynamic search bar that filters contacts in real-time.
  • Custom CSS Animations: Features a scrolling VT323-style ticker, a heartbeat footer, and floating elements.
  • Toast Notifications: Custom-built pop-up alerts for user actions (adding, editing, deleting).
  • The "Miku Ad" Overlay: A custom, fully styled "fake advertisement" pop-up complete with a countdown timer and a redirect feature.

🎧 Technologies Used

  • HTML5 - Semantic structure and layout
  • CSS3 - Advanced styling, grid/flexbox layouts, and keyframe animations
  • Vanilla JavaScript - DOM manipulation, array filtering, and interactive state management

💻 Local Setup

If you want to view or edit the code locally on your machine:

  1. Clone the repository via terminal: 
    git clone [https://github.com/ZRayce/Miku_Contact_List_Page-WebDev1-Project.git](https://github.com/ZRayce/Miku_Contact_List_Page-WebDev1-Project.git)