emilia
/
personal-website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

uhhh yeah (Initial commit) 

I forgot to use git until just now. oops.
This commit is contained in:
Emilia Allison 2022-01-21 18:46:15 -05:00
commit 5598698f26
Signed by: emilia
GPG Key ID: 71D938CBB74EF7EA
16 changed files with 612 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
about.html Normal file
View File

@ -0,0 +1,47 @@
<!DOCTYPE html>
<html>
<head>
<title>Emilia Allison</title>
<link rel="stylesheet" href="css/about.css">
</head>
<body>
<div class="overlay">
</div>
<div class="outerdiv contentholder">
<div class="contentholder__topfiller"></div>
<div class="content">
<h1>
About
</h1>
<h2>isn't that the page title?</h2>
<p>
I'm not super keen on saying that much about myself on the <mark class="internet">internet</mark>.
Anyway, here's some information about myself, posted on the aforementioned <mark class="internet">internet</mark>.
</p>
<p>
I'm studying mathematics (with a focus on computation), and will hopefully be graduating in 2023.
</p>
</div>
<div class="content">
<h1>Opinions</h1>
<h2>A 100% exhaustive list, of course</h2>
<li>
the modern internet is bloated
<ol>
<li>i will contribute to this bloat</li>
</ol>
</li>
<li>open source software is very cool</li>
<li>
linux distros don't matter
<ol>
<li>btw i use</li>
</ol>
</li>
<li>social media is kinda yucky</li>
<li>the military industrial complex</li>
<li>my taste in music is objectively just ok</li>
</div>
</div>
</body>
</html>

108
css/about.css Normal file
View File

@ -0,0 +1,108 @@
body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
align-content: center;
width: 100%;
height: 100%;
padding: 0 0 0 0;
margin: 0 0 0 0;
overflow: hidden;
background-color: black;
}
.overlay {
width: 100%;
height: 100vh;
position: fixed;
opacity: 0.03;
z-index: 1;
background-image: url("/img/noise.gif");
}
.outerdiv {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
align-content: center;
width: 90%;
height: 100vh;
background-color: #091519;
flex-direction: column;
}
.contentholder {
justify-content: flex-start;
}
.contentholder div {
width: 30em;
margin: 1% 0;
}
.contentholder .contentholder__topfiller {
height: 5%;
background-color: transparent;
}
.content {
z-index: 100;
}
h1 {
color: #F5A9B8;
font-family: serif;
font-size: xx-large;
margin: 5px 5px;
text-align: center;
}
h2 {
color: #FFFFFF;
font-family: serif;
font-size: medium;
margin-top: -8px;
text-align: center;
}
p, li {
color: #FFFFFF;
font-family: sans-serif;
font-size: large;
text-align: left;
margin: 5px 0px;
}
ol {
margin: 0px 0px;
}
li {
list-style-type: none;
}
li:before {
content: "- ";
}
@keyframes gradient-bg {
from {
background-position: 0%;
}
to {
background-position: 100%;
}
}
mark.rainbow, mark.internet {
background-image: repeating-linear-gradient(to left, red, violet, indigo, blue, green, yellow, orange, red, violet);
background-size: 1000% 1000%;
color: transparent;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: gradient-bg 4s linear infinite;
}
mark.internet {
font-weight: bold;
}
/*# sourceMappingURL=about.css.map */

1
css/about.css.map Normal file
View File

@ -0,0 +1 @@
{"version":3,"sourceRoot":"","sources":["../sass/global.sass","../sass/anim.sass"],"names":[],"mappings":"AAYA;EANE;EACA;EACA;EACA;EACA;EAIA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EAEA;EAEA;EACA;EACA;;;AAEF;EAzBE;EACA;EACA;EACA;EACA;EAuBA;EACA;EACA,kBAjCS;EAkCT;;;AAEF;EACE;;AACA;EACE;EACA;;AAEF;EACE;EACA;;;AAEJ;EACE;;;AAGF;EACE,OArDc;EAsDd;EACA;EACA;EACA;;;AAEF;EACE,OA3DgB;EA4DhB;EACA;EACA;EACA;;;AAGF;EACE,OAnEgB;EAoEhB;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;EAEE;;AACA;EACE;;;AC7EJ;EACE;IACE;;EACF;IACE;;;AAMJ;EACE,kBAdiB;EAejB;EACA;EACA;EACA;EARA;;;AAYF;EAEE","file":"about.css"}

