Archive/clean-cuts
1
0
Fork 0
mirror of https://github.com/BlossomiShymae/clean-cuts.git synced 2025-12-06 10:10:47 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

Update about page

Browse Source
This commit is contained in:
Blossomi Shymae
2024-10-12 21:46:06 -05:00
parent 588c0e62ff
commit ade5ad944f
1 changed files with 46 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
pages/about.vue
View File

@@ -1,9 +1,22 @@
<template> <template>
<div> <div class="container d-flex flex-column gap-4">
<div class="row mb-4" data-aos="fade-down" data-aos-duration="1000"> <div class="d-flex gap-4 o-wrap justify-content-center">
<div class="d-flex align-items-center flex-column"> <div class="d-flex justify-content-center align-items-center gap-3" style="min-width: 250px;"
<div class="col-md-6"> data-aos="zoom-out"
<Card> data-aos-duration="1000">
<div class="ratio ratio-4x3 position-relative">
<LLazyImg img-class="object-fit-cover rounded" src="/clean-cuts/img/avatar.png"/>
<div class="position-absolute z-1 d-flex flex-column justify-content-end">
<div class="d-inline-flex flex-column align-items-end bg-dark-gradient w-100 p-2">
<div class="d-inline-flex w-100 align-items-center justify-content-between">
<NuxtLink class="text-decoration-none d-inline-block text-light m-0" to="https://blossomishymae.github.io"><h5 class="text-light mb-0">Blossomi Shymae</h5></NuxtLink>
<NuxtLink class="text-decoration-none d-inline-block text-light m-0" to="https://github.com/BlossomiShymae"><span><MaterialIcon name="github" :size="32" /> </span></NuxtLink>
</div>
</div>
</div>
</div>
</div>
<Card data-aos="fade-left" data-aos-duration="1000">
<h1 class="display-4">About <TheTitle /> </h1> <h1 class="display-4">About <TheTitle /> </h1>
<p class="lead">The <TheTitle /> project was started after experiencing stumbling blocks <p class="lead">The <TheTitle /> project was started after experiencing stumbling blocks
with a shelved project. with a shelved project.
@@ -13,36 +26,27 @@
</p> </p>
</Card> </Card>
</div> </div>
</div> <Card data-aos="fade-right" data-aos-duration="1000">
</div>
<div class="row">
<div class="col-md-6 d-flex justify-content-center" data-aos="fade-right" data-aos-duration="1000">
<div style="width: 250px !important;" class="d-flex flex-column justify-content-center align-items-center rounded">
<img class="img-fluid rounded" src="/img/avatar.png"/>
<Card>
<div class="d-flex gap-2">
<NuxtLink class="text-decoration-none d-inline-block text-light m-0" to="https://blossomishymae.github.io"><h5 class="text-light mb-0">Blossomi Shymae</h5></NuxtLink>
<NuxtLink class="text-decoration-none d-inline-block text-light m-0" to="https://github.com/BlossomiShymae"><span><MaterialIcon name="github" :size="20" /> </span></NuxtLink>
</div>
<h5 class="fw-bold m-0 mb-2">Shy elf girl</h5>
<p>She likes to chat with her friends and do random programming projects, such as this one.
</p>
</Card>
</div>
</div>
<div class="col-md-6 d-flex flex-column justify-content-around" data-aos="fade-left" data-aos-duration="1000" >
<Card>
<h3 class="fw-bold d-inline-flex align-items-center"><span class="me-2"><MaterialIcon name="cog" :size=32></MaterialIcon></span>Technology stack</h3> <h3 class="fw-bold d-inline-flex align-items-center"><span class="me-2"><MaterialIcon name="cog" :size=32></MaterialIcon></span>Technology stack</h3>
<p>This website uses Nuxt.js, the meta-framework of universal applications.</p> <ul>
<p>Other libraries used include AOS (Animate on Scroll), Bootstrap, and Material Design icons.</p> <li>Nuxt 3, the meta universal application framework</li>
<li>AOS, for animations</li>
<li>Bootstrap, for heavy CSS theming</li>
<li>Anime.js via nuxt-anime plugin, for home page</li>
<li>LDRS, for loading indicators</li>
</ul>
</Card> </Card>
<Card> <Card style="height: fit-content;" data-aos="fade-left" data-aos-duration="1000">
<h3 class="fw-bold d-inline-flex align-items-center"><span class="me-2"><MaterialIcon name="mail" :size=32></MaterialIcon></span>Contact</h3> <h3 class="fw-bold d-inline-flex align-items-center"><span class="me-2"><MaterialIcon name="mail" :size=32></MaterialIcon></span>Contact</h3>
<p><a href="https://discord.gg/chEvEX5J4E" class="text-decoration-none text-light">Blossomi Shymae can be reached via her Discord server.</a></p> <p><a href="https://discord.gg/chEvEX5J4E" class="text-decoration-none text-light">Blossomi Shymae can be reached via her Discord server.</a></p>
</Card> </Card>
</div> </div>
</div>
</div>
</template> </template>
<style>
@media (max-width: 1200px) {
.o-wrap {
flex-wrap: wrap;
}
}
</style>