{"id":19899112,"url":"https://github.com/samrb-dev/marketingagencypage","last_synced_at":"2026-01-03T06:09:48.322Z","repository":{"id":40236648,"uuid":"487743067","full_name":"SamRB-dev/MarketingAgencyPage","owner":"SamRB-dev","description":"A fully customized landing page with mobile UI for representing a marketing agency, ALLIES for brand awareness.","archived":false,"fork":false,"pushed_at":"2022-05-18T19:44:29.000Z","size":2420,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-16T08:23:26.356Z","etag":null,"topics":["css","html"],"latest_commit_sha":null,"homepage":"https://alliesmarketing.netlify.app/","language":"HTML","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/SamRB-dev.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}},"created_at":"2022-05-02T06:42:37.000Z","updated_at":"2024-11-02T20:28:41.000Z","dependencies_parsed_at":"2022-09-05T14:31:44.584Z","dependency_job_id":null,"html_url":"https://github.com/SamRB-dev/MarketingAgencyPage","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/SamRB-dev/MarketingAgencyPage","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SamRB-dev%2FMarketingAgencyPage","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SamRB-dev%2FMarketingAgencyPage/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SamRB-dev%2FMarketingAgencyPage/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SamRB-dev%2FMarketingAgencyPage/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SamRB-dev","download_url":"https://codeload.github.com/SamRB-dev/MarketingAgencyPage/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SamRB-dev%2FMarketingAgencyPage/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":275852293,"owners_count":25540136,"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","status":"online","status_checked_at":"2025-09-18T02:00:09.552Z","response_time":77,"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":["css","html"],"created_at":"2024-11-12T20:07:13.884Z","updated_at":"2025-09-18T23:33:15.225Z","avatar_url":"https://github.com/SamRB-dev.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"A fully customized single page website with simple mobile UI for representing a marketing agency, ALLIES for brand awareness.\n\n# Overview:\nThis project is me trying to solve some design issues in the existing website which I encountered\nduring my investigation of the page UI elements. It's not 100% perfect but I tried my best to solve\nsome issues as I could as a beginner while learning the full capacity of Github, git \u0026 netlify :D\n\n# Build with:\n* HTML\n* CSS [Flexbox, media queries]\n\n# UI Design Inspiration: \n### Source:  https://www.awwwards.com/sites/allies-marketing\n### Site: https://allies.marketing/\n\n# Analysis of The Demo:\n## Insight: \nIn this demo, the developer used many cool animation and effects which are purely made with Js.\nThe backgrounds are made with animated SVG which moves when the page is being scrolled. \nNavs are beautifully made with hover transition effects and the fonts are made with 3D animations. \nMost of the animations are being rendered in real time which can be noticed in CPU performance monitor \nwhile being in the page. Even when selecting elements like texts or emails, RGB blink animation is \ndone which can be seen after selecting elements.\n\n## Drawbacks: \nAlthough the demo contains beautiful effects on various elements, there are some issues in the demo regarding the responsiveness and functionalities. For instance,\n#### Issue[1]: \nThe SVG animated backgrounds used in the demo doesn't always fully load\non mobile devices [even with good internet connections] which creates a lot \nof blank spaces on the page. \n#### Issue[2]: \nThe second small navigation menu after the gaming championship images \ndoesn't work properly on mobile devices [at least didn't work on my end tbh].\n \n# My UI:\n## What I tried: \n### **[Desktop]**:\n* [1]: Took Desktop First approach. The main UI was actually focussed on Desktop environments.\n* [2]: Implemented Card layouts one secondary menus with hover effects and transitions.\n* [3]: Stripped secondary svg backgrounds for fast loading.\n* [4]: CPU friendly animations with keyframes **[Includes mobile support].**\n\n### **[Mobile]**:\n* [1]: Implemented media queries for responsive mobile UI for screen width of 360px minimum.\n* [2]: All card layouts customized for mobile UI.\n* [3]: Column based Card layouts.\n\n### Drawbacks:\n* [1]: \n        Since I still don't know Js that well, I tried to implement everything with pure css :').\n        \n* [2]:\n        Since This is my first time using media queries, there might be some design flaws on mobile\n        devices with wider screen resolutions. For Instance,\n                * [I]: background-image placement.\n                * [II]: Stretched Images.\n* [3]:\n        No Tablet or iPad UI support.\n        \n* [4]:\n        Unimplemented custom mobile UI for landscape orientation.\n\n**[ This note was written during the development process ]**\n\n\n# Project in Action:\n### Link: **https://alliesmarketing.netlify.app/**","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsamrb-dev%2Fmarketingagencypage","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsamrb-dev%2Fmarketingagencypage","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsamrb-dev%2Fmarketingagencypage/lists"}