convert to typescript and start to update content

.eslintrc.js

@@ -6,11 +6,43 @@ module.exports = {
     jest: true,
     node: true,
   },
-  extends: 'airbnb',
+  // extends: 'airbnb',
+  extends: [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:import/errors",
+    "plugin:import/warnings",
+    "plugin:jsx-a11y/recommended", // Add this line for JSX accessibility rules
+    "plugin:@typescript-eslint/recommended", // if using TypeScript
+    "plugin:prettier/recommended" // Enables Prettier plugin and displays formatting errors as ESLint errors
+  ],
   ignorePatterns: ['node_modules/', 'build/'],
-  parser: '@babel/eslint-parser',
-  plugins: ['react'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react', 'import', 'jsx-a11y'],
   rules: {
+    '@typescript-eslint/no-empty-function': 'off',
+    '@typescript-eslint/no-non-null-assertion': 'off',
+    'prettier/prettier': [
+      "error",
+      {
+        'singleQuote': true, // Enforce single quotes
+        'semi': true,        // Enforce semicolons
+        'printWidth': 80,    // Max line length
+        'tabWidth': 2,       // Indent size
+        'trailingComma': 'es5' // Trailing commas for multi-line statements
+      }
+    ],
+    'import/extensions': [
+      'error',
+      'ignorePackages',
+      {
+        ts: 'never',
+        tsx: 'never',
+        js: 'never',
+        jsx: 'never',
+      },
+    ],
+    'react/jsx-filename-extension': [1, { extensions: [".js", ".jsx", ".ts", ".tsx"] }],
     'jsx-a11y/anchor-is-valid': [
       'error',
       {
@@ -35,12 +67,6 @@ module.exports = {
       2,
       { namedComponents: 'arrow-function' },
     ],
-    'react/jsx-filename-extension': [
-      1,
-      {
-        extensions: ['.js', '.jsx'],
-      },
-    ],
     'react/jsx-no-useless-fragment': 0,
     'react/jsx-one-expression-per-line': 0,
     'react/jsx-props-no-spreading': 0,
@@ -53,4 +79,11 @@ module.exports = {
       },
     ],
   },
+  settings: {
+    'import/resolver': {
+      node: {
+        extensions: ['.js', '.jsx', '.ts', '.tsx'], // Add the extensions you're using
+      },
+    },
+  }
 };

.prettierrc

@@ -0,0 +1,11 @@
+{
+    "singleQuote": true,
+    "semi": true,
+    "printWidth": 80,
+    "tabWidth": 2,
+    "trailingComma": "es5",
+    "plugins": [
+      "prettier-plugin-organize-imports"
+    ]
+  }
+

README.md

@@ -1,35 +1,36 @@
 # Personal Website
 
-Welcome to my [personal website](https://mldangelo.com)! This is an [MIT licensed](https://github.com/mldangelo/personal-site/blob/main/LICENSE) React-based Jamstack application. It offers a simple interface, easy modifications, static export capabilities, and free automatic deployments via [GitHub Pages](https://pages.github.com/).
+Welcome to my [personal website](https://dase.dev)! This is an [MIT licensed](https://github.com/adase11/personal-site/blob/main/LICENSE) React-based Jamstack application. It offers a simple interface, easy modifications, static export capabilities, and free automatic deployments via [GitHub Pages](https://pages.github.com/).
 
 ## 🚀 Features
 
-- Built with modern JavaScript, using tools and frameworks like [create-react-app](https://github.com/facebook/create-react-app), [React-Router](https://reactrouter.com/), and SCSS.
+- Built with modern JavaScript and TypeScript, using tools and frameworks like [create-react-app](https://github.com/facebook/create-react-app), [React-Router](https://reactrouter.com/), and SCSS.
 - Automated workflows via [GitHub Actions](https://github.com/features/actions).
 - And more!
 
 ## 🛠 Adapting this Project
 
-Want to create your own personal website based on this project? You can set it up in as little as 30 minutes! Follow the setup instructions below and check out the **[detailed guide and checklist](./docs/adapting-guide.md)** on adapting this project to your needs. If you encounter any challenges, don't hesitate to contact me through an issue or email at [[email protected]](mailto:[email protected]).
+I forked this project from Michael D'Angelo's original [project](https://github.com/mldangelo/personal-site). If you'd like to create your own personal website based on this project, it shouldn't
+be too different from the instructions on Michael's page. Or you can clone/fork his directly.
 
 ## 🤝 Contributing
 
-Your contributions are warmly welcomed! If you wish to contribute, please review the [design goals](./docs/design-goals.md), [roadmap](./docs/roadmap.md), and [contributing guidelines](./docs/contributing.md). For any bugs or suggestions, you can reach out via email, submit a pull request (I'd be happy to get you a coffee as a thank-you!), or open an issue.
+Your contributions are warmly welcomed! If you wish to contribute, please review the [design goals](./docs/design-goals.md), [roadmap](./docs/roadmap.md), and [contributing guidelines](./docs/contributing.md). For any bugs or suggestions, you can submit a pull request, or open an issue.
 
 ## 🔧 Dependencies
 
-Ensure you have [node](https://nodejs.org/) >= v16. Optionally, use [nvm](https://github.com/nvm-sh/nvm#installing-and-updating) to manage node versions.
+Ensure you have [node](https://nodejs.org/) >= v20. Optionally, use [nvm](https://github.com/nvm-sh/nvm#installing-and-updating) to manage node versions.
 
 ## 🚀 Setup and Running
 
 1. Clone the repository:
 
    ```bash
-   git clone git://github.com/mldangelo/personal-site.git
+   git clone git://github.com/adase11/personal-site.git
    cd personal-site
    ```
 
-2. (Optional) Ensure you're on Node v16 or higher:
+2. (Optional) Ensure you're on Node v20 or higher:
 
    ```bash
    nvm install
@@ -75,6 +76,9 @@ This will generate a static version in `personal-site/build/` which you can host
 
 ## 🙌 Acknowledgements
 
+- Michael D'Angelo's [personal site](https://github.com/mldangelo/personal-site) is the basis for this project.
+
+### From Michael's Acknowledgements
 - Initial template from [Future Imperfect](https://html5up.net/future-imperfect) by [@ajlkn](https://github.com/ajlkn) for [HTML5 UP](html5up.net).
 - Special thanks to [@typpo](https://github.com/typpo) for tirelessly answering all of my node.js and react questions.
-- Kudos to [@notrueblood](https://github.com/notrueblood)[<sup>[1]</sup>](https://github.com/mldangelo/personal-site/pull/218) and [@sjhsieh](https://github.com/sjhsieh)[<sup>[2]</sup>](https://github.com/mldangelo/personal-site/issues/168) for their constructive feedback.
+- Kudos to [@notrueblood](https://github.com/notrueblood)[<sup>[1]</sup>](https://github.com/adase11/personal-site/pull/218) and [@sjhsieh](https://github.com/sjhsieh)[<sup>[2]</sup>](https://github.com/adase11/personal-site/issues/168) for their constructive feedback.

docs/adapting-guide.md

@@ -1,8 +1,6 @@
 # Adapting this Website
 
-Many people have contacted me about adapting this website. I have tried to make things as simple as possible. There are still bugs. I am sorry. If you find a bug, please email me ([email protected]), submit a pull request (I'll buy you a coffee as a thank you), or submit an issue.
-
-You may wish to fork this repository or remove my remote origin and add your own. Go [here](https://help.github.com/articles/changing-a-remote-s-url/) for more information on how to change remotes.
+The following is taken directly from [https://mldangelo.github.io/personal-site/](https://mldangelo.github.io/personal-site/)
 
 ## Before you start
 
@@ -13,7 +11,7 @@ You may wish to fork this repository or remove my remote origin and add your own
 
 ### Setup
 
-1. Run the project before making any modifications by following the set up and running instructions in the main [README.md](https://github.com/mldangelo/personal-site#set-up).
+1. Run the project before making any modifications by following the set up and running instructions in the main [README.md](https://github.com/adase11/personal-site#set-up).
 1. Change `homepage` in `package.json` to reflect where you plan to host the site. This is important for static exporting via react-snap. This also changes your path when developing locally. For example, a homepage of `mldangelo.com` places the site at `localhost:3000` and a homepage of `https://mldangelo.github.io/personal-site/` places the site at `localhost:3000/personal-site/`. If you plan to host at on a path such as `https://[your-github-username].github.io/[your-repo-name]`, you should set this now so that your development environment mirrors your production environment.
 1. Create a `.env` file. To do this, run:
 
@@ -37,7 +35,7 @@ I recommend keeping the project running as you go (with `npm start`) to help cor
 
 ### Deploy
 
-See deployment instructions [here](https://github.com/mldangelo/personal-site#deploying-to-github-pages). If you plan to use a custom url, modify `public/CNAME` and enter your URL. You can run:
+See deployment instructions [here](https://github.com/adase11/personal-site#deploying-to-github-pages). If you plan to use a custom url, modify `public/CNAME` and enter your URL. You can run:
 
 ```bash
 echo "[your-custom-domain][.com]" > public/CNAME
@@ -63,7 +61,7 @@ Here are answers to questions I've been asked at least twice. I've attempted to
 
 2. LF / CRLF issues with eslint.
 
-   This is a common Windows development pitfall. See @[FrozenFury](https://github.com/FrozenFury)'s [comment](https://github.com/mldangelo/personal-site/issues/263#issuecomment-759216299) for how to update your eslint config to resolve this issue.
+   This is a common Windows development pitfall. See @[FrozenFury](https://github.com/FrozenFury)'s [comment](https://github.com/adase11/personal-site/issues/263#issuecomment-759216299) for how to update your eslint config to resolve this issue.
 
 3. master / main