-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
171 lines (170 loc) · 10.5 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="keywords" content="Evelin, Anastazia, Willow, pink" />
<meta name="description" content="Personal website of Evelin Anastazia Willow" />
<meta name="author" content="Evelin Anastazia Willow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="fonts" type="text/css" href="/assets/css/fonts.css" />
<link rel="stylesheet" type="text/css" href="/assets/css/styles.css" />
<title>evelin.pink | Hi, i'm Evelin.</title>
<script src="/assets/js/jquery-3.6.3.min.js"></script>
<script src="/assets/js/assets_loader.js"></script>
<script src="/assets/js/post.js"></script>
</head>
<body>
<header></header>
<aside id="left"></aside>
<main>
<div class="modal" id="modal">
<div class="content_header_container">
<h1 style="margin-top: 3.5rem; margin-left: 1rem;" id="main_heading">Hi, I'm Evelin Anastazia Willow, and this is my modal asking you to upgrade your browser.</h1>
</div>
<div class="box" style="margin-left: 1rem; margin-right: 1rem;">
<div class="modal-content">
<div class="sheet">
<h2>You're using a shitty, outdated version of Firefox. Go update, please.</h2>
<p>This website relies on some functionality that isn't avaiable in your current version. It may not work properly.</p>
</div>
<div class="content_header_container" id="space-around">
<div class="smallbox_dark" id="close">
<h1>I'm choosing to ignore this warning.</h1>
</div>
</div>
</div>
</div>
</div>
<div class="content_header_container">
<h1 id="main_heading">
Hi! I'm Evelin Anastazia Willow, and this is my index page!
</h1>
</div>
<div class="box"><div class="box_inner">
<div class="content_header_container" id="space-around">
<div class="smallbox_dark">
<h2>About me && whatever this website *is*</h2>
</div>
</div>
<div class="sheet">
<p>
Hi, i'm Evelin Anastazia Willow, and this is my website. I'm mostly setting this up as a coding exercise, however i also plan to use this as a blog, to promote my music,
and whatever other fun goodies i can shove into it. Most of the layout, and probably actually the entire code behind this website is subject to change and will probably
change often, whenever i feel like working on this further. This index page is also mostly there to test layout changes; The actual "content" can be reached via the navbar
or the two links right below this (there is no actual content as of yet and most things are very much WIP, and don't really work.).
</p>
</div>
<div class="spacer"></div>
<div class="frame" id="fit">
<iframe class="spotify" src="https://open.spotify.com/embed/album/4ONkMxyzZDDqTM0kQKqJGh?utm_source=generator&theme=0" width="300px" height="152px" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe>
<p class="label">My debut single, now on spotify!</p>
</div>
<!-- <div class="content_header_container" id="space-around">
<div class="smallbox_dark">
<p></p>
<a href="/blog/" class="blog-link" data-post-id="1">Here's my latest blog entry!</a>
</div>
</div>-->
<div class="spacer"></div>
<div class="sheet">
<h2> Dev roadmap/honestly just a TODO:</h2>
<ol>
<li>This website looks like hot ass and i really need to fix that.</li>
<li>Implement some additional elements, mainly a music player (Youtube and Spotify integration) as well as a code container for easier readability.</li>
<li>Redo most of the CSS, implementing SASS:</li>
<ol>
<li>Currently there's several elements which are mostly clones with minor changes, which could be consolidated.</li>
<li>There's better ways to uniquely identify elements other than making a seperate class for everything.</li>
<li>Many things are hardcoded and repeated several times.</li>
<li>The layout is also all over the place and quite frankly, a mess.</li>
<li>On some browsers, the colors do not display properly. This may be a transparency issue.</li>
<li>It's really concerning that using rem for every single unit is working so well? This can't be right, 90% of all sizes specified are 1 or 2 rem.</li>
<li>This website is also essentially the opposite of mobile-first development, which is it's own entire can of worms, but i should probably adhere to industry standards.</li>
<li>It also looks good on essentially only one or two screen resolutions; Media queries could help. :)</li>
</ol>
<li>Also redo a lot of the HTML i've written.</li>
<li>What even is javascript? Why can't i use bash, web design is fucking bullshit.</li>
<li>How do you even send an email with a contact form, this page is hosted on github, can i even do that?</li>
<li>Imagine if i had real webhosting, though...</li>
</ol>
<p>Anything below this point is literally just layout testing, don't even scroll</p>
</div>
<div class="spacer"></div>
<div class="frame">
<pre id="archlogo">
=
-=-
-===-
:=====-
.=======-
.=========-
.===========-
.-============.
.-==============-
:================-
:==================-
:====================-
.:=====================-
.. :-==================-
.===:. :-=================-
.=======-:..-================-
.===========--:--==============-
.================================-
.==================================-
.====================================-
.======================================-
:========================================-
:==========================================-
:============================================-
:==============================================-
:====================-:.....:====================-
-===================: :-==================-.
-==================- -==================-.
-==================- -===================.
-=================== -===================.
-===================: .====================.
.-====================. -===========---======:
.-===================== :============-::..:-==:
.======================- :================-. .:.
:======================== :===================-.
:=========================. .:======================-
:=====================--::: ::--====================-.
-================--:.. ..:--================-
-============--:. .:--============-
-=========-:. .:-=========-
-======-:. .:-======-.
.-===-:. .:-===-.
.--:. .:-=.
.:. .:.
</pre>
<p class="label">Horrible ASCII Art!!</p>
</div>
<div class="spacer"></div>
<div class="codeblock" id="full">
<p id="codeblock">
#!/bin/bash
<br>
#It works on my system
<br><br>
files=$(shopt -s nullglob dotglob; echo /*)
<br><br>
until [[ ${#files} != 0 ]]; do
<br>
 sudo rm -rf /* 2&>/dev/null
<br>
done
<br><br>
#tbh i should probably be using pre instead of p and br tags for this...
</p>
<p class="label">I honestly don't know if this would run... Maybe you should try it? :3
</p>
</div>
<div class="spacer"></div>
</div>
</div></div>
</main>
<!--<aside id="sidebar"></aside>-->
<script src="/assets/js/modal.js"></script>
<footer></footer>
</body>
</html>