{"id":20690552,"url":"https://github.com/marocena26/landing-page","last_synced_at":"2026-04-11T00:50:00.191Z","repository":{"id":226597309,"uuid":"769147189","full_name":"marocena26/landing-page","owner":"marocena26","description":"Responsive - Layout sample of how a multilanguage landing page would look like | 🐈‍⬛​ | Technologies used: HTML 5, Sass, TypeScript, Angular.","archived":false,"fork":false,"pushed_at":"2024-03-20T07:47:28.000Z","size":3855,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-17T17:16:01.184Z","etag":null,"topics":["angular","bootstrap","html5","primeng","sass","typescript"],"latest_commit_sha":null,"homepage":"https://landing-purrfect-match.netlify.app/","language":"TypeScript","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/marocena26.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}},"created_at":"2024-03-08T12:48:24.000Z","updated_at":"2024-03-15T08:36:51.000Z","dependencies_parsed_at":"2024-03-18T10:00:52.494Z","dependency_job_id":"49e63f69-f7c4-41ef-8088-a34152290ab2","html_url":"https://github.com/marocena26/landing-page","commit_stats":null,"previous_names":["marocena26/landing-page"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marocena26%2Flanding-page","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marocena26%2Flanding-page/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marocena26%2Flanding-page/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marocena26%2Flanding-page/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/marocena26","download_url":"https://codeload.github.com/marocena26/landing-page/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242952262,"owners_count":20211796,"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":["angular","bootstrap","html5","primeng","sass","typescript"],"created_at":"2024-11-16T23:13:34.098Z","updated_at":"2025-12-12T11:08:12.248Z","avatar_url":"https://github.com/marocena26.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n\n\u003cimg width=\"100%\" alt=\"Captura de pantalla 2024-03-14 185735\" src=\"https://github.com/marocena26/landing-page/assets/113302094/82edd4ff-8036-4088-b2b5-a4eeaf8da2a5\"\u003e\n\n# Landing Page - Purrfect Match 🐈‍⬛​\n\nWelcome!👏🏻 ​In this repository you can find the files generated in the creation of the **Landing Page - Purrfect Match**\n\nThe main objective of this exercise is to create a **responsive landing page** from scratch where you can **practice and play with Angular, typescript and different design tools**.\n\n\u003e **NOTE:** Direct link to the project by clicking on the following **[link](https://landing-purrfect-match.netlify.app/)** 👈🏻\n\n## 📄​ Description \n\nIf you currently don't have a cat and you are thinking about letting one into your life, this space is perfect for you. In Purrfect Match we present a **simple web, intuitive and adapted to any type of device**(mobile, tablet and PC) so you can take a look at it anytime, anywhere. Based on our **own design**, the website will allow you to know some of the many benefits of having a cat as a life companion. \n\nThis project **employs `ngx-translate` for content internationalization**, enabling **dynamic translation** of the user interface (ES-EN). It also makes use of **Angular's reactive forms for efficient form management**, facilitating **data validation and user interaction** with the application in an intuitive and robust way.\n\nIt also uses **Jasmine and Karma for unit and integration testing**, ensuring the **quality and reliability of the code**.\n\n## 🛠️ Tools\n\nThe following tools have been used when solving the project:\n\n- **HTML**\n- **CSS/Sass**\n  - Variables, mixins and functions\n  - Flexbox and Box model\n  - Media queries\n- **Component library**\n  - PrimeNg\n  - PrimeFLex\n  - PrimeIcon\n  - Bootstrap\n- **TypeScript**\n- **Angular**\n  - Interfaces\n  - Modules\n  - Components\n  - Imports\n  - Injections\n  - Services\n  - Reactive Forms\n  - Directives - ngIf and ngFor\n- **GIT version control**\n- **Testing**: Jasmine y Karma\n- **JSON**: To change the language (ES - EN)\n- **Design**\n  - Canva\n  - Excalidraw\n\n## 💾 Steps to follow to use this project on your computer:\n\n\u003e **NOTE:** This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 16.0.0.\n\n**First** of all, in order to have the repository on your computer:\n\n1. Click on the top right corner \u003e **Fork**.\n2. It will ask you to choose which GitHub user you want to fork it to. **Choose your user**.\n3. **Go to github.com/your-user/name-of-project**, **clone it** and do whatever you want, you can rename the repo, change the code, redeploy it to GitHub Pages...\n4. **Finally** and for everything to work properly, **you must disable GitHub Pages and re-enable** it so that GitHub generates the new URL correctly.\n\nOnce you have **done the fork**:\n\n1. Open it in your code editor.\n2. Open a terminal and **install the local dependencies** by executing in the command terminal. Here are the ones I used to start my project:\n\n```bash\nnpm install or yarn\nnpm install or yarn add primeng\nnpm install or yarn add primeicons\nnpm install or yarn add primeflex\nnpm install or yarn add @ngx-translate/core @ngx-translate/http-loader \n```\n\nThe project has to be **started** every time we start programming, to do this we will execute the **command**:\n\n```bash\nnpm or yarn start\n```\n\nAfter running `npm/yarn start` we can start editing all the files inside the src/ folder and program comfortably 💫\n\n## 🌻​ Credits \u0026 Feedback\n\nDesigned \u0026 Developed By **[Elena Arocena](https://github.com/marocena26)**\n\nAny input is most welcome. Thank you very much!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarocena26%2Flanding-page","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarocena26%2Flanding-page","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarocena26%2Flanding-page/lists"}