merge

.gitignore

@@ -6,6 +6,9 @@ yarn-debug.log*
 yarn-error.log*
 lerna-debug.log*
 
+notes/
+
+
 # Diagnostic reports (https://nodejs.org/api/report.html)
 report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
 
@@ -102,3 +105,4 @@ dist
 
 # TernJS port file
 .tern-port
+.vercel

.vscode/settings.json

@@ -1,3 +1,8 @@
 {
-  "dotenv.enableAutocloaking": false
+  "dotenv.enableAutocloaking": false,
+  "workbench.colorCustomizations": {
+    "activityBar.background": "#182F46",
+    "titleBar.activeBackground": "#224262",
+    "titleBar.activeForeground": "#F8FAFC"
+  }
 }

README.md

@@ -1,87 +1,85 @@
-# Jon's Portfolio
-
-[LIVE](https://www.jonchristie.net/) 
-
-<img src="https://raw.githubusercontent.com/mathcodes/mathcodes.github.io/main/src/assets/img/portfolio_ss_0.png" width="45%"/>
-<br/>
-<img src="https://raw.githubusercontent.com/mathcodes/mathcodes.github.io/main/src/assets/img/portfolio_ss_1.png" width="45%"/>
-<br/>
-<img src="https://raw.githubusercontent.com/mathcodes/mathcodes.github.io/main/src/assets/img/portfolio_ss_2.png" width="45%"/>
-<br/>
-<img src="https://raw.githubusercontent.com/mathcodes/mathcodes.github.io/main/src/assets/img/portfolio_ss_3.png" width="45%"/>
-<br/>
-<img src="https://raw.githubusercontent.com/mathcodes/mathcodes.github.io/main/src/assets/img/portfolio_ss_4.png" width="45%"/>
-<br/>
-<img src="https://raw.githubusercontent.com/mathcodes/mathcodes.github.io/main/src/assets/img/portfolio_ss_5.png" width="45%"/>
-<br/>
-
-
-![badge](https://img.shields.io/badge/•-material_ui/core.4.12.2-blue) 
-![badge](https://img.shields.io/badge/•-material_ui/icons.4.11.2-blue) 
-![badge](https://img.shields.io/badge/•-testing_library_jest_dom.5.11.4-blue) 
-
-![badge](https://img.shields.io/badge/•-testing_library/react.11.1.0-blue)
-
-![badge](https://img.shields.io/badge/•-axios.0.21.1-blue) 
-
-![badge](https://img.shields.io/badge/•-gh_pages.3.2.3-blue) 
-
-![badge](https://img.shields.io/badge/•-react.17.0.2-blue) 
-
-![badge](https://img.shields.io/badge/•-react_dom.17.0.2-blue) 
-
-![badge](https://img.shields.io/badge/•-react_fast_marquee.1.2.1-blue) - Used to create the smooth animation in the skills section:
-```js
-<Marquee
-      gradient={true}
-      speed={30}
-      pauseOnHover={true}
-      pauseOnClick={true} 
-      delay={0}
-      play={true}
-      direction="left"
-    >
-      {skillsData.map((skill, id) => (
-        <div className="skill--box" key={id} style={skillBoxStyle}>
-          <img src={skillsImage(skill)} alt={skill} />
-          <h3 style={{ color: theme.tertiary }}>
-            {skill}
-          </h3>
-        </div>
-      ))}
-    </Marquee>
+# Jon Christie Portfolio 2023
+
+Revised portfolio for 2023. Built with React, Tailwind CSS, and Framer Motion.
+
+# Table of Contents
+
+- [Demo](#demo)
+- [Features](#features)
+- [Tech](#tech)
+- [Installation](#installation)
+- [Usage](#usage)
+- [Contributing](#contributing)
+- [License](#license)
+- [Contact](#contact)
+
+# Demo
+
+[Live Demo](https://jonchristie.net)
+
+# Features
+
+- [x] Responsive Design
+- [x] Dark Mode
+- [x] Contact Form
+- [x] Smooth Scrolling
+- [x] Animated SVGs
+- [x] Mobile-friendly
+- [x] Accessibility-friendly
+- [x] Scalable and Reusable Components
+- [x] Modern UI/UX Design
+- [x] Customizable
+
+## Tech
+
+<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>
+
+## Technologies Explained
+
+ - React: A popular JavaScript library for building user interfaces.
+ - Tailwind CSS: A utility-first CSS framework for quickly styling UI components.
+ - Styled Components: A library that allows you to write CSS in your JavaScript code.
+ - Heroicons React: A library of free, high-quality icons that are designed to be easily customizable and used in various UI components.
+ - Testing Library: A suite of tools for testing user interfaces to ensure reliability and ease of use.
+ - Framer Motion: A library for creating smooth and subtle animations to enhance the user experience.
+ - React CountUp: A library for animating numbers, such as statistics or metrics, in a fun and engaging way.
+ - React Router Dom: A library for enabling navigation within the app.
+ - Web Vitals: A library for measuring and optimizing the app's speed and responsiveness.
+
+## Installation
+
+Use the package manager [npm](https://www.npmjs.com/) to install react-tailwindcss-portfolio.
+
+```bash
+npm install
 ```
-![badge](https://img.shields.io/badge/•-react_helmet.6.1.0-blue) - Used throughout to output plain html tags using plain html tags:
-```js
-<Helmet>
-  <title>{headerData.name} | Projects</title>
-</Helmet>
+
+## Usage
+
+```bash
+npm start
 ```
 
-![badge](https://img.shields.io/badge/•-react_icons.4.2.0-blue) 
-![badge](https://img.shields.io/badge/•-react_reveal.1.2.2-blue) 
-![badge](https://img.shields.io/badge/•-react_router_dom.5.2.0-blue) 
-![badge](https://img.shields.io/badge/•-react_router_hash_link.2.4.3-blue) 
-![badge](https://img.shields.io/badge/•-react_scripts.4.0.3-blue) 
-![badge](https://img.shields.io/badge/•-react_slick.0.28.1-blue) 
-![badge](https://img.shields.io/badge/•-slick_carousel.1.8.1-blue) 
-![badge](https://img.shields.io/badge/•-validator.13.6.0-blue) 
-![badge](https://img.shields.io/badge/•-web_vitals.1.0.1-blue)
+## Contributing
+Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
 
-## Description
-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! 
+Please make sure to update tests as appropriate.
+
+## License
+[MIT](https://github.com/mathcodes/react-tailwindcss-portfolio/blob/main/LICENSE)
 
 ## Contact
 <img src="https://avatars0.githubusercontent.com/u/17928947?v=4" alt="Github profile image" width="80px" height="80px" />
 
-__Jon Christie__ 
+__Jon Christie__
 
-GitHub: [mathcodes](https://github.com/mathcodes) 
+GitHub: [mathcodes](https://github.com/mathcodes)
 
 [<code><img width="36px" src="https://img.icons8.com/color/48/000000/linkedin.png"/></code>](https://www.linkedin.com/jonchristie)       
-[<code><img width="36" src="https://img.icons8.com/color/48/000000/twitter--v2.png"/></code>](https://twitter.com/jcircle9)       
+[<code><img width="36" src="https://img.icons8.com/color/48/000000/twitter--v2.png"/></code>](https://twitter.com/thejonchristie)       
 [<code><img width="36" src="https://img.icons8.com/color/48/000000/youtube-play.png"/></code>](https://www.youtube.com/channel/UC5GFnN-lv8Yuqc9O3b79k6g)       
 [<code><img width="36" src="https://img.icons8.com/color/48/000000/facebook.png"/></code>](https://www.facebook.com/jonpchristie)       
 [<code><img width="36" src="https://img.icons8.com/color/48/000000/instagram-new--v2.png"/></code>](https://www.instagram.com/fullstack11235)       
 [<code><img width="36" src="https://img.icons8.com/color/48/000000/soundcloud.png"/></code>](https://soundcloud.com/jonchristie#/)       
 [<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)
+