Merge branch 'wlfmnstr:master' into master

README.md

@@ -10,7 +10,7 @@ Whether you are starting from zero or have a decade of experience under your bel
 
 Things that you should be EXCEPTIONALLY proud of yourself for doing…
 
-Things I’M exceptionally proud of you for doing…
+Things I’m exceptionally proud of you for doing…
 
 Tl;dr - I love you all, and it means the world to me that you’re here. Okay, on to the code…
 
@@ -41,11 +41,19 @@ Tl;dr - I love you all, and it means the world to me that you’re here. Okay, o
 
 *Mac Instructions:* Your machine should come with an application called “Terminal” - just confirm you have this app installed and can open it.
 
+![assets/mac_terminal_400px](https://github.com/Kazleigh/the-heartbroken-dev-tier-1/assets/165062302/123aa4a7-ebb8-4a8b-bbaf-da80e4cf4ce5)
+
 1. Use Spotlight (cmd + space) to search for “terminal"
 2. Open the app.
 3. Come talk to me if you can’t find the app.
 
-*Windows Instructions:* Your system comes with a program called “Command Prompt.”
+*Windows Instructions:*
+
+#### Native Command Prompt (Shell)
+
+Your system comes with a program called “Command Prompt.”
+
+![assets/Windows_command_prompt_400px](https://github.com/Kazleigh/the-heartbroken-dev-tier-1/assets/165062302/668f397f-07c7-4988-b546-29316cde1e4b)
 
 1. To access it, click on the Start menu or press the Windows key.
 2. Type `cmd` into the search bar and press Enter.
@@ -57,6 +65,24 @@ Tl;dr - I love you all, and it means the world to me that you’re here. Okay, o
 5. Once you have either Command Prompt or Windows Terminal open, you're ready to proceed with the necessary commands or operations.
 6. If you encounter any issues opening Command Prompt or Windows Terminal, please reach out for assistance.
 
+#### Windows Subsystem for Linux
+
+Alternatively you can install the windows subsystem for linux to be able to run a shell and have an environment more similar to mac.
+
+1. Enable the WSL by going into the control pannel / settings and then select Apps (or it might be named Programs).
+![settings screenshot](assets/settings-apps.png)
+2. Select "Programs and Features"
+![Programs and Features screenshot](assets/apps-features.png)
+3. Enable the
+![Programs and Features screenshot](assets/programs-and-features.png)
+4. Scroll down and enable the Windows Subsystem for Linux
+![enable screenshot](assets/windows-features.png)
+5. This will ask you to reboot, say yes.
+6. After you reboot, run a admin powershell by typing it in the search bar next to the start menu and right clicking it from the list "Run as administrator"
+7. This opens up a PowerShell. Type `wsl --install -D Ubuntu`. This will download the distro and prompt you for a username and password to use in your WSL environment.
+8. Type `wsl` from a PowerShell to run the default shell.
+9. Git will already be installed. You can install node with `sudo apt install nodejs`
+
 ### 3. Install Git
 
 First, some quick vocab for y’all:
@@ -67,8 +93,9 @@ First, some quick vocab for y’all:
 - **Git:** is an open source VCS. Think of it like a program that runs on your computer that you can use in your coding projects to help manage versions of that project.
 	- Managing versions of code becomes especially important the more iterations the code goes through, the more complex/large the codebase becomes, and the more people you have working on it.
 	- Git is the most common VCS for code today, by a large margin.
-	- We will have a section in a bit digging in and understanding Git.
+	- We will have a section in a-bit digging in and understanding Git.
 	- Git is NOT GitHub.
+        - Git Bash is the name for the command-line terminal environment
 	- Read about git here: https://git-scm.com/
 - **SCM:** “Source Code Manager” - A SCM is a tool to help *manage* source code. In particular, to help manage the sharing and using and collaboration on source code.
 	- GitHub is an example of an SCM (and the most popular in use by software engineers today).
@@ -80,10 +107,13 @@ First, some quick vocab for y’all:
 
 1. Head to https://git-scm.com/
 2. Click on “Downloads”
-3. Download the version for your Operating System (Windows, Mac, Linux).
+
+![Git_download_400px JPG](https://github.com/Kazleigh/the-heartbroken-dev-tier-1/assets/165062302/cd97e0df-9f48-4a3e-b669-31de53399283)
+
+1. Download the version for your Operating System (Windows, Mac, Linux).
 	1. Click the Download icon for your OS under the “Download” banner.
 		1. DON’T download the GUI shown lower on the page.
-	2. This will download an installer, when finished, open and run the installer, following its instructions.
+	2. This will download an installer, when finished, open and run the installer, following its instructions and using the default settings.
 
 Let me know if you have problems installing Git.
 
@@ -124,7 +154,8 @@ First, some more vocab for you!
 
 Tl;dr - Node.js is how we run javascript on the “back-end” and what we will be using to build full stack apps in this curriculum. It lets us learn one programming language that we can use across the stack.
 
-Okay, now on to the install. This parts actually pretty easy. 
+Okay, now on to the install. This part is actually pretty easy.
+
 1. Head to https://nodejs.org/en/download and download the LTS version for your operating system and hardware. It SHOULD be auto selected for your correct computer, but double check before downloading.
 2. Open the installer that is downloaded and follow the steps to install node.
 3. That’s it! Let me know if you get stuck!
@@ -141,13 +172,13 @@ Do these things if you didn’t install VS Code yet, as this is the editor I’l
 
 By all means, play around with VSCode and get familiar with it! Its an awesome piece of software that is almost infinitely extensible with its massive library of installable extensions, and it comes pretty great out of the box.
 
-
+### 6. Fork This Repository
-### 6. Fork this repository
 
 Okay now we’re getting fancy and learning how to use this SCM stuff that we talked about earlier with GitHub.
 
-We are going to “Fork” **this** repository. Some of you may know what this means, and others it may be totally foreign. That’s great! 
+We are going to “Fork” **this** repository. Some of you may know what this means, and others it may be totally foreign. That’s great!
-- Forking is how you can clone / copy a repository that is outside of your GitHub account, into your github account. 
+
+- Forking is how you can clone / copy a repository that is outside of your GitHub account, into your github account.
 - This will give you a "forked" copy of the repository that is now effectively totally your own repository.
 - You can make any changes you want to your fork without impacting the repository you forked from (my repository in this case).
 - The repository you forked from is called the "upstream" repository.
@@ -159,12 +190,90 @@ We are going to “Fork” **this** repository. Some of you may know what this m
 2. Follow the prompts to fork it to YOUR github account. Another screenshot: ![chose-where-to-fork-to](assets/chose-where-to-fork-to.png)
 3. When you click "create fork" it will redirect to your account, it sometimes takes a second to complete this step. You should have something that looks like this: ![your-new-forked-repo](assets/your-new-forked-repo.png)
 
-### 7. Upload your Resume on YOUR Fork
+### 7. Add Your Resume to Your Fork Using Git Commands and PR back to My Repo
 
-Now, we're going to practice collaborating on a github repository.
+***IMPORTANT NOTE ABOUT SCREENSHOTS***
+The screenshots are for example purposes only, dont rely on them totally, as the urls, repositories, etc. won’t match up perfectly with what you should see when running git commands and cloning/pushing to and from your personal forks of my repository! Follow the written instructions and understand that the screenshots might show things like pushing to `wlfmnstr/the-heartbroken-dev-tier-1` when your screen will look more like `your-username/the-heartbroken-dev-tier-1`. 
 
-On YOUR new forked repository (NOT MINE, use the one in your github account that you just created in the previous steps) - you are going to create a directory for your resume files and upload them.
+tl;dr - trust the instructions as the source of truth and use the screenshots as helpful examples.
 
-The right way to do this is to first CLONE the repository (again, clone your fork, not my upstream original repo). Here are the steps to do this:
+…
 
-1. Coming soon...
+Okay, now, we're going to practice collaborating on a github repository!
+
+The flow will look something like this:
+
+1. Fork the repo to you personal GitHub account
+2. Clone your forked repo to your local machine
+3. Add a directory and resume files to your local copy of the repo
+4. Commit the changes (the new files and directory you added) to your local repo
+5. Pushes those changes from your local repo to the remote repo (your fork still)
+6. Create Pull Request from your fork to my original repo, which is the “upstream” repo in this context.
+
+Here’s a diagram (if this is helpful, great! If its just more confusion, don’t sweat it, you don’t need to understand the diagram right now).
+
+![assets/github-fork-pr-diagram.png](assets/github-fork-pr-diagram.png)
+
+#### Clone Your Fork
+
+1. After you’ve forked the “upstream” repository and have navigated to **your** forked repo on GitHub, copy the git url from the repository page. Screenshot: ![assets/copy-repo-url.png](assets/copy-repo-url.png)
+2. In your command prompt, navigate to the location you want to clone your repository to in your file system, then run the command `git clone` followed by the url you copied. In my case that looks like this: ![assets/git-clone-command.png](assets/git-clone-command.png)
+
+   This will pull down the repo to you computer, creating a directory wherever you run the command, named whatever the repository you are cloning is named. In this case, the directory it created was called `the-heartbroken-dev-tier-1`.
+
+3. List the contents of the directory you’re in to confirm the clone operation was successful: ![assets/list-cloned-directory.png](assets/list-cloned-directory.png)
+   (I also used the `|` pipe and `grep` commands in my example to filter the results of running the list contents command `ls` to just results the contained `the-heart`. If you’re interested, you can read about pipe and grep in linux here: https://faculty.winthrop.edu/dannellys/csci208lab/lab09.htm)
+
+#### Open the Repository You Cloned
+
+Now that you’ve got a local copy of the repo, let’s open it up in our code editor of choice, VS Code.
+
+1. Open VS Code and click `file` > `open folder` (might look a little different on windows): ![assets/vscode-file-open-folder.png](assets/vscode-file-open-folder.png)
+2. Then select the directory you just created when you cloned the repo and click “open”: ![assets/select-the-repo-directory.png](assets/select-the-repo-directory.png)
+3. You should have the repository open in VS Code now: ![assets/vscode-opened-repo.png](assets/vscode-opened-repo.png)
+
+#### Create a Directory for Your Resume and Add Your Files to it
+
+Now we want to add some of your code to this repository. We’ll use the html and css files your created for the pre-work assignments here. Follow these steps:
+
+1. Create a directory inside of `student-resumes` using the naming convention: `<yourname>-resume`. You can do this by right clicking on the `student-resumes` directory in the *File Explorer* tab of VSCode, like so:
+	1. Go to File Explorer ![assets/file-explorer-tab.png](assets/file-explorer-tab.png)
+	2. Create the new directory (vs code calls it a folder): ![assets/new-folder-vscode.png](assets/new-folder-vscode.png)
+	3. Name it following the described naming convention: ![assets/name-your-resume-folder.png](assets/name-your-resume-folder.png)
+	4. Add your resume files - you can do this from the command line if you know how, or you can drag & drop like I did: ![assets/drag-and-drop.png](assets/drag-and-drop.png)
+
+#### Commit and Push Your Changes
+
+Ok, now we’ve made changes to our local repository, and we should “push” these changes to our remote repository so they aren’t just on our computer.
+
+1. From your command prompt, navigate to this repository’s directory, and add the new files and changes to the git “staging area.” Do this with the `git add` command. Some notes:
+	1. You can see what the state of your repository is, including changed files and what has been added to the staging area by running `git status`: ![assets/git-status.png](assets/git-status.png)
+	2. `git add` needs an additional argument passed to it: the specific files you want to add. You can specify the files specifically, one at a time, or multiple other ways.
+	3. A nice shortcut if you want to add everything that’s been updated to the staging area is the `.` specifier, which says “the things in my current *working directory*” (working directory just means the directory you’ve currently navigated to in your command prompt).
+	4. So, the end result is (assuming you’ve navigated to your repository folder): `git add .` ![assets/git-add-command.png](assets/git-add-command.png)
+	5. Run `git status` again and see that the files have been staged and are ready to be “committed”: ![assets/status-pre-commit.png](assets/status-pre-commit.png)
+2. Now we want to actually commit these staged changes. Having the staging area is nice because sometimes you made LOTS of changes and only want to commit some of them and it helps to sort everything out. Like laying your camping items out on the floor before putting them into your backpack or car. Simply run the “commit” command to create a commit of your staged changes. The command is `git commit` but we want to include a “commit message” too!
+	1. Do this by also passing the `-m` command “flag” to the git commit command, followed by your commit message in quotes like: `"My commit message"`.
+	2. The end result should look like: `git commit -m "Adds Caseys Resume directory and files"`.
+	3. You can run git status afterwards to see the new state of the repository: ![assets/status-after-commit.png](assets/status-after-commit.png)
+3. Now we want to “push” or local repository which contains the new commit we just made to our remote repository in github. Do this with the `git push` command. You shouldn’t need anything else, though it may require you to login/authenticate…
+	1. [Here’s a link](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens#using-a-personal-access-token-on-the-command-line) on how to use personal access tokens on the command line in case you weren’t already prompted to login when cloning the repository in previous steps.
+	2. A personal access token is like  a password you can use with your username to login to github.
+	3. All of this might be irrelevant if you’ve already successfully logged in, and I haven’t really worked through writing this part out for students, so come see me or check in the discord chat for your cohort to see how students resolved issue if they ran into them around logging into github on the command line!
+
+
+	 Assuming you’re logged in correctly and attempting to push to the correct repo, you should get a success message when running `git push` (yours will look a little different for you, but you should get a success message after pushing to YOUR fork): ![assets/push-to-remote.png](assets/push-to-remote.png)
+
+
+#### Create a Pull Request from your fork to my Upstream repo
+
+Okay, lastly we are going to request to pull your changes you made on your copy of the repo into my original “upstream” repo. Do this from the GitHub website.
+1. Navigate to your forked version of the repository. It should state that there are changes and it is ahead of the upstream repo by some commits, click on the “_ commit ahead of” link: ![assets/1-commit-ahead.png](assets/1-commit-ahead.png)
+2. This will take you to a page that is the start of creating a pull request, click the “Create pull request” button: ![assets/create-pull-request.png](assets/create-pull-request.png)
+3. Type in some helpful additional details on the pull request, like what changes are included, etc. and then click “create pull request” one again! ![assets/pr-details.png](assets/pr-details.png)
+4. You should now see the created pull request page, which will be in a state of “waiting for review” which just means you can’t merge it yet, but the owners of the repository you are request to pull your changes into have been notified and can review your changes and merge the PR when they are ready!
+
+
+#### PHEW!
+
+Alright, you’ve done it! That was probably a lot of stuff for a lot of you, but you’ve successfully navigated the command line, wrapped your head around git and github and even used it to make what’s possibly your first ever PRs in your career…. HELL YEAH!

student-resumes/Ashby Frasier Resume/Index.html

@@ -0,0 +1,169 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="hi.css">
+    <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
+    <title>Frasier(ashbyalis) Resume</title>
+</head>
+
+<body>
+    <main>
+        <div><img src="https://m.media-amazon.com/images/I/61i0y8njnsL._AC_UF894,1000_QL80_.jpg" id="sal"
+                alt="handsome gentle-man eating with a black shirt"></div>
+
+
+        <header>
+            <h1 id="name">Frasier Ichabod Crane</h1>
+            <h3 id="info">New York, NJ · CraniumConundrum@gmail.com · 646-867-5309</h3>
+        </header>
+        <h3 class="LTitle">WORK EXPERIENCE</h3>
+        <hr>
+        <div id="Job1">
+            <p class="indent">
+                <span class="left bold">Xtend Healthcare</span>
+                <span class="right">Remote</span>
+            </p>
+            <p class="indent">
+                <span class="left italics">Elderly Support Representative</span>
+                <span class="right">June 2023 - Feb 2024</span>
+            </p>
+            <ul class="Dindent">
+                <li>
+                    <p>Answer incoming calls and emails from elderly individuals, caregivers, or concerned family
+                        members,
+                        addressing their questions, concerns, and requests for information about available resources,
+                        services,
+                        and programs</p>
+                </li>
+                <li>
+                    <p>Assist in connecting elderly clients with appropriate community resources, healthcare providers,
+                        support
+                        groups, or government assistance programs based on their specific needs and circumstances</p>
+                </li>
+
+                <li>
+                    <p>Advocate on behalf of elderly clients to ensure their needs are met and their rights are
+                        protected,
+                        whether
+                        it involves resolving issues with healthcare providers, coordinating care services, or
+                        advocating
+                        for
+                        policy
+                        changes to improve elder care.</p>
+                </li>
+            </ul>
+        </div>
+
+        <div id="Job2">
+            <p class="indent">
+                <span class="left bold">Lidl</span>
+                <span class="right">Woodbridge, NJ</span>
+            </p>
+            <p class="indent">
+                <span class="left italics">Associate Supervisor</span>
+                <span class="right">August 2022 - April 2023</span>
+            </p>
+            <ul class="Dindent">
+                <li>
+                    <p>Resolved customer complaints and concerns, working to ensure a positive shopping experience for
+                        all
+                        customers</p>
+                </li>
+                <li>
+                    <p>Created staff schedules, Trained new employees on company policies and procedures, Monitored
+                        inventory levels, Analyzed sales data and market trends to identify opportunities for
+                        improvement
+                        and
+                        growth</p>
+                </li>
+
+                <li>
+                    <p>Managed day-to-day operations of the supermarket, overseeing a team of 4+ employees.</p>
+                </li>
+            </ul>
+        </div>
+
+        <div id="Job3">
+            <p class="indent">
+                <span class="left bold">Advantage Solutions</span>
+                <span class="right">Avenel, NJ</span>
+            </p>
+            <p class="indent">
+                <span class="left italics">Retail Merchandiser</span>
+                <span class="right">Feb 2020 - June 2021</span>
+            </p>
+            <ul class="Dindent">
+                <li>
+                    <p>Collaborated closely with store managers to optimize customer engagement, utilizing customer
+                        feedback
+                        and sales data to inform merchandising decisions</p>
+                </li>
+                <li>
+                    <p>Conducted regular assessments of in-store displays and signage, ensuring compliance with
+                        corporate
+                        branding and messaging guidelines.</p>
+                </li>
+            </ul>
+        </div>
+
+        <div id="Job4">
+            <p class="indent">
+                <span class="left bold">Lowes</span>
+                <span class="right">Gainesville, FL</span>
+            </p>
+            <p class="indent">
+                <span class="left italics">Sales Specialist</span>
+                <span class="right">August 2017 - Jan 2020</span>
+            </p>
+            <ul class="Dindent">
+                <li>
+                    <p>Demonstrated in-depth product knowledge by explaining the specifications and features of products
+                        and
+                        services to existing and potential customers, resulting in increased customer trust and loyalty
+                    </p>
+                </li>
+                <li>
+                    <p> Resolved customer complaints and ensured customer satisfaction by utilizing effective
+                        communication
+                        skills and implementing effective problem-solving strategies</p>
+                </li>
+
+                <li>
+                    <p>Successfully completed team-based resets per corporate instructions, resulting in improved store
+                        layout
+                        and increased sales.</p>
+                </li>
+                <li>
+                    <p>Maintained front-end operations of the store, ensuring a positive shopping experience for
+                        customers
+                        and
+                        efficient checkout processes.</p>
+                </li>
+            </ul>
+        </div>
+        <h3 class="LTitle">EDUCATION</h3>
+        <hr>
+        <p class="indent">
+            <span class="left bold">Western Governors University</span>
+            <span class="right">Millcreek, UT</span>
+        </p>
+        <p class="indent">
+            <span class="left italics">Computer Science</span>
+            <span class="right">Jan 2024 - Present</span>
+        </p>
+        <h3 class="LTitle">CERTIFICATIONS, SKILLS & INTERESTS</h3>
+        <hr>
+        <p class="center"><span class="bold">Skills:</span> Web Development (soon!), Data Entry, Microsoft Suites, Operating
+            Systems, Command-line interfaces</p>
+
+        <p class="center"><span class="bold">Interests:</span> Gaming, Watching Frasier, Reading, Computers, Space,
+            Programming, Cats, Lasagna</p>
+
+    </main>
+
+
+</body>
+
+</html>

student-resumes/Ashby Frasier Resume/hi.css

@@ -0,0 +1,85 @@
+body {
+    margin: 0 auto;
+    padding: 70px;
+    font-family: 'Roboto', sans-serif;
+}
+
+#name {
+    text-align: center;
+    font-family: sans-serif;
+    margin-bottom: 0%;
+}
+
+#info {
+    text-align: center;
+    margin-top: 0;
+}
+
+.LTitle {
+    text-align: left;
+    margin-bottom: auto;
+}
+
+hr {
+    margin: auto;
+}
+
+.right {
+    text-align: right;
+}
+
+.left {
+    text-align: left;
+}
+
+p {
+    display: flex;
+    justify-content: space-between;
+    margin: auto;
+}
+
+.indent {
+    padding-left: 20px;
+}
+
+.Dindent {
+    padding-left: 60px;
+}
+
+ul {
+    margin-bottom: 10px;
+}
+
+li {
+    padding-bottom: 5px;
+}
+
+.bold {
+    font-weight: bold;
+}
+
+.italics {
+    font-style: italic;
+}
+
+.center {
+    margin: 0 auto;
+    width: fit-content;
+}
+
+body {
+    background: linear-gradient(45deg, #e6e6e6 25%, transparent 25%),
+        linear-gradient(-45deg, #e6e6e6 25%, transparent 25%),
+        linear-gradient(45deg, transparent 75%, #e6e6e6 75%),
+        linear-gradient(-45deg, transparent 75%, #e6e6e6 75%);
+    background-size: 90px 900px;
+}
+
+#sal {
+    width: 200px;
+    height: auto;
+    display: block;
+    margin: 0 auto;
+    border-radius: 30%;
+
+}

student-resumes/Kazleighs-resume/index.html

@@ -0,0 +1,119 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title> Resume </title>
+<link href="style.css" rel="stylesheet">
+</head>
+<div id="wave"></div>   
+<body>
+<header>
+  <h1><button class="button" onclick = "window.location.href ='https://www.youtube.com/watch?v=uHgt8giw1LY'; ">Click Me</button>&nbsp;Kazleigh&nbsp;Resume <font-family class="Ggsans"></h1>
+</header>
+  <aside>
+  
+<h3> I am an empathetic and
+    ambitious individual who
+    is passionate about
+    affecting positive change
+    in peoples lives.
+    I thrive in a fast paced
+    environment, constantly
+    learning and sharing
+    knowledge to innovate
+    processes and efficiently
+    solve problems.</h3>
+    <br>
+   <h2>Attributes</h2>
+    <p><li> Strategic problem solver
+    <li> Proactive multi-tasker
+    <li> Competent quick learner
+    <li> Supportive team player
+    <li> Patient and encouraging
+    <li> Excellent communicator
+    <li> Build rapid rapport
+    <li> Diverse career led innovation</p>
+   <br>
+   <h2> Skills </h2>
+    <p><li> Microsoft / Google suites
+    <li> Clickup / Asana / Trello / Jira
+    <li> Teams + Planner / Slack
+    <li> Hubspot / Zoho / GA4
+    <li> Adobe: PS / AI / AE / PR / ID
+    <li> 3DSMax / Storyline / Rise
+    <li> HTML / CSS
+    <li>Ongoing PSPO I
+    <li>Ongoing Dev Bootcamp</li></p>
+    <br>
+    <h2> Education </h2>
+<h3>Bachelor of Health Science
+(BSc): Physiotherapy </h3>
+<p>AUT University, New Zealand
+2012-15 (A-Average)</p>
+<h3>NCEA Level 1-3 </h3>
+<p>(equiv - A-levels/GCSEs)
+X School, New Zealand
+2008-11 (A*-C)</p>
+<h3>Level 3 - Digital Marketing
+Chartered Institute IT,</h3> UK
+2018-19 (D* - Distinction)
+<h3>Learning to Teach Online </h3>
+University New South Wales,
+Online certificate 2020 
+ </p>
+</aside>
+<main>
+  <h2>Experience</h2>
+  <h3> MMP - London (UK)</h3>
+  <h3><li>Digital Product Manager May 23 - Present</h3>
+  <h3> <li>Medical Learning Associate Jan 23 - May 23</h3>
+  <p><b>Product Managment:</b> Lead continuous prioritisation of
+product backlogs and roadmaps for medical journals.
+Facilitate multidisciplinary communication, driving user
+experience, technical enhancement, and cost reduction
+projects from ideation to deployment supported by data,
+team, and user feedback. Championed the implementation
+of ClickUp and data dashboards. Serving as Scrum Master. </p>
+  
+  <p><b>Medical Learning:</b> Managed course creation, delivery,
+accreditation, compliance, finance, and data analysis.
+Utilised iterative improvements to increase quality whilst
+reducing cost and delivery time. </p>
+  <br>
+  <hr class="dotted"> 
+  <br>
+  <h3> Spokes - (UK)</h3>
+  <h3><li>Delivery Manager May 21 - Oct 22</h3>
+  <h3> <li>Learning Designer / Developer Jul 20 - Oct 22</h3>
+  <p><b>Project Managment:</b> Managed over 10 external projects
+simultaneously including resources, budgets, time and
+expectations with a user-focused mindset, balancing client
+and team needs. Clients included: The Global Fund,
+Commonwealth & Psychhub from ideation to retrospective. </p>
+  <p><b>Business Development:</b> Consulted on or wrote tenders and
+won over £100k of work (around 25% yearly turnover).
+Implemented ClickUp and optimised processes and project
+management company wide. Assisted the Director creating
+a 5 year business plan. Hired & line managed junior staff. 
+  <p><b>Learning:</b> Collaborated with subject experts to design and
+develop engaging user-centered WCAG accessible courses. </p>
+  <br>
+  <hr class="dotted"> 
+  <br>
+  <h3>LS - Design Agency - (UK)</h3>
+  <h3> <li>Digital Designer April 18 - Jun 20 </h3>
+  <p><b>3D Animation:</b> Storyboarding, modelling, texturing, rendering, compositing and motion graphics</p>
+  <p><b> Graphic Design:</b> Icons, logos, gifs, print, photo retouching </p>
+  <p><b>Digital Marketing and Web Development:</b>  Blogs, SEO, Mailchimp, social media posts, Squarespace and Shopify</p>
+  <br>
+  <hr class="dotted"> 
+  <br>
+  <h3>Hospital, New Zealand (NZ) </h3>
+  <h3><li>Physiotherapist Mar 16 - May 17 </h3>
+  <p>Managed cases across multiple wards simultaneously including Intensive Care, Paediatrics, Medical amd ED</p>
+  <p>Created effective treatment plans, communicating with staff & patients of various ages and abilities </p>
+  <br>
+  <hr class="dotted">     
+    </main>
+  
+  </body>
+  </html>

student-resumes/Kazleighs-resume/style.css

@@ -0,0 +1,97 @@
+body {
+  h1 {
+  font-family: Ggsans, sans-serif; 
+  font-size: 38px;
+  font-weight: 800;
+}
+
+h2 {
+ font-family: Ggsans, sans-serif; 
+  font-size: 24px;
+  font-weight: 800;
+  padding: 5px;
+  }
+  
+h3 {
+ font-family: Ggsans, sans-serif; 
+  font-size: 14px;
+  font-weight: 700;
+  padding: 3px;
+  }
+
+p {
+  font-family: Ggsans, sans-serif;
+  font-size: 14px; 
+}
+
+li {
+  font-family: Ggsans, sans-serif;
+  font-size: 14px; 
+}
+
+#wave {
+  position: relative;
+  height: 35px;
+  width: absolute;
+  background: #fe1493;
+}
+hr.dotted {
+  border-top: 5px dotted #f8ff00;
+}
+
+.button {
+  padding: 7px 7px;
+  font-size: 24px;
+  text-align: center;
+  cursor: pointer;
+  outline: none;
+  color: #fff;
+  background-color: #fe1493;
+  border: none;
+  border-radius: 45px;
+  box-shadow: 0 4px #f8ff00;
+  animation: wiggle 2s linear infinite;
+}
+
+.button:hover {
+color: #fe1493;
+background-color: #F8FF00;
+ box-shadow: 0 3px #fe1493;}
+
+.button:active {
+  color: #Fe1493,
+  background-color: #fff;
+  box-shadow: 0 3px #666;
+  transform: translateY(4px);
+}
+
+* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+
+header {
+  width: 100%;
+  margin-bottom: 1%;
+  background: #fff;
+  padding: 1%;
+}
+
+aside {
+  clear: left;
+  float: left;
+  width: 33%;
+  margin-right: 2%;
+  padding: 2%;
+  background: #fe1493;
+  color: #fff;
+}
+
+main {
+  float: left;
+  width: 60%;
+  margin-left: 2%;
+  padding: 0%;
+  background: #fff;
+}

student-resumes/ak0w resume/index.html

@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Fluffy's Professional Resume</title>
+    <link rel="stylesheet" type="text/css" href="styles.css">
+</head>
+<body>
+    <img src="https://premierpups.com/azure/affordablepup/pups/mini-goldendoodle-breed-information-premier-pups-637915902098319516.jpg?w=557&h=557&mode=crop&autorotate=1"
+
+    alt="image of cute labradoodle" height="140" width="140"title="cute doodle" id="cutefloof">
+    <h3>FLUFFY DOODLE | fluffy.doodle@cutedoge.com | <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" target="_blank" title="not a rickroll i promise">Linkedin</a></h3> 
+<h5>Summary</h5>
+<p>Enthusiastic and loving Labradoodle with a knack for bringing joy to humans and fellow canines. <br>Skilled in fetch, companionship, and being adorable. Experienced in navigating various social situations with a wagging tail and a friendly demeanor.</p>
+
+<h5>Skills</h5>
+    <ul>
+        <li>**Communication:** Expert in barking, whining, and tail wagging to convey messages.</li>
+        <li>**Athleticism:** Skilled in running, jumping, and fetching.</li>
+        <li>**Social Interaction:** Great at interacting with other dogs and humans of all ages.</li>
+        <li>**Obedience:** Proficient in basic commands like sit, stay, come, and roll over.</li>
+        <li>**Problem Solving:** Excellent at finding hidden treats and figuring out puzzle toys.        </li>
+    </ul>
+
+<h5>Education</h5>
+<ol>
+    <li>
+        <dl>
+            <dt>Puppy Kindergarten</dt>
+            <dd>Doggy Daycar Center, 2022</dd>
+            <dd>Learned basic commands and socialization skills.</dd>
+        </dl>
+    </li>
+    <li>
+        <dl>
+            <dt>Advanced Feetching Workshop</dt>
+            <dd>Fetch Masters, 2023</dd>
+            <dd>Honed fetching skills and learned advanced retrieval techniques.</dd>
+        </dl>
+    </li>
+</ol>
+<!-- comment -->
+<h5>
+    Work Experience
+</h5>
+<ul>
+    <h6>Chief Happiness Officer</h6>
+    <li>
+        <dl>
+            <dt>Human's Home, Petville          June 2022 - Present</dt>
+            <dd>Provide daily emotional support and companionship to family members.</dd>
+            <dd>Maintain Household security by alerting for strangers.</dd>
+            <dd>Promote exercise and outdoor activities through daily walks and playtime.</dd>
+        </dl>
+    </li>
+    <h6>Guest Greeter</h6>
+    <li>
+        <dl>
+            <dt>Dog-Friendly Cafe, Petville  Summer 2023</dt>
+            <dd>Greeted customers with enthusiasm, promoting a welcoming atmosphere.</dd>
+            <dd>Showcased the cafe's [et-friendly bpolicy through excellent behavior.</dd>
+            <dd>Assisteed in promoting the cafe's special treat, the Pup Cup.</dd>
+        </dl>
+    </li>
+</ul>
+<hr>
+<p>Fluffy the Labradoodle | A Life Full of Wags and Fun</p>
+
+</body>
+</html>

student-resumes/ak0w resume/styles.css

@@ -0,0 +1,37 @@
+@charset "utf8";
+/*top image of dog*/
+#cutefloof {
+    border: 2px solid blueviolet;
+    width: 150px;
+    height: auto;
+    display:block;
+    margin-left: auto;
+    margin-right: auto;
+    box-shadow: 10px 10px 20px;
+}
+
+h3{
+    text-align: center;
+}
+
+body{
+    background-color: seagreen;
+    color: white;
+    font-family: 'Courier New', Courier, monospace;
+    margin-left: 20px;
+    margin-right: auto;
+    padding:0%;
+}
+
+ul h6{
+    color: bisque;
+    margin-top: 0px;
+}
+
+h5 {
+    font-size: 18px;
+}
+
+hr {
+    margin-left: -20px;
+}

student-resumes/alex-resume/index.html

@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Resume</title>
+    <link type="text/css" rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <h1>Resume</h1>
+    <h2>A Heartbroken Dev's Journey to Mending Through Coding</h2>
+    <p><strong>Location:</strong> The Digital Expanse</p>
+    <p><strong>Availability:</strong> Whenever healing and learning intertwine</p>
+    <p><strong>Contact:</strong> <a href="http://theheartbrokendev.com">theheartbrokendev.com</a></p>
+    <p><strong>Passions:</strong> Coding, Teaching, Recovering, Healing</p>
+    <hr>
+    <h3>About Me</h3>
+    <p>Hello, I'm a Principal Software Engineer with a heart recently shattered into more pieces than a monolithic application being refactored into microservices. Despite the deep fissures in my heart, my spirit for coding and teaching burns brighter than a well-optimized algorithm. My journey through the valley of heartbreak has led me to a profound realization: healing is found not by looking inward but by reaching outward. With a career spent helming engineering projects in Fortune 10 enterprises, I've decided to pivot my expertise towards something infinitely more valuable—teaching you to code.</p>
+    <hr>
+    <h3>Experience</h3>
+    <p><strong>Principal Software Engineer</strong><br>
+    <em>The School of Hard Knocks and Corporate America</em><br>
+    - Managed engineering teams and projects that would intimidate lesser mortals.<br>
+    - Accumulated a wealth of knowledge in software development, equivalent to the contents of Stack Overflow.</p>
+    <p><strong>Recovering Alcoholic & Wannabe Entrepreneur</strong><br>
+    <em>The Real World</em><br>
+    - Mastered the art of turning life's lemons into remarkably bug-free lemonade apps.<br>
+    - Entrepreneurial spirit, fueled by dreams and copious amounts of coffee, ready to mentor the next generation of dreamers.</p>
+    <hr>
+    <h3>Skills</h3>
+    <ul>
+        <li><strong>Languages:</strong> JavaScript/TypeScript, Python, Java/Kotlin, and the language of perseverance.</li>
+        <li><strong>Frameworks:</strong> Expert in various frameworks but specializes in building frameworks for life.</li>
+        <li><strong>Tools:</strong> Git, Docker, Kubernetes, and a heart mending toolkit.</li>
+        <li><strong>Soft Skills:</strong> Empathy, resilience, and the unique ability to inspire through code.</li>
+    </ul>
+    <hr>
+    <h3>Education</h3>
+    <p><strong>Life University</strong><br>
+    - Major: Navigating Heartbreak with Grace<br>
+    - Minor: Advanced Software Engineering & Human Connections</p>
+    <hr>
+    <h3>Projects</h3>
+    <p><strong>Teach You To Code Initiative</strong><br>
+    - A noble quest to mentor souls from zero to hero in the realm of web development.<br>
+    - A promise of commitment, to not only teach coding but to forge bonds through shared struggles and triumphs.</p>
+    <hr>
+    <h3>Personal Statement</h3>
+    <p>In the darkest of times, when the code of my life seemed riddled with bugs, I found my purpose illuminated by the glow of my IDE. I've learned that the path to mending a broken heart is paved with curly braces, semicolons, and the smiles of those I can help along the way. My mission is simple: to offer you my time, my knowledge, and perhaps, a piece of my heart, as we embark on this journey of learning and healing together. I'm not looking for payment, accolades, or even recognition—I'm searching for connection, for meaning, and for the chance to make a difference in your life.</p>
+    <p>If you're willing to commit to this journey, I promise to be there every step of the way, from "Hello, World!" to deploying your first app. Let's build something beautiful together, not just in code, but in the very fabric of our lives.</p>
+    <p>Last but not least, I love you all. :)</p>
+    <hr>
+    <h3>Contact Me</h3>
+    <p>To embark on this journey of code and heart mending, visit <a href="http://theheartbrokendev.com">theheartbrokendev.com</a>. Let's transform our sorrows into semicolons, our breaks into brackets, and our stories into software.</p>
+    <hr>
+    <p><em>Because sometimes, the most endearing code is written with a broken heart... but a hopeful spirit.</em></p>
+</body>
+</html>

student-resumes/alex-resume/styles.css

@@ -0,0 +1,4 @@
+body {
+    background-color: blue;
+    color: white;
+}

student-resumes/alex-sarsons-resume/README.md

@@ -0,0 +1,2 @@
+# Resume
+Exercise for tbhd 💔

student-resumes/alex-sarsons-resume/css/styles.css

@@ -0,0 +1,239 @@
+@font-face {
+  font-family: 'alex-google';
+  src: url('fonts/product-sans/ProductSans-Regular.woff2') format('woff2'),
+    url('fonts/product-sans/ProductSans-Regular.woff') format('woff'),
+    url('fonts/product-sans/ProductSans-Regular.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
+:root {
+  --display-xl-font-size: 88px;
+  --display-l-font-size: 57px;
+  --display-m-font-size: 45px;
+  --display-s-font-size: 36px;
+  --display-xs-font-size: 24px;
+
+  --background: #edf5ec;
+
+
+  --border-background-lines: 2px solid #48a93b20;
+  --border-background-lines-2: 2px solid #48a93b12;
+
+  --text-colour: #015401;
+  --icons-colour-hover: #37b537;
+}
+
+body {
+  padding: 0;
+  margin: 0;
+  font-family: 'alex-google' !important;
+  background-color: var(--background) !important;
+}
+
+* {
+  color: var(--text-colour) !important;
+}
+
+body,
+main {
+  min-height: 100vh;
+}
+
+main {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+h1 {
+  font-size: var(--display-m-font-size) !important;
+  line-height: 1.1;
+}
+
+@media screen and (min-width: 600px) {
+  h1 {
+    font-size: var(--display-xl-font-size) !important;
+  }
+}
+
+h2 {
+  font-size: var(--display-s-font-size) !important;
+}
+
+@media screen and (min-width: 600px) {
+  h2 {
+    font-size: var(--display-m-font-size) !important;
+  }
+}
+
+h3 {
+  font-size: var(--display-xs-font-size) !important;
+}
+
+.vertical-lines {
+  border-left: var(--border-background-lines);
+  border-right: var(--border-background-lines);
+}
+
+.horizontal-lines {
+  border-bottom: var(--border-background-lines);
+}
+
+footer {
+  margin-top: 24px;
+}
+
+footer.horizontal-lines {
+  border-top: var(--border-background-lines);
+  border-bottom: none;
+}
+
+footer .me:hover {
+  cursor: pointer;
+}
+
+footer p {
+  margin: 0;
+}
+
+footer .icons {
+  gap: 12px;
+}
+
+footer .container {
+  padding-top: 24px;
+  padding-bottom: 12px;
+}
+
+header .container,
+footer .container {
+  justify-content: space-between;
+  align-items: center;
+}
+
+header img {
+  max-height: 50px;
+  border-radius: 50%;
+}
+
+@media screen and (min-width: 600px) {
+  header img {
+    max-height: 95px;
+  }
+}
+
+article .container {
+  padding: 12px 0 36px;
+}
+
+.heading {
+  border-bottom: var(--border-background-lines);
+  padding: 0 12px 6px;
+  margin-bottom: 36px;
+}
+
+.accordions {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-gap: 12px 0;
+}
+
+@media screen and (min-width: 900px) {
+  .accordions {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+.accordion-top {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px;
+  border: none;
+  border-bottom: var(--border-background-lines);
+  border-top: var(--border-background-lines);
+  background-color: transparent;
+  transition: box-shadow 0.2s ease;
+}
+
+.accordion-top:hover {
+  box-shadow: 0px 1px 4px 0px #0080004f;
+}
+
+.accordion-top h3 {
+  margin: 0;
+}
+
+.accordion-top svg {
+  height: 1.5rem;
+}
+
+.accordion-top.open svg {
+  transform: rotate(180deg);
+}
+
+.accordion .drawer p {
+  margin: 12px 12px 24px;
+}
+
+.accordion .drawer.closed {
+  max-height: 0px;
+  overflow: hidden;
+  border-bottom: none;
+}
+
+.ghost {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: -1;
+}
+
+.center-line {
+  border-right: var(--border-background-lines-2);
+}
+
+.skill-icons {
+  gap: 2rem;
+  justify-content: center;
+  flex-wrap: wrap;
+  transform: translateX(0.7%);
+  padding: 0 12px;
+}
+
+@media screen and (min-width: 768px) {
+  .skill-icons {
+    padding: 0;
+  }
+}
+
+.icons svg {
+  height: 2rem;
+}
+
+.icons svg:hover {
+  cursor: pointer;
+}
+
+.icons svg path {
+  transition: color 0.2s ease;
+}
+
+.icons svg:hover path {
+  color: var(--icons-colour-hover) !important;
+}
+
+.icons a {
+  text-decoration: none;
+  color: var(--text-colour);
+}
+
+.hobbies {
+  padding: 0 12px;
+}

student-resumes/alex-sarsons-resume/images/favicon/site.webmanifest

@@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}

student-resumes/alex-sarsons-resume/index.html

@@ -0,0 +1,161 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Alex Sarson</title>
+  <link rel="apple-touch-icon" sizes="180x180" href="images/favicon/apple-touch-icon.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="images/favicon/favicon-32x32.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="images/favicon/favicon-16x16.png">
+  <link rel="manifest" href="images/favicon/site.webmanifest">
+  <link rel="stylesheet" href="css/styles.css">
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
+    integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+
+  <script src="js/main.js"></script>
+  <script src="https://kit.fontawesome.com/1f1f9d7c19.js" crossorigin="anonymous"></script>
+</head>
+
+<body>
+  <main>
+    <div class="main-top w-100">
+      <header class="w-100 horizontal-lines">
+        <div class="container d-flex">
+          <h1>Alex's Resume</h1>
+          <img src="images/me.png" alt="Me">
+        </div>
+      </header>
+
+      <article class="w-100 horizontal-lines border-bottom-0">
+        <div class="container horizontal-lines">
+          <h2 class="heading">Skills</h2>
+          <div class="skill-icons icons d-flex">
+            <i class="fa-brands fa-html5" title="HTML5"></i>
+            <i class="fa-brands fa-css3-alt" title="CSS"></i>
+            <i class="fa-brands fa-sass" title="Sass"></i>
+            <i class="fa-brands fa-js" title="JavaScript"></i>
+            <i class="fa-brands fa-php" title="PHP"></i>
+            <i class="fa-brands fa-wordpress-simple" title="WordPress"></i>
+            <i class="fa-brands fa-react" title="React"></i>
+            <i class="fa-brands fa-git-alt" title="Git"></i>
+            <i class="fa-brands fa-npm" title="NPM"></i>
+            <i class="fa-brands fa-grunt" title="Grunt"></i>
+            <i class="fa-brands fa-aws" title="AWS"></i>
+            <i class="fa-brands fa-docker" title="Docker"></i>
+            <i class="fa-brands fa-bootstrap" title="Bootstrap"></i>
+          </div>
+        </div>
+
+        <div class="container horizontal-lines px-0">
+          <h2 class="heading">Experience</h2>
+          <div class="accordions">
+            <div class="accordion">
+              <button class="accordion-top" onclick="accordionHandler(this)">
+                <h3>IT Support Technician</h3><i class="fa-solid fa-angle-down"></i>
+              </button>
+              <div class="drawer closed">
+                <p>L.E.A.D. IT Services: August 2019 – January 2022</p>
+                <p>Full time employment working as a Site Technician. Responsibilities included handling customer
+                  queries (in person, by email or by phone), resolving technical issues either on site or remotely, and
+                  giving guidance and support to users struggling to use software. During this time I was also managing
+                  the schools websites and learning to code.</p>
+              </div>
+            </div>
+
+            <div class="accordion">
+              <button class="accordion-top" onclick="accordionHandler(this)">
+                <h3>Web Development Manager</h3><i class="fa-solid fa-angle-down"></i>
+              </button>
+              <div class="drawer closed">
+                <p>L.E.A.D. IT Services: January 2022 – June 2022</p>
+                <p>This role involved managing and developing websites for schools within the L.E.A.D. Academy Trust,
+                  external schools, and Cubowork.com. Responsibilities included executing website designs, collaborating
+                  with clients to meet launch deadlines, and enhancing admin panel efficiency through custom plugins on
+                  WordPress. Operating on a Windows server with Plesk, tasks extended to SSL certificate management, DNS
+                  record editing, and ensuring plugin and CMS versions remained updated. Notably, I crafted plugins
+                  employing custom post types to streamline administrative tasks and present content seamlessly on the
+                  frontend using PHP, HTML, CSS, and JavaScript. One such plugin organized vacancies chronologically,
+                  automatically transitioning posts to draft status upon reaching an end date, effectively managing
+                  content visibility.</p>
+              </div>
+            </div>
+
+            <div class="accordion">
+              <button class="accordion-top" onclick="accordionHandler(this)">
+                <h3>Junior Web Developer</h3><i class="fa-solid fa-angle-down"></i>
+              </button>
+              <div class="drawer closed">
+                <p>Magdalen Medical Publishing: June 2022 – August 2023</p>
+                <p>During my time as a Junior Web Developer, I was responsible for implementing new features within
+                  front-end and CMS systems, following a bi-weekly release schedule. Additionally, I handled bug fixes
+                  and issue resolutions across six journals and seven iw websites. Notably, a significant achievement
+                  during this period was learning GatsbyJS and ReactJS as part of the iw website redevelopment project,
+                  which greatly enhanced my professional capabilities.</p>
+              </div>
+            </div>
+
+            <div class="accordion">
+              <button class="accordion-top" onclick="accordionHandler(this)">
+                <h3>Web Developer</h3><i class="fa-solid fa-angle-down"></i>
+              </button>
+              <div class="drawer closed">
+                <p>Magdalen Medical Publishing: August 2023 – Present</p>
+                <p>My responsibilities at MMP haven't fundamentally shifted since my promotion, but I've taken on
+                  leadership roles in several projects aimed at enhancing our platform's architecture. Notably, I
+                  spearheaded the initiative to streamline our infrastructure by deploying the six journals as separate
+                  Docker containers from a unified repository onto AWS. This initiative significantly enhanced the
+                  workflow for our development team, allowing us to host the sites locally in Docker containers from a
+                  centralized repository. Through this project, I've honed my expertise with AWS and Docker, and I'm
+                  eager to apply these skills to similar projects, such as optimizing the Gatsby sites I developed
+                  earlier.</p>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="container">
+          <h2 class="heading">Hobbies & Interests</h2>
+          <p class="hobbies">My hobbies and interests are computer gaming, going to the gym, board/tabletop games,
+            reading, music and
+            anime. I'm currently 530 episodes into One Piece and I'm loving it! My favourite character is Usopp because
+            he's hilarious!</p>
+        </div>
+      </article>
+    </div>
+
+    <footer class="w-100 horizontal-lines">
+      <div class="container d-flex">
+        <p>Made by <span class="me" title="Alex Sarson">👨🏽‍💻</span></p>
+        <div class="icons d-flex">
+          <a href="https://github.com/alex-sarson" target="_blank" rel="noopener noreferrer" title="GitHub">
+            <i class="fa-brands fa-github"></i>
+          </a>
+          <a href="https://www.linkedin.com/in/alex-sarson-553739149/" target="_blank" rel="noopener noreferrer"
+            title="LinkedIn">
+            <i class="fa-brands fa-linkedin"></i>
+          </a>
+          <a href="https://www.instagram.com/notdospek/?hl=en" target="_blank" rel="noopener noreferrer"
+            title="Instagram">
+            <i class="fa-brands fa-instagram"></i>
+          </a>
+          <a href="mailto:alex.luke.sarson@gmail.com" target="_blank" rel="noopener noreferrer" title="Email">
+            <i class="fa-solid fa-envelope"></i>
+          </a>
+        </div>
+      </div>
+    </footer>
+
+    <div class="ghost">
+      <div class="container vertical-lines h-100">
+        <div class="center-line h-100 w-50"></div>
+      </div>
+    </div>
+  </main>
+
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
+    integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
+    crossorigin="anonymous"></script>
+</body>
+
+</html>

student-resumes/alex-sarsons-resume/js/main.js

@@ -0,0 +1,13 @@
+function accordionHandler(button) {
+  var drawer = button.nextElementSibling;
+  
+  switch (drawer.classList.contains('closed')) {
+    case true:
+      button.classList.add('open');
+      drawer.classList.remove('closed');
+      break;
+    default:
+      button.classList.remove('open');
+      drawer.classList.add('closed');
+  }
+}

student-resumes/carrington-resume/index.html

@@ -0,0 +1,160 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Carrington Body Resume</title>
+    <link rel="stylesheet" href="resume.css" />
+</head>
+<body>
+    <main>
+        <section class="flexImage">
+            <div>
+                <img src="./images/IMG-2644.jpg" width="120"
+                height="120"/>
+            </div>
+            <div class="noGap">
+                <h1 class="headOfMainText">Carrington Body</h1>
+                <h6 class="subOfMainText">Aspiring Software Engineer</h6>
+            </div>
+        </section>
+        <section>
+            <div>
+                <h3>Profile</h3>
+            </div>
+            <div>
+                <p>
+                    Former student data analyst with an entrepreneurial spirit pivoting
+                    to software engineering. Aiming to leverage my analytical skills to build
+                    software tools and services by implementing established programming frameworks.
+                </p>
+            </div>
+        </section>
+        <section>
+            <div>
+                <h3>Education</h3>
+            </div>
+            <div>
+                <h5>Bachelor of Science, Data Science - Xavier University of Louisiana, LA</h5>
+            </div>
+            <div>
+                <h6 class="greyText">August 2019 - May 2023</h6>
+            </div>
+            <div>
+                <p>
+                    Graduated with Honors (3.3 GPA).
+                </p>
+            </div>
+        </section>
+        <section>
+            <div>
+                <h3>Professional Experience</h3>
+            </div>
+            <div>
+                <h5>Account Manager, Inside Sales - TopRx, Memphis, TN</h5>
+            </div>
+            <div>
+                <h6 class="greyText">October 2023 - March 2024</h6>
+            </div>
+            <div>
+                <p>
+                    Managed a CRM of a client base of over 300 independent pharmacies
+                    in the US. Sold over $10k monthly in generics to multiple pharmacies.
+                </p>
+            </div>
+            <div>
+                <h5>Software Developer (Intern) - Computer Concepts, Lafayette, LA</h5>
+            </div>
+            <div>
+                <h6 class="greyText">June 2023 - September 2023</h6>
+            </div>
+            <div>
+                <p>
+                    Developed supplemental changes to clients' businesses by 
+                    building and increasing the functionality of their online presence. 
+                    Includes website-building through the Azure stack.
+                </p>
+            </div>
+        </section>
+        <section>
+            <div>
+                <h3>Projects</h3>
+            </div>
+            <div class="blueLikeFooter">
+                <h6>Refer to the Links section</h6>
+            </div>
+            <div>
+                <h5>Data Analytics Portfolio</h5>
+            </div>
+            <div>
+                <p>
+                    Collection of real-world case studies involving the manipulation
+                    of multiple datasets and the utilization of visualization and
+                    analytical tools to predict outcomes and make business decisions.
+                    Built in R Studio.
+                </p>
+            </div>
+            <div>
+                <h5>Degree Audit</h5>
+            </div>
+            <div>
+                <p>
+                    Managed a viable MVP that outputs remaining class requirements using students'
+                    transcripts and curriculums based on their respective majors. Led as Project 
+                    Manager by setting meetings, working with stakeholder to design project guidelines 
+                    writing 90% of user stories for associate developers via PivotalTracker, and
+                    managing/merging code via GitHub.
+                </p>
+            </div>
+        </section>
+    </main>
+    <footer>
+        <section>
+            <div>
+                <h4>Details</h4>
+            </div>
+            <div>
+                <a>Memphis, TN</a>
+                <a>901-305-1606</a>
+                <a>carringtonbody@gmail.com</a>
+            </div>
+        </section>
+        <section>
+            <div>
+                <h4>Links</h4>
+            </div>
+            <div>
+                <a class="link" href="https://www.linkedin.com/in/carrington-body">LinkedIn</a>
+                <a class="link oneLine" href="https://github.com/cbody2/DegreeAudit">Project Manager of a Console-Based App</a>
+                <a class="link" href="https://github.com/cbody2/R-code-data-analytics">Data Analytics Portfolio</a>
+            </div>
+        </section>
+        <section>
+            <div>
+                <h4>Skills</h4>
+            </div>
+            <div>
+                <a>Problem Solving</a>
+                <a>Mathematical</a>
+                <a>Management</a>
+                <a>Customer Service</a>
+                <a>Learn Quickly</a>
+            </div>
+        </section>
+        <section>
+            <div>
+                <h4>Langauges</h4>
+            </div>
+            <div>
+                <a>English</a>
+                <a>Spanish</a>
+            </div>
+        </section>
+        <section>
+            <div class="copyright">
+                <h6> &copy; 2024, Carrington Body</h6>
+            </div>
+        </section>
+    </footer>
+</body>
+</html>

student-resumes/carrington-resume/resume.css

@@ -0,0 +1,96 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    min-height: 100vh;
+    display: flex;
+}
+
+main {
+    padding: 40px;
+    background-color: beige;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    gap: 20px;
+}
+
+section, div {
+    display: flex;
+    flex-direction: column;
+    gap: 3.3px;
+}
+
+h3 {
+    font-size: 1.3em;
+}
+
+p {
+    font-size: 0.8em;
+}
+
+.headOfMainText {
+    font-size: 2.5em;
+}
+
+.subOfMainText {
+    font-size: 0.9em;
+    text-align: center;
+    color: mediumblue;
+}
+
+.flexImage {
+    margin: 0 auto;
+    flex-direction: row;
+    gap: 20px;
+}
+
+.noGap {
+    gap: 0;
+    align-items: center;
+}
+
+.greyText {
+    color: grey;
+}
+
+.blueLikeFooter {
+    color: rgba(5, 10, 59, 0.829);
+}
+
+footer {
+    padding-top: 100px;
+    padding-left: 50px;
+    padding-right: 50px;
+    background-color: rgba(5, 10, 59, 0.829);
+    color: white;
+    display: flex;
+    flex-direction: column;
+    gap: 30px;
+}
+
+a {
+    display: flex;
+    flex-direction: column;
+    color: white;
+    text-decoration: unset;
+    font-size: 0.8em;
+    line-height: 18pt;
+}
+
+.oneLine {
+    line-height: 10pt;
+}
+
+.link:hover {
+    text-decoration: underline;
+}
+
+.copyright {
+    font-size: 1em;
+    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+    padding-top: 90px;
+}

student-resumes/dragon.panic-resume/resume.html

@@ -0,0 +1,8 @@
+<html>
+    <head>
+    </head>
+    <body>
+        <h1>Dragon Sky Resume</h1>
+        <p>I like designing and building software products.</p>
+    </body>
+</html>

student-resumes/embassyrow-resume/index.html

@@ -0,0 +1,90 @@
+<!doctype html>
+
+<html lang="en">
+
+<head>
+   <meta charset="utf-8">
+   <meta name="viewport" content="width=device-width, initial-scale=1">
+
+   <title>Steve Huffman Resume</title>
+   <meta name="description" content="Steve Huffman Resume">
+   <link rel="stylesheet" type="text/css" media="all" href="style.css">
+
+   <link rel="preconnect" href="https://fonts.googleapis.com">
+   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+   <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet">
+</head>
+
+<body>
+
+   <header>
+      <h1>Steve Huffman</h1>
+      <address>
+         <ul>
+            <li><a href="https://www.google.com/maps/place/San+Francisco,+CA" target="_blank">San Francisco, CA</a></li>
+            <li><a href="tel:424-234-9948" target="_blank">424.234.9948</a></li>
+            <li><a href="mailto:headhoncho@reddit.com" target="_blank">headhoncho@reddit.com</a></li>
+            <li><a href="https://www.reddit.com/user/spez/" target="_blank">Reddit</a>
+            <li><a href="https://www.linkedin.com/in/shuffman56/" target="_blank">LinkedIn</a></li>
+         </ul>
+      </address>
+   </header>
+
+   <main>
+      <section>
+         <h2>Objective</h2>
+         <p>Now that I'm a billionaire, I'm eager to pivot from CEO responsibilities to a career in programming, leveraging my leadership experience and passion for technology to excel in The Heartbroken Dev's programming course.</p>
+      </section>
+
+      <section>
+         <h2>Education</h2>
+         <div class="details"><span>Bachelor of Science, Computer Science</span><span>Stanford University, CA</span></div>
+         <p>Graduated with Distinction</p>
+      </section>
+
+      <section>
+         <h2>Experience</h2>
+         <div>March, 2024 – Present</div>
+         <div class="details"><span>Chief Executive Officer</span><span>Reddit</span></div>
+         <ul>
+            <li>Directed the strategic direction and growth of Reddit, overseeing a team of over 1,000 employees.</li>
+            <li>Achieved significant milestones, including reaching over 500 million monthly active users and implementing innovative monetization strategies.</li>
+            <li>Led product development initiatives, including platform redesigns and the introduction of new features like Reddit Premium and Community Awards.</li>
+            <li>Established strategic partnerships with key stakeholders to enhance user experience and drive revenue growth.</li>
+            <li>Managed operational functions such as budgeting, resource allocation, and talent acquisition.</li>
+         </ul>
+      </section>
+
+      <section>
+         <h2>Skills</h2>
+         <ul>
+            <li>Proficient in leadership and team management, with a proven track record of scaling organizations and fostering innovation.</li>
+            <li>Strong strategic planning and decision-making abilities, adept at driving business growth and achieving objectives.</li>
+            <li>Excellent communication and interpersonal skills, able to collaborate effectively with diverse teams and stakeholders.</li>
+            <li>Familiarity with programming fundamentals and languages, including Python, JavaScript, HTML/CSS, and SQL.</li>
+            <li>Demonstrated ability to learn new technologies quickly and adapt to evolving industry trends.</li>
+         </ul>
+      </section>
+
+      <section>
+         <h2>Projects</h2>
+         <ul>
+            <li>Developed a basic web application using Python and Django to analyze user engagement metrics for Reddit.</li>
+            <li>Contributed to open-source projects on GitHub, including bug fixes and feature enhancements for various libraries and frameworks.</li>
+            <li>Completed online courses and tutorials on programming concepts, data structures, and algorithms to deepen technical knowledge.</li>
+         </ul>
+      </section>
+
+      <section>
+         <h2>Certifications</h2>
+         <p>Currently pursuing relevant certifications in programming and software development to supplement practical experience.</p>
+      </section>
+
+      <section>
+         <h2>References</h2>
+         <p><a href="https://www.reddit.com/search/?q=steve%20huffman" target="_blank">https://www.reddit.com/search/?q=steve%20huffman</a></p>
+      </section>
+   </main>
+</body>
+
+</html>

student-resumes/embassyrow-resume/style.css

@@ -0,0 +1,92 @@
+:where(:not(html,iframe,canvas,img,svg,video,audio):not(svg *,symbol *)){all:unset;display:revert}*,::after,::before{box-sizing:border-box}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}a,button{cursor:revert}menu,ol,summary,ul{list-style:none}img{max-inline-size:100%;max-block-size:100%}table{border-collapse:collapse}input,textarea{-webkit-user-select:auto}textarea{white-space:revert}meter{-webkit-appearance:revert;appearance:revert}:where(pre){all:revert;box-sizing:border-box}::placeholder{color:unset}:where([hidden]){display:none}:where([contenteditable]:not([contenteditable=false])){-moz-user-modify:read-write;-webkit-user-modify:read-write;overflow-wrap:break-word;-webkit-line-break:after-white-space;-webkit-user-select:auto}:where([draggable=true]){-webkit-user-drag:element}:where(dialog:modal){all:revert;box-sizing:border-box}::-webkit-details-marker{display:none}
+
+html
+{
+   font-size: 10px;
+}
+
+body
+{
+   color: #111;
+   font-size: 1.4rem;
+   font-family: "Open Sans", sans-serif;
+   font-optical-sizing: auto;
+   font-weight: 400;
+   font-style: normal;
+   font-variation-settings: "wdth" 100;
+   line-height: 1.5;
+
+   max-width: 86rem;
+   margin: 0 auto;
+   padding: 3rem;
+   background: rgb(255, 255, 250);
+}
+
+a
+{
+   text-decoration: underline;
+   text-underline-offset: 0.4rem;
+}
+
+a:hover, a:focus
+{
+   text-decoration: none;
+}
+
+h1
+{
+   font-weight: 500;
+   font-size: 3rem;
+   margin-bottom: 1rem;
+}
+
+h2
+{
+   font-size: 2rem;
+   font-weight: 700;
+   margin-bottom: 1rem;
+}
+
+header, section
+{
+   margin: 0 0 3.5rem 0;
+}
+
+section div
+{
+   margin-bottom: 0.7rem;
+}
+
+address ul
+{
+   display: flex;
+   flex-wrap: wrap;
+   column-gap: 4rem;
+   row-gap: 1rem;
+}
+
+.details span
+{
+   font-weight: 600;
+}
+
+.details span:first-of-type
+{
+   font-style: italic;
+}
+
+.details span:first-of-type:after
+{
+   content: "—";
+   margin: 0 1rem;
+}
+
+section ul
+{
+   list-style: disc;
+
+   li
+   {
+      margin: 0 0 0.7rem 1.4rem;
+   }
+}

student-resumes/sample-student-resume-directory/index.html

@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Resume</title>
+    <link rel="stylesheet" type="text/css" href="style.css" />
+</head>
+<body>
+    <h1>Resume</h1>
+    <h2>A Heartbroken Dev's Journey to Mending Through Coding</h2>
+    <p><strong>Location:</strong> The Digital Expanse</p>
+    <p><strong>Availability:</strong> Whenever healing and learning intertwine</p>
+    <p><strong>Contact:</strong> <a href="http://theheartbrokendev.com">theheartbrokendev.com</a></p>
+    <p><strong>Passions:</strong> Coding, Teaching, Recovering, Healing</p>
+    <hr>
+    <h3>About Me</h3>
+    <p>Hello, I'm a Principal Software Engineer with a heart recently shattered into more pieces than a monolithic application being refactored into microservices. Despite the deep fissures in my heart, my spirit for coding and teaching burns brighter than a well-optimized algorithm. My journey through the valley of heartbreak has led me to a profound realization: healing is found not by looking inward but by reaching outward. With a career spent helming engineering projects in Fortune 10 enterprises, I've decided to pivot my expertise towards something infinitely more valuable—teaching you to code.</p>
+    <hr>
+    <h3>Experience</h3>
+    <p><strong>Principal Software Engineer</strong><br>
+    <em>The School of Hard Knocks and Corporate America</em><br>
+    - Managed engineering teams and projects that would intimidate lesser mortals.<br>
+    - Accumulated a wealth of knowledge in software development, equivalent to the contents of Stack Overflow.</p>
+    <p><strong>Recovering Alcoholic & Wannabe Entrepreneur</strong><br>
+    <em>The Real World</em><br>
+    - Mastered the art of turning life's lemons into remarkably bug-free lemonade apps.<br>
+    - Entrepreneurial spirit, fueled by dreams and copious amounts of coffee, ready to mentor the next generation of dreamers.</p>
+    <hr>
+    <h3>Skills</h3>
+    <ul>
+        <li><strong>Languages:</strong> JavaScript/TypeScript, Python, Java/Kotlin, and the language of perseverance.</li>
+        <li><strong>Frameworks:</strong> Expert in various frameworks but specializes in building frameworks for life.</li>
+        <li><strong>Tools:</strong> Git, Docker, Kubernetes, and a heart mending toolkit.</li>
+        <li><strong>Soft Skills:</strong> Empathy, resilience, and the unique ability to inspire through code.</li>
+    </ul>
+    <hr>
+    <h3>Education</h3>
+    <p><strong>Life University</strong><br>
+    - Major: Navigating Heartbreak with Grace<br>
+    - Minor: Advanced Software Engineering & Human Connections</p>
+    <hr>
+    <h3>Projects</h3>
+    <p><strong>Teach You To Code Initiative</strong><br>
+    - A noble quest to mentor souls from zero to hero in the realm of web development.<br>
+    - A promise of commitment, to not only teach coding but to forge bonds through shared struggles and triumphs.</p>
+    <hr>
+    <h3>Personal Statement</h3>
+    <p>In the darkest of times, when the code of my life seemed riddled with bugs, I found my purpose illuminated by the glow of my IDE. I've learned that the path to mending a broken heart is paved with curly braces, semicolons, and the smiles of those I can help along the way. My mission is simple: to offer you my time, my knowledge, and perhaps, a piece of my heart, as we embark on this journey of learning and healing together. I'm not looking for payment, accolades, or even recognition—I'm searching for connection, for meaning, and for the chance to make a difference in your life.</p>
+    <p>If you're willing to commit to this journey, I promise to be there every step of the way, from "Hello, World!" to deploying your first app. Let's build something beautiful together, not just in code, but in the very fabric of our lives.</p>
+    <p>Last but not least, I love you all. :)</p>
+    <hr>
+    <h3>Contact Me</h3>
+    <p>To embark on this journey of code and heart mending, visit <a href="http://theheartbrokendev.com">theheartbrokendev.com</a>. Let's transform our sorrows into semicolons, our breaks into brackets, and our stories into software.</p>
+    <hr>
+    <p><em>Because sometimes, the most endearing code is written with a broken heart... but a hopeful spirit.</em></p>
+</body>
+</html>

student-resumes/sample-student-resume-directory/style.css

@@ -0,0 +1,83 @@
+body {
+    font-family: 'Helvetica Neue', sans-serif;
+    font-weight: 300;
+    line-height: 1.6;
+    color: #212121;
+    background: linear-gradient(to right, #2980b9, #6dd5fa, #ffffff);
+    padding: 20px;
+}
+
+h1 {
+    color: #212121;
+    text-align: center;
+    font-size: 3em;
+    margin-bottom: 50px;
+}
+
+h2 {
+    color: #212121;
+    text-align: left;
+    font-size: 2.5em;
+    margin-bottom: 30px;
+    border-bottom: 2px solid #212121;
+}
+
+h3 {
+    color: #212121;
+    font-size: 2em;
+    margin-bottom: 20px;
+}
+
+p {
+    margin-bottom: 20px;
+    font-size: 1.2em;
+    color: #424242;
+}
+
+p strong {
+    color: #0061a8;
+    font-weight: 600;
+}
+
+a {
+    color: #0061a8;
+    text-decoration: none;
+    transition: color 0.3s ease;
+}
+
+a:hover {
+    color: #212121;
+}
+
+hr {
+    border: 0;
+    height: 1px;
+    background: #212121;
+    margin: 20px 0;
+}
+
+ul {
+    list-style: none;
+    padding-left: 0;
+}
+
+ul li {
+    margin-bottom: 10px;
+    font-size: 1.2em;
+    color: #424242;
+}
+
+ul li strong {
+    color: #0061a8;
+    font-weight: 600;
+}
+
+/* Add some animation to the page */
+@keyframes fadeIn {
+    0% {opacity: 0;}
+    100% {opacity: 1;}
+}
+
+body {
+    animation: fadeIn 2s ease-in 1;
+}