{"id":29408218,"url":"https://github.com/k1lgor/team-roaster","last_synced_at":"2026-05-19T06:06:26.849Z","repository":{"id":303200908,"uuid":"1014693271","full_name":"k1lgor/team-roaster","owner":"k1lgor","description":"A dynamic team roster page with an animated, cyberpunk-inspired UI built using Vue 3 and Vite.","archived":false,"fork":false,"pushed_at":"2025-07-06T09:18:59.000Z","size":1894,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-07-06T10:27:58.191Z","etag":null,"topics":["boilerplace","css-animations","cyberpunk","dark-theme","frontend","futuristic-ui","glitch-effect","template","vite","vue"],"latest_commit_sha":null,"homepage":"https://team-roaster.vercel.app/","language":"SCSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/k1lgor.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","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,"zenodo":null},"funding":{"github":"k1lgor","buy_me_a_coffee":"k1lgor"}},"created_at":"2025-07-06T08:15:08.000Z","updated_at":"2025-07-06T09:19:02.000Z","dependencies_parsed_at":"2025-07-06T10:28:11.803Z","dependency_job_id":null,"html_url":"https://github.com/k1lgor/team-roaster","commit_stats":null,"previous_names":["k1lgor/team-roaster"],"tags_count":0,"template":true,"template_full_name":null,"purl":"pkg:github/k1lgor/team-roaster","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/k1lgor%2Fteam-roaster","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/k1lgor%2Fteam-roaster/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/k1lgor%2Fteam-roaster/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/k1lgor%2Fteam-roaster/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/k1lgor","download_url":"https://codeload.github.com/k1lgor/team-roaster/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/k1lgor%2Fteam-roaster/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33204110,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-18T09:27:30.708Z","status":"online","status_checked_at":"2026-05-19T02:00:06.763Z","response_time":58,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["boilerplace","css-animations","cyberpunk","dark-theme","frontend","futuristic-ui","glitch-effect","template","vite","vue"],"created_at":"2025-07-11T02:25:05.009Z","updated_at":"2026-05-19T06:06:26.844Z","avatar_url":"https://github.com/k1lgor.png","language":"SCSS","funding_links":["https://github.com/sponsors/k1lgor","https://buymeacoffee.com/k1lgor"],"categories":[],"sub_categories":[],"readme":"# Team Roster - Cyberpunk Edition\n\nA dynamic, single-page application built with Vue 3 and Vite, showcasing a team roster with a futuristic, cyberpunk-inspired user interface.\n\n![Team Roaster](image-1.png)\n\n## Description\n\nThis project displays a list of team members in a visually striking, animated interface. It was developed as an exercise in modern frontend practices, including component-based architecture, dynamic data rendering, and advanced CSS styling with Sass. The UI features a dark theme, glowing neon text, geometric elements, and glitch animations to create an immersive cyberpunk aesthetic.\n\n## Features\n\n- **Dynamic Team Roster:** Team members are rendered dynamically from a single data array, making it easy to update and manage.\n- **Component-Based Architecture:** Built with Vue 3, the application is modular and scalable.\n- **Cyberpunk UI:** A custom, futuristic design with:\n  - Dark mode color palette.\n  - Glowing neon text and borders.\n  - Custom sci-fi fonts (`Orbitron`, `Share Tech Mono`).\n  - Hexagonal, animated profile pictures.\n  - CSS-driven glitch and stacking animations.\n- **Vite-Powered:** Fast development server and optimized production builds thanks to Vite.\n- **Sass Styling:** Styles are written in SCSS for more powerful and maintainable CSS.\n\n## Tech Stack\n\n- **Framework:** [Vue 3](https://vuejs.org/)\n- **Build Tool:** [Vite](https://vitejs.dev/)\n- **Styling:** [Sass (SCSS)](https://sass-lang.com/)\n- **Package Manager:** [pnpm](https://pnpm.io/)\n\n## Getting Started\n\nTo get a local copy up and running, follow these simple steps.\n\n### Prerequisites\n\n- [Node.js](https://nodejs.org/) (which includes npm)\n- [pnpm](https://pnpm.io/installation) (recommended)\n\n    ```sh\n    npm install -g pnpm\n    ```\n\n### Installation\n\n1. Clone the repository.\n2. Navigate to the project directory:\n\n    ```sh\n    cd team-roaster\n    ```\n\n3. Install the dependencies:\n\n    ```sh\n    pnpm install\n    ```\n\n## Available Scripts\n\nIn the project directory, you can run:\n\n- `pnpm dev`: Runs the app in development mode with hot-reloading. Open the URL provided in your terminal to view it in the browser.\n\n- `pnpm build`: Builds the app for production to the `dist` folder. It correctly bundles Vue and optimizes it for the best performance.\n\n- `pnpm preview`: Serves the production build from the `dist` folder locally, allowing you to preview the final app before deployment.\n\n## Customization\n\n### Modifying Team Members\n\nAdding, removing, or editing team members is straightforward:\n\n1. Open the file `src/components/TeamRoaster.vue`.\n2. Locate the `teamMembers` array within the `\u003cscript setup\u003e` block.\n3. Modify the array of objects. Each object represents a team member and has the following structure:\n\n    ```javascript\n    {\n      name: 'Full Name',\n      title: 'Job Title',\n      img: 'image-file-name.jpg', // Must be present in src/assets/images/\n      styleIndex: 0 // Used for animation staggering (usually 0, 1, or 2)\n    }\n    ```\n\n### Changing Styles\n\nAll visual styles, including colors, fonts, and animations, are located in `src/assets/styles/style.scss`. You can modify the CSS variables at the top of the file to easily change the color scheme.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fk1lgor%2Fteam-roaster","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fk1lgor%2Fteam-roaster","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fk1lgor%2Fteam-roaster/lists"}