https://github.com/brhylle/chuupurple
a collaborative work by Team Purple for creating 20 components using Vue.js.
https://github.com/brhylle/chuupurple
frameworks front-end-development frontend
Last synced: about 1 month ago
JSON representation
a collaborative work by Team Purple for creating 20 components using Vue.js.
- Host: GitHub
- URL: https://github.com/brhylle/chuupurple
- Owner: Brhylle
- Created: 2024-05-11T14:15:34.000Z (almost 2 years ago)
- Default Branch: master
- Last Pushed: 2025-02-14T13:15:06.000Z (about 1 year ago)
- Last Synced: 2025-03-01T19:19:42.187Z (about 1 year ago)
- Topics: frameworks, front-end-development, frontend
- Language: Vue
- Homepage: https://chuupurple.vercel.app/
- Size: 78.8 MB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 😮 chuupurple
### 🌟 Description
**chuupurple** is a _showcase of collective components_ as a project in a _Single-Paged Application (SPA)_. It serves as the **_showcase platform_** where all of website components made by **_different minds_** comes together to form a **single piece of artwork**, this ensures that even if they're made by different people, each components assigned to them will blend cohesively, if not perfectly... then seamlessly. **Built** using _Vue.js_ on Webpack, Tailwind CSS for comfort styling, and has numerous features such as:
- Light/Dark Mode
- Scroll-Based SPA
- Adaptive Color Palette
- Interactive State-Aware Color Scheme
- Theme-Aware Interactive Elements
- Client-Side Rendered (CSR)
---
### 🔗 Live Demo
You may checkout deployed version here: [https://chuupurple.vercel.app/]
---
### 🛠️ Tech Stack
Frontend
VueJS
TailwindCSS
DaisyUI
HTML
CSS
Javascript
Build Tools
WebPack
NodeJS
---
### 🚀 Features
- Light/Dark Mode
- Scroll-Based SPA
- Adaptive Color Palette
- Theme-Aware Interactive Elements
- Client-Side Rendered (CSR)
---
### 📸 Snapshots
Here's what **chuupurple** looks like in action:
- Light/Dark Mode & Adaptive Color Palette
- Scroll-Based SPA & Theme-Aware Interactive Elements
---
### 🏗️ Project Structure
```
📦chuupurple
┣ 📂plugins
┃ ┗ 📜animations.js
┣ 📂public
┃ ┣ 🖼️favicon.ico
┃ ┗ 📜index.html
┣ 📂src
┃ ┣ 📂assets
┃ ┃ ┣ 📂fonts
┃ ┃ ┃ ┣ 📂humane
┃ ┃ ┃ ┃ ┣ 🗚 humane-bold.otf
┃ ┃ ┃ ┃ ┣ 🗚 humane-bold.woff
┃ ┃ ┃ ┃ ┣ ...
┃ ┃ ┃ ┃ ┣ 🗚 humane-thin.otf
┃ ┃ ┃ ┃ ┗ 🗚 humane-thin.woff
┃ ┃ ┃ ┗ 📂ppneue
┃ ┃ ┃ ┃ ┣ 🗚 ppneuemontreal.woff
┃ ┃ ┃ ┃ ┣ ...
┃ ┃ ┃ ┃ ┗ 🗚 ppneuemontreal-thin.woff
┃ ┃ ┣ 📂imgs
┃ ┃ ┃ ┣ 📂hover-carousel
┃ ┃ ┃ ┃ ┣ 🖼️cruz_pic.jpg
┃ ┃ ┃ ┃ ┣ 🖼️delacruz_pic.jpg
┃ ┃ ┃ ┃ ┣ 🖼️fortin_pic.jpg
┃ ┃ ┃ ┃ ┣ ...
┃ ┃ ┃ ┃ ┗ 🖼️ventura.jpg
┃ ┃ ┃ ┣ 📂selection-one
┃ ┃ ┃ ┃ ┣ 🖼️BINI - Pantropiko.jpg
┃ ┃ ┃ ┃ ┣ 🎵BINI - Pantropiko.mp3
┃ ┃ ┃ ┃ ┣ ...
┃ ┃ ┃ ┃ ┣ 🖼️TJ Monterde - Palagi.jpg
┃ ┃ ┃ ┃ ┗ 🎵TJ Monterde - Palagi.mp3
┃ ┃ ┃ ┗ 📂selection-two
┃ ┃ ┃ ┃ ┣ 🖼️Aiah.jpg
┃ ┃ ┃ ┃ ┣ 🖼️BINI.jpg
┃ ┃ ┃ ┃ ┣ 🖼️Colet.jpg
┃ ┃ ┃ ┃ ┣ ...
┃ ┃ ┃ ┃ ┗ 🖼️Stacey.jpg
┃ ┃ ┣ 📂placeholders
┃ ┃ ┃ ┣ 🖼️landscape-1.jpg
┃ ┃ ┃ ┣ ...
┃ ┃ ┃ ┗ 🖼️landscape-8.jpg
┃ ┃ ┣ 📂public
┃ ┃ ┃ ┣ 🖼️chuu-dark-badge.svg
┃ ┃ ┃ ┣ 🖼️emoji-dark.png
┃ ┃ ┃ ┗ 🖼️scroll-down.gif
┃ ┃ ┣ 🖼️Home.png
┃ ┃ ┗ 🖼️logo.png
┃ ┣ 📂components
┃ ┣ 📜App.vue
┃ ┣ 📜index.css
┃ ┗ 📜main.js
┣ 🔑.env
┣ 🚫.gitignore
┣ 📜babel.config.js
┣ 📜jsconfig.json
┣ 📜package-lock.json
┣ 📜package.json
┣ 📜postcss.config.js
┗ ℹ️README.md # Project documentation
```
---
## 🧱 Contributor's Wall
_These are the respected contributors, contributed throughout the start 'till the end🗣️📢._
