Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/timbar09/the-portfolio

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.
https://github.com/timbar09/the-portfolio

dark-mode portfolio react responsive-web-design sass

Last synced: 11 days ago
JSON representation

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.

Host: GitHub
URL: https://github.com/timbar09/the-portfolio
Owner: Timbar09
Created: 2022-09-17T13:48:04.000Z (over 2 years ago)
Default Branch: dev
Last Pushed: 2024-09-18T17:13:49.000Z (4 months ago)
Last Synced: 2024-12-19T13:55:45.935Z (about 1 month ago)
Topics: dark-mode, portfolio, react, responsive-web-design, sass
Language: JavaScript
Homepage: https://milesmosweu.netlify.app/
Size: 6.85 MB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

# Miles Mosweu | Portfolio

## 📗 Table of Contents

[![📖 Overview](https://img.shields.io/badge/📖_Overview-blue)](#overview)
[![🛠️ Tech Stack](https://img.shields.io/badge/🛠️_Tech_Stack-orange)](#tech-stack)
[![🌟 Features](https://img.shields.io/badge/🌟_Features-green)](#features)
[![🚀 Live Demo](https://img.shields.io/badge/🚀_Live_Demo-red)](#live-demo)
[![🔭 Future Features](https://img.shields.io/badge/🔭_Future_Features-purple)](#future-features)
[![💻 Running Locally](https://img.shields.io/badge/💻_Running_Locally-yellow)](#running-locally)
[![🤝 Contributing](https://img.shields.io/badge/🤝_Contributing-pink)](#contributing)
[![🙏 Acknowledgements](https://img.shields.io/badge/🙏_Acknowledgments-teal)](#acknowledgements)
[![📝 License](https://img.shields.io/badge/📝_License-gray)](#license)

## 📖 Overview

This 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! 😊

## 🛠️ Tech Stack

- Sass
- React
- A handfull of [libraries](package.json).

## 🌟 Features

- **Dark Mode Toggle**: The project features a toggle button for light/dark mode. The website can also auto-detect the user's system theme.
- **Responsive Design**: The fully responsive layout ensures a seamless experience across all device types and screen sizes.
- **Transitions and Animations**: Implemented using Framer Motion to create smooth and engaging visual effects.
- **Dynamic Navigation**: On desktop viewports, the navigation bar hides when scrolling down and reappears when scrolling up.
- **Reusable Components**: Includes reusable components such as Button, Link, Transitions, Social Links, and Tab Feature that display lists according to the selected tab.
- **Custom Hooks**: Features custom hooks like `useMediaQuery` to handle media queries effectively.
- **Project Showcases**: Displays a collection of my best projects, with detailed descriptions and links to live demos and GitHub repositories.
- **Contact Form**: Integrated contact form allowing visitors to reach out directly.

- **Deployment**: Hosted on Netlify for continuous deployment and easy management.

(back to top ⬆️)

## 🚀 Live Demo

The website is live at [milesmosweu.netlify.app](https://milesmosweu.netlify.app/).

## 🔭 Future Features

- **Blog Section**: Add a blog section to share my thoughts and experiences.
- **Testimonials**: Showcase testimonials from clients and colleagues.
- **Improved SEO**: Implement further SEO optimizations to improve visibility.
- **Performance Improvements**: Optimize performance for faster loading times.
- **Accessibility Improvements**: Enhance accessibility for users with disabilities.

## 💻 Running Locally

To run this project locally, follow these steps:

### Prerequisites

- A code editor. I personally use [VS Code](https://code.visualstudio.com/).
- [Node.js](https://nodejs.org/en/) installed on your machine.
- [Vite](https://vitejs.dev/) build tool installed globally.

```bash
npm install -g create-vite
```

### Steps

1. Clone the repository
2. Navigate into the directory
3. Install the dependencies
4. Start the development server

```bash
git clone https://github.com/Timbar09/The-portfolio.git`
cd The-portfolio
npm install
npm run dev
```

The site will be available at `http://localhost:5173`.

(back to top ⬆️)

## 🤝 Contributing

While 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.

## 🙏 Acknowledgements

> **Quotes from the Quotable API.**

> **Images**

- Hero background images by Alexandru Acea on Unsplash

- Project modal palceholder photo by Kelly Sikkema on Unsplash

- Contact section dark background image by Skyler Ewing

- Contact section light background image by Dominik Schröder on Unsplash

## 📝 License

This project is open source and available under the [MIT License](LICENSE).

(back to top ⬆️)