akemi/noway.moe
1
0
Fork 0
Code Issues 1 Pull requests Packages Projects Releases Wiki Activity

Pages: rework main page

Browse source
This commit is contained in:
Akemi Izuko 2023-12-30 00:40:23 -07:00
parent 390d9d27f5
commit b99bd58b70
Signed by: akemi
GPG key ID: 8DE0764E1809E9FC
1 changed files with 109 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

117
src/pages/index.astro
View file

@ -7,12 +7,113 @@ import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} /> <BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
</head> </head>
<body style="display: flex" class="font-sans flex-col items-center"> <body style="display: flex" class="font-sans flex-col items-center">
<Header class="grow" title={SITE_TITLE} /> <Header class="grow" title={SITE_TITLE} />
<img width="600px" src="/akemi_silly_transparent.png" /> <main>
<Footer /> <div id="big-circle-wrapper" >
</body> <div id="big-circle"></div>
</div>
<div id="title-circle"></div>
<h1 id="name-title">
Akemi Izuko
</h1>
<p id="about">
I'm Akemi, a 4th year CS honor student at
<a href="https://www.ualberta.ca/computing-science/index.html">UAlberta</a>. I'm
usually on discord, but email is the best way to contact me.
Some of my interests include <a href="/unix">unix</a>,
<a href="/road_bike.avif">biking</a>, llamas, 日本語とアニミ... 当たり
前じゃん and you (>ω^)!
</p>
<img id="pfp" src="/akemi_silly_transparent.png" />
</main>
<Footer />
</body>
</html> </html>
<style>
main {
display: grid;
grid-template-columns: 1fr auto 20px 50%;
grid-template-rows: repeat(6, 1fr);
width: 100%;
min-height: 70vh;
overflow: hidden;
}
main a {
color: var(--accent-color);
}
#name-title {
font-family: var(--font-title);
font-size: 96px;
text-align: right;
/* Grid styles */
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 4;
align-self: center;
}
#title-circle {
border-radius: 50%;
background-color: white;
width: 200px;
height: 200px;
box-shadow: 0 40px 50px -10px rgba(0, 0, 0, 0.1);
/* Grid styles */
grid-column: 1 / 2;
grid-row: 2 / 4;
justify-self: right;
margin-right: -120px;
margin-top: -10px;
}
#about {
max-width: 520px;
font-family: var(--font-sans);
font-size: 1.2rem;
line-height: 1.8;
/* Grid styles */
grid-column-start: 2;
grid-row-start: 4;
grid-row-end: 7;
justify-self: right;
align-self: start;
}
#big-circle {
border-radius: 50%;
background-color: white;
width: 1500px;
height: 1500px;
box-shadow: 10px 60px 50px -10px rgba(0, 0, 0, 0.1);
}
#big-circle-wrapper {
width: 500px;
height: 160vh;
z-index: -1;
overflow: hidden;
position: absolute;
top: -60%;
left: 60%;
}
#pfp {
width: 600px;
/* Grid styles */
grid-column-start: 4;
grid-column-end: 5;
grid-row-start: 1;
grid-row-end: 7;
justify-self: right;
align-self: bottom;
margin-right: -15%;
}
</style>