3/28/2020, 10:30HEADmaster

7 files changed, 849 insertions, 0 deletions

diff --git a/about/css/.htaccess b/about/css/.htaccess
new file mode 100644
index 0000000..45552cb
--- /dev/null
+++ b/about/css/.htaccess
@@ -0,0 +1 @@
+Options -Indexes
\ No newline at end of file
diff --git a/about/css/blog-slider.css b/about/css/blog-slider.css
new file mode 100644
index 0000000..995faff
--- /dev/null
+++ b/about/css/blog-slider.css
@@ -0,0 +1,16 @@
+.blog-slider {
+  /* width: 95%; */
+  position: relative;
+  max-width: auto;
+  margin: auto;
+  background: #fff;
+  -webkit-box-shadow: 0px 14px 80px rgba(34, 35, 58, 0.2);
+          box-shadow: 0px 14px 80px rgba(34, 35, 58, 0.2);
+  padding: 25px;
+  border-radius: 25px;
+  height: auto;
+  -webkit-transition: all .3s;
+  transition: all .3s;
+  /* margin-top: -15px; /*for exact positioning */
+  /* margin-top: -5%; /* for relative positioning */
+}
\ No newline at end of file
diff --git a/about/css/loader-animation.css b/about/css/loader-animation.css
new file mode 100644
index 0000000..6e3bd1b
--- /dev/null
+++ b/about/css/loader-animation.css
@@ -0,0 +1,122 @@
+/* LOADING ANIMATION */
+/* body {
+**   text-align: center;
+**   padding-top: 20%;
+**   background: #fdfdfd;
+** }
+*/
+
+.loader-wrapper {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    background: #fdfdfd;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+}
+
+.loader {
+    width: 100px;
+    height: 100px;
+    display: inline-table;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    position: relative;
+    border-spacing: 0.3em;
+}
+
+.loader row {
+    display: table-row;
+}
+
+.loader row span {
+    display: table-cell;
+    position: relative;
+    background: #1d1f20;
+    opacity: 0;
+    -webkit-animation: flicker 0.5985999999999999s ease-out infinite alternate;
+    animation: flicker 0.5985999999999999s ease-out infinite alternate;
+    /* Added standard property to fix compatbiliy issues */
+}
+
+@-webkit-keyframes flicker {
+
+    from,
+    20% {
+        opacity: 0;
+    }
+
+    100%,
+    to {
+        opacity: 1;
+    }
+}
+
+@keyframes flicker {
+
+    /* Added standard property to fix compatbiliy issues */
+    from,
+    20% {
+        opacity: 0;
+    }
+
+    100%,
+    to {
+        opacity: 1;
+    }
+}
+
+.loader row:nth-child(1) span:nth-child(1) {
+    -webkit-animation-delay: .50s;
+    animation-delay: .50s;
+}
+
+/* Added standard property to fix compatbiliy issues */
+.loader row:nth-child(1) span:nth-child(2) {
+    -webkit-animation-delay: .70s;
+    animation-delay: .70s;
+}
+
+.loader row:nth-child(1) span:nth-child(3) {
+    -webkit-animation-delay: .60s;
+    animation-delay: .60s;
+}
+
+.loader row:nth-child(2) span:nth-child(1) {
+    -webkit-animation-delay: .20s;
+    animation-delay: .20s;
+}
+
+.loader row:nth-child(2) span:nth-child(2) {
+    -webkit-animation-delay: .80s;
+    animation-delay: .80s;
+}
+
+.loader row:nth-child(2) span:nth-child(3) {
+    -webkit-animation-delay: .90s;
+    animation-delay: .90s;
+}
+
+.loader row:nth-child(3) span:nth-child(1) {
+    -webkit-animation-delay: .10s;
+    animation-delay: .10s;
+}
+
+.loader row:nth-child(3) span:nth-child(2) {
+    -webkit-animation-delay: .30s;
+    animation-delay: .30s;
+}
+
+.loader row:nth-child(3) span:nth-child(3) {
+    -webkit-animation-delay: .40s;
+    animation-delay: .40s;
+}
\ No newline at end of file
diff --git a/about/css/main.css b/about/css/main.css
new file mode 100644
index 0000000..bd80b97
--- /dev/null
+++ b/about/css/main.css
@@ -0,0 +1,32 @@
+.title {
+    text-align: none;
+}
+
+.desc {
+    text-align: center;
+}
+
+.bio {
+    font-size: 22px;
+    padding-top: 100px
+}
+
+.title2 {
+    text-align: none;
+    background-color: #fcac94;
+    -webkit-box-shadow: 0 7px 30px -10px #fcac94, 0 7px 30px -10px #fcac94;
+    box-shadow: 0 7px 30px -10px #fcac94, 0 7px 30px -10px #fcac94;
+    -webkit-transition: background-color 0.15s ease-in-out;
+    transition: background-color 0.15s ease-in-out;
+    width: 456px;
+}
+
+.disclaimer {
+    font-size: 17px;
+    font-weight: 600;
+}
+
+.important {
+    color: red;
+    font-size: 20px
+}
\ No newline at end of file
diff --git a/about/css/navigation-bar.css b/about/css/navigation-bar.css
new file mode 100644
index 0000000..9d93988
--- /dev/null
+++ b/about/css/navigation-bar.css
@@ -0,0 +1,208 @@
+/* BACKGROUND SPARKLES CSS */
+@import url("https://fonts.googleapis.com/css?family=DM+Sans:500,700&display=swap");
+
+html,
+body {
+    margin: 0 0;
+    padding: 0 0;
+    font-size: 0;
+    background-color: #fdfcf3;
+}
+
+body svg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: -1;
+}
+
+/* ORINGINAL SITE CSS */
+html {
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    -webkit-tap-highlight-color: transparent;
+}
+
+*,
+*:before,
+*:after {
+    -webkit-box-sizing: inherit;
+    box-sizing: inherit;
+}
+
+html,
+body {
+    height: 100%;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+    -ms-flex-flow: row wrap;
+    flex-flow: row wrap;
+}
+
+body {
+    font: normal 20px/1.4 'Inter', sans-serif;
+    margin: 0 1em;
+    padding: 1em 0;
+    color: #000;
+    background: none;
+}
+
+@supports (font-variation-settings: normal) {
+    body {
+        font-family: 'Inter var', sans-serif;
+    }
+}
+
+main {
+    /* margin: auto; ** This is only needed for mobile */
+    font-size: 6vh;
+    line-height: 1.2;
+    max-width: 75vh;
+}
+
+/* I was trying to figure out how to only call the <a> tags from index.html, so it wouldn't change the values for other <a> tags, and I tried everything,
+** or so I thought, and I figured out I had to do `.links a` by scrolling up and saw `.loader row span` which wasn't even the correct syntax but I removed
+** the `row` and IT WORKED! I actually got so happy lol. - 2:15 AM, 8/7/2019
+*/
+.links a {
+    color: inherit;
+    text-decoration: none;
+    background-color: #ffdc73;
+    /* hsl(200, 100%, 80% */
+    -webkit-box-shadow: 0 7px 30px -10px #ffdc73, 0 7px 30px -10px #ffdc73;
+    box-shadow: 0 7px 30px -10px #ffdc73, 0 7px 30px -10px #ffdc73;
+    -webkit-transition: background-color 0.15s ease-in-out;
+    transition: background-color 0.15s ease-in-out;
+}
+
+/* #ffdc73 box-shadow should usually be only box-shadow, but I made it two so it would be more visable.
+// Secondary box-shadow, rgba(154,160,185,0.05)
+*/
+.links a:hover,
+.links a:focus {
+    outline: none;
+    background-color: #282936;
+    color: #fff;
+    -webkit-transition: color 0.15s ease-in-out;
+    transition: color 0.15s ease-in-out;
+    -webkit-box-shadow: 0 7px 30px -10px #282936, 0 7px 30px -10px #282936;
+    box-shadow: 0 7px 30px -10px #282936, 0 7px 30px -10px #282936;
+    /* rgba(166,173,201,0.2) */
+    -webkit-transition: -webkit-box-shadow 0.15s ease-in-out;
+    transition: -webkit-box-shadow 0.15s ease-in-out;
+    transition: box-shadow 0.15s ease-in-out;
+    transition: box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
+}
+
+/* NAVIGATION MENU */
+.navigation-bar {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-flex: 1;
+    -ms-flex: 1 0 100%;
+    flex: 1 0 100%;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+}
+
+.nav {
+    overflow: hidden;
+    max-width: 100%;
+    background-color: #fff;
+    padding: 0 20px;
+    border-radius: 40px;
+    -webkit-box-shadow: 0 10px 40px rgba(159, 162, 177, 0.8);
+    box-shadow: 0 10px 40px rgba(159, 162, 177, 0.8);
+    position: absolute;
+    /* Only reason it's centered. */
+    /* Manual position adjusting
+  ** top: 0;
+  ** left: 0;
+  */
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+}
+
+.nav-item {
+    color: #83818c;
+    padding: 20px;
+    text-decoration: none;
+    -webkit-transition: .3s;
+    transition: .3s;
+    margin: 0 6px;
+    font-family: 'DM Sans', sans-serif;
+    font-weight: 500;
+    position: relative;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+}
+
+.nav-item:before {
+    content: "";
+    position: absolute;
+    bottom: -6px;
+    left: 0;
+    width: 100%;
+    height: 5px;
+    background-color: #dfe2ea;
+    border-radius: 8px 8px 0 0;
+    opacity: 0;
+    -webkit-transition: .3s;
+    transition: .3s;
+}
+
+.nav-item:not(.is-active):hover:before {
+    opacity: 1;
+    bottom: 0;
+}
+
+.nav-item:not(.is-active):hover {
+    color: #333;
+}
+
+.nav-indicator {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    height: 4px;
+    -webkit-transition: .4s;
+    transition: .4s;
+    height: 5px;
+    z-index: 1;
+    border-radius: 8px 8px 0 0;
+}
+
+@media (max-width: 580px) {
+    .nav {
+        overflow: auto;
+    }
+}
diff --git a/about/index.html b/about/index.html
new file mode 100644
index 0000000..4c06b09
--- /dev/null
+++ b/about/index.html
@@ -0,0 +1,375 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>s1nical - About</title>
+    <link rel="icon" type="image/jpg" href="/favicon.jpg" sizes="128x128">
+    <!-- Site metadata -->
+    <meta name="description" content="About">
+    <meta property="og:description" content="About">
+    <meta property="og:title" content="s1nical - About">
+    <meta property="twitter:card" content="summary">
+    <meta property="twitter:site" content="@9inny">
+    <meta property="og:image" content="">
+    <meta property="og:url" content="https://cyne.cf/about">
+    <link rel="apple-touch-icon" sizes="128x128" href="/favicon.jpg">
+    <link rel="icon" type="image/jpg" href="/favicon.jpg" sizes="128x128">
+    <link rel="canonical" href="https://cyne.cf/about">
+    <link rel="author" href="humans.txt" />
+    <!-- Schema.org Stuff -->
+    <script type="application/ld+json">
+        {
+        "name": "s1nical",
+        "alternateName": "s1n",
+        "description": "About",
+        "headline": "About",
+        "url": "https://cyne.cf/about",
+        "image": "",
+        "sameAs": [
+        "https://twitter.com/9inny",
+        "https://github.com/8cy",
+        "https://www.reddit.com/user/s1nical/"
+        ],
+        "publisher": {
+        "@type": "Organization",
+        "logo": {
+        "@type": "ImageObject",
+        "url": ""
+        }
+        },
+        "@type": "WebSite",
+        "@context": "http://schema.org"
+        }
+    </script>
+    <!-- External Libraries -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/trianglify/0.3.1/trianglify.min.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
+    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
+    <!-- CSS Links -->
+    <link rel="stylesheet" href="/about/css/main.css">
+    <link rel="stylesheet" href="/about/css/navigation-bar.css">
+    <link rel="stylesheet" href="/about/css/loader-animation.css">
+    <link rel="stylesheet" href="/about/css/blog-slider.css">
+    <style>
+
+        html {
+            overflow-x: hidden;
+        }
+    </style>
+    <!-- Invisable Scripts -->
+    <script src="/js/loader-animation.js"></script>
+    <script src="/js/redirect-to-mobile.js"></script>
+</head>
+<body>
+    <!-- Visable Scripts -->
+    <script>
+        // Background only renders based on the original browser window size when
+        // starting to load the site. Due to rendering issues, I don't think I
+        // can do it other wise.
+
+        ///////////////
+        // SCRIPT #1 //
+        ///////////////
+
+        // If light mode detected, in reality, if nothing is detected lmao
+        // Dark mode feature was removed lol
+        // Set up base pattern
+        var pattern = Trianglify({
+            height: window.innerHeight * 1.63, // White: #fdfbfb, Salmon: #cc3300
+            width: window.innerWidth,
+            // Christmas Colours:
+            x_colors: ['#040404', '#f9f9f9', '#fffff4', '#fbf7f5', '#d55454'], // Cappuccino: ['#854442', '#3c2f2f', '#fff4e6', '#be9b7b', '#4b3832']
+            y_colors: ['#f9f1f1', '#f9f9f9', '#fffff4', '#fbf7f5', '#f9f1f1'], // Random colour generator: "#"+((1<<24)*Math.random()|0).toString(16)
+            //
+            // Normal Colours:
+            // x_colors: ['#040404', '#f9f9f9', '#fffff4', '#fbf7f5', '#d55454'],
+            // y_colors: ['#f9f1f1', '#f9f9f9', '#fffff4', '#fbf7f5', '#f9f1f1'],
+            //
+            // Christmas Colours:
+            // x_colors: ['#0F8A5F', '#f9f9f9', '#fffff4', '#fbf7f5', '#CC231E'],
+            // y_colors: ['#f9f1f1', '#f9f9f9', '#fffff4', '#fbf7f5', '#f9f1f1'],
+            //
+            variance: 10, // Gives it more style
+            seed: Number.parseInt(Math.floor(Math.random() * 100)), // TODO: Live seed transitioning.
+            cell_size: 160 // Cell size
+        });
+
+        // REMOVED bc looked ugly
+        // If dark mode detected
+        // if (matchMedia('(prefers-color-scheme: dark)').matches) {
+        //     var pattern = Trianglify({
+        //         height: window.innerHeight, // White: #fdfbfb, Salmon: #cc3300
+        //         width: window.innerWidth,
+        //         x_colors: ['#040404', '#111111', '#111111', '#111111', '#d55454'], // Cappuccino: ['#854442', '#3c2f2f', '#fff4e6', '#be9b7b', '#4b3832']
+        //         y_colors: ['#f9f1f1', '#111111', '#111111', '#111111', '#f9f1f1'], // Random colour generator: "#"+((1<<24)*Math.random()|0).toString(16)
+        //         variance: 10, // Gives it more style
+        //         seed: Number.parseInt(Math.floor(Math.random() * 100)), // TODO: Live seed transitioning.
+        //         cell_size: 160 // Cell size
+        //     });
+        // }
+
+        // // Canvas
+        // document.body.appendChild(pattern.canvas())
+
+        // SVG
+        document.body.appendChild(pattern.svg())
+
+
+
+        // // PNG
+        // var png = document.createElement('img')
+        // png.src = pattern.png()
+        // document.body.appendChild(png)
+
+        ///////////////
+        // SCRIPT #2 //
+        ///////////////
+
+        $('.title-wrapper').css('width', window.innerWidth);
+        $('.title-wrapper').css('height', window.innerHeight);
+
+
+        var time = 10,
+            $paths = $('body').find('svg').find('path'),
+            pathCollection = $paths.get(),
+            count = $paths.length;
+
+        // // Log variable "count"
+        // console.log(count);
+
+        pathCollection.sort(function () {
+            return Math.random() * 10 > 5 ? 1 : -1;
+        });
+
+        function showText() {
+            var title = $('h1'),
+                subtitle = $('h2');
+
+            title.removeClass('hidden');
+            setTimeout(function () {
+                subtitle.removeClass('hidden');
+            }, 500);
+        }
+
+        setTimeout(function () {
+            $.each(pathCollection, function (i, el) {
+                var $path = $(this);
+                setTimeout(function () {
+
+                    $path.css('opacity', '1');
+                }, time)
+                time += 10;
+
+                if (i + 1 === count) {
+                    setTimeout(function () {
+                        showText();
+                    }, 2000);
+                }
+
+            });
+        }, 2000);
+    </script>
+
+    <!-- Navigation Bar -->
+    <div class="navigation-bar">
+        <nav class="nav">
+            <a href="/home/" class="nav-item" active-color="orange">Home</a> <!-- Had `is-active` after it but removed it due to not highlighting. -->
+            <a href="#" class="nav-item" active-color="green">About</a>
+            <a href="https://cyne.cf/status" class="nav-item" active-color="red">Status</a>
+            <span class="nav-indicator"></span>
+        </nav>
+    </div>
+
+    <div class="bio">
+        <div class="links">
+            <div class="blog-slider" style="height: 1380px">
+                <p class="title"><a>Technical Skills.</a></p> <!-- This was not a very effective way of accomplishing this but idk rn. -->
+
+                <p class="desc" style="width: 1000px; height: 0px">
+                    <ul style="font-size: 15px">
+                        <li>JavaScript</li>
+                        <li>HTML5/ CSS3</li>
+                        <li>PHP7</li>
+                        <li>MySQL</li>
+                        <li>PostgreSQL</li>
+                        <li>MongoDB</li>
+                        <li>SCSS</li>
+                        <li>EmberJS</li>
+                        <li>ReactJS</li>
+                        <li>Redux</li>
+                        <li>AngularJS</li>
+                        <li>GraphQL</li>
+                        <li>Apollo</li>
+                        <li>Git</li>
+                        <li>SVN</li>
+                        <li>BackboneJS</li>
+                        <li>jQuery</li>
+                        <li>jQuery Mobile</li>
+                        <li>D3JS</li>
+                        <li>Echarts</li>
+                        <li>Webpack</li>
+                        <li>Python</li>
+                        <li>NodeJS</li>
+                        <li>ExpressJS</li>
+                        <li>Redis</li>
+                        <li>XSLT</li>
+                        <li>JSON</li>
+                        <li>C++13/17</li>
+                        <li>Lua</li>
+                    </ul>
+
+                    <style>
+                        .experience {
+                            position: relative;
+                            top: -683px;
+                            left: 20%
+                        }
+                    </style>
+                    <div class="experience">
+                        <p class="title"><a>Experience.</a></p>
+
+                        <p class="title2" style="font-size: 17px; width: 94px">UI Engineer.</p>
+                        <p style="font-size: 15px; color: #fcac94;"> Jul 2017 - Present</p>
+                        <p style="font-size: 15px">Data Visualization</p>
+                        <ul>
+                            <li style="font-size: 15px">
+                                Collaborating with product designers, product managers, and marketing analytics, developed for financial<br> managers new contextual and configurable chart widgets in HTML/CSS, SCSS, Ember.js, React/Redux<br> and Echarts
+                            </li>
+                            <li style="font-size: 15px">
+                                Maintained old chart widgets Ember Chart, an open source project developed in Ember and D3 by Addepar.<br> Ozymandias, a front-end framework agnostic data                                          visualization toolkit.<br>
+                            </li>
+                            <li style="font-size: 15px">
+                                Led Architecting front-end framework agnostic data visualization toolkit. Responsible for planning, scoping and<br> assigning tasks.
+                            </li>
+                        </ul>
+
+                        <p style="font-size: 15px">Counter Strike: Global Offensive SDK</p>
+                        <ul>
+                            <li style="font-size: 15px">
+                                CS:GO trainer/ cheat softwares development.
+                            </li>
+                        </ul>
+                        <br>
+                        
+                        <!-- END UI ENG -->
+
+                        <p class="title2" style="font-size: 17px; width: 224px">Front End Software Engineer.</p>
+                        <p style="font-size: 15px; color: #fcac94;"> Sep 2016 - Jul 2017</p>
+                        <p style="font-size: 15px">Responsive-ness</p>
+                        <ul>
+                            <li style="font-size: 15px">
+                                 Developed a fully responsive website with accessible interfaces using Atypon Literatum platform, Java Spring<br> framework, XSLT, LESS, Jquery, HandlebarsJS and related tools. 
+                            </li>
+                            <li style="font-size: 15px">
+                                Served as a key front end team member collaborating with cross-functional teams to turn product requirements<br>
+and mockups into high-quality frontend code.
+                            </li>
+                        </ul>
+
+                        <p style="font-size: 15px">Atypon Literatum for mobile</p>
+                        <ul>
+                            <li style="font-size: 15px">
+                            Collaborated with back-end developers and product managers to develop and maintain Literatum for mobile<br>
+platform using BackboneJS, HTML5/CSS3, Jquery Mobile and related tools.
+                            </li>
+                            <li style="font-size: 15px">
+                                Served as a key member of front end team responsible for developing new functionalities with best mobile<br>
+    development strategies.
+                            </li>
+                            <li style="font-size: 15px">
+                                Fixed bugs on existing sites/features.
+                            </li>
+                            <li style="font-size: 15px">
+                                Developed accessible interfaces for mobile devices.
+                            </li>
+                        </ul>
+                        <br>
+
+                        <p class="title2" style="font-size: 17px; width: 81px">Front End.</p>
+                        <p style="font-size: 15px; color: #fcac94;"> Jun 2016 - Jul 2017</p>
+                        <p style="font-size: 15px">CSS framework, UI libraries using React, SCSS</p>
+                        <ul>
+                            <li style="font-size: 15px">
+                                Architected and developed responsive, modular, and scalable CSS framework and React UI library.
+                            </li>
+                            <li style="font-size: 15px">
+                                Strategized and collaborated with design.
+                            </li>
+                            <li style="font-size: 15px">
+                                Tested and deployed client/ server and related components.
+                            </li>
+                            <li style="font-size: 15px">
+                                Developed accessible interfaces for mobile devices
+                            </li>
+                        </ul>
+
+                        <p style="font-size: 15px">Team management</p>
+                        <ul>
+                            <li style="font-size: 15px">
+                                Trained and mentored junior front end developers in UI development methodologies and best practices.
+                            </li>
+                            <li style="font-size: 15px">
+                                Served as a core group member in defining and prioritizing technology investments, ensuring the alignment of<br>
+process, technology and business objectives.
+                            </li>
+                        </ul>
+                        <br>
+                    </div>
+                </p>
+
+                <!--
+                <p class="desc">
+                    I'm a fullstack developer. Some of my favourite languages to work with are PHP, JavaScript and C++.<br>
+                    Some of my favourite applications I have for such languages are small little PHP tools, C++ game development<br>
+                    projects using OpenGL and Discord bots using the <a href="https://discord.js.org/#/">discord.js</a> framework. You can check out most of my creations<br>
+                    on my <a href="https://github.com/8cy">GitHub</a>. On there, I have lots of my smaller C++ projects to take examples from, some Discord bot</a><br>
+                    examples, and even some public archive repositories of some special software's such as my archive of various <a href="https://github.com/8cy/net">Botnets</a>.<br>
+                    Keep a lookout, because I'm planning on posting even more tutorial like things soon.<br>
+                    <!-- Unused Line -->
+                <!--
+                </p>
+                <br>
+                <p class="title2">Well what kind of applications do you develop?</p>
+
+                <p class="desc">
+                    Some things I like to test my knowledge with are usually moding instances. Albeit, my Java programming skills aren't as<br>
+                    sharp as I'd hope for them to be, I like to spend some of my free time developing Minecraft mods using the Forge framework.<br>
+                    I also like to write server plugins for popular Minecraft server platforms like <a href="https://dev.bukkit.org/">Bukkit</a>, they aren't the most useful<br>
+                    things, (Minecraft mods and plugins) however they are fun to write and it helps me further my Java knowledge.<br>
+                    <br>
+                    I also like to occasionally write CS:GO cheats, I've fiddled around with writing my own CS:GO skin changers, full<br>
+                    cheat modules that include such things as aimbots, anti-aim and more.<br>
+                    <br>
+                    <div class="disclaimer">
+                        <span class="important">*</span> <span>Use at your own risk, I am not to be held accountable if you get VAC banned.</span>
+                    </div>
+                </p>
+                -->
+            </div>
+        </div>
+    </div>
+
+    <!-- Loading Animation -->
+    <div class="loader-wrapper">
+        <div class="loader">
+            <row>
+                <span></span>
+                <span></span>
+                <span></span>
+            </row>
+            <row>
+                <span></span>
+                <span></span>
+                <span></span>
+            </row>
+            <row>
+                <span></span>
+                <span></span>
+                <span></span>
+            </row>
+        </div>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/about/legacy-I1vRDCX6gfVVC2Cg7syJ.html b/about/legacy-I1vRDCX6gfVVC2Cg7syJ.html
new file mode 100644
index 0000000..1c41498
--- /dev/null
+++ b/about/legacy-I1vRDCX6gfVVC2Cg7syJ.html
@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>s1nical - About</title>
+    <link rel="icon" type="image/jpg" href="/favicon.jpg" sizes="128x128">
+    <!-- External Links -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/trianglify/0.3.1/trianglify.min.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
+    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
+    <!-- CSS Links -->
+    <link rel="stylesheet" href="/about/css/main.css">
+    <link rel="stylesheet" href="/about/css/navigation-bar.css">
+    <link rel="stylesheet" href="/about/css/loader-animation.css">
+    <link rel="stylesheet" href="/about/css/blog-slider.css">
+    <!-- Invisable Scripts -->
+    <script src="/js/loader-animation.js"></script>
+    <script src="/js/redirect-to-mobile.js"></script>
+</head>
+<body>
+    <!-- Visable Scripts -->
+    <script src="/js/background-sparkles.js"></script>
+
+    <!-- Navigation Bar -->
+    <div class="navigation-bar">
+        <nav class="nav">
+            <a href="/home/" class="nav-item" active-color="orange">Home</a>
+            <!-- Had `is-active` after it but removed it due to not highlighting. -->
+            <a href="#" class="nav-item" active-color="green">About</a> <!-- About -->
+            <a href="https://p.s1n.pw/" class="nav-item" active-color="blue">Portfolio</a> <!-- Testimonials -->
+            <!--<a href="http://cyne.cf/status" class="nav-item" active-color="red">Status</a> <!-- Blog -->
+            <!--<a href="/cars/" class="nav-item" active-color="rebeccapurple">Cars</a> <!-- Contact -->
+            <!--<a href="https://nani.s1n.pw" class="nav-item" active-color="rebeccapurple">Nani?!</a>-->
+            <span class="nav-indicator"></span>
+        </nav>
+    </div>
+
+    <div class="bio">
+        <div class="links">
+            <div class="blog-slider">
+                <p class="title">Hi! I'm <a href="mailto:[email protected]">s1nical!</a></p> <!-- This was not a very effective way of accomplishing this but idk rn. -->
+
+                <p class="desc">
+                    I'm a fullstack developer. Some of my favourite languages to work with are PHP, JavaScript and C++.<br>
+                    Some of my favourite applications I have for such languages are small little PHP tools, C++ game development<br>
+                    projects using OpenGL and Discord bots using the <a href="https://discord.js.org/#/">discord.js</a> framework. You can check out most of my creations<br>
+                    on my <a href="https://github.com/8cy">GitHub</a>. On there, I have lots of my smaller C++ projects to take examples from, some Discord bot</a><br>
+                    examples, and even some public archive repositories of some special software's such as my archive of various <a href="https://github.com/8cy/net">Botnets</a>.<br>
+                    Keep a lookout, because I'm planning on posting even more tutorial like things soon.<br>
+                    <!-- Unused Line -->
+                </p>
+                <br>
+                <p class="title2">Well what kind of applications do you develop?</p>
+
+                <p class="desc">
+                    Some things I like to test my knowledge with are usually moding instances. Albeit, my Java programming skills aren't as<br>
+                    sharp as I'd hope for them to be, I like to spend some of my free time developing Minecraft mods using the Forge framework.<br>
+                    I also like to write server plugins for popular Minecraft server platforms like <a href="https://dev.bukkit.org/">Bukkit</a>, they aren't the most useful<br>
+                    things, (Minecraft mods and plugins) however they are fun to write and it helps me further my Java knowledge.<br>
+                    <br>
+                    I also like to occasionally write CS:GO cheats, I've fiddled around with writing my own CS:GO skin changers, full<br>
+                    cheat modules that include such things as aimbots, anti-aim and more.<br>
+                    <br>
+                    <div class="disclaimer">
+                        <span class="important">*</span> <span>Use at your own risk, I am not to be held accountable if you get VAC banned.</span>
+                    </div>
+                </p>
+            </div>
+        </div>
+    </div>
+
+    <!-- Loading Animation -->
+    <div class="loader-wrapper">
+        <div class="loader">
+            <row>
+                <span></span>
+                <span></span>
+                <span></span>
+            </row>
+            <row>
+                <span></span>
+                <span></span>
+                <span></span>
+            </row>
+            <row>
+                <span></span>
+                <span></span>
+                <span></span>
+            </row>
+        </div>
+    </div>
+</body>
+</html>
\ No newline at end of file