diff options
| -rw-r--r-- | about/css/loader-animation.css | 121 | ||||
| -rw-r--r-- | about/css/main.css | 12 | ||||
| -rw-r--r-- | about/css/navigation-bar.css | 208 | ||||
| -rw-r--r-- | about/index.html | 84 | ||||
| -rw-r--r-- | index.html | 4 | ||||
| -rw-r--r-- | js/app.js | 77 | ||||
| -rw-r--r-- | js/background-sparkles.js | 72 | ||||
| -rw-r--r-- | js/loader-animation.js | 6 |
8 files changed, 507 insertions, 77 deletions
diff --git a/about/css/loader-animation.css b/about/css/loader-animation.css new file mode 100644 index 0000000..ab09bc7 --- /dev/null +++ b/about/css/loader-animation.css @@ -0,0 +1,121 @@ +/* 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..0d2f978 --- /dev/null +++ b/about/css/main.css @@ -0,0 +1,12 @@ +.title { + text-align: none; +} + +.desc { + text-align: center; +} + +.bio { + font-size: 22px; + padding-top: 100px +}
\ 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..90c45a9 --- /dev/null +++ b/about/index.html @@ -0,0 +1,84 @@ +<!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> + <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> + <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"> + <script src="/js/loader-animation.js"></script> +</head> +<body> + <script src="/js/background-sparkles.js"></script> + + <!-- Navigation Bar --> + <div class="navigation-bar"> + <nav class="nav"> + <a href="/" 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="/dino/" class="nav-item" active-color="blue">Dino</a> <!-- Testimonials --> + <!--<a href="/doge" class="nav-item" active-color="red">Doge</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> + + <!-- 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> + + <div class="bio"> + <div class="links"> + <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 from Portland. 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 PHP backend data-bases, 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 C++ development projects to take examples from, some Discord bot</a><br> + examples, and even some public archive repositories of some special softwares 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="title">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 usefull<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> + *Use at your own risk, I am not to be held accountable if you get VAC banned. + </p> + </div> + </div> +</body> +</html>
\ No newline at end of file @@ -23,6 +23,7 @@ <link rel="canonical" href="https://s1n.pw/">
<link rel="author" href="humans.txt" />
<script src="/js/hide-context-menu.js"></script>
+ <script src="/js/loader-animation.js"></script>
<script type="application/ld+json">
{
"name": "s1nical",
@@ -60,12 +61,13 @@ </head>
<body>
<script src="/js/app.js"></script>
+ <script src="/js/background-sparkles.js"></script>
<!-- Navigation Bar -->
<div class="navigation-bar">
<nav class="nav">
<a href="#" class="nav-item" active-color="orange">Home</a> <!-- Had `is-active` after it but removed it due to not highlighting. -->
- <a href="/404.html" class="nav-item" active-color="green">About</a> <!-- About -->
+ <a href="/about/" class="nav-item" active-color="green">About</a> <!-- About -->
<!--<a href="/dino/" class="nav-item" active-color="blue">Dino</a> <!-- Testimonials -->
<!--<a href="/doge" class="nav-item" active-color="red">Doge</a> <!-- Blog -->
<!--<a href="/cars/" class="nav-item" active-color="rebeccapurple">Cars</a> <!-- Contact -->
@@ -1,8 +1,6 @@ -// LOADER ANIMATION
$(window).on("load", function () {
- $(".loader-wrapper").fadeOut("slow");
-
console.log("UP, UP, DOWN, DOWN, LEFT, RIGHT, LEFT, RIGHT, B, A")
+
})
/*
@@ -18,79 +16,6 @@ if( screen.width <= 480 ) { location.href = '/mobile';
}
-// BACKGROUND SPARKLES
-// SCRIPT #1
-
-// Set up base pattern
-var pattern = Trianglify({
- height: window.innerHeight, // White: #fdfbfb, Salmon: #cc3300
- width: window.innerWidth,
- 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)
- variance: 10,
- seed: Number.parseInt(Math.floor(Math.random() * 100)), // TODO: Live seed transitioning.
- cell_size: 160
-});
-
-// // 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);
-
/* Honestly I have NO idea what this is but it was in the original site source code so I kept it :)
**(async () => {
** if (navigator.webdriver || document.visibilityState === 'prerender' || !location.hostname) {
diff --git a/js/background-sparkles.js b/js/background-sparkles.js new file mode 100644 index 0000000..16cfb4e --- /dev/null +++ b/js/background-sparkles.js @@ -0,0 +1,72 @@ +// BACKGROUND SPARKLES +// SCRIPT #1 + +// Set up base pattern +var pattern = Trianglify({ + height: window.innerHeight, // White: #fdfbfb, Salmon: #cc3300 + width: window.innerWidth, + 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) + variance: 10, + seed: Number.parseInt(Math.floor(Math.random() * 100)), // TODO: Live seed transitioning. + cell_size: 160 +}); + +// // 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);
\ No newline at end of file diff --git a/js/loader-animation.js b/js/loader-animation.js new file mode 100644 index 0000000..81e6d5e --- /dev/null +++ b/js/loader-animation.js @@ -0,0 +1,6 @@ +// LOADER ANIMATION +$(window).on("load", function () { + $(".loader-wrapper").fadeOut("slow"); + + +})
\ No newline at end of file |