From 825a95e13bd2e712544a5ba40c739da053d90f1c Mon Sep 17 00:00:00 2001 From: Minteck Date: Sat, 14 May 2022 18:39:23 +0200 Subject: Improve about page --- .idea/misc.xml | 8 ----- about/index.php | 70 +++++++++++++++++++++++++++++++++++++++++-- assets/.DS_Store | Bin 6148 -> 6148 bytes assets/about/cinema.png | Bin 0 -> 1255 bytes assets/about/computers.png | Bin 0 -> 1578 bytes assets/about/linux.png | Bin 0 -> 3738 bytes assets/about/mlp.png | Bin 0 -> 3005 bytes assets/about/music.png | Bin 0 -> 1899 bytes assets/about/opensource.png | Bin 0 -> 2194 bytes assets/about/photography.png | Bin 0 -> 2551 bytes assets/about/vector.png | Bin 0 -> 1886 bytes assets/css/main.css | 43 ++++++++++++++++++++++++++ 12 files changed, 111 insertions(+), 10 deletions(-) delete mode 100644 .idea/misc.xml create mode 100644 assets/about/cinema.png create mode 100644 assets/about/computers.png create mode 100644 assets/about/linux.png create mode 100644 assets/about/mlp.png create mode 100644 assets/about/music.png create mode 100644 assets/about/opensource.png create mode 100644 assets/about/photography.png create mode 100644 assets/about/vector.png 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 @@ - - - - - - \ 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 @@

My name is Scootaloo!

I'm the computer pegasus

-

TODO: Add some sort of circles with things I like (MLP, computers, Linux, OSS, music, video, photography, graphical design)

-
+
+
+
+ +
+
+ My Little Pony +
+
+
+
+ +
+
+ Computers +
+
+
+
+ +
+
+ Linux +
+
+
+
+ +
+
+ Open-source +
+
+
+
+ +
+
+ Music +
+
+
+
+ +
+
+ Cinema +
+
+
+
+ +
+
+ Photography +
+
+
+
+ +
+
+ Graphic design +
+
+
+ +

Info about me:

diff --git a/assets/.DS_Store b/assets/.DS_Store index b5705ab..240b9d3 100644 Binary files a/assets/.DS_Store and b/assets/.DS_Store differ diff --git a/assets/about/cinema.png b/assets/about/cinema.png new file mode 100644 index 0000000..5c2bdb8 Binary files /dev/null and b/assets/about/cinema.png differ diff --git a/assets/about/computers.png b/assets/about/computers.png new file mode 100644 index 0000000..7673b05 Binary files /dev/null and b/assets/about/computers.png differ diff --git a/assets/about/linux.png b/assets/about/linux.png new file mode 100644 index 0000000..9f9689d Binary files /dev/null and b/assets/about/linux.png differ diff --git a/assets/about/mlp.png b/assets/about/mlp.png new file mode 100644 index 0000000..39a5dcd Binary files /dev/null and b/assets/about/mlp.png differ diff --git a/assets/about/music.png b/assets/about/music.png new file mode 100644 index 0000000..c955749 Binary files /dev/null and b/assets/about/music.png differ diff --git a/assets/about/opensource.png b/assets/about/opensource.png new file mode 100644 index 0000000..2c985ff Binary files /dev/null and b/assets/about/opensource.png differ diff --git a/assets/about/photography.png b/assets/about/photography.png new file mode 100644 index 0000000..69ef5d9 Binary files /dev/null and b/assets/about/photography.png differ diff --git a/assets/about/vector.png b/assets/about/vector.png new file mode 100644 index 0000000..92e96d4 Binary files /dev/null and b/assets/about/vector.png differ 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 -- cgit