Merge pull request #11 from alex-sarson/alex-resume

Added Alex Sarson's Resume

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');
+  }
+}