{"id":21490153,"url":"https://github.com/alexandrbig1/webstudio","last_synced_at":"2025-06-29T10:33:21.214Z","repository":{"id":189860030,"uuid":"681448609","full_name":"Alexandrbig1/WebStudio","owner":"Alexandrbig1","description":"WebStudio: Responsive web design project featuring interactive elements, a modern aesthetic, and innovative functionality. Explore the Studio page for strategy insights, team profiles, and customer showcases. Visit the Portfolio page to view animated project cards. Built with HTML, CSS, and JavaScript.","archived":false,"fork":false,"pushed_at":"2023-12-30T17:38:08.000Z","size":2671,"stargazers_count":7,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2023-12-30T18:40:29.748Z","etag":null,"topics":["css3","freelance","frontend","html-css-javascript","html5","javascript","javascript-vanilla","js","landingpage","localstorage","responsive-web-design","scrollup","stickyheader","themeswitcher","ux-ui","ux-ui-design","webdesign","webdevelopment"],"latest_commit_sha":null,"homepage":"https://alexandrbig1.github.io/WebStudio/","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/Alexandrbig1.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}},"created_at":"2023-08-22T03:27:28.000Z","updated_at":"2023-12-21T05:59:24.000Z","dependencies_parsed_at":"2023-08-22T04:47:48.606Z","dependency_job_id":"9d361c45-f8f4-4626-a9a8-bd2f6802c854","html_url":"https://github.com/Alexandrbig1/WebStudio","commit_stats":null,"previous_names":["alexandrbig1/webstudio"],"tags_count":0,"template":null,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Alexandrbig1%2FWebStudio","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Alexandrbig1%2FWebStudio/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Alexandrbig1%2FWebStudio/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Alexandrbig1%2FWebStudio/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Alexandrbig1","download_url":"https://codeload.github.com/Alexandrbig1/WebStudio/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":226056099,"owners_count":17566839,"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":["css3","freelance","frontend","html-css-javascript","html5","javascript","javascript-vanilla","js","landingpage","localstorage","responsive-web-design","scrollup","stickyheader","themeswitcher","ux-ui","ux-ui-design","webdesign","webdevelopment"],"created_at":"2024-11-23T14:32:10.345Z","updated_at":"2024-11-23T14:32:11.044Z","avatar_url":"https://github.com/Alexandrbig1.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# WebStudio - Responsive Web Design Project\n\n\u003cimg align=\"right\" src=\"https://media.giphy.com/media/du3J3cXyzhj75IOgvA/giphy.gif\" width=\"100\"/\u003e\n\n[![GitHub last commit](https://img.shields.io/github/last-commit/Alexandrbig1/WebStudio)](https://github.com/Alexandrbig1/WebStudio/commits/main)\n[![GitHub license](https://img.shields.io/github/license/Alexandrbig1/WebStudio)](https://github.com/Alexandrbig1/WebStudio/blob/main/LICENSE)\n[![JavaScript](https://img.shields.io/badge/JavaScript-Latest-yellow.svg)](https://developer.mozilla.org/en-US/docs/Web/JavaScript)\n[![HTML](https://img.shields.io/badge/HTML5-\u003c!DOCTYPE%20html\u003e-orange)](https://developer.mozilla.org/en-US/docs/Web/HTML)\n[![CSS](https://img.shields.io/badge/CSS3-styles-blue)](https://developer.mozilla.org/en-US/docs/Web/CSS)\n\n## Overview\n\nWebStudio is a responsive web design project created for a fictional company named \"WebStudio.\" This freelance project focuses on delivering a modern and visually appealing web presence using HTML, CSS, and JavaScript. The website consists of a home page called \"Studio\" and a portfolio page, each with unique features and functionality.\n\n## Features\n\n- **Responsive Design:** Ensures optimal viewing and interaction experience across a wide range of devices.\n- **Interactive CTA Button:** Clicking the Call-to-Action (CTA) button on the Studio page opens a modal window where users can leave their contacts to receive a callback.\n- **Burger Menu:** The navigation menu on both the Studio and Portfolio pages is hidden behind a burger icon on laptops and phones, optimizing space and improving navigation on smaller screens.\n- **Portfolio Animation:** Hovering over the project cards on the Portfolio page triggers an animation popup, providing additional information about each project.\n\n## Pages\n\n### Studio\n\n- **Introduction:** An explanation of the company's strategy and services.\n- **Team Section:** Profile cards featuring members of the WebStudio team.\n- **Customers Section:** Logos of satisfied customers.\n- **Footer:** Studio information, social media links, and a newsletter subscription.\n\n### Portfolio\n\n- **Project Cards:** Displaying completed works, each with an animation popup when hovered over.\n\n## Technologies\n\n- ![JavaScript](https://img.shields.io/badge/JavaScript-F7DF1E.svg?style=for-the-badge\u0026logo=JavaScript\u0026logoColor=black)\n- ![HTML](https://img.shields.io/badge/HTML5-E34F26.svg?style=for-the-badge\u0026logo=HTML5\u0026logoColor=white)\n- ![CSS](https://img.shields.io/badge/CSS3-1572B6.svg?style=for-the-badge\u0026logo=CSS3\u0026logoColor=white)\n\n## Screenshots\n\n![Studio Page](./images/web-home1.jpg)\n_Caption for Screenshot 1 (WebStudio Studio Page)_\n![Portfolio Page](./images/web-fav1.jpg)\n_Caption for Screenshot 2 (WebStudio Portfolio Page Dark Theme)_\n\n## Usage\n\n- Explore the responsive design on different devices.\n- Experience the interactive features on the Studio page, such as the CTA modal window.\n- Navigate to the Portfolio page to view project cards with animation popups.\n\n## Contact Us\n\nLeave your contact information in the CTA modal on the Studio page, and we will get back to you as soon as possible.\n\n## About WebStudio\n\nWebStudio is a fictional web design and development studio that focuses on creating innovative and responsive web solutions for clients. Connect with us on social media to stay updated on our latest projects and news.\n\n## Issues\n\nIf you encounter any issues or have suggestions, please\n[open an issue](https://github.com/Alexandrbig1/WebStudio/issues).\n\n## License\n\nThis project is licensed under the [MIT License](LICENSE).\n\n## Feedback\n\nI welcome feedback and suggestions from users to improve the application's\nfunctionality and user experience.\n\n### Languages and Tools:\n\n\u003cdiv align=\"center\"\u003e  \n \n\u003ca href=\"https://en.wikipedia.org/wiki/HTML5\" target=\"_blank\"\u003e\u003cimg style=\"margin: 10px\" src=\"https://profilinator.rishav.dev/skills-assets/html5-original-wordmark.svg\" alt=\"HTML5\" height=\"50\" /\u003e\u003c/a\u003e\n\u003ca href=\"https://www.w3schools.com/css/\" target=\"_blank\"\u003e\u003cimg style=\"margin: 10px\" src=\"https://profilinator.rishav.dev/skills-assets/css3-original-wordmark.svg\" alt=\"CSS3\" height=\"50\" /\u003e\u003c/a\u003e\n\u003ca href=\"https://www.javascript.com/\" target=\"_blank\"\u003e\u003cimg style=\"margin: 10px\" src=\"https://profilinator.rishav.dev/skills-assets/javascript-original.svg\" alt=\"JavaScript\" height=\"50\" /\u003e\u003c/a\u003e\n\u003ca href=\"https://www.figma.com/\" target=\"_blank\" rel=\"noreferrer\"\u003e \u003cimg src=\"https://www.vectorlogo.zone/logos/figma/figma-icon.svg\" alt=\"figma\" width=\"40\" height=\"40\"/\u003e \u003c/a\u003e\n\u003ca href=\"https://git-scm.com/\" target=\"_blank\" rel=\"noreferrer\"\u003e \u003cimg src=\"https://www.vectorlogo.zone/logos/git-scm/git-scm-icon.svg\" alt=\"git\" width=\"40\" height=\"40\"/\u003e \u003c/a\u003e\n\u003c/div\u003e\n\n## Connect with me:\n\n\u003cdiv align=\"center\"\u003e\n\u003ca href=\"https://linkedin.com/in/alex-smagin29\" target=\"_blank\"\u003e\n\u003cimg src=https://img.shields.io/badge/linkedin-%231E77B5.svg?\u0026style=for-the-badge\u0026logo=linkedin\u0026logoColor=white alt=linkedin style=\"margin-bottom: 5px;\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://github.com/alexandrbig1\" target=\"_blank\"\u003e\n\u003cimg src=https://img.shields.io/badge/github-%2324292e.svg?\u0026style=for-the-badge\u0026logo=github\u0026logoColor=white alt=github style=\"margin-bottom: 5px;\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://discord.gg/uzM3UNQU\" target=\"_blank\"\u003e\n\u003cimg src=\"https://img.shields.io/badge/discord-%237289DA.svg?\u0026style=for-the-badge\u0026logo=discord\u0026logoColor=white\" alt=\"Discord\" style=\"margin-bottom: 5px;\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://stackoverflow.com/users/22484161/alex-smagin\" target=\"_blank\"\u003e\n\u003cimg src=https://img.shields.io/badge/stackoverflow-%23F28032.svg?\u0026style=for-the-badge\u0026logo=stackoverflow\u0026logoColor=white alt=stackoverflow style=\"margin-bottom: 5px;\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://dribbble.com/Alexandrbig1\" target=\"_blank\"\u003e\n\u003cimg src=https://img.shields.io/badge/dribbble-%23E45285.svg?\u0026style=for-the-badge\u0026logo=dribbble\u0026logoColor=white alt=dribbble style=\"margin-bottom: 5px;\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://www.behance.net/a1126\" target=\"_blank\"\u003e\n\u003cimg src=https://img.shields.io/badge/behance-%23191919.svg?\u0026style=for-the-badge\u0026logo=behance\u0026logoColor=white alt=behance style=\"margin-bottom: 5px;\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://www.upwork.com/freelancers/~0117da9f9f588056d2\" target=\"_blank\"\u003e\n\u003cimg src=\"https://img.shields.io/badge/upwork-%230077B5.svg?\u0026style=for-the-badge\u0026logo=upwork\u0026logoColor=white\u0026color=%23167B02\" alt=\"Upwork\" style=\"margin-bottom: 5px;\" /\u003e\n\u003c/a\u003e\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexandrbig1%2Fwebstudio","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falexandrbig1%2Fwebstudio","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexandrbig1%2Fwebstudio/lists"}