22
css/anim.css Normal file
View File

@ -0,0 +1,22 @@
@keyframes gradient-bg {
from {
background-position: 0%;
}
to {
background-position: 100%;
}
}
mark.rainbow, mark.internet {
background-image: repeating-linear-gradient(to left, red, violet, indigo, blue, green, yellow, orange, red, violet);
background-size: 1000% 1000%;
color: transparent;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: gradient-bg 4s linear infinite;
}
mark.internet {
font-weight: bold;
}
/*# sourceMappingURL=anim.css.map */

1
css/anim.css.map Normal file
View File

@ -0,0 +1 @@
{"version":3,"sourceRoot":"","sources":["../sass/anim.sass"],"names":[],"mappings":"AAIA;EACE;IACE;;EACF;IACE;;;AAMJ;EACE,kBAdiB;EAejB;EACA;EACA;EACA;EARA;;;AAYF;EAEE","file":"anim.css"}

87
css/global.css Normal file
View File

@ -0,0 +1,87 @@
body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
align-content: center;
width: 100%;
height: 100%;
padding: 0 0 0 0;
margin: 0 0 0 0;
overflow: hidden;
background-color: black;
}
.overlay {
width: 100%;
height: 100vh;
position: fixed;
opacity: 0.03;
z-index: 1;
background-image: url("/img/noise.gif");
}
.outerdiv {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
align-content: center;
width: 90%;
height: 100vh;
background-color: #091519;
flex-direction: column;
}
.contentholder {
justify-content: flex-start;
}
.contentholder div {
width: 30em;
margin: 1% 0;
}
.contentholder .contentholder__topfiller {
height: 5%;
background-color: transparent;
}
.content {
z-index: 100;
}
h1 {
color: #F5A9B8;
font-family: serif;
font-size: xx-large;
margin: 5px 5px;
text-align: center;
}
h2 {
color: #FFFFFF;
font-family: serif;
font-size: medium;
margin-top: -8px;
text-align: center;
}
p, li {
color: #FFFFFF;
font-family: sans-serif;
font-size: large;
text-align: left;
margin: 5px 0px;
}
ol {
margin: 0px 0px;
}
li {
list-style-type: none;
}
li:before {
content: "- ";
}
/*# sourceMappingURL=global.css.map */

1
css/global.css.map Normal file
View File

@ -0,0 +1 @@
{"version":3,"sourceRoot":"","sources":["../sass/global.sass"],"names":[],"mappings":"AAYA;EANE;EACA;EACA;EACA;EACA;EAIA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EAEA;EAEA;EACA;EACA;;;AAEF;EAzBE;EACA;EACA;EACA;EACA;EAuBA;EACA;EACA,kBAjCS;EAkCT;;;AAEF;EACE;;AACA;EACE;EACA;;AAEF;EACE;EACA;;;AAEJ;EACE;;;AAGF;EACE,OArDc;EAsDd;EACA;EACA;EACA;;;AAEF;EACE,OA3DgB;EA4DhB;EACA;EACA;EACA;;;AAGF;EACE,OAnEgB;EAoEhB;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;EAEE;;AACA;EACE","file":"global.css"}

145
css/index.css Normal file
View File

