rs2009/ruds.io
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: add music albums

Browse source
This commit is contained in:
Rudra Saraswat 2025-05-30 14:47:33 +01:00
parent 8a463d0448
commit 9192cb196d
11 changed files with 68 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
src/assets/albums/GreenDay_AmericanIdiot.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 18 KiB

BIN
src/assets/albums/GreenDay_Dookie.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 77 KiB

BIN
src/assets/albums/JimmyEatWorld_BleedAmerican.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 24 KiB

BIN
src/assets/albums/MCR_BlackParade.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 32 KiB

BIN
src/assets/albums/MCR_Helena.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 50 KiB

BIN
src/assets/albums/MCR_ThreeCheers.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 115 KiB

BIN
src/assets/albums/RitesOfSpring.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 57 KiB

BIN
src/assets/albums/TBS_TellAllYourFriends.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 16 KiB

1
src/layouts/BaseLayout.astro
View file

@ -20,6 +20,7 @@ const { pageTitle, pageCustomTitle = pageTitle } = Astro.props;
<ClientRouter /> <ClientRouter />
</head> </head>
<body> <body>
<div class="screen_size_warning"><b>This site is best viewed on a computer.</b><br><br></div>
<Header /> <Header />
<h2>{pageTitle}</h2> <h2>{pageTitle}</h2>
<slot /> <slot />

59
src/pages/index.astro
View file

@ -1,6 +1,16 @@
--- ---
import { Image } from 'astro:assets';
import BaseLayout from '../layouts/BaseLayout.astro'; import BaseLayout from '../layouts/BaseLayout.astro';
const pageTitle = 'home'; const pageTitle = 'home';
import MCR_ThreeCheers from '../assets/albums/MCR_ThreeCheers.jpg';
import GreenDay_AmericanIdiot from '../assets/albums/GreenDay_AmericanIdiot.jpg';
import MCR_BlackParade from '../assets/albums/MCR_BlackParade.jpg';
import GreenDay_Dookie from '../assets/albums/GreenDay_Dookie.jpg';
import TBS_TellAllYourFriends from '../assets/albums/TBS_TellAllYourFriends.jpg';
import MCR_Helena from '../assets/albums/MCR_Helena.jpg';
import JimmyEatWorld_BleedAmerican from '../assets/albums/JimmyEatWorld_BleedAmerican.jpg';
import RitesOfSpring from '../assets/albums/RitesOfSpring.jpg';
--- ---
<BaseLayout pageTitle={pageTitle}> <BaseLayout pageTitle={pageTitle}>
@ -39,7 +49,6 @@ const pageTitle = 'home';
background-color: rgba(0, 0, 0, 0.3); background-color: rgba(0, 0, 0, 0.3);
} }
/* Mobile: Stack the columns */
@media screen and (max-width: 900px) { @media screen and (max-width: 900px) {
.container { .container {
flex-direction: column; flex-direction: column;
@ -66,6 +75,23 @@ const pageTitle = 'home';
td:first-child { td:first-child {
font-weight: bold; font-weight: bold;
} }
.albums {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px 10px;
}
.albums img {
height: 100%;
width: 100%;
}
@media screen and (max-width: 600px) {
.albums {
grid-template-columns: repeat(2, 1fr);
}
}
</style> </style>
<div class="container"> <div class="container">
@ -93,7 +119,7 @@ const pageTitle = 'home';
</tr> </tr>
<tr> <tr>
<td><p>Music</p></td> <td><p>Music</p></td>
<td><p>MCR, Green Day, The Offspring, American Football, Taking Back Sunday, Jimmy Eat World, underscores, deadmau5, Billie Eilish and the list goes on...</p></td> <td><p>My Chemical Romance, Green Day, The Offspring, American Football, Taking Back Sunday, Jimmy Eat World, underscores, deadmau5, Billie Eilish and the list goes on...</p></td>
</tr> </tr>
<tr> <tr>
<td><p>Hobbies</p></td> <td><p>Hobbies</p></td>
@ -116,6 +142,11 @@ const pageTitle = 'home';
<h3>RSS</h3> <h3>RSS</h3>
<a href="https://ruds.io/site/rss.xml">https://ruds.io/rss.xml</a> <a href="https://ruds.io/site/rss.xml">https://ruds.io/rss.xml</a>
</div> </div>
<div class="row">
<h3>this website</h3>
<a href="https://git.ruds.io/rs2009/ruds.io">https://git.ruds.io/rs2009/ruds.io</a>
</div>
</div> </div>
<div class="col col-right"> <div class="col col-right">
@ -126,7 +157,8 @@ const pageTitle = 'home';
</div> </div>
<div class="row"> <div class="row">
<h3>about me</h3> <h3>about me</h3>
<p>hi! I'm just your local 15-year-old with some nerdy tendencies — these include a love for anything and everything technology (GNU/Linux in particular) and a liking for pop-punk and emo music (and emo/scene culture)!</p> <p>hi! I'm just your local (bi) 15-year-old with some nerdy tendencies — these include a love for anything and everything technology (GNU/Linux in particular) and a liking for pop-punk and emo music (and emo/scene culture)!</p>
<p>I also serve as the lead maintainer for several projects you might have heard of, including Ubuntu Unity (owing to which I am an Ubuntu member) & blendOS.</p>
</div> </div>
<div class="row"> <div class="row">
<h3>projects (& past projects)</h3> <h3>projects (& past projects)</h3>
@ -145,7 +177,28 @@ const pageTitle = 'home';
<p><a href="https://x.com/ed_ubuntu">UbuntuEd</a>: an educational Ubuntu remix (superseded by Edubuntu)</p> <p><a href="https://x.com/ed_ubuntu">UbuntuEd</a>: an educational Ubuntu remix (superseded by Edubuntu)</p>
</div> </div>
<div class="row">
<h3>albums & songs I enjoy</h3>
<div class="albums">
<Image src={MCR_ThreeCheers} alt="My Chemical Romance — Three Cheers For Sweet Revenge" />
<Image src={GreenDay_AmericanIdiot} alt="Green Day — American Idiot" />
<Image src={MCR_BlackParade} alt="My Chemical Romance — Black Parade" />
<Image src={GreenDay_Dookie} alt="Green Day — Dookie" />
<Image src={TBS_TellAllYourFriends} alt="Taking Back Sunday — Tell All Your Friends" />
<Image src={MCR_Helena} alt="My Chemical Romance — Helena" />
<Image src={JimmyEatWorld_BleedAmerican} alt="Jimmy Eat World — Bleed American" />
<Image src={RitesOfSpring} alt="Rites of Spring — Rites of Spring" />
</div> </div>
</div> </div>
</div>
</div>
<script>
var albums = document.querySelectorAll(".albums img");
albums.forEach(album => {
album.title = album.alt;
})
</script>
</BaseLayout> </BaseLayout>

10
src/styles/global.css
View file

@ -40,3 +40,13 @@ a,a:visited {
a:hover { a:hover {
color: gray; color: gray;
} }
.screen_size_warning {
display: none;
}
@media screen and (max-width: 600px) {
.screen_size_warning {
display: block;
}
}