Improve about page

12 files changed, 111 insertions, 10 deletions

diff --git a/.idea/misc.xml b/.idea/misc.xml
deleted file mode 100644
index 283b9b4..0000000
--- a/.idea/misc.xml
+++ /dev/null
@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="SwUserDefinedSpecifications">
-    <option name="specTypeByUrl">
-      <map />
-    </option>
-  </component>
-</project>
\ No newline at end of file
diff --git a/about/index.php b/about/index.php
index 65ed9c4..19d4d8a 100644
--- a/about/index.php
+++ b/about/index.php
@@ -6,8 +6,74 @@
     <h1 class="text-center">My name is <span id="scoots">Scootaloo</span>!</h1>
     <h3 class="text-center">I'm the computer pegasus</h3>
 
-    <p>TODO: Add some sort of circles with things I like (MLP, computers, Linux, OSS, music, video, photography, graphical design)</p>
-    <div id="circles"></div>
+    <div id="circles">
+        <div class="circle">
+            <div class="circle-icon">
+                <img class="circle-icon-img" src="/assets/about/mlp.png" alt="">
+            </div>
+            <div class="circle-text">
+                My Little Pony
+            </div>
+        </div>
+        <div class="circle">
+            <div class="circle-icon">
+                <img class="circle-icon-img" src="/assets/about/computers.png" alt="">
+            </div>
+            <div class="circle-text">
+                Computers
+            </div>
+        </div>
+        <div class="circle">
+            <div class="circle-icon">
+                <img class="circle-icon-img" src="/assets/about/linux.png" alt="">
+            </div>
+            <div class="circle-text">
+                Linux
+            </div>
+        </div>
+        <div class="circle">
+            <div class="circle-icon">
+                <img class="circle-icon-img" src="/assets/about/opensource.png" alt="">
+            </div>
+            <div class="circle-text">
+                Open-source
+            </div>
+        </div>
+        <div class="circle">
+            <div class="circle-icon">
+                <img class="circle-icon-img" src="/assets/about/music.png" alt="">
+            </div>
+            <div class="circle-text">
+                Music
+            </div>
+        </div>
+        <div class="circle">
+            <div class="circle-icon">
+                <img class="circle-icon-img" src="/assets/about/cinema.png" alt="">
+            </div>
+            <div class="circle-text">
+                Cinema
+            </div>
+        </div>
+        <div class="circle">
+            <div class="circle-icon">
+                <img class="circle-icon-img" src="/assets/about/photography.png" alt="">
+            </div>
+            <div class="circle-text">
+                Photography
+            </div>
+        </div>
+        <div class="circle">
+            <div class="circle-icon">
+                <img class="circle-icon-img" src="/assets/about/vector.png" alt="">
+            </div>
+            <div class="circle-text">
+                Graphic design
+            </div>
+        </div>
+    </div>
+
+    <br>
 
     <p><b>Info about me:</b></p>
     <table class="table">
diff --git a/assets/.DS_Store b/assets/.DS_Store
index b5705ab..240b9d3 100644
--- a/assets/.DS_Store
+++ b/assets/.DS_Store
diff --git a/assets/about/cinema.png b/assets/about/cinema.png
new file mode 100644
index 0000000..5c2bdb8
--- /dev/null
+++ b/assets/about/cinema.png
diff --git a/assets/about/computers.png b/assets/about/computers.png
new file mode 100644
index 0000000..7673b05
--- /dev/null
+++ b/assets/about/computers.png
diff --git a/assets/about/linux.png b/assets/about/linux.png
new file mode 100644
index 0000000..9f9689d
--- /dev/null
+++ b/assets/about/linux.png
diff --git a/assets/about/mlp.png b/assets/about/mlp.png
new file mode 100644
index 0000000..39a5dcd
--- /dev/null
+++ b/assets/about/mlp.png
diff --git a/assets/about/music.png b/assets/about/music.png
new file mode 100644
index 0000000..c955749
--- /dev/null
+++ b/assets/about/music.png
diff --git a/assets/about/opensource.png b/assets/about/opensource.png
new file mode 100644
index 0000000..2c985ff
--- /dev/null
+++ b/assets/about/opensource.png
diff --git a/assets/about/photography.png b/assets/about/photography.png
new file mode 100644
index 0000000..69ef5d9
--- /dev/null
+++ b/assets/about/photography.png
diff --git a/assets/about/vector.png b/assets/about/vector.png
new file mode 100644
index 0000000..92e96d4
--- /dev/null
+++ b/assets/about/vector.png
diff --git a/assets/css/main.css b/assets/css/main.css
index 8b401cf..e36eb3f 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -196,4 +196,47 @@ pre {
 
 .table tr:nth-last-child(1) td {
     border: none !important;
+}
+
+#circles {
+    display: grid;
+    grid-template-columns: repeat(8, 1fr);
+    grid-column-gap: 20px;
+    width: max-content;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.circle-icon {
+    background-color: rgba(0, 0, 0, .25);
+    width: 100px;
+    height: 100px;
+    border-radius: 999px;
+    display: block;
+    margin: 10px auto;
+}
+
+.circle-text {
+    text-align: center;
+}
+
+.circle-icon-img {
+    filter: invert(1);
+    width: 64px;
+    height: 64px;
+    margin: 18px;
+}
+
+@media (max-width: 1200px) {
+    #circles {
+        display: grid;
+        grid-template-columns: repeat(4, 1fr);
+    }
+}
+
+@media (max-width: 600px) {
+    #circles {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+    }
 }
\ No newline at end of file