{"id":20228951,"url":"https://github.com/forloopcodes/quotepage","last_synced_at":"2026-04-10T02:09:17.144Z","repository":{"id":220670242,"uuid":"752251125","full_name":"ForLoopCodes/quotepage","owner":"ForLoopCodes","description":"Dynamic Quote Generator web page built with Svelte, featuring real-time quote updates, and a dynamic background.","archived":false,"fork":false,"pushed_at":"2024-02-29T10:23:07.000Z","size":52,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-13T23:44:53.060Z","etag":null,"topics":["css","grain","homepage","html","javascript","motivation","quotable-api","quote","quotes","quotes-api","random","random-color","svelte","svg","tailwind","tailwindcss"],"latest_commit_sha":null,"homepage":"https://quotepage-blond.vercel.app","language":"HTML","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/ForLoopCodes.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"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}},"created_at":"2024-02-03T13:38:08.000Z","updated_at":"2024-02-03T15:29:14.000Z","dependencies_parsed_at":"2024-02-29T12:42:08.740Z","dependency_job_id":null,"html_url":"https://github.com/ForLoopCodes/quotepage","commit_stats":null,"previous_names":["forloopcodes/quotepage"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ForLoopCodes%2Fquotepage","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ForLoopCodes%2Fquotepage/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ForLoopCodes%2Fquotepage/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ForLoopCodes%2Fquotepage/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ForLoopCodes","download_url":"https://codeload.github.com/ForLoopCodes/quotepage/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241670105,"owners_count":20000330,"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":["css","grain","homepage","html","javascript","motivation","quotable-api","quote","quotes","quotes-api","random","random-color","svelte","svg","tailwind","tailwindcss"],"created_at":"2024-11-14T07:33:43.307Z","updated_at":"2025-12-31T01:03:33.380Z","avatar_url":"https://github.com/ForLoopCodes.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Project Readme - Dynamic Quote Generator with Svelte\n\n## Overview\n\nThis project is a dynamic quote generator web page built using Svelte, HTML, CSS, and JavaScript. It fetches random quotes from the [Quotable](https://api.quotable.io/) API, featuring a visually appealing background with a dynamically changing color, an animated noise effect, and custom font styling. Svelte is employed for a reactive and efficient front-end development experience.\n\n## Screenshots\n\n\u003cimg width=\"79%\" src=\"https://github.com/ForLoopCodes/quotepage/assets/89027512/226e54e4-5c56-487f-9871-2a2a2e31fe75\"/\u003e\u003cimg width=\"21%\" src=\"https://github.com/ForLoopCodes/quotepage/assets/89027512/678782a8-567b-4f7d-ab40-c6d7ed5fe602\"/\u003e\n\n\n## Features\n\n1. **Dynamic Quote Display:**\n   - The page fetches a random quote from the Quotable API and updates the displayed quote in real-time.\n\n2. **Colorful Background:**\n   - The background color of the page changes dynamically on each visit, creating a visually appealing atmosphere.\n\n3. **Noise Effect:**\n   - An SVG element with a fractal noise filter produces a noise effect, enhancing the overall aesthetic of the page.\n\n4. **Svelte Framework:**\n   - Svelte is used for building reactive components and managing the dynamic behavior of the web page.\n\n## Technologies Used\n\n- **Svelte:** A reactive front-end framework for building efficient and dynamic web applications.\n- **HTML:** The backbone of the web page structure.\n- **CSS:** Inline styles are used for styling, and a custom font (Playfair Display) is imported.\n- **JavaScript (Svelte):** The logic for fetching quotes, updating the background color, and managing dynamic content is implemented using Svelte components.\n- **Quotable API:** A third-party API used to retrieve random quotes.\n\n## Getting Started\n\nTo run this project locally, follow these steps:\n\n1. Clone the repository:\n\n    ```bash\n    git clone \u003crepository-url\u003e\n    ```\n\n2. Install dependencies:\n\n    ```bash\n    cd \u003cproject-directory\u003e\n    npm install\n    ```\n\n3. Start the development server:\n\n    ```bash\n    npm run dev\n    ```\n\n4. Open your web browser and navigate to the provided local server URL.\n\n## Customize\n\nFeel free to customize the project:\n\n- Change the Svelte components in the `src` directory to add or modify features.\n- Adjust styles and behavior within the Svelte components and stylesheets.\n\n## Credits\n\n- **Quotable API:** [Quotable](https://api.quotable.io/) - Providing a diverse collection of quotes.\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n---\n\nFeel free to contribute, suggest improvements, or use this project as a foundation for your creative web experiments with Svelte!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fforloopcodes%2Fquotepage","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fforloopcodes%2Fquotepage","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fforloopcodes%2Fquotepage/lists"}