@ -0,0 +1,145 @@
body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
align-content: center;
width: 100%;
height: 100%;
padding: 0 0 0 0;
margin: 0 0 0 0;
overflow: hidden;
background-color: black;
}
.overlay {
width: 100%;
height: 100vh;
position: fixed;
opacity: 0.03;
z-index: 1;
background-image: url("/img/noise.gif");
}
.outerdiv {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
align-content: center;
width: 90%;
height: 100vh;
background-color: #091519;
flex-direction: column;
}
.contentholder {
justify-content: flex-start;
}
.contentholder div {
width: 30em;
margin: 1% 0;
}
.contentholder .contentholder__topfiller {
height: 5%;
background-color: transparent;
}
.content {
z-index: 100;
}
h1 {
color: #F5A9B8;
font-family: serif;
font-size: xx-large;
margin: 5px 5px;
text-align: center;
}
h2 {
color: #FFFFFF;
font-family: serif;
font-size: medium;
margin-top: -8px;
text-align: center;
}
p, li {
color: #FFFFFF;
font-family: sans-serif;
font-size: large;
text-align: left;
margin: 5px 0px;
}
ol {
margin: 0px 0px;
}
li {
list-style-type: none;
}
li:before {
content: "- ";
}
@keyframes gradient-bg {
from {
background-position: 0%;
}
to {
background-position: 100%;
}
}
mark.rainbow, mark.internet {
background-image: repeating-linear-gradient(to left, red, violet, indigo, blue, green, yellow, orange, red, violet);
background-size: 1000% 1000%;
color: transparent;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: gradient-bg 4s linear infinite;
}
mark.internet {
font-weight: bold;
}
.name {
margin-top: -10vh;
z-index: 100;
}
.name__subcontent {
text-align: left;
}
.name__subcontent a {
font-size: small;
display: none;
position: absolute;
margin-left: 5px;
margin-top: 5px;
}
.links {
width: 40%;
height: 10%;
position: absolute;
bottom: 0;
z-index: 99;
display: flex;
justify-content: center;
align-items: center;
}
.links .links__sub {
height: 6vh;
width: 15%;
margin: 3%;
display: table-cell;
text-align: center;
vertical-align: middle;
font-size: 6vh;
text-decoration: none;
}
/*# sourceMappingURL=index.css.map */

1
css/index.css.map Normal file
View File

@ -0,0 +1 @@
{"version":3,"sourceRoot":"","sources":["../sass/global.sass","../sass/anim.sass","../sass/index.sass"],"names":[],"mappings":"AAYA;EANE;EACA;EACA;EACA;EACA;EAIA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EAEA;EAEA;EACA;EACA;;;AAEF;EAzBE;EACA;EACA;EACA;EACA;EAuBA;EACA;EACA,kBAjCS;EAkCT;;;AAEF;EACE;;AACA;EACE;EACA;;AAEF;EACE;EACA;;;AAEJ;EACE;;;AAGF;EACE,OArDc;EAsDd;EACA;EACA;EACA;;;AAEF;EACE,OA3DgB;EA4DhB;EACA;EACA;EACA;;;AAGF;EACE,OAnEgB;EAoEhB;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;EAEE;;AACA;EACE;;;AC7EJ;EACE;IACE;;EACF;IACE;;;AAMJ;EACE,kBAdiB;EAejB;EACA;EACA;EACA;EARA;;;AAYF;EAEE;;;ACtBF;EACE;EAEA;;;AAEF;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;;;AAGJ;EAEE;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA","file":"index.css"}

BIN
img/noise.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 MiB

38
index.html Normal file
View File

@ -0,0 +1,38 @@
<!DOCTYPE html>
<html>
<head>
<title>Emilia Allison</title>
<link rel="stylesheet" href="css/index.css">
<script src="js/index.js" defer></script>
</head>
<body>
<div class="overlay">
</div>
<div class="outerdiv">
<div class="name">
<h1 class="name__header">Emilia</h1>
<!--<p class="name__subcontent">she/her</p>-->
<p class="name__subcontent">mathematics enjoyer</p>
<p class="name__subcontent" id="pgp_p">pgp:
<a href="https://keyserver.ubuntu.com/pks/lookup?search=0x8cbc050e7bbb8779eccd42074b33e52e3bd25455&fingerprint=on&op=index" id="pgp_a">
8CBC 050E 7BBB 8779 ECCD 4207 4B33 E52E 3BD2 5455
</a></p>
<p class="name__subcontent generated">bottom text</p>
</div>
<div class="links">
<a class="links__sub" title="about" href="about.html">
&#128196
</a>
<a class="links__sub" id="moonlink" title="cool stuff">
&#127772
</a>
<a class="links__sub" title="git provider" href="https://github.com/em-ilia">
&#128187
</a>
<a class="links__sub" title="i love email" href="mailto:contact@emiliaallison.com">
&#128224
</a>
</div>
</div>
</body>
</html>

