-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
153 lines (129 loc) · 7.81 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
<!DOCTYPE html>
<!-- Stella's Landing Site
v2024.0829.0
https://github.com/ThatStella7922/landing
Uses Font Awesome icons, Google Fonts and Twitter Twemoji.
-->
<html>
<head>
<meta charset="utf-8">
<title>Stella's Landing Site</title>
<!-- When developing locally, switch to using the local CSS.
You can do this by uncommenting the line linking to the local landing-styleshit.css
and then commenting out the link to the remote one!
-->
<link rel="stylesheet" href="//files.thatstel.la/hidden/css/landing-styleshit.css?version=202408300" />
<!--<link rel="stylesheet" href="landing-styleshit.css">-->
<link rel="shortcut icon" href="landing-assets/favicon.ico" type="image/x-icon" />
<meta name="viewport" content="width=device-width, height=device-height, viewport-fit=cover"/>
<meta name="HandheldFriendly" content="true" />
<!-- Discord embed -->
<meta property="og:title" content="Stella's Landing Site" />
<meta property="og:description" content="Another day, another dream?" />
<meta property="og:image" content="//files.thatstel.la/hidden/avatars-banners-socials/banner.png" />
<meta name="twitter:card" content="summary_large_image" />
<!-- Font Awesome -->
<script defer src="//files.thatstel.la/hidden/fontawesome/js/brands.js"></script>
<script defer src="//files.thatstel.la/hidden/fontawesome/js/solid.js"></script>
<script defer src="//files.thatstel.la/hidden/fontawesome/js/fontawesome.js"></script>
<!-- Twemoji -->
<script src="https://cdn.jsdelivr.net/npm/@twemoji/api@latest/dist/twemoji.min.js" crossorigin="anonymous"></script>
<!-- Quotes JavaScript -->
<script src="landing-assets/common.js?version=202408190"></script>
<script src="landing-assets/quotes.js?version=202406160"></script>
<script src="landing-assets/cat.js?version=202408190"></script>
<script src="landing-assets/contentview.js?version=202312280"></script>
<script src="landing-assets/ntaswidget.js?version=202408190"></script>
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="//fonts.googleapis.com/css2?family=Hind:wght@300;400;500&display=swap" rel="stylesheet">
</head>
<body>
<div id="master">
<div id="verticalcontainer">
<div id="abovelinks">
<img alt="ThatStella7922's profile picture" id="profilepicture" width="92" height="92" src="//files.thatstel.la/hidden/avatars-banners-socials/pfp.png" />
<p id="displayname" onclick="promptShowCat()">ThatStella7922</p>
</div>
<noscript>
<div id="noscript-warning">
<p>JavaScript is disabled on your browser. This site requires JavaScript for full functionality.</p>
</div>
</noscript>
<p id="backdrop-warning">Your browser doesn't support modern CSS, so some visual effects may be broken.</p>
<div id="horizontalcontainer">
<div id="navigation">
<div id="navigation-buttons" class="links">
<a class="button" href="//blog.thatstel.la">Blog</a>
<a class="button" href="//files.thatstel.la">Files</a>
<a class="button" href="https://software.thatstel.la">Software</a>
</div>
<div class="social-links">
<p id="quotep"></p>
<p class="social-links-label">More:</p>
<div id="social-link-buttons-id" class="social-link-buttons">
<p><i class="fa-solid fa-envelope"></i><br><a href="mailto:contact@thatstel.la">Email</a></p>
<p><i class="fa-brands fa-github"></i><br><a href="https://github.com/ThatStella7922">GitHub</a></p>
<p><i class="fa-brands fa-discord"></i><br><a href="https://discord.thatstel.la">Fruitycord</a></p>
<p><i class="fa-brands fa-twitter"></i><br><a href="https://twitter.com/ThatStella7922">Twitter</a></p>
<p><i class="fa-brands fa-youtube"></i><br><a href="https://youtube.com/@ThatStella7922">YouTube</a></p>
<p><a href="https://en.pronouns.page/@ThatStella7922">🏳️⚧️<br>pronouns.page</a></p>
<p><i class="fa-solid fa-heart"></i><br><a href="https://crystall1ne.dev">crystall1ne.dev</a></p>
<p><i class="fa-solid fa-dollar-sign"></i><br><a href="https://cash.app/$ThatStella7922">CashApp</a></p>
<p><i class="fa-brands fa-patreon"></i><br><a href="https://www.patreon.com/ThatStella7922">Patreon</a></p>
</div>
</div>
</div>
<div id="contentview-container">
<div id="contentview-headings">
<p id="contentview-about-heading" class="contentview-selected" onclick="selectItem('contentview-about')">About</p>
<p id="contentview-projects-heading" class="contentview-selected" onclick="selectItem('contentview-projects')">Projects</p>
</div>
<div id="contentview-items">
<div id="contentview-about-content">
<p>Hey everyone, my name is Stella. I'm a passionate technology enthusiast, working with all sorts of tech. From PHP, Python, Swift and more languages to installing Windows on Android phones, to doing amateur audio mixing, I do a bit of everything. I also enjoy working with hardware and networking, having built several PCs, designing small electronics projects of my own and hosting my own services on a home server.</p>
<p>My main goal is to help improve other people's lives, and I enjoy creating new things and meeting new people. Consider joining Fruitycord to talk to me and meet some of the great people I've met along my journey!</p>
</div>
<div id="contentview-projects-content">
<p><a href="https://software.thatstel.la/software/crossplatform-apps/battery-webhook">Battery Webhook</a> is my flagship project, allowing you to send your battery info to popular services using webhooks. It's a modern Swift+SwiftUI app built from the ground up with source available on <a href="https://github.com/ThatStella7922/battery-webhook">GitHub</a>, it supports automations, is available on SideStore and the project's GitHub Releases!</p>
<p><b>This landing page</b> is another big project of mine, having been written from the ground up with <b>pure</b> HTML, CSS and JavaScript. It's the most performant and lightweight webpage I've ever made, and retains its functionality on legacy devices. It has documentation and source available on <a href="https://github.com/ThatStella7922/landing">GitHub</a>.</p>
<p>I also often work on smaller projects, like the code-side of my <a href="https://github.com/ThatStella7922/blog">blog</a>, my Discord bot called <a href="https://github.com/ThatStella7922/astral">astral</a>, and a few other miscellaneous command-line utilities.</p>
</div>
</div>
</div>
<div id="catvideo-container">
<div id="catvideo">
<video controls loop id="catvideo-element">
<source src="" type="video/mp4"/> <!-- The src for this video is filled in JS by cat.js on the fly to not load it when not needed -->
Your browser does not support the cat video present here.
</video>
</div>
<div id="catbuttons-container" class="">
<button id="catbutton-playpause" onclick="playPauseCat()"></button>
</div>
</div>
<div id="ntaswidget-container">
<div id="ntaswidget">
<!-- The src for this iframe is filled in JS by ntaswidget.js on the fly to not load it when not needed -->
<iframe id="ntaswidget-iframe" src="" name="National Terrorism Advisory System" title="National Terrorism Advisory System" scrolling="no" frameborder="0" seamless></iframe>
</div>
</div>
</div>
</div>
</div>
<main>
</main>
<footer>
<div id="footer-sidebyside">
<p onclick="manualSetQuotesText()">ThatStella7922 - v2024.0829.0</p>
</div>
</footer>
</body>
<script>
setupInitialContentView();
setQuotesText();
checkNtasPresentAndShow();
twemoji.parse(document.body);
</script>
</html>