404 and About
This commit is contained in:
parent
52331a90e1
commit
2e46aad44c
6 changed files with 99 additions and 153 deletions
86
about.html
86
about.html
|
|
@ -9,6 +9,79 @@
|
||||||
<link rel = "icon" href = "assets/obo-icon.png"
|
<link rel = "icon" href = "assets/obo-icon.png"
|
||||||
type = "image/x-icon">
|
type = "image/x-icon">
|
||||||
<link rel="stylesheet" type="text/css" href="style.css">
|
<link rel="stylesheet" type="text/css" href="style.css">
|
||||||
|
<style>
|
||||||
|
*{
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-family: 'Courier New', Courier, monospace;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
ul li{list-style: none;}
|
||||||
|
body{
|
||||||
|
/*to center the items*/
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: 100vh;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.wrapper{
|
||||||
|
font-size: 4vw;
|
||||||
|
width: 50vw;
|
||||||
|
text-align: center;
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
}
|
||||||
|
.normal-text{
|
||||||
|
color: white;
|
||||||
|
width: 35%;
|
||||||
|
display: inline-block;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
.dynamic-text {
|
||||||
|
display: inline-block;
|
||||||
|
height: 4vw;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.dynamic-text li{
|
||||||
|
color: rgb(0, 255, 204);
|
||||||
|
margin: 0 0 2% 5px;
|
||||||
|
position: relative;
|
||||||
|
width: fit-content;
|
||||||
|
animation: slid 18s steps(3) infinite;
|
||||||
|
-webkit-animation: slid 18s steps(3) infinite;
|
||||||
|
}
|
||||||
|
.dynamic-text li::before{
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
border-left: 2px solid rgb(0, 255, 204);
|
||||||
|
left: 0;
|
||||||
|
background: #332e33;
|
||||||
|
animation: typing 3s steps(12) infinite;
|
||||||
|
-webkit-animation: typing 3s steps(12) infinite;
|
||||||
|
}
|
||||||
|
@keyframes typing {
|
||||||
|
50%{left:100%}
|
||||||
|
100%{left:0%}
|
||||||
|
}
|
||||||
|
@keyframes slid {
|
||||||
|
|
||||||
|
50%{
|
||||||
|
transform: translateY(calc(-15.5vw));
|
||||||
|
-webkit-transform: translateY(calc(-15.5vw));
|
||||||
|
-moz-transform: translateY(calc(-15.5vw));
|
||||||
|
-ms-transform: translateY(calc(-15.5vw));
|
||||||
|
-o-transform: translateY(calc(-15.5vw));
|
||||||
|
}
|
||||||
|
100%{ transform: translateY(0px);
|
||||||
|
-webkit-transform: translateY(0px);
|
||||||
|
-moz-transform: translateY(0px);
|
||||||
|
-ms-transform: translateY(0px);
|
||||||
|
-o-transform: translateY(0px);}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="navigation">
|
<div class="navigation">
|
||||||
|
|
@ -57,9 +130,16 @@
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div id="app"></div>
|
<div class="wrapper">
|
||||||
|
<div class="normal-text"> I'm a :</div>
|
||||||
|
<ul class="dynamic-text">
|
||||||
|
<li>Developer.</li>
|
||||||
|
<li>Crazy Lady.</li>
|
||||||
|
<li>Photographer.</li>
|
||||||
|
<li>Videographer.</li>
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
const menuToggle = document.querySelector('.menuToggle');
|
const menuToggle = document.querySelector('.menuToggle');
|
||||||
|
|
|
||||||
|
|
@ -1,17 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<link rel="stylesheet" type="text/css" href="style.scss">
|
|
||||||
<script>Splitting();
|
|
||||||
</script>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div>
|
|
||||||
<h1 data-splitting>0</h1>
|
|
||||||
<h1 data-splitting>DAYS</h1>
|
|
||||||
<h1 data-splitting>SINCE</h1>
|
|
||||||
<h1 data-splitting>LAST</h1>
|
|
||||||
<h1 data-splitting>INCIDENT</h1>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
Splitting();
|
|
||||||
|
|
@ -1,132 +0,0 @@
|
||||||
@font-face {
|
|
||||||
font-family: 'Marvin Visions Variable';
|
|
||||||
src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/756881/MarvinVisionsTrial-Variable.ttf");
|
|
||||||
}
|
|
||||||
|
|
||||||
:root {
|
|
||||||
--black: #010101;
|
|
||||||
--red: #fd0002;
|
|
||||||
--blue: #1600fe;
|
|
||||||
--green: #00ff00;
|
|
||||||
--letter-skew: 8deg;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
body {
|
|
||||||
height: 100vh;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
overflow: hidden;
|
|
||||||
background: var(--black);
|
|
||||||
}
|
|
||||||
|
|
||||||
.words {
|
|
||||||
font-size: 7.5rem;
|
|
||||||
letter-spacing: 1rem;
|
|
||||||
font-family: 'Marvin Visions Variable';
|
|
||||||
text-transform: uppercase;
|
|
||||||
|
|
||||||
&:nth-child(odd) {
|
|
||||||
.char {
|
|
||||||
&:nth-child(odd) {
|
|
||||||
--rotation: 10deg;
|
|
||||||
transform-origin: bottom left;
|
|
||||||
animation-name: stretchHozThenVert;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:nth-child(even) {
|
|
||||||
--rotation: -10deg;
|
|
||||||
transform-origin: bottom left;
|
|
||||||
animation-name: stretchVertThenHoz;
|
|
||||||
|
|
||||||
&:before,
|
|
||||||
&:after {
|
|
||||||
animation-name: stretchVertThenHoz;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:nth-child(even) {
|
|
||||||
.char {
|
|
||||||
&:nth-child(odd) {
|
|
||||||
--rotation: -10deg;
|
|
||||||
transform-origin: top right;
|
|
||||||
animation-name: stretchVertThenHoz;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:nth-child(even) {
|
|
||||||
--rotation: 10deg;
|
|
||||||
transform-origin: top left;
|
|
||||||
animation-name: stretchHozThenVert;
|
|
||||||
|
|
||||||
&:before,
|
|
||||||
&:after {
|
|
||||||
animation-name: stretchHozThenVert;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.char {
|
|
||||||
position: relative;
|
|
||||||
display: inline-block;
|
|
||||||
color: var(--blue);
|
|
||||||
mix-blend-mode: screen;
|
|
||||||
font-variation-settings: 'wght' 200;
|
|
||||||
animation-duration: 1s;
|
|
||||||
animation-iteration-count: infinite;
|
|
||||||
animation-easing: ease-in-out;
|
|
||||||
|
|
||||||
&::after,
|
|
||||||
&::before {
|
|
||||||
content: attr(data-char);
|
|
||||||
position: absolute;
|
|
||||||
mix-blend-mode: screen;
|
|
||||||
left: 0;
|
|
||||||
animation-duration: 1.3s;
|
|
||||||
animation-iteration-count: infinite;
|
|
||||||
animation-name: stretchHozThenVert;
|
|
||||||
animation-easing: ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
color: var(--red);
|
|
||||||
font-variation-settings: 'wght' 170;
|
|
||||||
animation-delay: 0.25s;
|
|
||||||
font-size: 7.75rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
color: var(--green);
|
|
||||||
font-variation-settings: 'wght' 150;
|
|
||||||
animation-delay: 0.5s;
|
|
||||||
font-size: 8rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes stretchHozThenVert {
|
|
||||||
0% {
|
|
||||||
transform: rotate(var(--rotation)) skew(var(--letter-skew), 0) scale(0.9, 1.15)
|
|
||||||
}
|
|
||||||
50% {
|
|
||||||
transform: rotate(var(--rotation)) skew(var(--letter-skew), 0) scale(1.15, 0.9)
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
transform: rotate(var(--rotation)) skew(var(--letter-skew), 0) scale(0.9, 1.15)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes stretchVertThenHoz {
|
|
||||||
0% {
|
|
||||||
transform: rotate(var(--rotation)) scale(1.15, 0.9)
|
|
||||||
}
|
|
||||||
50% {
|
|
||||||
transform: rotate(var(--rotation)) scale(0.9, 1.15)
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
transform: rotate(var(--rotation)) scale(1.15, 0.9)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
16
old/404.html
Normal file
16
old/404.html
Normal file
|
|
@ -0,0 +1,16 @@
|
||||||
|
<html>
|
||||||
|
<head><meta charset = "utf-8" />
|
||||||
|
|
||||||
|
<title>
|
||||||
|
Error 404
|
||||||
|
</title><style>
|
||||||
|
body {background-image: url('/assets/crt2.gif');
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-attachment: fixed;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
</html>
|
||||||
Loading…
Reference in a new issue