https://github.com/jonhaywood/portfolio

Personal portfolio website built with React.
https://github.com/jonhaywood/portfolio

developer-portfolio easy-to-setup portfolio portfolio-template portfolio-website react react-bootstrap react-js react-portfolio tanstack-router typescript typescript-react vite web-template

Last synced: 3 months ago
JSON representation

Personal portfolio website built with React.

• Host: GitHub
• URL: https://github.com/jonhaywood/portfolio
• Owner: JonHaywood
• Created: 2025-05-12T17:53:48.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2025-05-12T18:15:03.000Z (about 1 year ago)
• Last Synced: 2025-05-12T19:27:10.393Z (about 1 year ago)
• Topics: developer-portfolio, easy-to-setup, portfolio, portfolio-template, portfolio-website, react, react-bootstrap, react-js, react-portfolio, tanstack-router, typescript, typescript-react, vite, web-template
• Language: TypeScript
• Homepage: https://jonhaywood.dev
• Size: 2.81 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          


  Portfolio Website


  jonhaywood.dev





  






[![forthebadge](https://forthebadge.com/images/badges/built-with-love.svg)](https://forthebadge.com)  

[![forthebadge](https://forthebadge.com/images/badges/made-with-typescript.svg)](https://forthebadge.com)  

[![forthebadge](https://forthebadge.com/images/badges/open-source.svg)](https://forthebadge.com)  

![GitHub Repo stars](https://img.shields.io/github/stars/JonHaywood/portfolio?color=red&logo=github&style=for-the-badge)  

![GitHub forks](https://img.shields.io/github/forks/JonHaywood/portfolio?color=red&logo=github&style=for-the-badge)



    🔹

    Report Bug    

    🔹

    Request Feature



# Portfolio

My personal portfolio jonhaywood.dev which features my github projects, resume and technical skills.


## TL;DR

You can fork this repo to modify and make changes of your own! Please give me proper credit by linking back to [JonHaywood](https://github.com/JonHaywood/portfolio). Thanks!

This repo was based on [Soumyajit4419](https://github.com/soumyajit4419/Portfolio)'s excellent work. I rebuilt it using Typescript + Vite, Tanstack Router and modern packages.

## Built With

This project was built using the following technologies.

- Typescript

- Vite

- Bootstrap CSS

- Tanstack Router

## Features

- 📱 **Responsive Design**: Fully responsive layout using React-Bootstrap and custom CSS.

- 🔄 **Dynamic Routing**: Multi-page layout with dynamic routing powered by TanStack Router.

- ✨ **Interactive Animations**: Particle effects and smooth scrolling for enhanced user experience.

- 🧰 **Developer Tools Integration**: Includes TanStack Router DevTools for debugging and development.

- 🔧 **Customizable**: Easy to modify and extend with clear component structure and routing.

## Getting Started

Clone this repository. Ensure you have [Node.js](https://nodejs.org/) and [pnpm](https://pnpm.io/) installed.

## 🛠 Installation and Setup Instructions

1. First, run: `pnpm install`

2. In the project directory, run: `pnpm dev`

This will start the app in the development mode. Open [http://localhost:5173](http://localhost:5173) to view it in the browser. The page will reload if you make edits.

## Usage Instructions

Open the project folder and Navigate to `/src/components/`. 


You will find all the components used and you can edit your information accordingly.

### Show your support

Give a ⭐ if you like this website!