ColormaticStudios/Colormatic-Website
5
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 6 Wiki Activity

Zakarya page: Revamp and overhaul

Browse Source
This commit is contained in:
Zakarya
2025-03-18 20:42:55 -07:00
parent 679cdc078f
commit a651520669
2 changed files with 151 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

185
src/routes/zakarya/+page.svelte
View File

@ -4,40 +4,59 @@
<main>
<img class="banner" src="/img/zakarya-banner.png" alt="Zakarya Banner" />
<span class="name-title">Zakarya</span>
<div class="hero panel">
<h1>Links:</h1>
<ul class="linktree">
<li>
<a
href="https://mstdn.party/@zakarya"
target="_blank"
rel="noopener noreferrer">Mastodon</a
>
</li>
<li>
<a
href="https://ko-fi.com/zakarya"
target="_blank"
rel="noopener noreferrer">Ko-fi</a
>
</li>
<li>
<a
href="https://www.youtube.com/@czakarya"
target="_blank"
rel="noopener noreferrer">Youtube</a
>
</li>
<li>
<a
href="https://github.com/CZakarya"
target="_blank"
rel="noopener noreferrer">GitHub</a
>
</li>
<!--<li><a href="https://www.reddit.com/user/CZakarya/" target="_blank" rel="noopener noreferrer">Reddit</a></li>-->
</ul>
<div class="hero panel profile">
<div class="nameplate">
<img
src="/img/zakarya-icon.png"
class="zakarya-icon"
alt="Zakarya Icon"
/>
<span class="name-title">Zakarya</span>
</div>
<p>
I am a software and game developer, I run Colormatic and Colormatic
Studios, and I primarily study computer science, psychology, and
linguistics.
<br />
I have an intrinsic urge to create, and that's what Colormatic is all about.
My works include world building, music, videos, 3D modeling, video games, websites,
programs, and more.
</p>
<div class="linktree-container">
<ul class="linktree">
<li>
<a
href="https://mstdn.party/@zakarya"
target="_blank"
rel="noopener noreferrer">Mastodon</a
>
</li>
<li>
<a
href="https://ko-fi.com/zakarya"
target="_blank"
rel="noopener noreferrer">Ko-fi</a
>
</li>
<li>
<a
href="https://www.youtube.com/@czakarya"
target="_blank"
rel="noopener noreferrer">Youtube</a
>
</li>
<li>
<a
href="https://github.com/CZakarya"
target="_blank"
rel="noopener noreferrer">GitHub</a
>
</li>
<!--<li><a href="https://www.reddit.com/user/CZakarya/" target="_blank" rel="noopener noreferrer">Reddit</a></li>-->
</ul>
</div>
</div>
<div class="hero panel">
@ -66,3 +85,101 @@
</main>
<spacer></spacer>
<style lang="scss">
@use "../../style/global.scss";
main img.banner {
display: block;
width: 70%;
margin: 32px auto 32px auto;
border: solid 1px #00000033;
border-radius: 16px;
box-shadow: 1px 1px 8px #00000033;
}
main div.profile {
display: flex;
flex-wrap: wrap;
align-items: center;
}
main div.profile div.nameplate {
flex-grow: 1;
display: flex;
flex-direction: column;
}
main div.profile div.nameplate img.zakarya-icon {
width: 100px;
border-radius: 16px;
margin: 8px auto;
display: block;
}
main div.profile div.nameplate span.name-title {
font-size: 200%;
}
main div.profile p {
font-size: 120%;
max-width: 50%;
padding: 16px;
margin: 12px;
height: fit-content;
text-align: left;
/* text-align: justify;
text-justify: auto; */
border-radius: 16px;
border: solid 1px;
border-color: #383c3f33; // Same as text color but with alpha
}
main div.profile div.linktree-container {
flex-grow: 1;
}
main div.profile div.linktree-container ul.linktree {
width: 100%;
}
@media screen and (max-width: global.$mobile-width) {
main img.banner {
width: 95%;
border-radius: 12px;
margin: 24px auto;
}
main div.profile p {
max-width: unset;
}
main div.profile div.linktree-container ul.linktree {
width: 60%;
}
main div.profile div.nameplate {
flex-direction: row;
align-items: end;
justify-content: center;
}
main div.profile div.nameplate img.zakarya-icon {
height: 1.25em;
width: auto;
font-size: 170%;
margin: 0px 12px;
border-radius: 10px;
}
main div.profile div.nameplate span.name-title {
font-size: 170%;
}
}
@media (prefers-color-scheme: dark) {
main div.profile p {
border-color: #ffffff55;
}
}
</style>