Skip to content

Commit ef6e211

Browse files
mathcodesmathcodes
authored
Update README.md
1 parent d6cf2e8 commit ef6e211

File tree

1 file changed

+73
-43
lines changed

1 file changed

+73
-43
lines changed

‎README.md‎

Lines changed: 73 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,85 @@
1-
# Jon's Portfolio
2-
3-
[LIVE](https://www.jonchristie.net/)
4-
5-
<img src="https://raw.githubusercontent.com/mathcodes/mathcodes.github.io/main/src/assets/img/portfolio_ss_0.png" width="45%"/>
6-
<br/>
7-
<img src="https://raw.githubusercontent.com/mathcodes/mathcodes.github.io/main/src/assets/img/portfolio_ss_1.png" width="45%"/>
8-
<br/>
9-
<img src="https://raw.githubusercontent.com/mathcodes/mathcodes.github.io/main/src/assets/img/portfolio_ss_2.png" width="45%"/>
10-
<br/>
11-
<img src="https://raw.githubusercontent.com/mathcodes/mathcodes.github.io/main/src/assets/img/portfolio_ss_3.png" width="45%"/>
12-
<br/>
13-
<img src="https://raw.githubusercontent.com/mathcodes/mathcodes.github.io/main/src/assets/img/portfolio_ss_4.png" width="45%"/>
14-
<br/>
15-
<img src="https://raw.githubusercontent.com/mathcodes/mathcodes.github.io/main/src/assets/img/portfolio_ss_5.png" width="45%"/>
16-
<br/>
17-
18-
19-
![badge](https://img.shields.io/badge/•-material_ui/core.4.12.2-blue)
20-
![badge](https://img.shields.io/badge/•-material_ui/icons.4.11.2-blue)
21-
![badge](https://img.shields.io/badge/•-testing_library_jest_dom.5.11.4-blue)
22-
![badge](https://img.shields.io/badge/•-testing_library/react.11.1.0-blue)
23-
![badge](https://img.shields.io/badge/•-axios.0.21.1-blue)
24-
![badge](https://img.shields.io/badge/•-gh_pages.3.2.3-blue)
25-
![badge](https://img.shields.io/badge/•-react.17.0.2-blue)
26-
![badge](https://img.shields.io/badge/•-react_dom.17.0.2-blue)
27-
![badge](https://img.shields.io/badge/•-react_fast_marquee.1.2.1-blue)
28-
![badge](https://img.shields.io/badge/•-react_helmet.6.1.0-blue)
29-
![badge](https://img.shields.io/badge/•-react_icons.4.2.0-blue)
30-
![badge](https://img.shields.io/badge/•-react_reveal.1.2.2-blue)
31-
![badge](https://img.shields.io/badge/•-react_router_dom.5.2.0-blue)
32-
![badge](https://img.shields.io/badge/•-react_router_hash_link.2.4.3-blue)
33-
![badge](https://img.shields.io/badge/•-react_scripts.4.0.3-blue)
34-
![badge](https://img.shields.io/badge/•-react_slick.0.28.1-blue)
35-
![badge](https://img.shields.io/badge/•-slick_carousel.1.8.1-blue)
36-
![badge](https://img.shields.io/badge/•-validator.13.6.0-blue)
37-
![badge](https://img.shields.io/badge/•-web_vitals.1.0.1-blue)
38-
39-
## Description
40-
Welcome to my site, updated as of August 2022! I've added some more projects and implemented some more advanced features to the page! Enjoy and please contact me if you have a job opening for a full stack web developer!
1+
# Jon Christie Portfolio 2023
2+
3+
Revised portfolio for 2023. Built with React, Tailwind CSS, and Framer Motion.
4+
5+
# Table of Contents
6+
7+
- [Demo](#demo)
8+
- [Features](#features)
9+
- [Tech](#tech)
10+
- [Installation](#installation)
11+
- [Usage](#usage)
12+
- [Contributing](#contributing)
13+
- [License](#license)
14+
- [Contact](#contact)
15+
16+
# Demo
17+
18+
[Live Demo](https://jonchristie.netlify.app/)
19+
20+
# Features
21+
22+
- [x] Responsive Design
23+
- [x] Dark Mode
24+
- [x] Contact Form
25+
- [x] Smooth Scrolling
26+
- [x] Animated SVGs
27+
- [x] Mobile-friendly
28+
- [x] Accessibility-friendly
29+
- [x] Scalable and Reusable Components
30+
- [x] Modern UI/UX Design
31+
- [x] Customizable
32+
33+
## Tech
34+
35+
<a href="https://reactjs.org/" target="_blank"><img src="https://img.shields.io/static/v1?label=|&message=heroicons_react&color=9E7CC1&style=plastic&logo=React&logoColor=white"/></a><a href="https://jestjs.io/" target="_blank"><img src="https://img.shields.io/static/v1?label=|&message=testing_library_jest_dom&color=cdf998&style=plastic&logo=jest&logoColor=white"/></a><a href="https://reactjs.org/" target="_blank"><img src="https://img.shields.io/static/v1?label=|&message=testing_library_react&color=cdf998&style=plastic&logo=React&logoColor=white"/></a><a href="https://reactjs.org/" target="_blank"><img src="https://img.shields.io/static/v1?label=|&message=testing_library_user_event&color=cdf998&style=plastic&logo=React&logoColor=white"/></a><a href="https://www.framer.com/motion/" target="_blank"><img src="https://img.shields.io/static/v1?label=|&message=framer_motion&color=2a2c3b&style=plastic&logo=Framer&logoColor=white"/></a><a href="https://postcss.org/" target="_blank"><img src="https://img.shields.io/static/v1?label=|&message=postcss_cli&color=DD3A0A&style=plastic&logo=postcss&logoColor=white"/></a><a href="https://reactjs.org/" target="_blank"><img src="https://img.shields.io/static/v1?label=|&message=react&color=61dafb&style=plastic&logo=React&logoColor=white"/></a><a href="https://www.npmjs.com/package/react-countup" target="_blank"><img src="https://img.shields.io/static/v1?label=|&message=react_countup&color=61dafb&style=plastic&logo=React&logoColor=white"/></a><a href="https://reactjs.org/" target="_blank"><img src="https://img.shields.io/static/v1?label=|&message=react_dom&color=61dafb&style=plastic&logo=React&logoColor=white"/></a><a href="https://reactjs.org/" target="_blank"><img src="https://img.shields.io/static/v1?label=|&message=react_icons&color=61dafb&style=plastic&logo=React&logoColor=white"/></a><a href="https://reactrouter.com/" target="_blank"><img src="https://img.shields.io/static/v1?label=|&message=react_router_dom&color=61dafb&style=plastic&logo=React&logoColor=white"/></a><a href="https://reactjs.org/" target="_blank"><img src="https://img.shields.io/static/v1?label=|&message=react_scripts&color=61dafb&style=plastic&logo=React&logoColor=white"/></a><a href="https://www.npmjs.com/package/react-scroll" target="_blank"><img src="https://img.shields.io/static/v1?label=|&message=react_scroll&color=61dafb&style=plastic&logo=React&logoColor=white"/></a><a href="https://styled-components.com/" target="_blank"><img src="https://img.shields.io/static/v1?label=|&message=styled_components&color=DB7093&style=plastic&logo=styled-components&logoColor=white"/></a><a href="https://web.dev/vitals/" target="_blank"><img src="https://img.shields.io/static/v1?label=|&message=web_vitals&color=EA4335&style=plastic&logo=Google&logoColor=white"/></a><a href="https://tailwindcss.com/docs" target="_blank"><img src="https://img.shields.io/static/v1?label=|&message=tailwindcss_forms&color=38B2AC&style=plastic&logo=tailwind-css&logoColor=white"/></a><a href="https://testing-library.com/docs/dom-testing-library/intro/" target="_blank"><img src="https://img.shields.io/static/v1?label=|&message=testing_library_dom&color=cdf998&style=plastic&logo=testing-library&logoColor=white"/></a><a href="https://autoprefixer.github.io/" target="_blank"><img src="https://img.shields.io/static/v1?label=|&message=autoprefixer&color=DD3A0A&style=plastic&logo=postcss&logoColor=white"/></a><a href="https://postcss.org/" target="_blank"><img src="https://img.shields.io/static/v1?label=|&message=postcss&color=DD3A0A&style=plastic&logo=postcss&logoColor=white"/></a><a href="https://tailwindcss.com/" target="_blank"><img src="https://img.shields.io/static/v1?label=|&message=tailwindcss&color=38B2AC&style=plastic&logo=tailwind-css&logoColor=white"/></a>
36+
37+
## Technologies Explained
38+
39+
React: A popular JavaScript library for building user interfaces.
40+
Tailwind CSS: A utility-first CSS framework for quickly styling UI components.
41+
Styled Components: A library that allows you to write CSS in your JavaScript code.
42+
Heroicons React: A library of free, high-quality icons that are designed to be easily customizable and used in various UI components.
43+
Testing Library: A suite of tools for testing user interfaces to ensure reliability and ease of use.
44+
Framer Motion: A library for creating smooth and subtle animations to enhance the user experience.
45+
React CountUp: A library for animating numbers, such as statistics or metrics, in a fun and engaging way.
46+
React Router Dom: A library for enabling navigation within the app.
47+
Web Vitals: A library for measuring and optimizing the app's speed and responsiveness.
48+
49+
## Installation
50+
51+
Use the package manager [npm](https://www.npmjs.com/) to install react-tailwindcss-portfolio.
52+
53+
```bash
54+
npm install
55+
```
56+
57+
## Usage
58+
59+
```bash
60+
npm start
61+
```
62+
63+
## Contributing
64+
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
65+
66+
Please make sure to update tests as appropriate.
67+
68+
## License
69+
[MIT](https://github.com/mathcodes/react-tailwindcss-portfolio/blob/main/LICENSE)
4170

4271
## Contact
4372
<img src="https://avatars0.githubusercontent.com/u/17928947?v=4" alt="Github profile image" width="80px" height="80px" />
4473

45-
__Jon Christie__
74+
__Jon Christie__
4675

47-
GitHub: [mathcodes](https://github.com/mathcodes)
76+
GitHub: [mathcodes](https://github.com/mathcodes)
4877

4978
[<code><img width="36px" src="https://img.icons8.com/color/48/000000/linkedin.png"/></code>](https://www.linkedin.com/jonchristie)       
50-
[<code><img width="36" src="https://img.icons8.com/color/48/000000/twitter--v2.png"/></code>](https://twitter.com/jcircle9)       
79+
[<code><img width="36" src="https://img.icons8.com/color/48/000000/twitter--v2.png"/></code>](https://twitter.com/thejonchristie)       
5180
[<code><img width="36" src="https://img.icons8.com/color/48/000000/youtube-play.png"/></code>](https://www.youtube.com/channel/UC5GFnN-lv8Yuqc9O3b79k6g)       
5281
[<code><img width="36" src="https://img.icons8.com/color/48/000000/facebook.png"/></code>](https://www.facebook.com/jonpchristie)       
5382
[<code><img width="36" src="https://img.icons8.com/color/48/000000/instagram-new--v2.png"/></code>](https://www.instagram.com/fullstack11235)       
5483
[<code><img width="36" src="https://img.icons8.com/color/48/000000/soundcloud.png"/></code>](https://soundcloud.com/jonchristie#/)       
5584
[<code><img width="36" src="https://img.icons8.com/color/48/000000/spotify--v1.png"/></code>](https://open.spotify.com/artist/07S7aLfxH70VAX64g1WuFw?si=tlOj1OMBRLm-y4sY8Lox3Q)
85+

0 commit comments

Comments
 (0)