{"id":21056448,"url":"https://github.com/rileymanda/html5-portfolio-website","last_synced_at":"2026-05-11T03:52:22.747Z","repository":{"id":156448039,"uuid":"633018724","full_name":"RileyManda/html5-portfolio-website","owner":"RileyManda","description":"Portfolio project built to showcase my skills and experience with HTML CSS and Javascript semantics, git-flow, setup of linters, and code reviews and PR, as well as working with feature branches in a collaboration environment.","archived":false,"fork":false,"pushed_at":"2023-06-29T10:20:19.000Z","size":10855,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-14T00:16:03.041Z","etag":null,"topics":["css3","flexbox","flexbox-grid","gitflow-workflow","grid-layout","html5","javascript"],"latest_commit_sha":null,"homepage":"https://rileymanda.github.io/portfolio-website/","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/RileyManda.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":"2023-04-26T15:51:27.000Z","updated_at":"2023-09-30T22:06:15.000Z","dependencies_parsed_at":"2023-07-10T06:01:24.136Z","dependency_job_id":null,"html_url":"https://github.com/RileyManda/html5-portfolio-website","commit_stats":null,"previous_names":["rileymanda/html5-portfolio-website"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RileyManda%2Fhtml5-portfolio-website","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RileyManda%2Fhtml5-portfolio-website/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RileyManda%2Fhtml5-portfolio-website/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RileyManda%2Fhtml5-portfolio-website/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/RileyManda","download_url":"https://codeload.github.com/RileyManda/html5-portfolio-website/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243500787,"owners_count":20300775,"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","flexbox-grid","gitflow-workflow","grid-layout","html5","javascript"],"created_at":"2024-11-19T16:50:58.265Z","updated_at":"2026-05-11T03:52:22.705Z","avatar_url":"https://github.com/RileyManda.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ca name=\"readme-top\"\u003e\u003c/a\u003e\n\n# 📗 Table of Contents\n\n- [📖 About the Project](#about-project)\n  - [🛠 Built With](#built-with)\n    - [Tech Stack](#tech-stack)\n- [💻 Getting Started](#getting-started)\n  - [Setup](#setup)\n  - [Prerequisites](#prerequisites)\n- [🔑 Key features](#key-features)\n- [🛢 Live Demo](#live-demo)\n- [🎥 Project Presentation](#project-presentation)\n\n- [👥 Authors](#authors)\n- [🤝 Contributing](#contributing)\n- [⭐️ Show your support](#support)\n  -- [🙏 Acknowledgements](#acknowledgements)\n- [❓ FAQ](#faq)\n- [📝 License](#license)\n\n# 📖 [Portfolio-website] \u003ca name=\"Portfolio-website\"\u003e\u003c/a\u003e\n\n**[Portfolio-website]** Portfolio project built to showcase my skills and experience with HTML CSS semantics, git-flow, setup of linters, and code reviews and PR, as well as working with feature branches in a collaboration environment. The portfolio is a translation of a Figma UX design provided with stipulated requirements testing my attention to detail, ability to parse Figma design, and the use of grid layout and flexbox for responsive web design. The portfolio was developed with a mobile-first approach and RWD was implemented to support desktop with media queries and grid layout.\n\n## 🛠 Built With \u003ca name=\"built-with\"\u003e\u003c/a\u003e\n\n### Tech Stack \u003ca name=\"tech-stack\"\u003e\u003c/a\u003e\n\n  \u003csummary\u003eJavascript runtime environment\u003c/summary\u003e\n  \u003cul\u003e\n    \u003cli\u003e\u003ca href=\"https://nodejs.org/en/\"\u003eNode JS\u003c/a\u003e\u003c/li\u003e\n  \u003c/ul\u003e\n\n  \u003csummary\u003eVersion control\u003c/summary\u003e\n  \u003cul\u003e\n    \u003cli\u003e\u003ca href=\"github.com\"\u003eGit Hub\u003c/a\u003e\u003c/li\u003e\n  \u003c/ul\u003e\n\n  \u003csummary\u003eGithub Pages\u003c/summary\u003e\n  \u003cul\u003e\n    \u003cli\u003e\u003ca href=\"https://pages.github.com/\"\u003eGithub Pages\u003c/a\u003e\u003c/li\u003e\n  \u003c/ul\u003e\n\u003c/details\u003e\n\n\u003c!-- Features --\u003e\n\n### Key Features \u003ca name=\"key-features\"\u003e\u003c/a\u003e\n\n- **[Responsive Website]**\n- **[Works Section]**\n- **[About Section]**\n- **[Contact Section]**\n- **[Mobile Menu]**\n\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003c!-- LIVE DEMO --\u003e\n\n## 🚀 Live Demo \u003ca name=\"live-demo\"\u003e\u003c/a\u003e\n\n- [Live Demo Link](https://rileymanda.github.io/portfolio-website/)\n\n## 🚀 Project Presentation \u003ca name=\"project-presentation\"\u003e\u003c/a\u003e\n\n- [Project Presentation](https://www.loom.com/share/e96865e13e3b4e0883dc48cd1c7e7d62)\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\u003c!-- GETTING STARTED --\u003e\n\n## 💻 Getting Started \u003ca name=\"getting-started\"\u003e\u003c/a\u003e\n\nCreating your first \"Portfolio-website\" project\n\nTo get a local copy up and running, follow these steps.\n\n### Prerequisites\n\nIn order to run this project you need:\n\n-A Git hub account\n\u003cbr\u003e\n-Node JS\n\u003cbr\u003e\n-Visual Studio Code or any other code editor of your preference\n\u003cbr\u003e\n-web browser\n\n### Setup\n\nClone this repository to your desired folder:\u003cbr\u003e\n```sh\n  cd my-folder\n  git clone git@github.com:RileyManda/portfolio-website.git\n```\nAdvantages of Linters:\u003cbr\u003e\n\n1: improves readability-it will be easy to read and make adjustment if required easily.\u003cbr\u003e\n2:removes silly errors before execution and code review.\u003cbr\u003e\n3:Makes code look like written by a single person.\u003cbr\u003e\n4:Spreads awareness and ownership over code quality\u003cbr\u003e\n5:Having more secure and performant code.\u003cbr\u003e\n\n## Install Linters\n\nYou can find linters for most of the programming languages, e.g. Rubocop for Ruby or ESLint for JavaScript.\n\nAlso, there are many ways you can integrate a linter in your workflow:\n\n-text editor plugin\u003cbr\u003e\n-GitHub Actions\u003cbr\u003e\n-GitHub apps\u003cbr\u003e\n\n## Set up Linters\n\n**Note:** The npm package manager is going to create a node_modules directory to install all of your dependencies. You shouldn't commit that directory. To avoid that, you can create a .gitignore file and add node_modules to it:\n\n# .gitignore\n\nnode_modules/\n\n## Web Hint\n\nThis is a customizable linting tool that helps you improve your site's accessibility, speed, cross-browser compatibility, and more by checking your code for best practices and common errors.\n\n**NOTE:** If you are using Windows, make sure you initialize npm to create `package.json` file.\n\n```\nnpm init -y\n```\n\n1. Run\n   ```\n   npm install --save-dev hint@7.x\n   ```\n   _how to use npm: (https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)._\n2. Copy [.hintrc](.hintrc) to the root directory of your project.\n3. **Do not make any changes in config files - they represent style guidelines that you share with your team - which is a group of all Microverse students.**\n   - If you think that change is necessary - open a [Pull Request in this repository](../README.md#contributing) and let your code reviewer know about it.\n4. Run\n   ```\n   npx hint .\n   ```\n5. Fix validation errors.\n\n### [Stylelint](https://stylelint.io/)\n\nA mighty, modern linter that helps you avoid errors and enforce conventions in your styles.\n\n1. Run\n\nnpm install --save-dev stylelint@13.x stylelint-scss@3.x stylelint-config-standard@21.x stylelint-csstree-validator@1.x\nnot sure how to use npm? Read this.\n\n2. Copy .stylelintrc.json to the root directory of your project.\n\n3. **Do not make any changes in config files - they represent style guidelines that you share with your team - which is a group of all Microverse students.**\n\nIf you think that change is necessary - open a Pull Request in this repository and let your code reviewer know about it. 4. Run npx stylelint \"\\*_/_.{css,scss}\" on the root of your directory of your project.\n\n5. Fix linter errors.\n\n6. **IMPORTANT NOTE:** feel free to research auto-correct options for Stylelint if you get a flood of errors but keep in mind that correcting style errors manually will help you to make a habit of writing a clean code!\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n## 👥 Authors \u003ca name=\"authors\"\u003e\u003c/a\u003e\n\n👤 **Riley Manda**\n\n- GitHub: [@RileyManda](https://github.com/RileyManda)\n- Twitter: [@rilecodez](https://twitter.com/rilecodez)\n- LinkedIn: [rileymanda](https://www.linkedin.com/in/rileymanda/)\n\n\n\n## 🤝 Contributing \u003ca name=\"contributing\"\u003e\u003c/a\u003e\n\n\u003c!-- FUTURE FEATURES --\u003e\n\n## 🔭 Future Features \u003ca name=\"future-features\"\u003e\u003c/a\u003e\n\n- [ ] **[Works Section]**\n      Works section: This section will consist of a card gallery featuring work project.\n\n- [ ] **[About me Section]**\n      This feature will contain more details about me and the tech stack i am familiar with.\n\n- [ ] **[Contact Section]**\n      This feature will comprise of a contact information.\n\n- [ ] **[RWD]**\n      The site will be updated(Desktop Version) to utilize media queries for responsivenes to create a Desktop version.   \n\n- [ ] **[Mobile Menu Details]**\n      This feature will comprise of a detail view popup menu of each section of the portfolio.    \n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003c!-- CONTRIBUTING --\u003e\n\nContributions, issues, and feature requests are welcome!\n\nFeel free to check the [issues page](../../issues/).\n\n## ⭐️ Show your support \u003ca name=\"support\"\u003e\u003c/a\u003e\n\nIf you like this project, kindly leave a comment below and share it with someone who enjoys coding! Coding is all about continuous learning and allowing yourself to be a beginner. Keep going!\n\n\u003c!-- ACKNOWLEDGEMENTS --\u003e\n\n## 🙏 Acknowledgments \u003ca name=\"Microverse Inc.\"\u003e\u003c/a\u003e\n\nI'm grateful to microverse for giving me this opportunity to grow into my full potential through continuous learning and practical challenges.\nMuch appreciation to my Pair Coding partners for their contributions:\n\n**Contributions:**\n- Pi1998: [@Pi1998](https://github.com/Pi1998):\n    -Animation Transitions\n- DanielAD10: [@DanielAD10](https://github.com/DanielAD10):\n    -Javascript click events contribution\n\n\n\u003c!-- FAQ (optional) --\u003e\n\n## ❓ FAQ \u003ca name=\"faq\"\u003e\u003c/a\u003e\n\n- **[Question_1]**\n  Do I have to use the vs code specifically?\n\n  - [Answer_1]\n    You can use any code editor of your chose.\n\n- **[Question_2]**\n  Where can I download node JS for installation?\n\n  - [Answer_2]\n  Node Js can be downloaded here- https://nodejs.org/en/download/\n  \u003c!-- LICENSE --\u003e\n\n## 📝 License \u003ca name=\"license\"\u003e\u003c/a\u003e\n\nThis project is [MIT](https://choosealicense.com/licenses/mit/) licensed.\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frileymanda%2Fhtml5-portfolio-website","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frileymanda%2Fhtml5-portfolio-website","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frileymanda%2Fhtml5-portfolio-website/lists"}