Update mainly Projects and Support (#8)

This commit is contained in:
Taevas 2024-11-02 16:18:50 +01:00
parent b7320698cc
commit 36fab09613
7 changed files with 60 additions and 72 deletions

View file

@ -11,8 +11,8 @@ export default function ButtonLink({
return (
<Link
classes="block border-2 border-white bg-blue-950 hover:brightness-125 active:brightness-90
text-white leading-[40px] text-lg font-bold
w-40 mx-auto mt-4"
text-white text-center text-lg font-bold
w-40 py-1.5 mx-auto mt-4"
link={link}
text={text}
/>

View file

@ -1,18 +0,0 @@
import React from "react";
import Link from "../Link.js";
export default function TextLink({
link,
text,
}: {
link: string;
text: string;
}) {
return (
<Link
classes="bg-blue-900 text-white leading-[20px]"
link={link}
text={text}
/>
);
}

View file

@ -22,7 +22,7 @@ export default class Tab extends Component<{
{tabs => (
<AnimateHeight
className={`absolute w-full lg:w-[525px] lg:rounded-xl ${this.props.position}
bg-blue-600/75 hover:bg-blue-600/90 active:bg-blue-600/90 backdrop-brightness-75 backdrop-contrast-150 backdrop-blur
bg-blue-800/75 hover:bg-blue-800/80 active:bg-blue-800/70 backdrop-brightness-75 backdrop-contrast-150 backdrop-blur
shadow-[12px_12px_0_0] shadow-blue-950/75
${tabs.find((t) => t.id === this.props.id)?.priority ?? "z-50"}`}
ref={this.div}

View file

@ -31,7 +31,7 @@ export default function About({
</div>
<div className="mr-auto mt-8 max-w-3xl text-right">
<a href="https://www.pixiv.net/en/artworks/85330094" target="_blank" rel="noreferrer">
<img className="m-4 float-left h-24 w-24 mt-8" src="/lain.png" alt="A drawing of Lain" title="A drawing of Lain"/>
<img className="m-4 float-left h-24 w-24" src="/lain.png" alt="A drawing of Lain" title="A drawing of Lain"/>
</a>
<Translatable
en={<p>I really like Japanese media! I'll pretty much always choose to have some drawing of <b>Lain Iwakura from <Link link="https://en.wikipedia.org/wiki/Serial_Experiments_Lain" text="Serial Experiments Lain"/></b> as my profile picture on the various websites I have an account on, as it is a piece of media I deeply enjoy.</p>}

View file

@ -30,8 +30,8 @@ export default function Contact({
/>
<CopyField text="@taevas:matrix.org" imageUrl="/logos/matrix.svg"/>
<Translatable
en={<p className="text-center"><ButtonLink link="https://matrix.to/#/@taevas:matrix.org" text="(matrix.to link)" /></p>}
fr={<p className="text-center"><ButtonLink link="https://matrix.to/#/@taevas:matrix.org" text="(lien matrix.to)" /></p>}
en={<ButtonLink link="https://matrix.to/#/@taevas:matrix.org" text="(matrix.to link)" />}
fr={<ButtonLink link="https://matrix.to/#/@taevas:matrix.org" text="(lien matrix.to)" />}
/>
</div>
)];

View file

@ -1,9 +1,9 @@
import React from "react";
import Tab from "../Tab.js";
import TextLink from "../Link/TextLink.js";
import Translatable from "../Translatable.js";
import {Devices} from "@carbon/icons-react";
import {type TabDetails} from "../../contexts.js";
import Link from "../Link.js";
export default function Projects({
setTabs,
@ -11,50 +11,50 @@ export default function Projects({
setTabs: React.Dispatch<React.SetStateAction<TabDetails[]>>;
}) {
const elements = [(
<div className="inline-block m-4 text-white" key={"projects"}>
<div className="border-4 p-4 m-4 max-w-3xl text-center bg-blue-700 transition hover:scale-105 hover:shadow-[0px_0_400px_400px_rgba(0,0,0,0.3)]">
<div className="inline-block m-4 text-white 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="/swordventure.png" alt="SwordVenture thumbnail"/></a>
<Translatable
en={<p><b>SwordVenture</b> initially was <TextLink link="https://github.com/RemiL-Nel/Clicker-game" text="a game made by a friend in React which I helped develop,"/> but I've made the choice months later to <b>recode it from scratch in Godot</b>, a proper game engine!</p>}
fr={<p><b>SwordVenture</b> était à la base <TextLink link="https://github.com/RemiL-Nel/Clicker-game" text="un jeu fait par un ami en React auquel j'ai contribué côté développement,"/> mais quelques mois plus tard, j'ai décidé de <b>le recoder en entier dans Godot</b>, qui est un véritable moteur de jeu vidéo !</p>}
en={<p><b><Link link="https://tttaevas.itch.io/swordventure" text="SwordVenture"/></b> initially was <Link link="https://github.com/RemiL-Nel/Clicker-game" text="a game made by a friend in React which I helped develop,"/> but months after the project ended, I made the choice to <b>recode it from scratch in <Link link="https://godotengine.org/" text="Godot"/></b>, a proper game engine!</p>}
fr={<p><b><Link link="https://tttaevas.itch.io/swordventure" text="SwordVenture"/></b> était à la base <Link link="https://github.com/RemiL-Nel/Clicker-game" text="un jeu fait par un ami en React auquel j'ai contribué côté développement,"/> mais quelques mois plus tard, j'ai fait le choix de <b>le refaire en entier dans <Link link="https://godotengine.org/" text="Godot"/></b>, qui est un véritable moteur de jeu vidéo !</p>}
/>
<br/>
<Translatable
en={<p>This was my first experience in this engine, and development took me a little more than 100 hours, in the span of less than a month. While a little barebones, I'm still very satisfied with the result!</p>}
fr={<p>C'était ma première fois avec ce moteur, et le développement m'a pris un peu plus de 100 heures en moins d'un mois. Bien qu'il n'y a au final pas trop de contenu dans le jeu, je suis tout de même très satisfait avec le résultat !</p>}
en={<p>This was essentially the first time I used this engine, and development took me a little more than 100 hours in total, in the span of less than a month. While it's pretty barebones, I'm still very satisfied with the result!</p>}
fr={<p>C'était la première fois que j'utilisais ce moteur, et le développement m'a pris en tout un peu plus de 100 heures en moins d'un mois. Bien qu'il n'y ait pas trop de contenu dans le jeu, je suis tout de même très satisfait avec le résultat !</p>}
/>
<br/>
<Translatable
en={<p>Although now, I'm left wondering how I'm gonna get the right assets for my next game, because for SwordVenture, I could just use the assets from the original project... I'm sure I will be able to figure it out!</p>}
fr={<p>Mais maintenant, je me demande comment je vais faire pour obtenir des images/textures pour mon prochain jeu, parce que pour SwordVenture, je pouvais juste utiliser ceux du projet original... Je suis sûr que je vais finir par trouver !</p>}
en={<p>SwordVenture was easy on the side of assets because for the most part, they were already made! My next project will need me to invest a lot more resources on that front. I'm looking forward to that challenge!!</p>}
fr={<p>SwordVenture était simple pour ce qui était des images, parce qu'elles étaient déjà faites avant que je commence ! Mon prochain projet va me demander bien plus d'efforts à ce niveau-. Tout de même, j'ai hâte de relever ce défi !</p>}
/>
</div>
<div className="border-4 p-4 m-4 max-w-3xl text-center bg-blue-700 transition hover:scale-105 hover:shadow-[0px_0_400px_400px_rgba(0,0,0,0.3)]">
<a href="https://kanaguessr.taevas.xyz" target="_blank" rel="noreferrer"><img className="m-4 float-left h-32" src="https://kanaguessr.taevas.xyz/favicon.png" alt="Kanaguessr logo"/></a>
<div className="border-b-4 py-4">
<a href="https://kanaguessr.taevas.xyz" target="_blank" rel="noreferrer"><img className="m-4 float-right h-16" src="https://kanaguessr.taevas.xyz/favicon.png" alt="Kanaguessr logo"/></a>
<Translatable
en={<p>Working on kanaguessr is one of the first things I've done in 2021, and I essentially made it better in every aspect in early 2023.</p>}
fr={<p>Travailler sur kanagessur est l'une des premières choses que j'ai faites en 2021, et je l'ai basiquement rendu meilleur sur tous les plans début 2023.</p>}
en={<p>Working on <Link link="https://kanaguessr.taevas.xyz/" text="kanaguessr"/> is one of the first things I've done in 2021, and I ended up working on it again to make it essentially better in every aspect in early 2023.</p>}
fr={<p>Travailler sur <Link link="https://kanaguessr.taevas.xyz/" text="kanaguessr"/> est l'une des premières choses que j'ai faites en 2021, pour au final retravailler dessus début 2023 pour le rendre meilleur sur tous les plans.</p>}
/>
<br/>
<Translatable
en={<p>Back in 2020 or so, <b>I had found hiraganaquiz.com, and thought to myself it could be much better</b> without ads, with a less outdated design, and with better options to customize the user experience, and because the concept was simple, I've taken its concept and made kanaguessr! (although its name used to be KanaLearning)</p>}
fr={<p>Aux alentours de 2020, <b>j'ai trouvé hiraganaquiz.com, et je me suis dit que ce site pourrait être meilleur</b> sans publicités, avec un design qui paraît moins vieux, et des meilleures options afin de customiser son expérience, et parce que le concept était simple, j'ai pris le concept du site et j'ai crée kanaguessr ! (bien que son nom à la base était KanaLearning)</p>}
en={<p>Back in 2020 or so, <b>I had found <Link link="https://hiraganaquiz.com/" text="hiraganaquiz.com"/>, and thought to myself it could be much better</b> without ads, with a less outdated design, and with better options to customize the user experience, and because the concept was simple, I've taken its concept and made kanaguessr! (although its name used to be KanaLearning)</p>}
fr={<p>Aux alentours de 2020, <b>j'ai trouvé <Link link="https://hiraganaquiz.com/" text="hiraganaquiz.com"/>, et je me suis dit que ce site pourrait être meilleur</b> sans publicités, avec un design qui paraît moins vieux, et des meilleures options afin de customiser son expérience, et parce que le concept était simple, j'ai pris le concept du site et j'ai crée kanaguessr ! (bien que son nom à la base était KanaLearning)</p>}
/>
<br/>
<Translatable
en={<p>It helped friends with remembering katakanas, so I'm glad I took the time to make and polish this webpage!</p>}
fr={<p>Ça a aidé des amies à se souvenir des katakanas, donc je suis content d'avoir pris le temps de créer et de peaufiner cette page web !</p>}
fr={<p>Ça a aidé des amies à se souvenir de certains katakanas, donc je suis content d'avoir pris le temps de créer et de peaufiner cette page web !</p>}
/>
</div>
<div className="border-4 p-4 m-4 max-w-3xl text-center bg-blue-700 transition hover:scale-105 hover:shadow-[0px_0_400px_400px_rgba(0,0,0,0.3)]">
<div className="border-b-4 py-4">
<Translatable
en={<p>Still in early 2023, I've made <TextLink link="https://github.com/TTTaevas/osu-api-v1-js" text="osu-api-v1-js"/>, my first JavaScript (TypeScript) package!</p>}
fr={<p>Toujours début 2023, j'ai crée <TextLink link="https://github.com/TTTaevas/osu-api-v1-js" text="osu-api-v1-js"/>, mon premier package JavaScript (TypeScript) !</p>}
en={<p>Still in early 2023, I've made <b><Link link="https://github.com/TTTaevas/osu-api-v1-js" text="osu-api-v1-js"/>, my first JavaScript (TypeScript) package!</b></p>}
fr={<p>Toujours début 2023, j'ai créé <b><Link link="https://github.com/TTTaevas/osu-api-v1-js" text="osu-api-v1-js"/>, mon premier package JavaScript (TypeScript) !</b></p>}
/>
<br/>
<Translatable
en={<p>I've been using the first version of osu!'s API in several ways for years at this point, and yet I've never been using any package to make my life easier, I remember simply using axios directly and copypasting code between some of my projects. I never felt like using third party software to use such a simple API.</p>}
fr={<p>J'avais déjà utilisé la première version de l'API d'osu! de multiples façons pendant des années à l'époque, et pourtant je n'ai jamais utilisé de package pour rendre ma vie plus simple, je me souviens que j'utilisais tout simplement axios et que je copiais/collais du code à travers mes projets. Je ne me suis jamais senti d'utiliser du code de quelqu'un d'autre pour utiliser une API aussi simple.</p>}
en={<p>I've been using the first version of <Link link="https://github.com/ppy/osu-api/wiki" text="osu!'s API"/> in several ways for years at this point, and yet I've never been using any package to make my life easier with it, I remember simply using <Link link="https://axios-http.com/" text="axios"/> and copypasting code between some of my projects. I never felt like using third party software for the sole purpose of using such a simple API.</p>}
fr={<p>J'avais déjà utilisé la première version de <Link link="https://github.com/ppy/osu-api/wiki" text="l'API d'osu!"/> de multiples façons pendant des années à l'époque, et pourtant je n'ai jamais utilisé de package pour rendre ma vie plus simple avec ça, je me souviens que j'utilisais tout simplement <Link link="https://axios-http.com/" text="axios"/> et que je copiais/collais du code à travers mes projets. Je ne me suis jamais senti d'utiliser du code de quelqu'un d'autre afin utiliser une API aussi simple.</p>}
/>
<br/>
<Translatable
@ -62,11 +62,11 @@ export default function Projects({
fr={<p>Et pourtant ce n'est pas vraiment génial de continuer à écrire le même code encore et encore, alors j'ai utilisé cette excuse pour enfin m'essayer à écrire des packages ! Et je pense honnêtement que le résultat est très bon, il couvre complètement l'API, est complètement documenté, et rend même certaines choses encore plus intuitives et consistentes, je ne sais même pas comment je pourrais le rendre meilleur !</p>}
/>
</div>
<div className="border-4 p-4 m-4 max-w-3xl text-center bg-blue-700 transition hover:scale-105 hover:shadow-[0px_0_400px_400px_rgba(0,0,0,0.3)]">
<div className="border-b-4 py-4">
<a href="https://finder.taevas.xyz" target="_blank" rel="noreferrer"><img className="m-4 float-right h-16" src="https://finder.taevas.xyz/Webpage/favicon.png" alt="Website-Finder logo"/></a>
<Translatable
en={<p>...Website-Finder is actually an odd one. What started off in 2020 as <TextLink link="https://gitlab.com/Isterix/rif2" text="a simple Ruby script that downloads images from every webpage it can find,"/> became a way for me to experiment with different programming languages and their networking capabilities, without dependencies.</p>}
fr={<p>...Website-Finder est en fait assez étrange. Ce qui a commencé en 2020 en tant que <TextLink link="https://gitlab.com/Isterix/rif2" text="simple script Ruby qui télécharge les images de chaque page web qu'il peut trouver,"/> est devenu une façon pour moi de jouer avec differents langages de programmation et leures capacités en terme d'accès à internet.</p>}
en={<p>...<Link link="https://finder.taevas.xyz/" text="Website-Finder"/> is actually an odd one. What started off in 2020 as <Link link="https://gitlab.com/Isterix/rif2" text="a simple Ruby script that downloads images from every webpage it can find,"/> <b>became a way for me to experiment with different programming languages and their networking capabilities,</b> without dependencies.</p>}
fr={<p>...<Link link="https://finder.taevas.xyz/" text="Website-Finder"/> est en fait assez étrange. Ce qui a commencé en 2020 en tant que <Link link="https://gitlab.com/Isterix/rif2" text="simple script Ruby qui télécharge les images de chaque page web qu'il peut trouver,"/> <b>est devenu une façon pour moi de jouer avec differents langages de programmation et leures capacités en terme d'accès à internet.</b></p>}
/>
<br/>
<Translatable
@ -75,29 +75,34 @@ export default function Projects({
/>
<br/>
<Translatable
en={<p>From what I remember, some people didn't actually like the design of the webpage, yet I think it's the best design I've ever managed to make for any website!</p>}
fr={<p>De ce que je me rappelle, certaines personnes n'ont pas aimé le design de la page web, mais je pense pourtant que c'est le meilleur design que j'ai réussi à créer pour n'importe quel site web !</p>}
en={<p>From what I remember, some people didn't actually like the design of the webpage, yet I think it's the best design I've ever managed to make for any website! ...with the exception of the one you're currently on, hehe</p>}
fr={<p>De ce que je me rappelle, certaines personnes n'ont pas aimé le design de la page web, mais je pense pourtant que c'est le meilleur design que j'ai réussi à créer pour n'importe quel site web ! ...à part pour celui sur lequel vous êtes, héhé</p>}
/>
<br/>
<Translatable
en={<p>I must have weird tastes or something.</p>}
fr={<p>Je dois avoir des goûts bizarres.</p>}
en={<p>Maybe I just have weird tastes or something.</p>}
fr={<p>C'est peut-être que j'ai des goûts bizarres.</p>}
/>
</div>
<div className="border-4 p-4 m-4 max-w-3xl text-center bg-blue-700 transition hover:scale-105 hover:shadow-[0px_0_400px_400px_rgba(0,0,0,0.3)]">
<div className="border-b-4 py-4">
<Translatable
en={<p>So <TextLink link="https://github.com/TTTaevas/osu-api-v2-js" text="osu-api-v2-js"/> is something I've had to work on during three different and distinct periods. I started working on it in March 2023 roughly around the time I finished working on osu-api-v1-js, then I took a break and worked on it again in November 2023, only to finally finish it in March 2024.</p>}
fr={<p>Alors <TextLink link="https://github.com/TTTaevas/osu-api-v2-js" text="osu-api-v2-js"/>, c'est quelque chose sur lequel j'ai travailler durant 3 périodes bien différentes, en commençant en Mars 2023 genre quand j'ai fini osu-api-v1-js, puis Novembre 2023 après une pause, puis enfin Mars 2024 après une autre pause.</p>}
en={<p>So <Link link="https://github.com/TTTaevas/osu-api-v2-js" text="osu-api-v2-js"/> is something I've had to work on during three different and distinct periods. I started working on it in March 2023 roughly around the time I finished working on osu-api-v1-js, then I took a break and worked on it again in November 2023, only to finally finish it in March 2024.</p>}
fr={<p>Alors <Link link="https://github.com/TTTaevas/osu-api-v2-js" text="osu-api-v2-js"/>, c'est quelque chose sur lequel j'ai travailler durant 3 périodes bien différentes, en commençant en Mars 2023 genre quand j'ai fini osu-api-v1-js, puis Novembre 2023 après une pause, puis enfin Mars 2024 après une autre pause.</p>}
/>
<br/>
<Translatable
en={<p>The reason why I took so long is that the task at hand was actually really difficult, as this software is an api wrapper that aimed to provide the best type safety possible while being feature-complete, for an API that is not entirely documented and is everchanging! And if you're wondering why I even bothered finishing this project, that's because I just hate unfinished projects.</p>}
fr={<p>La raison pour laquelle j'ai pris tellement longtemps est que ce projet était en fait très difficile, car ce package est un api wrapper qui voulait un maximum de type safety tout en étant complet, pour une API qui n'était pas entièrement documentée et en éternel changement ! Et si vous vous demandez pourquoi je me suis embêté à finir ce projet, c'est parce que je déteste laisser des projets à l'abandon, sans qu'ils puissent être finis.</p>}
en={<p>Although, <b>saying I "finished it" would be misleading because of its nature,</b> so I guess it would be more accurate to say that it managed to find its footing?</p>}
fr={<p>Bien que <b>dire que je "l'ai fini" serait trompeur étant donné la nature du projet,</b> je suppose qu'il serait mieux de dire qu'il a trouvé un semblant de stabilité ?</p>}
/>
<br/>
<Translatable
en={<p>Now that it's finished, I know it'll definitely help <i>someone</i> in the future, let it be someone I don't know, a friend, or even myself! And with that peace of mind, I can safely move on to another project, while keeping an eye out for potential issues that would get opened on this project's repository!</p>}
fr={<p>Avec ça de fait, je sais pour sûr que ça aidera <i>quelqu'un</i> à un moment, que ce soit quelqu'un que je ne connais pas, un ami, ou même moi-même ! Et c'est ainsi que je peux m'occuper d'un tout autre projet, tout en gardant l'oeil ouvert pour des issues GitHub sur le repo de ce projet !</p>}
en={<p>The reason why I took so long is that the task at hand was actually really difficult, as this software is an api wrapper that aimed to provide the best type safety possible while being feature-complete, for <Link link="https://osu.ppy.sh/docs/" text="an API that is FAR from being entirely documented and is everchanging!"/> And if you're wondering why I even bothered to keep going with this project, that's because I just hate leaving things in a bad state.</p>}
fr={<p>La raison pour laquelle j'ai pris tellement longtemps est que ce projet est en fait très difficile, car ce package est un api wrapper qui voulait un maximum de "type safety" tout en étant complet, pour <Link link="https://osu.ppy.sh/docs/" text="une API qui est LOIN d'être entièrement documentée et est en éternel changement !"/> Et si vous vous demandez pourquoi je me suis embêté à continuer ce projet, c'est parce que je déteste laisser des choses à l'abandon.</p>}
/>
<br/>
<Translatable
en={<p>Now that I'm done making it good, <b>I know it'll definitely help <i>someone</i> in the future, let it be someone I don't know, a friend, or even myself!</b> And with that peace of mind, I can safely move on to another project, while keeping an eye out for potential issues that can appear!</p>}
fr={<p>Avec ça de fait, <b>je sais pour sûr que ça aidera <i>quelqu'un</i> à un moment, que ce soit quelqu'un que je ne connais pas, un ami, ou même moi-même !</b> Et c'est ainsi que je peux m'occuper d'un tout autre projet, tout en gardant l'oeil ouvert pour des problèmes potentiels qui peuvent apparaître !</p>}
/>
</div>
</div>

View file

@ -3,6 +3,7 @@ import Tab from "../Tab.js";
import Translatable from "../Translatable.js";
import {UserFavorite} from "@carbon/icons-react";
import {type TabDetails} from "../../contexts.js";
import ButtonLink from "../Link/ButtonLink.js";
export default function Support({
setTabs,
@ -14,27 +15,27 @@ export default function Support({
<p>
<b>
<Translatable
en={"Thanks for even considering supporting me!"}
fr={"Déjà, merci d'envisager de me soutenir !"}
en={"Thank you for wanting to support me!"}
fr={"Déjà, merci de vouloir me soutenir !"}
/>
</b>
</p>
<br/>
<Translatable
en={<p>If you like what I do, donating some money would allow me to do even more without worrying <i>too much</i> about spending money for that purpose.</p>}
fr={<p>Si vous aimez ce que je fais, me donner un peu d'argent me permettrait de faire encore plus sans <i>trop</i> me soucier de dépenser de l'argent pour ça.</p>}
/>
<br/>
<p>
<Translatable
en={"Monthly, I would basically only need $3 from 2 people to keep doing what I like without losing much money!"}
fr={"En gros, je n'aurais besoin que de $3 de 2 personnes par mois pour que je puisse continuer de faire ce que j'aime sans perdre top d'argent !"}
en={"Only if you want and can, you may go on my Ko-fi page to give me some monetary support:"}
fr={"Seulement si vous le souhaitez et le pouvez, alors vous pouvez aller sur ma page Ko-fi afin de me faire un petit don d'argent :"}
/>
</p>
<p>
<Translatable
en={"Only if you want and if you can, you may support me through my Ko-fi page:"}
fr={"Seulement si vous le souhaitez et si vous le pouvez, alors vous pouvez me soutenir sur ma page Ko-fi :"}
/>
</p>
<a href='https://ko-fi.com/V7V4J78L0' target='_blank' rel="noreferrer">
<img className="h-12 mx-auto my-2" src='https://storage.ko-fi.com/cdn/kofi3.png?v=3' alt='Support me on Ko-fi!' />
</a>
<Translatable
en={<ButtonLink link="https://ko-fi.com/V7V4J78L0" text="Support me on Ko-fi!" />}
fr={<ButtonLink link="https://ko-fi.com/V7V4J78L0" text="Soutenez-moi sur Ko-fi !"/>}
/>
</div>
)];