{"id":25950243,"url":"https://github.com/brhylle/chuupurple","last_synced_at":"2026-03-05T23:05:55.512Z","repository":{"id":259334144,"uuid":"799229377","full_name":"Brhylle/chuupurple","owner":"Brhylle","description":"a collaborative work by Team Purple for creating 20 components using Vue.js.","archived":false,"fork":false,"pushed_at":"2025-02-14T13:15:06.000Z","size":82633,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-01T19:19:42.187Z","etag":null,"topics":["frameworks","front-end-development","frontend"],"latest_commit_sha":null,"homepage":"https://chuupurple.vercel.app/","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Brhylle.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-05-11T14:15:34.000Z","updated_at":"2025-02-14T13:02:07.000Z","dependencies_parsed_at":"2025-02-14T13:49:16.586Z","dependency_job_id":null,"html_url":"https://github.com/Brhylle/chuupurple","commit_stats":null,"previous_names":["brhylle/chuupurple"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Brhylle%2Fchuupurple","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Brhylle%2Fchuupurple/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Brhylle%2Fchuupurple/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Brhylle%2Fchuupurple/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Brhylle","download_url":"https://codeload.github.com/Brhylle/chuupurple/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241852136,"owners_count":20030969,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["frameworks","front-end-development","frontend"],"created_at":"2025-03-04T12:53:24.761Z","updated_at":"2026-03-05T23:05:50.482Z","avatar_url":"https://github.com/Brhylle.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 😮 chuupurple\n\n### 🌟 Description\n**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:\n- Light/Dark Mode\n- Scroll-Based SPA\n- Adaptive Color Palette\n- Interactive State-Aware Color Scheme\n- Theme-Aware Interactive Elements\n- Client-Side Rendered (CSR)\n\n---\n\n### 🔗 Live Demo\nYou may checkout deployed version here: [https://chuupurple.vercel.app/]\n\n---\n\n### 🛠️ Tech Stack\n\u003c!-- Frontend --\u003e\n\n\u003ctable style=\"width: 100%;\"\u003e\n  \u003ctr\u003e\n    \u003ctd colspan=\"3\" style=\"text-align: center;\"\u003e\u003cb\u003e\u003ci\u003eFrontend\u003c/i\u003e\u003c/b\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd style=\"text-align: center; vertical-align: middle;\"\u003e\n      \u003cimg src=\"https://vuejs.org/images/logo.png\" width=\"100\" alt=\"vue.js\"\u003e\n    \u003c/td\u003e\n    \u003ctd style=\"text-align: center; vertical-align: middle;\"\u003e\n      \u003cimg src=\"https://mwop.net/images/tailwindcss.svg\" width=\"100\" alt=\"tailwindcssui\"\u003e\n    \u003c/td\u003e\n    \u003ctd style=\"text-align: center; vertical-align: middle;\"\u003e\n      \u003cimg src=\"https://avatars.githubusercontent.com/u/76870092?s=200\u0026v=4\" width=\"100\" alt=\"daisyui\"\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd style=\"text-align: center; vertical-align: middle;\"\u003eVueJS\u003c/td\u003e\n    \u003ctd style=\"text-align: center; vertical-align: middle;\"\u003eTailwindCSS\u003c/td\u003e\n    \u003ctd style=\"text-align: center; vertical-align: middle;\"\u003eDaisyUI\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd style=\"text-align: center; vertical-align: middle;\"\u003e\n      \u003cimg src=\"https://upload.wikimedia.org/wikipedia/commons/thumb/3/38/HTML5_Badge.svg/1024px-HTML5_Badge.svg.png\" width=\"100\" alt=\"html\"\u003e\n    \u003c/td\u003e\n    \u003ctd style=\"text-align: center; vertical-align: middle;\"\u003e\n      \u003cimg src=\"https://upload.wikimedia.org/wikipedia/commons/thumb/6/62/CSS3_logo.svg/1024px-CSS3_logo.svg.png\" width=\"100\" alt=\"css\"\u003e\n    \u003c/td\u003e\n    \u003ctd style=\"text-align: center; vertical-align: middle;\"\u003e\n      \u003cimg src=\"https://bc.team/wp-content/uploads/2019/06/Javascript.png\" width=\"100\" alt=\"js\"\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd style=\"text-align: center; vertical-align: middle;\"\u003eHTML\u003c/td\u003e\n    \u003ctd style=\"text-align: center; vertical-align: middle;\"\u003eCSS\u003c/td\u003e\n    \u003ctd style=\"text-align: center; vertical-align: middle;\"\u003eJavascript\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\n\n\u003c!-- Build Tools --\u003e\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd colspan=2\u003e\u003cb\u003e\u003ci\u003eBuild Tools\u003c/i\u003e\u003c/b\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003cimg src=\"https://upload.wikimedia.org/wikipedia/commons/thumb/9/94/Webpack.svg/1920px-Webpack.svg.png\" width=100\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cimg src=\"https://upload.wikimedia.org/wikipedia/commons/d/d9/Node.js_logo.svg\" width=100\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003eWebPack\u003c/td\u003e\n    \u003ctd\u003eNodeJS\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n---\n\n### 🚀 Features\n- Light/Dark Mode\n- Scroll-Based SPA\n- Adaptive Color Palette\n- Theme-Aware Interactive Elements\n- Client-Side Rendered (CSR)\n\n---\n\n### 📸 Snapshots\nHere's what **chuupurple** looks like in action:\n- \u003cb\u003eLight/Dark Mode \u0026 Adaptive Color Palette\u003cbr\u003e\u003cbr\u003e\u003c/b\u003e\n![chuupurple_feature_1](https://github.com/user-attachments/assets/ecbd9af7-d6d4-47b8-a65b-6d5c0c7429b2)\n![chuupurple_feature_1-1](https://github.com/user-attachments/assets/142b3eda-63a8-401a-8738-6c998af837f8)\n\n\u003cbr\u003e\n\n- \u003cb\u003eScroll-Based SPA \u0026 Theme-Aware Interactive Elements\u003cbr\u003e\u003c/b\u003e\n![chuupurple_feature_2](https://github.com/user-attachments/assets/77f578b1-f1d7-434f-95e1-669f8f4db37c)\n\n\n---\n\n\n### 🏗️ Project Structure\n```\n📦chuupurple\u003cbr\u003e\n ┣ 📂plugins\u003cbr\u003e\n ┃  ┗ 📜animations.js\u003cbr\u003e\n ┣ 📂public\u003cbr\u003e\n ┃  ┣ 🖼️favicon.ico\u003cbr\u003e\n ┃  ┗ 📜index.html\u003cbr\u003e\n ┣ 📂src\u003cbr\u003e\n ┃  ┣ 📂assets\u003cbr\u003e\n ┃  ┃   ┣ 📂fonts\u003cbr\u003e\n ┃  ┃   ┃   ┣ 📂humane\u003cbr\u003e\n ┃  ┃   ┃   ┃   ┣ 🗚 humane-bold.otf\u003cbr\u003e\n ┃  ┃   ┃   ┃   ┣ 🗚 humane-bold.woff\u003cbr\u003e\n ┃  ┃   ┃   ┃   ┣  ...\u003cbr\u003e\n ┃  ┃   ┃   ┃   ┣ 🗚 humane-thin.otf\u003cbr\u003e \n ┃  ┃   ┃   ┃   ┗ 🗚 humane-thin.woff\u003cbr\u003e\n ┃  ┃   ┃   ┗ 📂ppneue\u003cbr\u003e\n ┃  ┃   ┃   ┃   ┣ 🗚 ppneuemontreal.woff\u003cbr\u003e\n ┃  ┃   ┃   ┃   ┣  ...\u003cbr\u003e\n ┃  ┃   ┃   ┃   ┗ 🗚 ppneuemontreal-thin.woff\u003cbr\u003e\n ┃  ┃   ┣ 📂imgs\u003cbr\u003e\n ┃  ┃   ┃   ┣ 📂hover-carousel\u003cbr\u003e\n ┃  ┃   ┃   ┃   ┣ 🖼️cruz_pic.jpg\u003cbr\u003e\n ┃  ┃   ┃   ┃   ┣ 🖼️delacruz_pic.jpg\u003cbr\u003e\n ┃  ┃   ┃   ┃   ┣ 🖼️fortin_pic.jpg\u003cbr\u003e\n ┃  ┃   ┃   ┃   ┣  ...\u003cbr\u003e\n ┃  ┃   ┃   ┃   ┗ 🖼️ventura.jpg\u003cbr\u003e\n ┃  ┃   ┃   ┣ 📂selection-one\u003cbr\u003e\n ┃  ┃   ┃   ┃   ┣ 🖼️BINI - Pantropiko.jpg\u003cbr\u003e\n ┃  ┃   ┃   ┃   ┣ 🎵BINI - Pantropiko.mp3\u003cbr\u003e\n ┃  ┃   ┃   ┃   ┣  ...\u003cbr\u003e\n ┃  ┃   ┃   ┃   ┣ 🖼️TJ Monterde - Palagi.jpg\u003cbr\u003e\n ┃  ┃   ┃   ┃   ┗ 🎵TJ Monterde - Palagi.mp3\u003cbr\u003e\n ┃  ┃   ┃   ┗ 📂selection-two\u003cbr\u003e\n ┃  ┃   ┃   ┃   ┣ 🖼️Aiah.jpg\u003cbr\u003e\n ┃  ┃   ┃   ┃   ┣ 🖼️BINI.jpg\u003cbr\u003e\n ┃  ┃   ┃   ┃   ┣ 🖼️Colet.jpg\u003cbr\u003e\n ┃  ┃   ┃   ┃   ┣  ...\u003cbr\u003e\n ┃  ┃   ┃   ┃   ┗ 🖼️Stacey.jpg\u003cbr\u003e\n ┃  ┃   ┣ 📂placeholders\u003cbr\u003e\n ┃  ┃   ┃   ┣ 🖼️landscape-1.jpg\u003cbr\u003e\n ┃  ┃   ┃   ┣  ...\u003cbr\u003e\n ┃  ┃   ┃   ┗ 🖼️landscape-8.jpg\u003cbr\u003e\n ┃  ┃   ┣ 📂public\u003cbr\u003e\n ┃  ┃   ┃   ┣ 🖼️chuu-dark-badge.svg\u003cbr\u003e\n ┃  ┃   ┃   ┣ 🖼️emoji-dark.png\u003cbr\u003e\n ┃  ┃   ┃   ┗ 🖼️scroll-down.gif\u003cbr\u003e\n ┃  ┃   ┣ 🖼️Home.png\u003cbr\u003e\n ┃  ┃   ┗ 🖼️logo.png\u003cbr\u003e\n ┃  ┣ 📂components\u003cbr\u003e\n ┃  ┣ 📜App.vue\u003cbr\u003e\n ┃  ┣ 📜index.css\u003cbr\u003e\n ┃  ┗ 📜main.js\u003cbr\u003e\n ┣ 🔑.env\u003cbr\u003e\n ┣ 🚫.gitignore\u003cbr\u003e     ┣ 📜babel.config.js\u003cbr\u003e   ┣ 📜jsconfig.json\u003cbr\u003e┣ 📜package-lock.json\u003cbr\u003e\n ┣ 📜package.json\u003cbr\u003e\n ┣ 📜postcss.config.js\u003cbr\u003e\n ┗ ℹ️README.md       # Project documentation\n```\n\n---\n \n ## 🧱 Contributor's Wall\n _These are the respected contributors, contributed throughout the start 'till the end🗣️📢._\n\n\u003ca href=\"https://github.com/Brhylle/chuupurple/graphs/contributors\"\u003e\n  \u003cimg src=\"https://contrib.rocks/image?repo=Brhylle/chuupurple\" /\u003e\n\u003c/a\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrhylle%2Fchuupurple","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbrhylle%2Fchuupurple","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrhylle%2Fchuupurple/lists"}