From 2a3e233159d54067dca0d8a1f536bda3c9a813c4 Mon Sep 17 00:00:00 2001
From: Robert S <admin@robert-s.dev>
Date: Tue, 28 Dec 2021 14:51:32 +0100
Subject: [PATCH] Move layout file to layout folder (correctly this time)

Last time I forgot to change the tailwind config, whoops. I also edited my about me page.
---
 {components => layout}/layout.js |  4 +--
 pages/about.js                   | 55 ++++++++++++++++++++++----------
 pages/contact.js                 |  2 +-
 pages/index.js                   |  2 +-
 pages/work.js                    |  2 +-
 tailwind.config.js               |  2 +-
 6 files changed, 45 insertions(+), 22 deletions(-)
 rename {components => layout}/layout.js (94%)

diff --git a/components/layout.js b/layout/layout.js
similarity index 94%
rename from components/layout.js
rename to layout/layout.js
index 403b317..288da11 100644
--- a/components/layout.js
+++ b/layout/layout.js
@@ -1,6 +1,6 @@
 import Head from 'next/head';
-import Navbar from "./navbar";
-import Footer from "./footer";
+import Navbar from "../components/navbar";
+import Footer from "../components/footer";
 
 export default function Layout({
   children,
diff --git a/pages/about.js b/pages/about.js
index 0157630..8fafa20 100644
--- a/pages/about.js
+++ b/pages/about.js
@@ -1,4 +1,4 @@
-import Layout from "../components/layout";
+import Layout from "../layout/layout";
 import { motion } from "framer-motion";
 
 export default function About() {
@@ -18,24 +18,47 @@ export default function About() {
                                     </p>
                                     <div className="space-y-2">
                                         <p>
-                                            I can use the following technologies/frameworks mostly fluently:
+                                            I can use the following languages fluently:
                                         </p>
-                                        <ul className="list-disc pl-4">
-                                            <li>HTML, CSS & JS</li>
-                                            <li>TailwindCSS, Bootstrap, UIkit & Cirrus UI</li>
-                                            <li>Python</li>
-                                            <li>Flask & similar frameworks (like Sanic)</li>
-                                            <li>MySQL, PostgreSQL, MongoDB, Redis</li>
-                                        </ul>
+                                        <div className="flex">
+                                            <img alt="Python" src="https://img.shields.io/badge/-Python-18181b?style=for-the-badge&logo=python&logoColor=F43F5E" />
+                                            <img alt="SQL" src="https://img.shields.io/badge/-SQL-18181b?style=for-the-badge&logo=postgresql&logoColor=F43F5E" />
+                                            <img alt="Javascript" src="https://img.shields.io/badge/-Javascript-18181b?style=for-the-badge&logo=javascript&logoColor=F43F5E" />
+                                            <img alt="Typescript" src="https://img.shields.io/badge/-Typescript-18181b?style=for-the-badge&logo=typescript&logoColor=F43F5E" />
+                                            <img alt="HTML5" src="https://img.shields.io/badge/-HTML5-18181b?style=for-the-badge&logo=html5&logoColor=F43F5E" />
+                                            <img alt="CSS3" src="https://img.shields.io/badge/-CSS3-18181b?style=for-the-badge&logo=css3&logoColor=F43F5E" />
+                                        </div>
                                         <p>
-                                            And I am currently learning the following technologies/frameworks:
+                                            I can use the following frameworks and libraries fluently:
                                         </p>
-                                        <ul className="list-disc pl-4">
-                                            <li>Go</li>
-                                            <li>Rust</li>
-                                            <li>React/Next.js</li>
-                                            <li>Docker</li>
-                                        </ul>
+                                        <div className="flex">
+                                            <img alt="Tailwind CSS" src="https://img.shields.io/badge/-Tailwind CSS-18181b?style=for-the-badge&logo=tailwindcss&logoColor=F43F5E" />
+                                            <img alt="Bootstrap" src="https://img.shields.io/badge/-Bootstrap-18181b?style=for-the-badge&logo=bootstrap&logoColor=F43F5E" />
+                                            <img alt="UIkit" src="https://img.shields.io/badge/-UIkit-18181b?style=for-the-badge&logo=uikit&logoColor=F43F5E" />
+                                            <img alt="Flask" src="https://img.shields.io/badge/-Flask-18181b?style=for-the-badge&logo=flask&logoColor=F43F5E" />
+                                            <img alt="Falcon" src="https://img.shields.io/badge/-Falcon-18181b?style=for-the-badge&logo=falcon&logoColor=F43F5E" />
+                                            <img alt="React" src="https://img.shields.io/badge/-React-18181b?style=for-the-badge&logo=react&logoColor=F43F5E" />
+                                            <img alt="Next.js" src="https://img.shields.io/badge/-Next.js-18181b?style=for-the-badge&logo=next.js&logoColor=F43F5E" />
+                                            <img alt="Alpine.js" src="https://img.shields.io/badge/-Alpine.js-18181b?style=for-the-badge&logo=alpine.js&logoColor=F43F5E" />
+                                            <img alt="Prisma" src="https://img.shields.io/badge/-Prisma-18181b?style=for-the-badge&logo=prisma&logoColor=F43F5E" />
+                                        </div>
+                                        <p>
+                                            Miscellaneous tools that I use:
+                                        </p>
+                                        <div className="flex">
+                                            <img alt="Linux" src="https://img.shields.io/badge/-Linux-18181b?style=for-the-badge&logo=linux&logoColor=F43F5E" />
+                                            <img alt="Git" src="https://img.shields.io/badge/-Git-18181b?style=for-the-badge&logo=git&logoColor=F43F5E" />
+                                            <img alt="NGINX" src="https://img.shields.io/badge/-NGINX-18181b?style=for-the-badge&logo=nginx&logoColor=F43F5E" />
+                                            <img alt="Travis CI" src="https://img.shields.io/badge/-Travis CI-18181b?style=for-the-badge&logo=travisci&logoColor=F43F5E" />
+                                        </div>
+                                        <p>
+                                            Currently learning:
+                                        </p>
+                                        <div className="flex">
+                                            <img alt="Go" src="https://img.shields.io/badge/-Go-18181b?style=for-the-badge&logo=go&logoColor=F43F5E" />
+                                            <img alt="Rust" src="https://img.shields.io/badge/-Rust-18181b?style=for-the-badge&logo=rust&logoColor=F43F5E" />
+                                            <img alt="Docker" src="https://img.shields.io/badge/-Docker-18181b?style=for-the-badge&logo=docker&logoColor=F43F5E" />
+                                        </div>
                                     </div>
                                 </div>
                             </div>
diff --git a/pages/contact.js b/pages/contact.js
index 070c36d..7b54dad 100644
--- a/pages/contact.js
+++ b/pages/contact.js
@@ -1,4 +1,4 @@
-import Layout from "../components/layout";
+import Layout from "../layout/layout";
 import {motion} from "framer-motion";
 
 export default function Contact() {
diff --git a/pages/index.js b/pages/index.js
index 5ca9e2f..03dd32c 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,4 +1,4 @@
-import Layout from "../components/layout";
+import Layout from "../layout/layout";
 import { motion } from "framer-motion";
 
 export default function Home() {
diff --git a/pages/work.js b/pages/work.js
index b181c9b..fdd7e7e 100644
--- a/pages/work.js
+++ b/pages/work.js
@@ -1,4 +1,4 @@
-import Layout from "../components/layout";
+import Layout from "../layout/layout";
 import { motion } from "framer-motion";
 
 export default function Work() {
diff --git a/tailwind.config.js b/tailwind.config.js
index 4516f6e..6ef99bf 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -2,7 +2,7 @@ const colors = require('tailwindcss/colors')
 
 module.exports = {
   mode: 'jit',
-  purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
+  purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}', './layout/**/*.{js,ts,jsx,tsx}'],
   darkMode: false, // or 'media' or 'class'
   theme: {
     colors: {