diff --git a/Art/aogajoseph/index.html b/Art/aogajoseph/index.html
new file mode 100644
index 000000000..ac0b30c3e
--- /dev/null
+++ b/Art/aogajoseph/index.html
@@ -0,0 +1,32 @@
+
+
+
+
+
+ Document
+
+
+
+
+
+
+ - 1
+ - 2
+ - 3
+ - 4
+ - 5
+ - 6
+ - 7
+ - 8
+ - 9
+ - 10
+ - 11
+ - 12
+ Timeless
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/Art/aogajoseph/screenshot.png b/Art/aogajoseph/screenshot.png
new file mode 100644
index 000000000..7afbd2a47
Binary files /dev/null and b/Art/aogajoseph/screenshot.png differ
diff --git a/Art/aogajoseph/style.css b/Art/aogajoseph/style.css
new file mode 100644
index 000000000..437cbb707
--- /dev/null
+++ b/Art/aogajoseph/style.css
@@ -0,0 +1,249 @@
+/* styles
+
+ 1. wrapper
+ 2. numbers
+ 3. second-hand
+ 4. minute-hand
+ 5. hour-hand
+ 6. logo
+ 7. brand
+
+*/
+
+* {
+ margin: 0;
+ padding: 0;
+}
+
+/* 1. wrapper */
+.wrapper {
+ height: 100vh;
+ width: 100%;
+ background-image: linear-gradient(to right, rgb(0, 238, 255), rgb(255, 2, 255));
+ font-family: 'josefin sans', 'sans-serif';
+ float: left;
+}
+
+/* frame */
+#frame {
+ width: 280px;
+ height: 280px;
+ background: black;
+ border: 10px solid rgb(0, 225, 255);
+ border-radius: 50%;
+ margin: 200px auto;
+ position: relative;
+ box-shadow: inset 0 5px 25px rgb(0, 110, 255), 0 5px 25px black,
+ 0 5px 25px black,
+ 0 5px 30px black,
+ 0 5px 35px black,
+ 0 5px 35px black,
+ 0 5px 35px black;
+}
+
+#frame::before {
+ content: "";
+ position: absolute;
+ width: 280px;
+ height: 280px;
+ left: -18px;
+ top: -10px;
+ border: 18px solid #ccc;
+ border-radius: 50%;
+ z-index: -2;
+}
+
+#frame::after {
+ content: "";
+ width: 18px;
+ height: 18px;
+ background: rgb(145, 150, 138);
+ position: absolute;
+ border-radius: 50%;
+ left: calc(50% - 9px);
+ top: calc(50% - 9px);
+ box-shadow: 0 2px 4px rgb(27, 26, 26);
+}
+
+#frame li {
+ list-style: none;
+ position: absolute;
+}
+
+/* 2. numbers */
+.num {
+ position: absolute;
+ width: 90%;
+ height: 90%;
+ padding: 5%;
+ text-align: center;
+ font-family: 'Courier New', Courier, monospace;
+ font-weight: 800;
+}
+
+.num span {
+ display: block;
+ color: greenyellow;
+ font-size: 1.7rem;
+ text-shadow: 0 5px 18px rgb(58, 55, 55), 0 2px 3px rgb(26, 14, 14);
+}
+
+.num:nth-child(1) {
+ transform: rotate(30deg);
+}
+.num:nth-child(1) span {
+ transform: rotate(-30deg);
+}
+.num:nth-child(2) {
+ transform: rotate(60deg);
+}
+.num:nth-child(2) span {
+ transform: rotate(-60deg);
+}
+.num:nth-child(3) {
+ transform: rotate(90deg);
+}
+.num:nth-child(3) span {
+ transform: rotate(-90deg);
+}
+.num:nth-child(4) {
+ transform: rotate(120deg);
+}
+.num:nth-child(4) span {
+ transform: rotate(-120deg);
+}
+.num:nth-child(5) {
+ transform: rotate(150deg);
+}
+.num:nth-child(5) span {
+ transform: rotate(-150deg);
+}
+.num:nth-child(6) {
+ transform: rotate(180deg);
+}
+.num:nth-child(6) span {
+ transform: rotate(-180deg);
+}
+.num:nth-child(7) {
+ transform: rotate(210deg);
+}
+.num:nth-child(7) span {
+ transform: rotate(-210deg);
+}
+.num:nth-child(8) {
+ transform: rotate(240deg);
+}
+.num:nth-child(8) span {
+ transform: rotate(-240deg);
+}
+.num:nth-child(9) {
+ transform: rotate(270deg);
+}
+.num:nth-child(9) span {
+ transform: rotate(-270deg);
+}
+.num:nth-child(10) {
+ transform: rotate(300deg);
+}
+.num:nth-child(10) span {
+ transform: rotate(-300deg);
+}
+.num:nth-child(11) {
+ transform: rotate(330deg);
+}
+.num:nth-child(11) span {
+ transform: rotate(-330deg);
+}
+.num:nth-child(12) {
+ transform: rotate(360deg);
+}
+.num:nth-child(12) span {
+ transform: rotate(-360deg);
+}
+
+/* 3. second-hand */
+#second-hand {
+ position: absolute;
+ width: 45%;
+ height: 2px;
+ top: 50%;
+ left: 50%;
+ border-radius: 6px 6px 3px 3px;
+ background: #fc009b;
+ transform-origin: 0% 50%;
+ animation: second-hand 60s linear infinite;
+}
+
+@keyframes second-hand {
+ from {
+ transform: rotate(0deg);
+ }
+ to {
+ transform: rotate(360deg);
+ }
+}
+
+/* 4. minute-hand */
+#minute-hand {
+ position: absolute;
+ width: 36%;
+ height: 4px;
+ top: 50%;
+ left: 50%;
+ border-radius: 6px 6px 3px 3px;
+ background: #00d9ff;
+ transform-origin: 0% 50%;
+ animation: minute-hand 3600s linear infinite;
+}
+
+@keyframes minute-hand {
+ from {
+ transform: rotate(0deg);
+ }
+ to {
+ transform: rotate(360deg);
+ }
+}
+
+/* 5. hour-hand */
+#hour-hand {
+ position: absolute;
+ width: 4%;
+ height: 68px;
+ top: 50%;
+ left: 48%;
+ border-radius: 3px 3px 6px 6px;
+ background: rgb(123, 84, 160);
+ transform-origin: 50% 0%;
+ animation: hour-hand 43200s linear infinite;
+}
+
+@keyframes hour-hand {
+ from {
+ transform: rotate(0deg);
+ }
+ to {
+ transform: rotate(360deg);
+ }
+}
+
+/* 6. brand */
+.brand {
+ color: azure;
+ position: absolute;
+ text-transform: lowercase;
+ left: 30%;
+ top: 30%;
+ font-family: 'Courier New', Courier, monospace;
+ font-weight: 700;
+ letter-spacing: 10px;
+ font-size: x-small;
+ animation: brand 1.5s infinite;
+}
+
+@keyframes brand {
+ 0%, 100% { opacity: 1;}
+ 15%, 85% { opacity: 0.2;}
+ 30%, 70% { opacity: 0.8;}
+ 45%, 55% { opacity: 0.4;}
+}
\ No newline at end of file
diff --git a/include.js b/include.js
index 5fec8e863..8e4b68ac0 100644
--- a/include.js
+++ b/include.js
@@ -2903,6 +2903,13 @@ let cards = [
author: 'Kalliran',
githubLink: 'https://github.com/Kalliran'
},
+ {
+ artName: 'Timeless',
+ pageLink: './Art/aogajoseph/index.html',
+ imageLink: './Art/aogajoseph/screenshot.png',
+ author: 'Joseph Aoga',
+ githubLink: 'https://github.com/aogajoseph'
+ },
];
/* -------------------------------------------------------------------------- */