-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
146 lines (140 loc) · 15 KB
/
Copy pathindex.html
File metadata and controls
146 lines (140 loc) · 15 KB
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
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="/src/style.css" rel="stylesheet">
<title>NotQuiteLoona's Haven</title>
</head>
<body class=" text-text min-h-screen">
<div id="app">
<div class="flex flex-col gap-4">
<div id="mobile-warning"></div>
<div id="intro" class="flex flex-row gap-4">
<div class="flex-1">
<h1>Hello there! 👋🏿</h1>
<hr/>
<p>
<br/>I'm NotQuiteLoona<sup class="hover:scale-102 transition-transform duration-200"><a class="reverse" href="https://google.com">she/her</a></sup>, and I like programming.<br/><br/>
I mostly use C#. It's my first language and I already program in it for three years straight.<br/><br/>
Sometimes I also like C++ or C though, or even TypeScript.
</p>
</div>
<div id="chart-container" class="bg-crust rounded-2xl p-4 flex-shrink-0" style="padding: 1rem">
<p id="chart-title">My languages</p>
<canvas id="chart"></canvas>
</div>
</div>
<div class="h-2 bg-base rounded-2xl"></div>
<div class="flex flex-row gap-4">
<div class="flex-1">
<h1>My projects</h1>
<hr style="margin-bottom: 1rem"/> <!-- not sure why I need this margin to make it look -->
<p>
Not a lot of whatever I do live long.<br/><br/>
Mostly I'm just learning new framework<br/>
and dropping it as soon as I'm fluent in it,<br/>
being too bored to continue development.<br/><br/>
Something still lived to the time<br/>it'll be in the condition for me to release it.<br/><br/>
From those, two things deserve attention.
</p>
</div>
<div class="flex flex-row gap-4 p-4">
<div class="bg-crust rounded-2xl flex-1 content-center items-center text-center" style="padding: 4rem; align-content: center; align-items: center">
<img src="/format-currency.svg" alt="test" class="size-4" style="fill: var(--color-text); width: 15rem; height: 15rem; margin: auto; display: block">
<h1 class="card" style="text-align: center">Currencies</h1>
<p class="text-center" style="text-align: center">
Advanced currency<br/>
converter for KRunner.<br/><br/>
</p>
<a href="https://github.com/NotQuiteLoona/Currencies/" target="_blank"
class="inline-block box-content bg-mauve rounded-full text-2xl font-inter font-light hover:scale-105 hover:bg-opacity-90 transition-all"
style="color: var(--color-mantle); padding: 0.5rem; width: 100%; font-weight: 300; transition: scale 0.3s ease-in-out" >
Visit ➜
</a>
</div>
<div class="flex flex-row gap-4 p-4">
<div class="bg-crust rounded-2xl flex-1 content-center items-center text-center" style="padding: 4rem; align-content: center; align-items: center">
<img src="/coffee-cup.svg" alt="test" class="size-4" style="fill: var(--color-text); width: 11.25rem; height: 11.25rem; margin: auto; display: block">
<h1 class="card" style="text-align: center; margin-top: 3.75rem">MochaTime</h1>
<p class="text-center" style="text-align: center">
Incredibly fast Pomodoro<br/>
timer written in C.<br/><br/>
</p>
<a href="https://github.com/NotQuiteLoona/MochaTime/" target="_blank"
class="inline-block box-content bg-mauve rounded-full text-2xl font-inter hover:scale-105 hover:bg-opacity-90 transition-all"
style="color: var(--color-mantle); padding: 0.5rem; width: 100%; font-weight: 300; transition: scale 0.3s ease-in-out" >
Visit ➜
</a>
</div>
</div>
</div>
</div>
<div class="h-2 bg-base rounded-2xl"></div>
<h2>Contacts</h2>
<hr/>
<div class="bg-crust flex flex-row gap-4 rounded-2xl w-full p-4" style="padding: 1rem;">
<a class="flex-1 bg-mantle rounded-2xl p-4 hover:scale-102 transition-transform duration-200 flex flex-col items-center justify-center link-card" href="https://github.com/NotQuiteLoona">
<svg class="w-16 h-16 mb-2" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#cba6f7">
<path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="#cba6f7" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M14.3333 19V17.137C14.3583 16.8275 14.3154 16.5163 14.2073 16.2242C14.0993 15.9321 13.9286 15.6657 13.7067 15.4428C15.8 15.2156 18 14.4431 18 10.8989C17.9998 9.99256 17.6418 9.12101 17 8.46461C17.3039 7.67171 17.2824 6.79528 16.94 6.01739C16.94 6.01739 16.1533 5.7902 14.3333 6.97811C12.8053 6.57488 11.1947 6.57488 9.66666 6.97811C7.84666 5.7902 7.05999 6.01739 7.05999 6.01739C6.71757 6.79528 6.69609 7.67171 6.99999 8.46461C6.35341 9.12588 5.99501 10.0053 5.99999 10.9183C5.99999 14.4366 8.19999 15.2091 10.2933 15.4622C10.074 15.6829 9.90483 15.9461 9.79686 16.2347C9.68889 16.5232 9.64453 16.8306 9.66666 17.137V19" stroke="#cba6f7" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M9.66667 17.7018C7.66667 18.3335 6 17.7018 5 15.7544" stroke="#cba6f7" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
<p class="text-center">GitHub</p>
</a>
<a class="flex-1 bg-mantle rounded-2xl p-4 hover:scale-102 transition-transform duration-200 flex flex-col items-center justify-center link-card" href="https://blahaj.zone/@NotQuiteLoona">
<svg class="w-16 h-16 mb-2" viewBox="0 0 24 24" stroke-width="1.5" fill="none" xmlns="http://www.w3.org/2000/svg" color="#cba6f7">
<path d="M7 13.5C7 13.5 7 10.7574 7 9C7 5.99998 12 6 12 9C12 10.1716 12 12 12 12" stroke="#cba6f7" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M17 13.5C17 13.5 17 10.7574 17 9C17 5.99998 12 6 12 9C12 10.1716 12 12 12 12" stroke="#cba6f7" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M7.99993 17C15.5 18 20.9999 17 20.9999 13L21 9C21.0003 3.5 17.0003 2.5 15 2.5H9C5.99989 2.5 2.93261 3.5 3.13687 9C3.21079 10.987 3.17311 13.3851 3.5 16C4.50007 24 14 21.5 15.5 21V19.5C15.5 19.5 7.5 21 7.99993 17Z" stroke="#cba6f7" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
<p class="text-center">Mastodon</p>
</a>
<a class="flex-1 bg-mantle rounded-2xl p-4 hover:scale-102 transition-transform duration-200 flex flex-col items-center justify-center link-card" href="https://bsky.app/profile/notquiteloona.femboy.rocks">
<svg class="w-16 h-16 mb-2" viewBox="0 0 600 530" xmlns="http://www.w3.org/2000/svg">
<path d="m135.72 44.03c66.496 49.921 138.02 151.14 164.28 205.46 26.262-54.316 97.782-155.54 164.28-205.46 47.98-36.021 125.72-63.892 125.72 24.795 0 17.712-10.155 148.79-16.111 170.07-20.703 73.984-96.144 92.854-163.25 81.433 117.3 19.964 147.14 86.092 82.697 152.22-122.39 125.59-175.91-31.511-189.63-71.766-2.514-7.3797-3.6904-10.832-3.7077-7.8964-0.0174-2.9357-1.1937 0.51669-3.7077 7.8964-13.714 40.255-67.233 197.36-189.63 71.766-64.444-66.128-34.605-132.26 82.697-152.22-67.108 11.421-142.55-7.4491-163.25-81.433-5.9562-21.282-16.111-152.36-16.111-170.07 0-88.687 77.742-60.816 125.72-24.795z" fill="#cba6f7"/>
</svg>
<p class="text-center">Bluesky</p>
</a>
<a class="flex-1 bg-mantle rounded-2xl p-4 hover:scale-102 transition-transform duration-200 flex flex-col items-center justify-center link-card" href="https://matrix.to/#/@notquiteloona:4d2.org">
<svg class="w-16 h-16 mb-2" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<path d="M 30,2.0000001 V 30 h -1 -2 v 2 h 5 V -3.3333334e-8 L 27,0 v 2 z" fill="#cba6f7"/>
<path d="M 9.9515939,10.594002 V 12.138 h 0.043994 c 0.3845141,-0.563728 0.8932271,-1.031728 1.4869981,-1.368 0.580003,-0.322998 1.244999,-0.485 1.993002,-0.485 0.72,0 1.376999,0.139993 1.971998,0.42 0.595,0.279004 1.047001,0.771001 1.355002,1.477001 0.338003,-0.500001 0.795999,-0.941 1.376999,-1.323001 0.579999,-0.382998 1.265998,-0.574 2.059998,-0.574 0.602003,0 1.160002,0.074 1.674002,0.220006 0.514,0.148006 0.953998,0.382998 1.321999,0.706998 0.36601,0.322999 0.653001,0.746 0.859,1.268002 0.205001,0.521998 0.307994,1.15 0.307994,1.887001 v 7.632997 h -3.127 v -6.463997 c 0,-0.383002 -0.01512,-0.743002 -0.04399,-1.082003 -0.02079,-0.3072 -0.103219,-0.607113 -0.242003,-0.881998 -0.133153,-0.25081 -0.335962,-0.457777 -0.584001,-0.596002 -0.257008,-0.146003 -0.605998,-0.220006 -1.046997,-0.220006 -0.440002,0 -0.796003,0.085 -1.068,0.253002 -0.272013,0.170003 -0.485001,0.390002 -0.639001,0.662003 -0.159119,0.287282 -0.263585,0.601602 -0.307994,0.926997 -0.05197,0.346923 -0.07801,0.697217 -0.07801,1.048002 v 6.353999 h -3.128005 v -6.398 c 0,-0.338003 -0.0072,-0.673001 -0.02116,-1.004001 -0.01134,-0.313663 -0.07487,-0.623229 -0.187994,-0.915999 -0.107943,-0.276623 -0.300435,-0.512126 -0.550001,-0.673001 -0.25799,-0.168 -0.636,-0.253002 -1.134999,-0.253002 -0.198123,0.0083 -0.394383,0.04195 -0.584002,0.100006 -0.258368,0.07446 -0.498455,0.201827 -0.704999,0.373985 -0.227981,0.183987 -0.421999,0.449 -0.583997,0.794003 -0.161008,0.345978 -0.242003,0.797998 -0.242003,1.356998 v 6.618999 H 6.99942 V 10.590001 Z" fill="#cba6f7"/>
<path d="M 2,2.0000001 V 30 h 3 v 2 H 0 V 9.2650922e-8 L 5,0 v 2 z" fill="#cba6f7"/>
</svg>
<p class="text-center">Matrix</p>
</a>
<a class="flex-1 bg-mantle rounded-2xl p-4 hover:scale-102 transition-transform duration-200 flex flex-col items-center justify-center link-card" href="https://t.me/notquiteloona">
<svg class="w-16 h-16 mb-2" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#cba6f7"><path d="M18 8L5 12.5L9.5 14M18 8L9.5 14M18 8L14 18.5L9.5 14" stroke="#cba6f7" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="#cba6f7" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>
<p class="text-center">Telegram</p>
</a>
<a class="flex-1 bg-mantle rounded-2xl p-4 hover:scale-102 transition-transform duration-200 flex flex-col items-center justify-center link-card" href="https://steamcommunity.com/id/notquiteloona">
<svg class="w-16 h-16 mb-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 65 65">
<path fill="#cba6f7" d="M1.305 41.202C5.259 54.386 17.488 64 31.959 64c17.673 0 32-14.327 32-32s-14.327-32-32-32C15.001 0 1.124 13.193.028 29.874c2.074 3.477 2.879 5.628 1.275 11.328z"/>
<path fill="#1e2030" d="M30.31 23.985l.003.158-7.83 11.375c-1.268-.058-2.54.165-3.748.662a8.14 8.14 0 0 0-1.498.8L.042 29.893s-.398 6.546 1.26 11.424l12.156 5.016c.6 2.728 2.48 5.12 5.242 6.27a8.88 8.88 0 0 0 11.603-4.782 8.89 8.89 0 0 0 .684-3.656L42.18 36.16l.275.005c6.705 0 12.155-5.466 12.155-12.18s-5.44-12.16-12.155-12.174c-6.702 0-12.155 5.46-12.155 12.174zm-1.88 23.05c-1.454 3.5-5.466 5.147-8.953 3.694a6.84 6.84 0 0 1-3.524-3.362l3.957 1.64a5.04 5.04 0 0 0 6.591-2.719 5.05 5.05 0 0 0-2.715-6.601l-4.1-1.695c1.578-.6 3.372-.62 5.05.077 1.7.703 3 2.027 3.696 3.72s.692 3.56-.01 5.246M42.466 32.1a8.12 8.12 0 0 1-8.098-8.113 8.12 8.12 0 0 1 8.098-8.111 8.12 8.12 0 0 1 8.1 8.111 8.12 8.12 0 0 1-8.1 8.113m-6.068-8.126a6.09 6.09 0 0 1 6.08-6.095c3.355 0 6.084 2.73 6.084 6.095a6.09 6.09 0 0 1-6.084 6.093 6.09 6.09 0 0 1-6.081-6.093z"/>
</svg>
<p class="text-center">Steam</p>
</a>
<a class="flex-1 bg-mantle rounded-2xl p-4 hover:scale-102 transition-transform duration-200 flex flex-col items-center justify-center link-card" href="mailto:notquiteloona@hotmail.com">
<svg class="w-16 h-16 mb-2" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#cba6f7"><path d="M7 9L12 12.5L17 9" stroke="#cba6f7" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M2 17V7C2 5.89543 2.89543 5 4 5H20C21.1046 5 22 5.89543 22 7V17C22 18.1046 21.1046 19 20 19H4C2.89543 19 2 18.1046 2 17Z" stroke="#cba6f7" stroke-width="1.5"></path></svg>
<p class="text-center">E-Mail</p>
</a>
</div>
<hr/>
<p>
I'm mostly active in <b>Telegram</b>, and sometimes <b>Matrix</b>.<br/>
I almost never visit my <b>Steam</b> page, and I'm mostly read-only in <b>Mastodon</b> and <b>Bluesky</b>, but I visit them often.
</p>
<div class="h-2 bg-base rounded-2xl" style="margin-left: -1rem;"></div>
<div class="bg-crust" style="margin: -1rem; margin-right: -1rem; margin-bottom: -1rem; padding: calc(var(--spacing) * 3); /* why for the God's sake I can't use it in Tailwind? */">
<p class="text-xs" style="font-size: 1.2rem">
By the way, I'm not a professional web developer. I'm not even a hobbyist web developer! This website was made by me in three days without any prior skills in web development at all.<br/>
If you found any issues and is willing to help, you could report them <a href="https://github.com/NotQuiteLoona/Website">here</a>!
</p>
<p style="font-size: 1rem;">
Icons by <a href="https://iconoir.com/">Iconoir</a>. Matrix icon is the favicon of <a href="https://matrix.org">Matrix website</a>. Steam icon is from <a href="https://commons.wikimedia.org/wiki/File:Steam_icon_logo.svg">Wikimedia</a>.<br/>
This site and its GitHub repository is licensed under the <a href="https://oql.avris.it/license?c=Dina%20Sakharova%7Chttps%3A%2F%2Ffemboy.rocks">Opionated Queer License v1.1</a>.
</p>
</div>
</div>
<script type="module" src="/src/main.ts"></script>
</div>
</body>
</html>