Wowie what a gay little website for my gay little self aria.coffee
3
fork

Configure Feed

Select the types of activity you want to include in your feed.

Setup a very basic starting point for the website

+324 -22
public/android-chrome-192x192.png

This is a binary file and will not be displayed.

public/android-chrome-512x512.png

This is a binary file and will not be displayed.

public/apple-touch-icon.png

This is a binary file and will not be displayed.

public/favicon-16x16.png

This is a binary file and will not be displayed.

public/favicon-32x32.png

This is a binary file and will not be displayed.

public/favicon.ico

This is a binary file and will not be displayed.

-9
public/favicon.svg
··· 1 - <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128"> 2 - <path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" /> 3 - <style> 4 - path { fill: #000; } 5 - @media (prefers-color-scheme: dark) { 6 - path { fill: #FFF; } 7 - } 8 - </style> 9 - </svg>
+1
public/site.webmanifest
··· 1 + {"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
+4
src/components/Favicon.astro
··· 1 + <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" /> 2 + <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" /> 3 + <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" /> 4 + <link rel="manifest" href="/site.webmanifest" />
+18
src/components/Footer.astro
··· 1 + --- 2 + const buttonFormat = "gif"; 3 + 4 + import Social from './Social.astro'; 5 + --- 6 + 7 + <style> 8 + footer { 9 + display: flex; 10 + gap: 1rem; 11 + margin-top: 2rem; 12 + } 13 + </style> 14 + 15 + <footer> 16 + <img class="badge" src={`/static/img/buttons/aria.${buttonFormat}`} decoding="async" /> 17 + <Social /> 18 + </footer>
+4
src/components/FriendLink.astro
··· 1 + --- 2 + const { name, image, target } = Astro.props; 3 + --- 4 + <a href={`${target}`}><img class="badge" src={`${image}`} alt={`${name}`} decoding="async" /></a>
+6
src/components/Navigation.astro
··· 1 + <div class="nav-links"> 2 + <a href="/">Home</a> 3 + <a href="/about">About</a> 4 + <a href="/blog">Blog</a> 5 + <a href="/friends">Friends</a> 6 + </div>
+12
src/components/Social.astro
··· 1 + <a href="https://bsky.app/profile/did:plc:bzrn33tcfgjxnsanvg6py3xn">Bluesky</a> 2 + <a href="https://buymymojo.net/twitter/">Twitter(Archive)</a> 3 + 4 + <style> 5 + a { 6 + padding: 0.5rem 1rem; 7 + color: white; 8 + background-color: #4c1d95; 9 + text-decoration: none; 10 + border-radius: 8px; 11 + } 12 + </style>
+25
src/layouts/BaseLayout.astro
··· 1 + --- 2 + import Navigation from '../components/Navigation.astro'; 3 + import Favicon from '../components/Favicon.astro'; 4 + import Footer from '../components/Footer.astro'; 5 + import '../styles/aria.css'; 6 + 7 + const { pageTitle } = Astro.props; 8 + --- 9 + 10 + <html lang="en"> 11 + <head> 12 + <meta charset="utf-8" /> 13 + <Favicon /> 14 + <meta name="viewport" content="width=device-width" /> 15 + <meta name="generator" content={Astro.generator} > 16 + <title>{pageTitle}</title> 17 + </head> 18 + <body> 19 + <Navigation /> 20 + 21 + <h1>{pageTitle}</h1> 22 + <slot /> 23 + <Footer /> 24 + </body> 25 + </html>
+96
src/pages/about.astro
··· 1 + --- 2 + import Navigation from '../components/Navigation.astro'; 3 + import Favicon from '../components/Favicon.astro'; 4 + import Footer from '../components/Footer.astro'; 5 + import '../styles/aria.css'; 6 + 7 + const pageTitle = "About Aria"; 8 + 9 + const identity = { 10 + firstName: "Aria", 11 + country: "Australia", 12 + occupation: "Phone & Computer Repair Tech", 13 + hobbies: ["gaming", "software/game development", "3D printing"], 14 + }; 15 + 16 + const skills = ["Rust", "GDScript", "FFMPEG"]; 17 + 18 + const currentSystem = { 19 + operatingSystem: "EndeavourOS", 20 + host: "X570 Phantom Gaming 4", 21 + shell: "zsh", 22 + mainDisplay: "Gigabyte M27U", 23 + mainDisplayRtings: "https://www.rtings.com/monitor/reviews/gigabyte/m27u", 24 + cpu: "AMD Ryzen 9 5900X", 25 + gpu: "AMD Radeon RX 7800 XT", 26 + ram: "48GB", 27 + localIP: "Local IP (enp4s0): 192.168.20.2/24", 28 + }; 29 + 30 + const skillColor = "green"; 31 + --- 32 + 33 + <html lang="en"> 34 + <head> 35 + <meta charset="utf-8" /> 36 + <Favicon /> 37 + <meta name="viewport" content="width=device-width" /> 38 + <meta name="generator" content={Astro.generator} /> 39 + <title>{pageTitle}</title> 40 + <style define:vars={{skillColor}}> 41 + h1 { 42 + color: purple; 43 + font-size: 4rem; 44 + } 45 + .skill { 46 + color: var(--skillColor); 47 + font-weight: bold; 48 + } 49 + </style> 50 + </head> 51 + <body> 52 + <Navigation /> 53 + 54 + <h1>{pageTitle}</h1> 55 + 56 + <p>It's about time I actually write up my own website right?</p> 57 + 58 + <p>Here are a few facts about me:</p> 59 + <ul> 60 + <li>My name is {identity.firstName}.</li> 61 + <li> 62 + I live in {identity.country} and I work as a { 63 + identity.occupation 64 + }. 65 + </li> 66 + { 67 + identity.hobbies.length >= 2 && ( 68 + <li> 69 + Two of my hobbies are: {identity.hobbies[0]} and{" "} 70 + {identity.hobbies[1]} 71 + </li> 72 + ) 73 + } 74 + </ul> 75 + <p>Some of my skills are:</p> 76 + <ul> 77 + {skills.map((skill) => <li class="skill">{skill}</li>)} 78 + </ul> 79 + 80 + <p>My system:</p> 81 + <ul> 82 + <li>OS: {currentSystem.operatingSystem}</li> 83 + <li>Host: {currentSystem.host}</li> 84 + <li>Shell: {currentSystem.shell}</li> 85 + <li> 86 + Main Display: <a href={currentSystem.mainDisplayRtings} 87 + >{currentSystem.mainDisplay}</a> 88 + </li> 89 + <li>CPU: {currentSystem.cpu}</li> 90 + <li>GPU: {currentSystem.gpu}</li> 91 + <li>RAM: {currentSystem.ram}</li> 92 + <li>{currentSystem.localIP}</li> 93 + </ul> 94 + <Footer /> 95 + </body> 96 + </html>
+28
src/pages/blog.astro
··· 1 + --- 2 + import Navigation from '../components/Navigation.astro'; 3 + import Favicon from '../components/Favicon.astro'; 4 + import Footer from '../components/Footer.astro'; 5 + import '../styles/aria.css'; 6 + 7 + const pageTitle = "Aria's blog"; 8 + --- 9 + 10 + <html lang="en"> 11 + <head> 12 + <meta charset="utf-8" /> 13 + <Favicon /> 14 + <meta name="viewport" content="width=device-width" /> 15 + <meta name="generator" content={Astro.generator} > 16 + <title>{pageTitle}</title> 17 + </head> 18 + <body> 19 + <Navigation /> 20 + 21 + <h1>{pageTitle}</h1> 22 + 23 + <ul> 24 + <li><a href="/posts/post-1/">Post 1</a></li> 25 + </ul> 26 + <Footer /> 27 + </body> 28 + </html>
+33
src/pages/friends.astro
··· 1 + --- 2 + import Navigation from '../components/Navigation.astro'; 3 + import Favicon from '../components/Favicon.astro'; 4 + import Footer from '../components/Footer.astro'; 5 + import FriendLink from '../components/FriendLink.astro'; 6 + import '../styles/aria.css'; 7 + 8 + const pageTitle = "Aria's friends"; 9 + --- 10 + 11 + <html lang="en"> 12 + <head> 13 + <meta charset="utf-8" /> 14 + <Favicon /> 15 + <meta name="viewport" content="width=device-width" /> 16 + <meta name="generator" content={Astro.generator} > 17 + <title>{pageTitle}</title> 18 + </head> 19 + <body> 20 + <Navigation /> 21 + 22 + <h1>{pageTitle}</h1> 23 + 24 + <FriendLink name="Alyxia" image="https://alyxia.dev/static/img/88x31/self.png" target="https://alyxia.dev" /> 25 + <div class="linked-buttons"> 26 + <FriendLink name="Prefetcher" image="https://nanoshinono.me/prefetcher.gif" target="https://nanoshinono.me/" /> 27 + <FriendLink name="Ata" image="https://ata.moe/88x31.png" target="https://ata.moe" /> 28 + </div> 29 + <FriendLink name="Amemoia" image="https://buh.moe/resources/buttons/88x31.gif" target="https://buh.moe" /> 30 + 31 + <Footer /> 32 + </body> 33 + </html>
+6 -13
src/pages/index.astro
··· 1 1 --- 2 + import BaseLayout from '../layouts/BaseLayout.astro'; 3 + const pageTitle = "Aria"; 2 4 --- 3 - 4 - <html lang="en"> 5 - <head> 6 - <meta charset="utf-8" /> 7 - <link rel="icon" type="image/svg+xml" href="/favicon.svg" /> 8 - <meta name="viewport" content="width=device-width" /> 9 - <meta name="generator" content={Astro.generator} > 10 - <title>Astro</title> 11 - </head> 12 - <body> 13 - <h1>Aria</h1> 14 - </body> 15 - </html> 5 + <BaseLayout pageTitle={pageTitle}> 6 + <h2>You're all super cute!~</h2> 7 + <h3>:3c</h3> 8 + </BaseLayout>
+12
src/pages/posts/post-1.md
··· 1 + --- 2 + title: 'Getting started here' 3 + pubDate: 2024-12-16 4 + description: 'This is the first post of my new website.' 5 + author: 'Aria' 6 + tags: ["blogging", "learning in public"] 7 + --- 8 + # Getting started here 9 + 10 + Published on: 2024-12-16 11 + 12 + 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
··· 1 + html { 2 + background-color: #bbbec2; 3 + font-family: sans-serif; 4 + } 5 + 6 + body { 7 + margin: 0 auto; 8 + width: 100%; 9 + max-width: 80ch; 10 + padding: 1rem; 11 + line-height: 1.5; 12 + } 13 + 14 + * { 15 + box-sizing: border-box; 16 + } 17 + 18 + h1 { 19 + margin: 1rem 0; 20 + font-size: 2.5rem; 21 + } 22 + 23 + .badge { 24 + image-rendering: pixelated; 25 + min-width: 88px; 26 + min-height: 31px; 27 + padding: 4px; 28 + } 29 + 30 + .linked-buttons { 31 + outline-style: dashed; 32 + display:inline-block 33 + } 34 + 35 + /* nav styles */ 36 + 37 + .nav-links { 38 + width: 100%; 39 + top: 5rem; 40 + left: 48px; 41 + background-color: #ff9776; 42 + display: none; 43 + margin: 0; 44 + } 45 + 46 + .nav-links a { 47 + display: block; 48 + text-align: center; 49 + padding: 10px 0; 50 + text-decoration: none; 51 + font-size: 1.2rem; 52 + font-weight: bold; 53 + text-transform: uppercase; 54 + } 55 + 56 + .nav-links a:hover, 57 + .nav-links a:focus { 58 + background-color: #ff9776; 59 + } 60 + 61 + .expanded { 62 + display: unset; 63 + } 64 + 65 + @media screen and (min-width: 636px) { 66 + .nav-links { 67 + margin-left: 5em; 68 + display: block; 69 + position: static; 70 + width: auto; 71 + background: none; 72 + } 73 + 74 + .nav-links a { 75 + display: inline-block; 76 + padding: 15px 20px; 77 + } 78 + 79 + }