{"id":15111685,"url":"https://github.com/camilopinzon/greatjakes","last_synced_at":"2026-01-18T17:33:14.657Z","repository":{"id":256874748,"uuid":"856641259","full_name":"CamiloPinzon/greatjakes","owner":"CamiloPinzon","description":"This project is a simple card layout component test, developed using **Vite**, **React**, **TypeScript**, and **SCSS**. The application demonstrates how to implement a responsive card container with customizable card components, along with buttons having different variants and styles.","archived":false,"fork":false,"pushed_at":"2024-09-13T23:14:39.000Z","size":81,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-11T14:51:56.726Z","etag":null,"topics":["grid-layout","reactjs","responsive","scss","typescript"],"latest_commit_sha":null,"homepage":"https://greatjakes.netlify.app/","language":"SCSS","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/CamiloPinzon.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-09-12T23:57:18.000Z","updated_at":"2024-09-13T23:14:42.000Z","dependencies_parsed_at":"2024-09-13T15:17:34.661Z","dependency_job_id":"4c0aaacc-4a4f-4928-a23e-204cf6587d1f","html_url":"https://github.com/CamiloPinzon/greatjakes","commit_stats":null,"previous_names":["camilopinzon/greatjakes"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CamiloPinzon%2Fgreatjakes","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CamiloPinzon%2Fgreatjakes/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CamiloPinzon%2Fgreatjakes/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CamiloPinzon%2Fgreatjakes/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CamiloPinzon","download_url":"https://codeload.github.com/CamiloPinzon/greatjakes/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247378092,"owners_count":20929293,"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":["grid-layout","reactjs","responsive","scss","typescript"],"created_at":"2024-09-26T00:22:22.639Z","updated_at":"2026-01-18T17:33:14.618Z","avatar_url":"https://github.com/CamiloPinzon.png","language":"SCSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Cards Layout Exercise\n\nThis project is a simple card layout component developed using **Vite**, **React**, **TypeScript**, and **SCSS**. The application demonstrates how to implement a responsive card container with customizable card components, along with buttons having different variants and styles.\n\n## Technologies Used\n\n- **Vite**: A fast build tool and development server.\n- **React**: A JavaScript library for building user interfaces.\n- **TypeScript**: A strongly typed programming language that builds on JavaScript.\n- **SCSS**: A preprocessor scripting language that is interpreted or compiled into CSS.\n\n## Project Structure\n\nThe project is structured as follows:\n\n```bash\n.\n├── src\n|   ├── assets\n|   |   ├── close.svg\n|   |   ├── searchIcon.svg\n│   ├── components\n|   |   ├── button\n|   |   |   ├── button.tsx\n|   |   |   ├── button.scss\n|   |   ├── card\n|   |   |   ├── card.tsx\n|   |   |   ├── card.scss\n|   |   ├── cardsContainer\n|   |   |   ├── cardsContainer.tsx\n|   |   |   ├── cardsContainer.scss\n|   |   ├── separator\n|   |   |   ├── separator.tsx\n|   |   |   ├── separator.scss\n│   ├── styles\n│   │   └── _variables.scss\n│   ├── App.tsx     \n|   ├── App.scss\n|   ├── index.scss\n|   ├── interfaces.ts\n│   └── main.tsx           \n├── public                 \n├── package.json           \n└── tsconfig.json          \n```\n\n## Features\n\n### Card Component\n- **Variants**: \n  - `default`: On hover, the entire background color changes to green.\n  - `border`: On hover, only the border color changes to green.\n  \n### Button Component\n- **Variants**:\n  - `default`: Maintains padding, does not wrap text, and truncates without ellipsis.\n  - `icon`: Supports one or two lines of text with an icon, truncates text with ellipsis.\n- **Disabled state**: Properly styled with hover state adjustments.\n\n### CardsContainer Component\n- Implements a responsive grid layout using **CSS Grid**.\n- Centered horizontally and positioned 100px from the top of the page.\n- Ensures correct placement of buttons in both top and bottom rows.\n\n## Responsive Design\n\nThe layout is fully responsive and scales proportionally between 768px and 1680px screen widths:\n- Minimum width: 768px\n- Maximum width: 1680px\n- Font size scales dynamically between 13px and 16px using the `clamp()` function in CSS.\n\n\n## Preview\n![Preview](src/assets/Screenshot%202024-09-12%20214530.png)\n\n\n## Setup and Installation\n\n### Prerequisites\n\nMake sure you have **Node.js** installed on your machine.\n\n1. Clone this repository:\n   ```bash\n   git clone https://github.com/CamiloPinzon/greatjakes.git\n   ```\n   \n2. Navigate to the project directory:\n   ```bash\n   cd greatjakes\n   ```\n\n3. Install the dependencies:\n   ```bash\n   npm install\n   ```\n\n### Running the Project\n\nTo start the development server, run:\n\n```bash\nnpm run dev\n```\n\nThis will launch the app in development mode at `http://localhost:5173/` (default Vite port).\n\n### Building the Project\n\nTo build the project for production, run:\n\n```bash\nnpm run build\n```\n\nThe optimized build will be generated in the `dist/` folder.\n\n## License\n\nThis project is licensed under the MIT License. See the [LICENSE](LICENSE) file for more information.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcamilopinzon%2Fgreatjakes","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcamilopinzon%2Fgreatjakes","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcamilopinzon%2Fgreatjakes/lists"}