Setup a very basic starting point for the website
This commit is contained in:
BuyMyMojo
parent
f1f454b6f9
commit
99f8089b6d
20 changed files with 324 additions and 22 deletions
4
src/components/Favicon.astro
Normal file
4
src/components/Favicon.astro
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
|
||||
<link rel="manifest" href="/site.webmanifest" />
|
||||
18
src/components/Footer.astro
Normal file
18
src/components/Footer.astro
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
---
|
||||
const buttonFormat = "gif";
|
||||
|
||||
import Social from './Social.astro';
|
||||
---
|
||||
|
||||
<style>
|
||||
footer {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
<footer>
|
||||
<img class="badge" src={`/static/img/buttons/aria.${buttonFormat}`} decoding="async" />
|
||||
<Social />
|
||||
</footer>
|
||||
4
src/components/FriendLink.astro
Normal file
4
src/components/FriendLink.astro
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
---
|
||||
const { name, image, target } = Astro.props;
|
||||
---
|
||||
<a href={`${target}`}><img class="badge" src={`${image}`} alt={`${name}`} decoding="async" /></a>
|
||||
6
src/components/Navigation.astro
Normal file
6
src/components/Navigation.astro
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
<div class="nav-links">
|
||||
<a href="/">Home</a>
|
||||
<a href="/about">About</a>
|
||||
<a href="/blog">Blog</a>
|
||||
<a href="/friends">Friends</a>
|
||||
</div>
|
||||
12
src/components/Social.astro
Normal file
12
src/components/Social.astro
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
<a href="https://bsky.app/profile/did:plc:bzrn33tcfgjxnsanvg6py3xn">Bluesky</a>
|
||||
<a href="https://buymymojo.net/twitter/">Twitter(Archive)</a>
|
||||
|
||||
<style>
|
||||
a {
|
||||
padding: 0.5rem 1rem;
|
||||
color: white;
|
||||
background-color: #4c1d95;
|
||||
text-decoration: none;
|
||||
border-radius: 8px;
|
||||
}
|
||||
</style>
|
||||
25
src/layouts/BaseLayout.astro
Normal file
25
src/layouts/BaseLayout.astro
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
---
|
||||
import Navigation from '../components/Navigation.astro';
|
||||
import Favicon from '../components/Favicon.astro';
|
||||
import Footer from '../components/Footer.astro';
|
||||
import '../styles/aria.css';
|
||||
|
||||
const { pageTitle } = Astro.props;
|
||||
---
|
||||
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<Favicon />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<meta name="generator" content={Astro.generator} >
|
||||
<title>{pageTitle}</title>
|
||||
</head>
|
||||
<body>
|
||||
<Navigation />
|
||||
|
||||
<h1>{pageTitle}</h1>
|
||||
<slot />
|
||||
<Footer />
|
||||
</body>
|
||||
</html>
|
||||
96
src/pages/about.astro
Normal file
96
src/pages/about.astro
Normal file
|
|
@ -0,0 +1,96 @@
|
|||
---
|
||||
import Navigation from '../components/Navigation.astro';
|
||||
import Favicon from '../components/Favicon.astro';
|
||||
import Footer from '../components/Footer.astro';
|
||||
import '../styles/aria.css';
|
||||
|
||||
const pageTitle = "About Aria";
|
||||
|
||||
const identity = {
|
||||
firstName: "Aria",
|
||||
country: "Australia",
|
||||
occupation: "Phone & Computer Repair Tech",
|
||||
hobbies: ["gaming", "software/game development", "3D printing"],
|
||||
};
|
||||
|
||||
const skills = ["Rust", "GDScript", "FFMPEG"];
|
||||
|
||||
const currentSystem = {
|
||||
operatingSystem: "EndeavourOS",
|
||||
host: "X570 Phantom Gaming 4",
|
||||
shell: "zsh",
|
||||
mainDisplay: "Gigabyte M27U",
|
||||
mainDisplayRtings: "https://www.rtings.com/monitor/reviews/gigabyte/m27u",
|
||||
cpu: "AMD Ryzen 9 5900X",
|
||||
gpu: "AMD Radeon RX 7800 XT",
|
||||
ram: "48GB",
|
||||
localIP: "Local IP (enp4s0): 192.168.20.2/24",
|
||||
};
|
||||
|
||||
const skillColor = "green";
|
||||
---
|
||||
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<Favicon />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<meta name="generator" content={Astro.generator} />
|
||||
<title>{pageTitle}</title>
|
||||
<style define:vars={{skillColor}}>
|
||||
h1 {
|
||||
color: purple;
|
||||
font-size: 4rem;
|
||||
}
|
||||
.skill {
|
||||
color: var(--skillColor);
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<Navigation />
|
||||
|
||||
<h1>{pageTitle}</h1>
|
||||
|
||||
<p>It's about time I actually write up my own website right?</p>
|
||||
|
||||
<p>Here are a few facts about me:</p>
|
||||
<ul>
|
||||
<li>My name is {identity.firstName}.</li>
|
||||
<li>
|
||||
I live in {identity.country} and I work as a {
|
||||
identity.occupation
|
||||
}.
|
||||
</li>
|
||||
{
|
||||
identity.hobbies.length >= 2 && (
|
||||
<li>
|
||||
Two of my hobbies are: {identity.hobbies[0]} and{" "}
|
||||
{identity.hobbies[1]}
|
||||
</li>
|
||||
)
|
||||
}
|
||||
</ul>
|
||||
<p>Some of my skills are:</p>
|
||||
<ul>
|
||||
{skills.map((skill) => <li class="skill">{skill}</li>)}
|
||||
</ul>
|
||||
|
||||
<p>My system:</p>
|
||||
<ul>
|
||||
<li>OS: {currentSystem.operatingSystem}</li>
|
||||
<li>Host: {currentSystem.host}</li>
|
||||
<li>Shell: {currentSystem.shell}</li>
|
||||
<li>
|
||||
Main Display: <a href={currentSystem.mainDisplayRtings}
|
||||
>{currentSystem.mainDisplay}</a>
|
||||
</li>
|
||||
<li>CPU: {currentSystem.cpu}</li>
|
||||
<li>GPU: {currentSystem.gpu}</li>
|
||||
<li>RAM: {currentSystem.ram}</li>
|
||||
<li>{currentSystem.localIP}</li>
|
||||
</ul>
|
||||
<Footer />
|
||||
</body>
|
||||
</html>
|
||||
28
src/pages/blog.astro
Normal file
28
src/pages/blog.astro
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
---
|
||||
import Navigation from '../components/Navigation.astro';
|
||||
import Favicon from '../components/Favicon.astro';
|
||||
import Footer from '../components/Footer.astro';
|
||||
import '../styles/aria.css';
|
||||
|
||||
const pageTitle = "Aria's blog";
|
||||
---
|
||||
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<Favicon />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<meta name="generator" content={Astro.generator} >
|
||||
<title>{pageTitle}</title>
|
||||
</head>
|
||||
<body>
|
||||
<Navigation />
|
||||
|
||||
<h1>{pageTitle}</h1>
|
||||
|
||||
<ul>
|
||||
<li><a href="/posts/post-1/">Post 1</a></li>
|
||||
</ul>
|
||||
<Footer />
|
||||
</body>
|
||||
</html>
|
||||
33
src/pages/friends.astro
Normal file
33
src/pages/friends.astro
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
---
|
||||
import Navigation from '../components/Navigation.astro';
|
||||
import Favicon from '../components/Favicon.astro';
|
||||
import Footer from '../components/Footer.astro';
|
||||
import FriendLink from '../components/FriendLink.astro';
|
||||
import '../styles/aria.css';
|
||||
|
||||
const pageTitle = "Aria's friends";
|
||||
---
|
||||
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<Favicon />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<meta name="generator" content={Astro.generator} >
|
||||
<title>{pageTitle}</title>
|
||||
</head>
|
||||
<body>
|
||||
<Navigation />
|
||||
|
||||
<h1>{pageTitle}</h1>
|
||||
|
||||
<FriendLink name="Alyxia" image="https://alyxia.dev/static/img/88x31/self.png" target="https://alyxia.dev" />
|
||||
<div class="linked-buttons">
|
||||
<FriendLink name="Prefetcher" image="https://nanoshinono.me/prefetcher.gif" target="https://nanoshinono.me/" />
|
||||
<FriendLink name="Ata" image="https://ata.moe/88x31.png" target="https://ata.moe" />
|
||||
</div>
|
||||
<FriendLink name="Amemoia" image="https://buh.moe/resources/buttons/88x31.gif" target="https://buh.moe" />
|
||||
|
||||
<Footer />
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,15 +1,8 @@
|
|||
---
|
||||
import BaseLayout from '../layouts/BaseLayout.astro';
|
||||
const pageTitle = "Aria";
|
||||
---
|
||||
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<meta name="generator" content={Astro.generator} >
|
||||
<title>Astro</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Aria</h1>
|
||||
</body>
|
||||
</html>
|
||||
<BaseLayout pageTitle={pageTitle}>
|
||||
<h2>You're all super cute!~</h2>
|
||||
<h3>:3c</h3>
|
||||
</BaseLayout>
|
||||
12
src/pages/posts/post-1.md
Normal file
12
src/pages/posts/post-1.md
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
---
|
||||
title: 'Getting started here'
|
||||
pubDate: 2024-12-16
|
||||
description: 'This is the first post of my new website.'
|
||||
author: 'Aria'
|
||||
tags: ["blogging", "learning in public"]
|
||||
---
|
||||
# Getting started here
|
||||
|
||||
Published on: 2024-12-16
|
||||
|
||||
I'll be expanding this as I work on it but for now this is my first more indepth website
|
||||
79
src/styles/aria.css
Normal file
79
src/styles/aria.css
Normal file
|
|
@ -0,0 +1,79 @@
|
|||
html {
|
||||
background-color: #bbbec2;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
max-width: 80ch;
|
||||
padding: 1rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 1rem 0;
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.badge {
|
||||
image-rendering: pixelated;
|
||||
min-width: 88px;
|
||||
min-height: 31px;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.linked-buttons {
|
||||
outline-style: dashed;
|
||||
display:inline-block
|
||||
}
|
||||
|
||||
/* nav styles */
|
||||
|
||||
.nav-links {
|
||||
width: 100%;
|
||||
top: 5rem;
|
||||
left: 48px;
|
||||
background-color: #ff9776;
|
||||
display: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.nav-links a {
|
||||
display: block;
|
||||
text-align: center;
|
||||
padding: 10px 0;
|
||||
text-decoration: none;
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.nav-links a:hover,
|
||||
.nav-links a:focus {
|
||||
background-color: #ff9776;
|
||||
}
|
||||
|
||||
.expanded {
|
||||
display: unset;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 636px) {
|
||||
.nav-links {
|
||||
margin-left: 5em;
|
||||
display: block;
|
||||
position: static;
|
||||
width: auto;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.nav-links a {
|
||||
display: inline-block;
|
||||
padding: 15px 20px;
|
||||
}
|
||||
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue