my-portfolio-website — React 作品集模板

SHA-256: 9de1402a83a937f375aa5bc7716b7cc5260614121525d59aaf18ebdb5fd91fb0

2026-10-13T04:42:16.099Z

<a name="readme-top"></a>

<div align="center">
  <img src="src/assets/mai-logo.png" alt="logo" width="140"  height="auto" />
  <br/>

  <h3><b>My Portfolio Website</b></h3>

</div>

# 📗 Table of Contents

- [📖 About the Project](#about-project)
  - [🛠 Built With](#built-with)
    - [Tech Stack](#tech-stack)
    - [Key Features](#key-features)
  - [🚀 Live Demo](#live-demo)
- [💻 Getting Started](#getting-started)
  - [Install](#install)
  - [Usage](#usage)
  - [Run tests](#run-tests)
- [👥 Authors](#authors)
- [🔭 Future Features](#future-features)
- [🤝 Contributing](#contributing)
- [⭐️ Show your support](#support)
- [🙏 Acknowledgements](#acknowledgements)
- [📝 License](#license)

# 📖 My Portfolio Website <a name="about-project"></a>

Step into the world of my creative journey as you explore my portfolio! Here, you'll discover a curated collection of my projects that reflect my passion, skills, and dedication. Take a closer look at the intricate details of each endeavor, from innovative concepts to polished executions. Delve into my professional background and experience, gaining insights into the diverse challenges I've tackled and conquered. Uncover the building blocks of my knowledge and expertise through an in-depth exploration of my educational journey. Whether you're here to appreciate the aesthetics of my designs, understand the strategy behind my projects, or trace the evolution of my skills, this portfolio is your gateway to understanding the essence of who I am as a creative professional. Enjoy the seamless navigation, and feel free to reach out with any questions or opportunities for collaboration.

## 🛠 Built With <a name="built-with"></a>

### Tech Stack <a name="tech-stack"></a>

<details>
  <summary>Client</summary>
  <ul>
    <li><a href="https://developer.mozilla.org/en/docs/Web/HTML">HTML</a></li>
    <li><a href="https://developer.mozilla.org/en/docs/Web/CSS">CSS</a></li>
    <li><a href="https://developer.mozilla.org/en/docs/Web/JavaScript">JavaScript</a></li>
  </ul>
</details>

<details>
  <summary>Server</summary>
  <ul>
    <li><a href="https://react.dev/">React</a></li>
    <li><a href="https://vitejs.dev/">Vite</a></li>
  </ul>
</details>

<details>
<summary>Design</summary>
  <ul>
    <li><a href="https://tailwindcss.com/">Tailwind CSS</a></li>
    <li><a href="https://react-icons.github.io/react-icons/">React Icons</a></li>
  </ul>
</details>

### Key Features <a name="key-features"></a>

The features incorporated into my personal portfolio website are as follows:

- **Home:** A webpage featuring a concise overview, skills, and portfolio.
- **Portfolio:** Displays a portfolio featuring more than 15 projects developed with robust technology stacks, incorporating HTML5/CSS3, JavaScript, React/Redux, API, Ruby, and Ruby on Rails.
- **About:** Offers a concise self-introduction, highlights my skill set, and establishes connections with various social media networks.
- **Contact:** Encourages users to leave a message if they are interested in initiating a project or require assistance with coding activities.

<p align="right">(<a href="#readme-top">back to top</a>)</p>

## 🚀 Live Demo <a name="live-demo"></a>

- [Live Demo Link](https://katarighe.vercel.app/)

<p align="right">(<a href="#readme-top">back to top</a>)</p>

## 💻 Getting Started <a name="getting-started"></a>

Clone this repository to your desired folder:

```
git clone [email protected]:katarighe/my-portoflio-website.git
cd my-portoflio-website
```

<p align="right">(<a href="#readme-top">back to top</a>)</p>

### Install <a name="install"></a>

Install this project by using:

```
npm install
```

<p align="right">(<a href="#readme-top">back to top</a>)</p>

### Usage <a name="usage"></a>

- Install dependencies

```bash
npm i 
or
npm install
```
- Start the development server
```bash
npm start
```

- Test the frontend project
```bash
npm run test
```

- To run the p project run `npm run dev` and then run `npm run build` when you're done.

To add more features in the project, you will neeed to either create a new branch.

<p align="right">(<a href="#readme-top">back to top</a>)</p>

### Run tests <a name="run-tests"></a>

To ensure code quality and prevent typos, we've integrated linters and tests into this project. 

For your convenience, you can use the following commands to check your HTML and CSS files while working in this repository:

```sh
  npx eslint "**/*.{js,jsx}"
```

<p align="right">(<a href="#readme-top">back to top</a>)</p>

## 👥 Authors <a name="authors"></a>

👤 **Mohamed Aden Ighe**

- GitHub: [@katarighe](https://github.com/katarighe)
- Twitter: [@katarighe](https://twitter.com/katarighe)
- LinkedIn: [@mighe](https://linkedin.com/in/mighe)

<p align="right">(<a href="#readme-top">back to top</a>)</p>

## 🔭 Future Features <a name="future-features"></a>

Here are some future features that could be added to the portfolio website in the future.

- **Blog Section:** Introducing a blog to share insights, experiences, and updates on the latest trends in web development and technology.
- **Interactive Resume:** Enhancing the portfolio with an interactive and dynamic resume section, providing a detailed overview of my professional journey.
- **Skill Progression Chart:** Incorporating a visual representation of my skill progression over time, showcasing continuous learning and development.
- **Client Testimonials:** Adding a section to display testimonials from satisfied clients or collaborators, enhancing credibility and showcasing successful collaborations.
- **Responsive Design Improvements:** Continuously refining and optimizing the website's responsiveness to ensure a seamless user experience across various devices.

These are just a few potential future features for the portfolio website. 

They aim to further enrich the user experience and provide a comprehensive view of my skills, projects, and professional journey.

The specific features that are implemented will depend on the needs and preferences of the users, as well as the available resources and technology.

<p align="right">(<a href="#readme-top">back to top</a>)</p>

## 🤝 Contributing <a name="contributing"></a>

Contributions, issues, and feature requests are welcome!

Feel free to check the [issues page](../../issues/).

<p align="right">(<a href="#readme-top">back to top</a>)</p>

## ⭐️ Show your support <a name="support"></a>

Give a star⭐️ or a thumbs up 👍 if you like this project! You can visit my GitHub profile for more of my projects.

<p align="right">(<a href="#readme-top">back to top</a>)</p>

## 🙏 Acknowledgments <a name="acknowledgements"></a>

- I want to express my gratitude to my colleague [Ticoniq](https://github.com/ticoniq/) for assisting me in constructing this portfolio website from scratch.
- [Link to the original design theme](https://github.com/ticoniq/portfolio-design)
- Project supervised by [Microverse](https://www.microverse.org/)
- [Creative Commons 4.0 License](https://creativecommons.org/licenses/by-nc/4.0/)

<p align="right">(<a href="#readme-top">back to top</a>)</p>

## 📝 License <a name="license"></a>

This project is [MIT](./LICENSE) licensed.

<p align="right">(<a href="#readme-top">back to top</a>)</p>