9
js/index.js Normal file
View File

@ -0,0 +1,9 @@
const pgp_p = document.getElementById('pgp_p')
const pgp_a = document.getElementById('pgp_a')
pgp_p.onmouseover = function() {pgp_a.style.display = "inline";}
pgp_p.onmouseout = function() {pgp_a.style.display = "none";}
const moon = document.getElementById('moonlink');
console.log(moon);
moon.onmouseover = function() {moon.innerHTML = "&#127771"}
moon.onmouseout = function() {moon.innerHTML = "&#127772"}

2
sass/about.sass Normal file
View File

@ -0,0 +1,2 @@
@import 'global'
@import 'anim'

26
sass/anim.sass Normal file
View File

@ -0,0 +1,26 @@
// GRADIENTS (you might need them!)
$rainbow-gradient: repeating-linear-gradient(to left, red, violet, indigo, blue, green, yellow, orange, red, violet)
// ANIMATIONS (love to see them)
@keyframes gradient-bg
from
background-position: 0%
to
background-position: 100%
@mixin rainbow-text()
animation: gradient-bg 4s linear infinite
// MARKS
mark.rainbow
background-image: $rainbow-gradient
background-size: 1000% 1000%
color: transparent
-webkit-background-clip: text
-webkit-text-fill-color: transparent
@include rainbow-text()
// ALIASES
mark.internet
@extend .rainbow
font-weight: bold

82
sass/global.sass Normal file
View File

@ -0,0 +1,82 @@
$primary-color: #F5A9B8
$secondary-color: #FFFFFF
$outer-bg: #091519
$inner-bg: #112932
@mixin div-center()
display: flex
justify-content: center
align-items: center
flex-direction: column
align-content: center
body
@include div-center()
width: 100%
height: 100%
padding: 0 0 0 0
margin: 0 0 0 0
overflow: hidden
background-color: black
.overlay
width: 100%
height: 100vh
position: fixed
opacity: 0.03
z-index: 1
background-image: url('/img/noise.gif')
.outerdiv
@include div-center()
width: 90%
height: 100vh
background-color: $outer-bg
flex-direction: column
.contentholder
justify-content: flex-start
div
width: 30em
margin: 1% 0
.contentholder__topfiller
height: 5%
background-color: transparent
.content
z-index: 100
h1
color: $primary-color
font-family: serif
font-size: xx-large
margin: 5px 5px
text-align: center
h2
color: $secondary-color
font-family: serif
font-size: medium
margin-top: -8px
text-align: center
p
color: $secondary-color
font-family: sans-serif
font-size: large
text-align: left
margin: 5px 0px
ol
margin: 0px 0px
li
@extend p
list-style-type: none
&:before
content: "- "

42
sass/index.sass Normal file
View File

@ -0,0 +1,42 @@
@import 'global'
@import 'anim'
.name
margin-top: -10vh
z-index: 100
.name__subcontent
text-align: left
a
font-size: small
display: none
position: absolute
margin-left: 5px
margin-top: 5px
.links
//background-color: rgba(255,0,0,.2)
width: 40%
height: 10%
position: absolute
bottom: 0
z-index: 99
display: flex
justify-content: center
align-items: center
.links__sub
height: 6vh
width: 15%
margin: 3%
display: table-cell
text-align: center
vertical-align: middle
font-size: 6vh
text-decoration: none