feat: Added profile content

ripixel · Jun 6, 2020 · 9d1e386 · 9d1e386
1 parent b455518
commit 9d1e386
Show file tree

Hide file tree

Showing 3 changed files with 443 additions and 5 deletions.
diff --git a/assets/styles/styles.css b/assets/styles/styles.css
@@ -90,6 +90,10 @@ nav a {
   transition: 0.3s transform ease-in-out;
 }
 
+nav a:hover {
+  color: #ccc;
+}
+
 nav ul {
   font-family: "Fredoka One", cursive;
   letter-spacing: 0.1em;
@@ -198,7 +202,55 @@ main.area {
   min-height: 30vh;
 }
 
+.details {
+  display: flex;
+  justify-content: flex-start;
+  flex-direction: row;
+  flex-wrap: wrap;
+  padding: 40px 120px 30px;
+  font-size: 0.7em;
+  max-width: 100%;
+}
+
+@media only screen and (max-width: 600px) {
+  .details {
+    flex-wrap: nowrap;
+    overflow-x: auto;
+    padding: 20px 40px 10px;
+  }
+}
+
+@media only screen and (max-width: 420px) {
+  .details {
+    padding: 20px 30px 10px;
+  }
+}
+
+.area .details {
+  padding: 0;
+  flex-wrap: wrap;
+}
+
+.details .item {
+  padding: 10px;
+  background: rgba(0, 0, 0, 0.2);
+  margin-right: 20px;
+  margin-bottom: 10px;
+}
+
+.details .item h4 {
+  text-transform: uppercase;
+  font-family: "Lato", sans-serif;
+  padding-bottom: 2px;
+}
+
+.details .item p {
+  font-size: 1.5em;
+  white-space: nowrap;
+}
+
 main.coding {
+  min-height: 0;
   background: rgb(78, 0, 72);
 }
 
@@ -207,11 +259,47 @@ main.area.coding {
   background: rgb(105, 0, 97);
 }
 
+main.thoughts {
+  min-height: 0;
+  background: rgb(0, 87, 65);
+}
+
 main.area.thoughts {
   color: #fff;
   background: rgb(0, 105, 79);
 }
 
+main.profile {
+  min-height: 0;
+  background: rgb(17, 50, 143);
+}
+
+main.profile.details {
+  background: rgb(12, 36, 102);
+}
+
+main.profile.employment .employment-details h3 {
+  text-transform: none;
+  display: inline-block;
+  padding-right: 10px;
+  padding-bottom: 15px;
+}
+
+main.profile.employment .employment-details h4 {
+  padding-bottom: 10px;
+}
+
+main.profile.employment .employment-details p {
+  display: inline-block;
+  margin-bottom: 15px;
+}
+
+@media only screen and (max-width: 600px) {
+  main.profile.employment .employment-details h3 {
+    display: block;
+  }
+}
+
 main.area.profile {
   color: #fff;
   background: rgb(30, 77, 207);
@@ -226,6 +314,8 @@ footer {
 
 footer a {
   color: #777;
+  text-decoration: none;
+  border-color: #777;
 }
 
 footer .copy {
@@ -358,3 +448,9 @@ h3 {
   padding-right: 0.1em;
   font-style: italic;
 }
+
+.tag {
+  background: rgba(0, 0, 0, 0.2);
+  padding: 5px 10px;
+  font-size: 0.8em;
+}
diff --git a/pages/coding.html b/pages/coding.html
@@ -24,7 +24,7 @@ <h3>ripixel.co.uk</h3>
           In the end, I decided to go as simple-as-possible. This site
           shouldn&apos;t be all-singing-and-dancing, because it&apos;s not
           what&apos;s needed. What&apos;s needed is something super simple,
-          clean, and most importanly
+          clean, and most importantly
           <span class="em2">quick</span>. So, it&apos;s pure HTML and CSS, with
           a really simple template copy/paste script so I don&apos;t have to
           write the nav/header/footer out everytime. Neat!
@@ -49,9 +49,9 @@ <h3>Janky Werewolf</h3>
         <p>
           The front-end is made in React, utilising Websockets to talk to
           lambdas that handle the running of the game and tracking of game state
-          (aka who's dead Jim). The back-end is written by
-          <a href="https://www.mgoddard.net/">Michael Goddard</a>, the big ol'
-          Rust nerd.
+          (aka who&apos;s dead Jim). The back-end is written by
+          <a href="https://www.mgoddard.net/">Michael Goddard</a>, the big
+          ol&apos; Rust nerd.
         </p>
         <a class="button" href="https://www.jankywerewolf.co.uk"
           >Check it out</a