Add Webring "bucket webring", clean some CSS
This commit is contained in:
parent
9b6c1649a7
commit
b1f0300a11
12 changed files with 51 additions and 135 deletions
|
|
@ -1,11 +1,15 @@
|
|||
# taevas.xyz
|
||||
|
||||
My personal website!
|
||||
My personal website, built almost entirely with [TypeScript](https://www.typescriptlang.org/)!
|
||||
|
||||
It uses a small variety of technologies to work, such as [Bun](https://bun.sh/), [React](https://react.dev/), [Vite](https://vite.dev/), [PostgreSQL](https://www.postgresql.org/) and [Tailwind CSS](https://tailwindcss.com/).
|
||||
|
||||
Its backend sends requests to many other websites's API in order to provide my latest activity to users.
|
||||
|
||||
## Build and develop
|
||||
|
||||
```bash
|
||||
bun i
|
||||
bun getready
|
||||
bun dev
|
||||
```
|
||||
|
||||
|
|
|
|||
23
src/App.css
23
src/App.css
|
|
@ -1,25 +1,6 @@
|
|||
@import 'tailwindcss';
|
||||
|
||||
@config '../tailwind.config.js';
|
||||
|
||||
/*
|
||||
The default border color has changed to `currentColor` in Tailwind CSS v4,
|
||||
so we've added these compatibility styles to make sure everything still
|
||||
looks the same as it did with Tailwind CSS v3.
|
||||
|
||||
If we ever want to remove these styles, we need to add an explicit border
|
||||
color utility to any element that depends on these defaults.
|
||||
*/
|
||||
@layer base {
|
||||
*,
|
||||
::after,
|
||||
::before,
|
||||
::backdrop,
|
||||
::file-selector-button {
|
||||
border-color: var(--color-gray-200, currentColor);
|
||||
}
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "IBMPlexMono";
|
||||
src: url("assets/fonts/IBMPlexMono-Regular.ttf") format("truetype");
|
||||
|
|
@ -37,6 +18,10 @@ body {
|
|||
font-family: "IBMPlexMono", "Arial", sans-serif;
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
font-weight: bold
|
||||
}
|
||||
|
||||
p a {
|
||||
color: rgb(244, 196, 253);
|
||||
text-decoration: underline;
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ export default function Website({
|
|||
return (
|
||||
<div className="hover:font-bold active:font-bold overflow-hidden">
|
||||
<a href={link} target="_blank" rel="noreferrer" draggable="false">
|
||||
<h2 className="pr-1 py-1 rounded-tr-[10px] bg-white uppercase text-right text-lg font-bold text-indigo-500 transition-all
|
||||
<h2 className="pr-1 py-1 rounded-tr-[10px] bg-white uppercase text-right text-lg text-indigo-500 transition-all
|
||||
hover:brightness-110 hover:pr-16 hover:text-blue-600">
|
||||
{name}
|
||||
</h2>
|
||||
|
|
|
|||
|
|
@ -1,29 +0,0 @@
|
|||
import React from "react";
|
||||
|
||||
export default function SocialButton({
|
||||
title,
|
||||
border,
|
||||
rotation,
|
||||
link,
|
||||
image,
|
||||
padding = "p-0",
|
||||
}: {
|
||||
title: string;
|
||||
border: string;
|
||||
rotation: string;
|
||||
link: string;
|
||||
image: string;
|
||||
padding?: string;
|
||||
}) {
|
||||
return (
|
||||
<a draggable="false" href={link} target="_blank" rel="noreferrer">
|
||||
<button title={title} className={`
|
||||
m-1 h-12 w-12 bg-white text-black tracking-[-.2em]
|
||||
rounded-full border-solid hover:border-dashed active:brightness-95 border-4 hover:border-8 ${border}
|
||||
cursor-pointer transition-transform duration-75 ${rotation} hover:rotate-0
|
||||
`}>
|
||||
<img draggable="false" className={`${padding} w-32 absolute right-1/2 bottom-1/2 translate-x-2/4 translate-y-2/4`} src={image} alt={title}/>
|
||||
</button>
|
||||
</a>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,64 +0,0 @@
|
|||
import React from "react";
|
||||
import SocialButton from "./SocialButton.tsx";
|
||||
|
||||
export default function SocialButtons() {
|
||||
return (
|
||||
<div className="relative justify-center items-center">
|
||||
<SocialButton
|
||||
title="YouTube"
|
||||
border="border-red-500"
|
||||
rotation="rotate-12"
|
||||
link="https://www.youtube.com/@TTTaevas"
|
||||
image="assets/logos/youtube.svg"
|
||||
padding="p-1"
|
||||
/>
|
||||
<SocialButton
|
||||
title="GitHub"
|
||||
border="border-black"
|
||||
rotation="-rotate-6"
|
||||
link="https://github.com/TTTaevas"
|
||||
image="assets/logos/github.svg"
|
||||
padding="p-1"
|
||||
/>
|
||||
<SocialButton
|
||||
title="osu!"
|
||||
border="border-pink-500"
|
||||
rotation="-rotate-12"
|
||||
link="https://osu.ppy.sh/users/7276846"
|
||||
image="assets/logos/osu.svg"
|
||||
/>
|
||||
<SocialButton
|
||||
title="Speedrun.com"
|
||||
border="border-yellow-500"
|
||||
rotation="rotate-12"
|
||||
link="https://www.speedrun.com/users/Taevas"
|
||||
image="assets/logos/speedrundotcom.png"
|
||||
padding="p-2"
|
||||
/>
|
||||
<SocialButton
|
||||
title="AniList"
|
||||
border="border-cyan-500"
|
||||
rotation="rotate-6"
|
||||
link="https://anilist.co/user/Taevas/"
|
||||
image="assets/logos/anilist.svg"
|
||||
padding="p-1"
|
||||
/>
|
||||
<SocialButton
|
||||
title="GitLab"
|
||||
border="border-orange-500"
|
||||
rotation="-rotate-12"
|
||||
link="https://gitlab.com/TTTaevas"
|
||||
image="assets/logos/gitlab.svg"
|
||||
padding="p-1"
|
||||
/>
|
||||
<SocialButton
|
||||
title="Last.fm"
|
||||
border="border-red-600"
|
||||
rotation="-rotate-6"
|
||||
link="https://www.last.fm/user/TTTaevas"
|
||||
image="assets/logos/lastdotfm.png"
|
||||
padding="p-1"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -21,12 +21,12 @@ export default function MainWindow({
|
|||
duration={300}
|
||||
height={tabs.length ? 0 : "auto"}
|
||||
>
|
||||
<div className="bg-white text-blue-600 rounded-b-xl relative justify-center items-center pb-4 pt-2 lg:pt-0 lg:px-4 hover:brightness-110 active:brightness-110">
|
||||
<div className="bg-white text-blue-600 relative justify-center items-center pb-4 pt-2 lg:rounded-b-xl lg:pt-0 lg:px-4 hover:brightness-110 active:brightness-110">
|
||||
<Translatable
|
||||
en={<h1 className="text-6xl md:text-8xl font-bold">Hi, I'm Taevas!</h1>}
|
||||
fr={<h1 className="text-6xl md:text-8xl font-bold">Bonjour, je m'appelle <span className="text-nowrap">Taevas !</span></h1>}
|
||||
en={<h1 className="text-6xl md:text-8xl">Hi, I'm Taevas!</h1>}
|
||||
fr={<h1 className="text-6xl md:text-8xl">Bonjour, je m'appelle <span className="text-nowrap">Taevas !</span></h1>}
|
||||
/>
|
||||
<h2 className="text-3xl font-bold pt-4 md:pt-2">
|
||||
<h2 className="text-3xl pt-4 md:pt-2">
|
||||
<Translatable
|
||||
en={"If you're here, you're probably interested by who I am and what I do"}
|
||||
fr={"Si vous êtes ici, vous êtes alors probablement intéressé·e par qui je suis et ce que je fais"}
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ export default function About({
|
|||
setTabs: React.Dispatch<React.SetStateAction<TabDetails[]>>;
|
||||
}) {
|
||||
const elements = [(
|
||||
<div className="m-4 text-white order-1" key="about">
|
||||
<div className="order-1" key="about">
|
||||
<div className="ml-auto max-w-3xl text-left">
|
||||
<img className="m-4 float-right h-24" src="/assets/brittany.jpg" alt="Flag of Brittany" title="Flag of Brittany"/>
|
||||
<Translatable
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ export default function Contact({
|
|||
setTabs: React.Dispatch<React.SetStateAction<TabDetails[]>>;
|
||||
}) {
|
||||
const elements = [(
|
||||
<div className="m-4 text-white text-left" key="contact">
|
||||
<div className="text-left" key="contact">
|
||||
<Translatable
|
||||
en={<p>It is my belief that it's actually difficult to communicate with the people you want on the internet, I find emails to be bad for real-time communication, some other platforms enshittify themselves too much, while others do not quite offer the best user experience in my honest opinion.</p>}
|
||||
fr={<p>Je pense en fait que c'est difficile de communiquer avec les gens qu'on veut sur internet, je trouve que les e-mails ne conviennent pas pour la communication en temps réel, certaines plateformes deviennent horribles, pendant que d'autres n'offrent pas vraiment une bonne expérience.</p>}
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ export default function Projects({
|
|||
setTabs: React.Dispatch<React.SetStateAction<TabDetails[]>>;
|
||||
}) {
|
||||
const elements = [(
|
||||
<div className="inline-block m-4 text-white text-left" key="projects">
|
||||
<div className="inline-block text-left" key="projects">
|
||||
<div className="border-b-4 pb-4">
|
||||
<a href="https://tttaevas.itch.io/swordventure" target="_blank" rel="noreferrer"><img className="m-4 float-right w-40" src="/assets/swordventure.png" alt="SwordVenture thumbnail"/></a>
|
||||
<Translatable
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ export default function Support({
|
|||
setTabs: React.Dispatch<React.SetStateAction<TabDetails[]>>;
|
||||
}) {
|
||||
const elements = [(
|
||||
<div className="m-4 pb-2 text-white" key="support">
|
||||
<div className="pb-2" key="support">
|
||||
<p>
|
||||
<b>
|
||||
<Translatable
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ export default class Tab extends Component<{
|
|||
{this.props.logo ? <div className="absolute start-0 h-0 ml-2 invisible lg:visible fill-gray-600">{this.props.logo}</div> : <></>}
|
||||
<div className="absolute end-0 w-0 sm:w-10 mr-1 mt-1 invisible lg:visible cursor-pointer
|
||||
rounded-full fill-red-500 hover:fill-black hover:bg-red-500 active:brightness-50" onClick={() => {
|
||||
this.props.setTabs(tabs.filter((t) => t.id !== this.props.id));
|
||||
this.props.setTabs(tabs.filter((t) => t.id !== this.props.id));
|
||||
}}>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
|
||||
<path d="M24 9.4L22.6 8L16 14.6L9.4 8L8 9.4l6.6 6.6L8 22.6L9.4 24l6.6-6.6l6.6 6.6l1.4-1.4l-6.6-6.6L24 9.4z"/>
|
||||
|
|
@ -43,7 +43,7 @@ export default class Tab extends Component<{
|
|||
{this.props.name} - taevas.xyz
|
||||
</h3>
|
||||
</div>
|
||||
<div className="drop-shadow-2xl max-h-[500px] overflow-y-auto
|
||||
<div className="text-white p-4 drop-shadow-2xl max-h-[500px] overflow-y-auto
|
||||
[&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-track]:bg-gray-300 [&::-webkit-scrollbar-thumb]:bg-indigo-500 [&::-webkit-scrollbar-track]:rounded-full [&::-webkit-scrollbar-thumb]:rounded-full">
|
||||
{...this.props.elements}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3,24 +3,44 @@ import Tab from "../Tab.tsx";
|
|||
import Translatable from "#parts/Translatable.tsx";
|
||||
import {UserMultiple} from "@carbon/icons-react";
|
||||
import {type TabDetails} from "#contexts";
|
||||
import Link from "#parts/Link.tsx";
|
||||
|
||||
export default function Webrings({
|
||||
setTabs,
|
||||
}: {
|
||||
setTabs: React.Dispatch<React.SetStateAction<TabDetails[]>>;
|
||||
}) {
|
||||
const elements = [(
|
||||
<div className="m-4 pb-2 text-white" key="webrings">
|
||||
<p>
|
||||
<b>
|
||||
<Translatable
|
||||
en={"This website will hopefully be part of some webrings soon enough! For now, there's nothing to show here."}
|
||||
fr={"Ce site web fera bientôt parti de quelques webrings, en tout cas je l'espère ! Pour l'instant, il n'y a rien à montrer ici."}
|
||||
/>
|
||||
</b>
|
||||
const elements = [
|
||||
<div className="pb-4" key="webrings-list">
|
||||
<iframe id="bucket-webring" className="w-full h-[3rem]" src="https://webring.bucketfish.me/embed.html?name=Taevas&lightmode=true"/>
|
||||
</div>,
|
||||
<div className="text-left" key="webrings-intro">
|
||||
<p className="pb-2">
|
||||
<Translatable
|
||||
en={<><Link link="https://en.wikipedia.org/wiki/Webring" text="Webrings"/> are kinda thought of as <b>something from the past,</b> mainly because search engines had become good at their job in the 2000s, and also partly because of how much everything has become centralized on a few websites.</>}
|
||||
fr={<>Les <Link link="https://fr.wikipedia.org/wiki/Webring" text="Webrings"/> sont un peu perçus comme <b>une chose du passé</b>, surtout parce que les moteurs de recherche sont devenus bons à ce qu'ils sont censés faire dans les années 2000, mais aussi un peu parce que tout est devenu bien plus centralisé sur certains sites.</>}
|
||||
/>
|
||||
</p>
|
||||
<p className="pb-2">
|
||||
<Translatable
|
||||
en={<>However, <b>they've kinda been making a comeback</b> thanks to fans of the <Link link="https://en.wikipedia.org/wiki/Web_2.0#Web_1.0" text="Web 1.0"/> such as the people that are on <Link link="https://neocities.org/" text="Neocities"/>. Furthermore, people have been reporting that search engines have been becoming worse over the past few years!</>}
|
||||
fr={<>Néanmoins, <b>ils sont un peu revenus</b> grâce aux fans du Web 1.0, tel que les gens qui sont sur <Link link="https://neocities.org/" text="Neocities"/>. Et aussi, il est parfois dit que les moteurs de recherche sont devenus pires durant ces dernières années !</>}
|
||||
/>
|
||||
</p>
|
||||
<p className="pb-2">
|
||||
<Translatable
|
||||
en={<>Finally, don't you think <b>it's hard to discover personal websites?</b> Like, if I asked you to find the website of someone you don't know, your best bet would likely be to go on the nerdiest Fediverse instance you know of and to click on a few profiles there in the hope of finding a link, I think.</>}
|
||||
fr={<>Enfin, n'êves-vous pas d'accord pour dire <b>qu'il est difficile de trouver des sites web personnels ?</b> Genre, si je vous demandais de trouver le site de quelqu'un que vous ne connaissez pas, la meilleure façon serait probablement d'aller sur l'instance Fediverse la plus nerd que vous connaissez et de cliquer sur quelques profils dans l'espoir de trouver un lien, en tout cas je pense.</>}
|
||||
/>
|
||||
</p>
|
||||
<p className="pb-2">
|
||||
<Translatable
|
||||
en={<>The Webrings above can be thought of as <b>curated lists of like-minded people, so feel free to surf through those once you're done here!</b></>}
|
||||
fr={<>Les Webrings ci-dessus peuvent être considérés comme des <b>listes de personnes comme moi, alors allez y surfer une fois que vous avez fini ici !</b></>}
|
||||
/>
|
||||
</p>
|
||||
</div>
|
||||
)];
|
||||
];
|
||||
|
||||
return (
|
||||
<Tab
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue