{"id":17560939,"url":"https://github.com/timbar09/the-portfolio","last_synced_at":"2026-04-11T08:05:53.296Z","repository":{"id":224263639,"uuid":"537822068","full_name":"Timbar09/The-portfolio","owner":"Timbar09","description":"This is the source code for my personal portfolio website, built with React. It features dark mode and a responsive design. The website is built using React, Sass, and other libraries.","archived":false,"fork":false,"pushed_at":"2025-09-29T15:38:05.000Z","size":7342,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"dev","last_synced_at":"2025-09-29T17:31:58.188Z","etag":null,"topics":["dark-mode","portfolio","react","responsive-web-design","sass"],"latest_commit_sha":null,"homepage":"https://milesmosweu.netlify.app/","language":"JavaScript","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/Timbar09.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,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2022-09-17T13:48:04.000Z","updated_at":"2025-03-22T16:09:03.000Z","dependencies_parsed_at":"2024-04-05T19:27:27.445Z","dependency_job_id":"eea51432-8913-4609-b7fd-27c8953e1853","html_url":"https://github.com/Timbar09/The-portfolio","commit_stats":null,"previous_names":["timbar09/the-portfolio"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Timbar09/The-portfolio","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Timbar09%2FThe-portfolio","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Timbar09%2FThe-portfolio/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Timbar09%2FThe-portfolio/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Timbar09%2FThe-portfolio/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Timbar09","download_url":"https://codeload.github.com/Timbar09/The-portfolio/tar.gz/refs/heads/dev","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Timbar09%2FThe-portfolio/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31673077,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-10T17:19:37.612Z","status":"online","status_checked_at":"2026-04-11T02:00:05.776Z","response_time":54,"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":["dark-mode","portfolio","react","responsive-web-design","sass"],"created_at":"2024-10-21T11:44:00.782Z","updated_at":"2026-04-11T08:05:53.287Z","avatar_url":"https://github.com/Timbar09.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Miles Mosweu | Portfolio\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"src/assets/images/logo-icon.png\" alt=\"Portfolio logo\" width=\"200\" height=\"200\" /\u003e\n\u003c/div\u003e\n\n\u003ca name=\"readme-top\"\u003e\u003c/a\u003e\n\n## 📗 Table of Contents\n\n[![📖 Overview](https://img.shields.io/badge/📖_Overview-blue)](#overview)\n[![🛠️ Tech Stack](https://img.shields.io/badge/🛠️_Tech_Stack-orange)](#tech-stack)\n[![🌟 Features](https://img.shields.io/badge/🌟_Features-green)](#features)\n[![🚀 Live Demo](https://img.shields.io/badge/🚀_Live_Demo-red)](#live-demo)\n[![🔭 Future Features](https://img.shields.io/badge/🔭_Future_Features-purple)](#future-features)\n[![💻 Running Locally](https://img.shields.io/badge/💻_Running_Locally-yellow)](#running-locally)\n[![🤝 Contributing](https://img.shields.io/badge/🤝_Contributing-pink)](#contributing)\n[![🙏 Acknowledgements](https://img.shields.io/badge/🙏_Acknowledgments-teal)](#acknowledgements)\n[![📝 License](https://img.shields.io/badge/📝_License-gray)](#license)\n\n\u003c!--\n- [📖 Overview](#overview)\n- [🛠️ Tech Stack](#️tech-stack)\n- [🌟 Features](#features)\n- [🚀 Live Demo](#live-demo)\n- [🔭 Future Features](#future-features)\n- [💻 Running Locally](#running-locally)\n- [🤝 Contributing](#contributing)\n- [🙏 Acknowledgement](#acknowledgements)\n- [📝 License](#license) --\u003e\n\n## 📖 Overview \u003ca name='overview'\u003e\u003c/a\u003e\n\nThis repository contains the source code for my personal portfolio website that I built using React. It has a dark mode feature and a responsive design. The website is built using React, Sass, and a few other libraries. The website is hosted on Netlify and the source code is available on GitHub. Feel free to use this website as a template for your own portfolio website. If you have any questions or suggestions, feel free to contact me. I hope you like it! 😊\n\n## 🛠️ Tech Stack \u003ca name='tech-stack'\u003e\u003c/a\u003e\n\n- Sass\n- React\n- A handfull of [libraries](package.json).\n\n## 🌟 Features \u003ca name='features'\u003e\u003c/a\u003e\n\n- **Dark Mode Toggle**: The project features a toggle button for light/dark mode. The website can also auto-detect the user's system theme.\n- **Responsive Design**: The fully responsive layout ensures a seamless experience across all device types and screen sizes.\n- **Transitions and Animations**: Implemented using Framer Motion to create smooth and engaging visual effects.\n- **Tooltip Component**: Reusable tooltip component for enhanced UX and accessibility. \u003c!-- NEW --\u003e\n- **GitHub Contribution Calendar**: Integrated a GitHub contribution calendar to showcase commit activity. \u003c!-- NEW --\u003e\n- **Reusable Components**: Includes reusable components such as Button, Link, Transitions, Social Links, and Tab Feature that display lists according to the selected tab.\n- **Custom Hooks**: Features custom hooks like `useMediaQuery` to handle media queries effectively.\n- **Project Showcases**: Displays a collection of my best projects, with detailed descriptions and links to live demos and GitHub repositories.\n- **Page Transitions**: Added animated page transitions for a smoother navigation experience. \u003c!-- NEW --\u003e\n- **SEO Optimization**: Implemented best practices for search engine optimization to improve visibility.\n\u003c!-- - **Performance Optimizations**: Ensures fast loading times and a smooth user experience. --\u003e\n- **Deployment**: Hosted on Netlify for continuous deployment and easy management.\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top ⬆️\u003c/a\u003e)\u003c/p\u003e\n\n## 🚀 Live Demo \u003ca name='live-demo'\u003e\u003c/a\u003e\n\nThe website is live at [milesmosweu.netlify.app](https://milesmosweu.netlify.app/).\n\n## 🔭 Future Features \u003ca name='future-features'\u003e\u003c/a\u003e\n\n- **Blog Section**: Add a blog section to share my thoughts and experiences.\n- **Testimonials**: Showcase testimonials from clients and colleagues.\n- **Improved SEO**: Implement further SEO optimizations to improve visibility.\n- **Performance Improvements**: Optimize performance for faster loading times.\n- **Accessibility Improvements**: Enhance accessibility for users with disabilities.\n\n---\n\n**Changelog**\n\n\u003e **October 2025**\n\u003e\n\u003e - Separated landing page sections into individual pages\n\u003e - Added tooltip component\n\u003e - Added GitHub Contribution Calendar\n\u003e - Added 404 page component\n\u003e - Updated Footer\n\u003e - Substituted form submission powered by Formspree with mailto\n\u003e - Added a scrollYProgress bar in the nav\n\u003e - Added a project images carousel to selected project modal\n\u003e - Added page transitions\n\n## 💻 Running Locally \u003ca name='running-locally'\u003e\u003c/a\u003e\n\nTo run this project locally, follow these steps:\n\n### Prerequisites\n\n- A code editor. I personally use [VS Code](https://code.visualstudio.com/).\n- [Node.js](https://nodejs.org/en/) installed on your machine.\n- [Vite](https://vitejs.dev/) build tool installed globally.\n\n```bash\nnpm install -g create-vite\n```\n\n### Steps\n\n1. Clone the repository\n2. Navigate into the directory\n3. Install the dependencies\n4. Start the development server\n\n```bash\ngit clone https://github.com/Timbar09/The-portfolio.git`\ncd The-portfolio\nnpm install\nnpm run dev\n```\n\nThe site will be available at `http://localhost:5173`.\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top ⬆️\u003c/a\u003e)\u003c/p\u003e\n\n## 🤝 Contributing \u003ca name='contributing'\u003e\u003c/a\u003e\n\nWhile this is a personal project, if you find any bugs or ways to improve the code, your contributions are welcome. Please open an issue or submit a pull request.\n\n## 🙏 Acknowledgements \u003ca name='acknowledgements'\u003e\u003c/a\u003e\n\n\u003e **Quotes from the \u003ca href=\"https://github.com/lukePeavey/quotable\"\u003eQuotable API\u003c/a\u003e.**\n\n\u003e **Images**\n\n- Hero background images by \u003ca href=\"https://unsplash.com/@alexacea?utm_content=creditCopyText\u0026utm_medium=referral\u0026utm_source=unsplash\"\u003eAlexandru Acea\u003c/a\u003e on \u003ca href=\"https://unsplash.com/photos/turned-on-flat-screen-monitor-and-black-laptop-computer-on-table-TMkrN9QZERw?utm_content=creditCopyText\u0026utm_medium=referral\u0026utm_source=unsplash\"\u003eUnsplash\u003c/a\u003e\n\n- Project modal palceholder photo by \u003ca href=\"https://unsplash.com/@kellysikkema?utm_content=creditCopyText\u0026utm_medium=referral\u0026utm_source=unsplash\"\u003eKelly Sikkema\u003c/a\u003e on \u003ca href=\"https://unsplash.com/photos/black-pencil-on-black-surface-VX0bsbyBxpM?utm_content=creditCopyText\u0026utm_medium=referral\u0026utm_source=unsplash\"\u003eUnsplash\u003c/a\u003e\n\n- Contact section dark background image by \u003ca href=\"https://www.pexels.com/photo/starry-sky-over-mountain-ridge-in-valley-5753502/\"\u003eSkyler Ewing\u003c/a\u003e\n\n- Contact section light background image by \u003ca href=\"https://unsplash.com/@wirhabenzeit?utm_content=creditCopyText\u0026utm_medium=referral\u0026utm_source=unsplash\"\u003eDominik Schröder\u003c/a\u003e on \u003ca href=\"https://unsplash.com/photos/white-clouds-during-daytime-FIKD9t5_5zQ?utm_content=creditCopyText\u0026utm_medium=referral\u0026utm_source=unsplash\"\u003eUnsplash\u003c/a\u003e\n\n## 📝 License \u003ca name=\"license\"\u003e\u003c/a\u003e\n\nThis project is open source and available under the [MIT License](LICENSE).\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%2Ftimbar09%2Fthe-portfolio","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftimbar09%2Fthe-portfolio","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftimbar09%2Fthe-portfolio/lists"}