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"
|
||||
type = "image/x-icon">
|
||||
<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>
|
||||
<body>
|
||||
<div class="navigation">
|
||||
|
|
@ -57,9 +130,16 @@
|
|||
</li>
|
||||
</ul>
|
||||
</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>
|
||||
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