Merge pull request #105 from carsonSgit/readme

feat: Finalize README

Author: carsonSgit

README.md

@@ -1,21 +1,94 @@
-# My [Portfolio](https://carsonsgit.github.io/)
+<div align="center">
+    <h1><strong>carsonSgit's Portfolio</strong></h1>
+    <a href="https://www.linkedin.com/in/carsonspriggs">
+        <img src="https://img.shields.io/badge/-LinkedIn-0077B5.svg?style=for-the-badge&logo=linkedin&logoColor=white" alt="LinkedIn" />
+    </a>
+    <a href="https://github.com/carsonSgit">
+        <img src="https://img.shields.io/badge/-GitHub-181717.svg?style=for-the-badge&logo=github&logoColor=white" alt="GitHub" />
+    </a>
+    <a href="mailto:carsonspriggs8@gmail.com"> 
+        <img src="https://img.shields.io/badge/-Email-D14836.svg?style=for-the-badge&logo=gmail&logoColor=white" alt="Email" /> 
+    </a> 
+    <br /><br />
+    <img src="https://github.com/user-attachments/assets/78b42bd7-1abb-4dd5-9480-351413ee0217" width="700" />
+</div>
 
-Welcome to the repo for my portfolio!
+<div align="center">
+    <h2>💻 Tech Stack</h2>
+    <div style="display: flex; gap: 20px; justify-content: center;">
+        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTSoW3g9hjXIasgon-kpzz-lD9z4SsalyPbZA&s" alt="React" width="50" height="50" />
+        <img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/typescript/typescript-original.svg" alt="TypeScript" width="50" height="50" />
+        <img src="https://github.com/user-attachments/assets/1259cb2a-6c04-4597-bda6-511a2990ccc8" alt="SCSS" width="50" height="50" />
+    </div>
+</div>
 
-> [!IMPORTANT]
-> This is still currently a W.I.P! primarily because of mobile responsiveness and procrastination..... ALMOST DONE!
+<div align="center"><h2> 📔 About </h2></div>
 
-<img src="https://github.com/user-attachments/assets/d38451ae-dc70-4290-af6d-c597b94f99e5" width="500"/>
+🌟 **Welcome to my portfolio!** My site showcases my journey as a Computer Scientist, showing my skills, projects, experiences, and achievements.
 
-> Site Preview
+<div align="center"><h2> ✨ Features </h2></div>
 
-## Technologies Used
+- 🎨 **Top Project Showcase:** Tiled sections featuring my top projects with links to live demos and GitHub repos.
+- 🔧 **Technologies:** A display of *most* of the technologies I've used in my CS career.
+- 📱 **Responsive Design:** Made with different screen-sizes in mind (mobile-first approach).
 
-- `React`
-- `TypeScript`
-- `SCSS`
 
-## Important Links
+<div align="center"><h2> 🔗 Important Links </h2></div>
 
-- Resources for development: [Helpful Links](https://github.com/carsonSgit/carsonsgit.github.io/issues/9)
-- Commit/Merge prefixes: [Commit Message Prefixes](https://github.com/carsonSgit/carsonsgit.github.io/issues/14)
+- 📚 **Development Resources:** Here are some [helpful links](https://github.com/carsonSgit/carsonsgit.github.io/issues/9) I made use of during development.
+- 🔍 **Commit/Merge Prefixes:** I used these [commit message prefixes](https://github.com/carsonSgit/carsonsgit.github.io/issues/14) to improve my Git habits.
+- 📖 **React Documentation:** Learn more about React [here](https://reactjs.org/docs/getting-started.html).
+- 📘 **TypeScript Documentation:** Explore TypeScript documentation [here](https://www.typescriptlang.org/docs/).
+- 🎨 **SCSS Documentation:** Check out the SCSS documentation [here](https://sass-lang.com/documentation).
+
+
+<div align="center"><h2> 📈 Quick Repo Stats </h2></div>
+
+<div align="center">
+    <p>
+        <img src="https://img.shields.io/github/stars/carsonSgit/carsonsgit.github.io?style=for-the-badge" alt="GitHub Stars" />
+        <img src="https://img.shields.io/github/issues-closed/carsonSgit/carsonsgit.github.io?style=for-the-badge" alt="GitHub Closed Issues" />
+        <img src="https://img.shields.io/github/issues-pr-closed/carsonSgit/carsonSgit.github.io?style=for-the-badge" alt="GitHub PRs" />
+    </p>
+    <p>
+        <img src="https://img.shields.io/github/languages/code-size/carsonSgit/carsonSgit.github.io?style=for-the-badge" alt="GitHub Code Size" />
+        <img src="https://img.shields.io/github/repo-size/carsonSgit/carsonSgit.github.io?style=for-the-badge" alt="GitHub Repo Size" />
+        <img src="https://img.shields.io/github/languages/count/carsonSgit/carsonSgit.github.io?style=for-the-badge" alt="GitHub Languages" />
+    </p>
+</div>
+
+<div align="center"><h2> 🚀 Deploy Locally </h2></div>
+If you want to run it locally follow these steps:
+
+### 🔧 Prerequisites:
+- `Git`
+- `Node.js`
+- `npm (Node Package Manager)`
+
+### 📥 Installation Steps:
+1. Clone the repository:
+   ```bash
+   git clone https://github.com/carsonSgit/carsonsgit.github.io.git
+    ```
+2. Go to the project directory:
+    ```bash
+    cd carsonsgit.github.io
+    ```
+3. Install dependencies
+    ```bash
+    npm i
+    ```
+    **OR** if your `npm i` doesn't work
+
+    ```bash
+    npm i --force
+    ```
+4. Run locally
+    ```bash
+    npm start
+    ```
+5. Open your browser at `http://localhost:3000`!
+
+<br />
+
+**Thank you for visiting my portfolio! 🎉**