{"id":24100444,"url":"https://github.com/ahmadkdev/developer-portfolio","last_synced_at":"2025-07-09T14:10:43.318Z","repository":{"id":215903231,"uuid":"740001970","full_name":"ahmadkdev/developer-portfolio","owner":"ahmadkdev","description":"A Frontend Mentor challenge ","archived":false,"fork":false,"pushed_at":"2024-01-21T15:48:43.000Z","size":666,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-07T22:33:18.545Z","etag":null,"topics":["accessibility","css","css-flexbox","css-grid","front-end-development","frontend-mentor","html","pnpm","postcss","responsive-website","semantic-html"],"latest_commit_sha":null,"homepage":"https://devportfoliosp.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/ahmadkdev.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,"zenodo":null}},"created_at":"2024-01-07T07:55:47.000Z","updated_at":"2024-01-14T05:29:44.000Z","dependencies_parsed_at":"2024-01-07T09:25:15.588Z","dependency_job_id":"4e06bf94-ab65-4ac9-9314-78a7e4f4f3f1","html_url":"https://github.com/ahmadkdev/developer-portfolio","commit_stats":null,"previous_names":["ahmadkdev/developer-portfolio"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ahmadkdev/developer-portfolio","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ahmadkdev%2Fdeveloper-portfolio","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ahmadkdev%2Fdeveloper-portfolio/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ahmadkdev%2Fdeveloper-portfolio/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ahmadkdev%2Fdeveloper-portfolio/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ahmadkdev","download_url":"https://codeload.github.com/ahmadkdev/developer-portfolio/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ahmadkdev%2Fdeveloper-portfolio/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264473897,"owners_count":23613961,"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":["accessibility","css","css-flexbox","css-grid","front-end-development","frontend-mentor","html","pnpm","postcss","responsive-website","semantic-html"],"created_at":"2025-01-10T16:00:01.372Z","updated_at":"2025-07-09T14:10:43.301Z","avatar_url":"https://github.com/ahmadkdev.png","language":"HTML","readme":"# Frontend Mentor - Single-page developer portfolio solution\n\nThis is a solution to the [Single-page developer portfolio challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/singlepage-developer-portfolio-bBVj2ZPi-x). Frontend Mentor challenges help you improve your coding skills by building realistic projects. \n\n## Table of contents\n\n- [Overview](#overview)\n  - [The challenge](#the-challenge)\n  - [Screenshot](#screenshot)\n  - [Links](#links)\n- [My process](#my-process)\n  - [Built with](#built-with)\n  - [What I learned](#what-i-learned)\n  - [Useful resources](#useful-resources)\n- [Author](#author)\n- [Acknowledgments](#acknowledgments)\n\n## Overview\n\n### The challenge\n\nUsers should be able to:\n\n- Receive an error message when the `form` is submitted if:\n  - Any field is empty\n  - The email address is not formatted correctly\n- View the optimal layout for the interface depending on their device's screen size\n- See hover and focus states for all interactive elements on the page\n- **Bonus**: Hook the form up so it sends and stores the user's enquiry (you can use a spreadsheet or Airtable to save the enquiries)\n- **Bonus**: Add your own details (image, skills, projects) to replace the ones in the design\n\n### Screenshot\n\n![Screenshot of my solution](./screenshot.png)\n\n### Links\n\n- Solution URL: [Github](https://github.com/ahmadkdev/developer-portfolio)\n- Live Site URL: [Netlify](https://devportfoliosp.netlify.app/)\n\n## My process\n\n### Built with\n\n- Semantic HTML5 markup\n- Accessibility In Mind\n- CSS\n  - Flexbox\n  - Grid Layout\n  - Custom properties\n  - Native nesting\n  - Container queries\n- Mobile-first workflow\n- [Postcss](https://postcss.org/) - CSS Preprocessor\n- [pnpm](https://pnpm.io/) - Package Manager\n\n### What I learned\n\nMy goal was to produce a fast, performant, accissible and responsive website, and discover CSS latest technologies.\nI learnt about and used CSS Native Nesting, Container Queries etc.\nI also learnt how to analyse CSS Code Complexity and used [Project Wallace](https://www.projectwallace.com/) to improve my CSS code and I got 100% score in all CSS code quality sections 🎉\nI learnt about HTML Form client-side validation and JavaScript Constraint Validation API.\nI kept Accessibility in my mind during every stage of development. I used [Wave Evaluation Tool](https://wave.webaim.org/) to test my site and ensured no errors or alerts related to accessibility.\nI also used Google Chrome devtools to measure many aspects of my site's performance and scored 100% in [LightHouse](https://developer.chrome.com/docs/lighthouse/overview) 🎉\n\nThis is good for now and later I'm going to publish a detailed article about what I've learnt.\n\n### Useful resources\n\n- [Invisible Content Just for Screen Reader Users](https://webaim.org/techniques/css/invisiblecontent/) - This is an amazing article which helped me to understand different techniques and use-cases for hiding content. I'd recommend it to anyone still learning this concept.\n- [The Guide To Responsive Design In 2023 and Beyond](https://ishadeed.com/article/responsive-design/)\n- [The new responsive: Web design in a component-driven world](https://web.dev/articles/new-responsive) These amazing articles helped me to discover latest CSS techniques. I'd recommend it to anyone aiming to keep up-to-date in CSS.\n- [google-webfonts-helper](https://gwfh.mranftl.com/fonts) - This amazinge tool helped me for optimizing google fonts.\n\nThese was some useful resources and I'll add more later.\n\n## Author\n\n- Frontend Mentor - [@ahmadkdev](https://www.frontendmentor.io/profile/ahmadkdev)\n- Linkedin - [@ahmadkhaliddev](https://www.linkedin.com/in/ahmadkhaliddev/)\n- Twitter - [@ahmadkhalidmo](https://twitter.com/ahmadkhalidmo)\n\n## Acknowledgments\n\nI deeply thank [Fronend Mentor](https://www.frontendmentor.io) for their amazing designs.\nand many thanks to [Coder Coder](https://www.youtube.com/@TheCoderCoder) Her amazing tutorials really helped me alot.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fahmadkdev%2Fdeveloper-portfolio","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fahmadkdev%2Fdeveloper-portfolio","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fahmadkdev%2Fdeveloper-portfolio/lists"}