Compare commits

..

3 commits

Author SHA1 Message Date
Akemi Izuko b99bd58b70
Pages: rework main page 2023-12-30 00:40:23 -07:00
Akemi Izuko 390d9d27f5
Page: update about 2023-12-30 00:39:49 -07:00
Akemi Izuko 88033edd24
Header: update icon 2023-12-30 00:39:19 -07:00
3 changed files with 188 additions and 80 deletions

View file

@ -6,29 +6,9 @@ import { SITE_TITLE } from '../consts';
<header style="width: 100%" class="font-sans sticky top-0 md:static bg-white underline-offset-4 z-40"> <header style="width: 100%" class="font-sans sticky top-0 md:static bg-white underline-offset-4 z-40">
<nav> <nav>
<div class="flex items-center space-x-8"> <div class="flex items-center space-x-8">
<a href="https://git.mami2.moe/akemi/noway.moe" target="_blank"> <HeaderLink href="/"><img src="/akemi_silly_transparent.png" /></HeaderLink>
<span class="sr-only">Forgejo</span>
<svg class="forgejo-logo" viewBox="0 0 212 212" aria-hidden="true" width="32" height="32">
<style>
svg.forgejo-logo path{stroke-width: 25}
svg.forgejo-logo circle{stroke-width: 15}
svg.forgejo-logo .light{fill: none; stroke: #aaa;}
svg.forgejo-logo .dark{fill: none; stroke: #000;}
svg.forgejo-logo:hover .light{stroke: var(--accent-color);}
</style>
<g transform="translate(6,6)">
<path class="light" d="M58 168 v-98 a50 50 0 0 1 50-50 h20" />
<path class="dark" d="M58 168 v-30 a50 50 0 0 1 50-50 h20" />
<circle class="light" cx="142" cy="20" r="18" />
<circle class="dark" cx="142" cy="88" r="18" />
<circle class="dark" cx="58" cy="180" r="18" />
</g>
</svg>
</a>
<HeaderLink href="/">Home</HeaderLink>
<HeaderLink href="/blog">Blog</HeaderLink> <HeaderLink href="/blog">Blog</HeaderLink>
<HeaderLink href="/unix">Unix</HeaderLink> <HeaderLink href="/unix">Unix</HeaderLink>
<HeaderLink href="/about">About</HeaderLink>
</div> </div>
<div class="fun-quote" style="margin: 0"> <div class="fun-quote" style="margin: 0">
<span style="font-family: var(--font-title);" class="text-2xl">ReLUwU activated</span> <span style="font-family: var(--font-title);" class="text-2xl">ReLUwU activated</span>
@ -71,4 +51,7 @@ import { SITE_TITLE } from '../consts';
header nav div:last-child { header nav div:last-child {
justify-content: flex-end; justify-content: flex-end;
} }
header nav img {
height: 48px;
}
</style> </style>

View file

@ -8,6 +8,30 @@ import Layout from '../layouts/BlogPost.astro';
pubDate={new Date('December 25 2023')} pubDate={new Date('December 25 2023')}
heroImage="https://cdn.discordapp.com/attachments/436012664003624970/1174809061221482506/Walpurgis.no.Yoru.full.543319.jpg?ex=6568f133&is=65567c33&hm=2e1cc082483d163dd0f2b994b27b79dd1509cf7a51eb68a51322178bf1ca4347&" heroImage="https://cdn.discordapp.com/attachments/436012664003624970/1174809061221482506/Walpurgis.no.Yoru.full.543319.jpg?ex=6568f133&is=65567c33&hm=2e1cc082483d163dd0f2b994b27b79dd1509cf7a51eb68a51322178bf1ca4347&"
> >
<p>
I'm Akemi, a 4th year CS honor student at
[UAlberta](https://www.ualberta.ca/computing-science/index.html). I'm
usually on discord, but email is the best way to contact me.
</p>
<p>
Some of my interests include <a href="/unix">unix</a>,
<a href="/road_bike.avif">biking</a>, llamas, 日本語とアニミ... 当たり
前じゃん and you (>ω^)
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p> <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Vitae ultricies leo integer malesuada nunc vel risus commodo labore et dolore magna aliqua. Vitae ultricies leo integer malesuada nunc vel risus commodo

View file

@ -12,7 +12,108 @@ import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
</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>
<div id="big-circle-wrapper" >
<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 /> <Footer />
</body> </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>