{"id":15597418,"url":"https://github.com/onjoseph/joseph-portfolio","last_synced_at":"2025-04-24T06:40:54.118Z","repository":{"id":114194126,"uuid":"489512500","full_name":"ONJoseph/Joseph-Portfolio","owner":"ONJoseph","description":"My personal portfolio website Built as part of Microverse's projects to show case my projects.","archived":false,"fork":false,"pushed_at":"2022-06-13T19:49:05.000Z","size":1199,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-30T07:51:14.647Z","etag":null,"topics":["css3","flexbox","html5","javascript","microverse"],"latest_commit_sha":null,"homepage":"https://github.com/ONJoseph/Joseph-Portfolio/","language":"CSS","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/ONJoseph.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":"2022-05-06T22:48:30.000Z","updated_at":"2022-05-10T14:33:11.000Z","dependencies_parsed_at":"2023-11-07T13:39:55.571Z","dependency_job_id":null,"html_url":"https://github.com/ONJoseph/Joseph-Portfolio","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ONJoseph%2FJoseph-Portfolio","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ONJoseph%2FJoseph-Portfolio/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ONJoseph%2FJoseph-Portfolio/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ONJoseph%2FJoseph-Portfolio/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ONJoseph","download_url":"https://codeload.github.com/ONJoseph/Joseph-Portfolio/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250580723,"owners_count":21453531,"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","flexbox","html5","javascript","microverse"],"created_at":"2024-10-03T01:21:42.980Z","updated_at":"2025-04-24T06:40:54.107Z","avatar_url":"https://github.com/ONJoseph.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"![Image](https://img.shields.io/badge/Microverse-blueviolet)\n# Portfolio\n\u003e First milestone in the process of creating my portfolio website:Build a personal portfolio site.\n\u003e Understand how to parse a Figma design to create a UI.\n-![screenshot](/images/mobile_preview_v.1.0.png)\n-- ![screenshot](/images/mobile-preview-v2.png)\n- ![screenshot](/images/mobile-version-preview-v3.png)\n- ![screenshoot](/images/mobile-preview_v4.png)\n\u003cbr/\u003e\nThings done so far in the project:\n\n#### 1. Build mobile skeleton\n\n* Parse a Figma design\n* Use Flexbox for positioning\n* Use images and backgrounds\n\n#### 2. Build mobile version\n\n* Use Grid alongside Flexbox for positioning\n* Add button hover and pressed effects\n\n#### 3. Build contact form\n\n* Pair program with a coding partner\n* Use HTML5 validation\n* Collect form data using Formspree\n\n#### 4. Build desktop version\n\n* Use media query for desktop view\n* Use desktop-specific classes to show/hide elements depending on view\n* Display desktop sections fully in viewport height\n\n### 4.5 Add effects (pair programming)\n\n* Use CSS transitions\n* Use CSS animations\n\n### 5. Deploy\n\n* Use GitHub pages to deploy website\n\n## Built With\n\n- Major languages: HTML, CSS\n- Technologies used: Lighthouse, Webhint, Stylelint\n\n## Live Demo\n\n[Live Demo Link](https://onjoseph.github.io/Joseph-Portfolio/)\n\n\n## :blue_book: Learning Objectives\n\n- Understand how to parse a Figma design to create a UI.\n- Flexbox to place elements in the page.\n- Build a personal portfolio site.\n- Use images and backgrounds to enhance the look of the website.\n\n## :hammer: Built With\n\n- Major languages\n    - HTML\n    - CSS\n- Frameworks\n    - None\n- Technologies used\n    - Git \n    - GitHub\n    - Lighthouse, Webhint, Stylelint\n\u003cbr/\u003e\n\n## Getting Started\n\n\u003e This project can be run either from a local copy of the files (in it's directory structure) or by accessing it through a WEB server if it is installed as content for one.\n\n \n\u003e To get a local copy up and running follow these simple steps:\n\n1. Go to the [repository page](https://github.com/ONJoseph/Joseph-Portfolio.git).\n2. Press the \"Code\" button and copy the link.\n3. Clone it using git command `git clone \u003clink\u003e`.\n\n\n### Usage\n\n\u003e **Just access the index.html file through the browser or access the webserver where it has been deployed through the browser**\n\n\u003cbr/\u003e\n\n## Authors\n\n\u0026#x1f464; **Joseph Ogbole**\n\n- GitHub: [@ONJoseph](https://github.com/ONJoseph)\n- Twitter: [@ONJCodes](https://twitter.com/ONJCodes)\n- LinkedIn: [LinkedIn](https://linkedin.com/in/o-n-joseph)\n\n\u003cbr/\u003e\n\n## \u0026#x1f91d; Contributing\n\nContributions, issues, and feature requests are welcome!\n\nFeel free to check the issues page\u003c!--[issues page](../../issues/)--\u003e.\n\n\u003cbr/\u003e\n\n## Show your support\n\n\u003e Give a \u0026#x2B50; if you like this project!\n\n\u003cbr/\u003e\n\n## Acknowledgments\n\n- Hat tip to anyone whose code was used\n- Inspiration\n- etc\n\n\u003cbr/\u003e\n\n## \u0026#x1F4DD; License\n\nThis project is [MIT](./MIT.md) licensed.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fonjoseph%2Fjoseph-portfolio","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fonjoseph%2Fjoseph-portfolio","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fonjoseph%2Fjoseph-portfolio/lists"}