src/lib/tech.svelte

@@ -1,24 +0,0 @@
-<script lang="ts">
-	export let tech: string;
-	export let logoBaseDir: string;
-	export let logoFiletype: 'svg'| 'png' = 'svg';
-	export let size: 'small' | 'medium' | 'big' = 'small'
-
-	let logoDir: string = `/${logoBaseDir}/${tech}-logo.${logoFiletype}`;
-	let logoAlt: string = `${tech} logo`;
-	let isSmall = size === 'small';
-	let isMedium = size === 'medium';
-	let isBig = size === 'big';
-</script>
-<img src={logoDir} alt={logoAlt} class:small={isSmall} class:medium={isMedium} class:big={isBig}>
-<style>
-	.small {
-		height: 3rem;
-	}
-	.medium {
-		height: 3.5rem;
-	}
-	.big {
-		height: 4rem;
-	}
-</style>

src/routes/abtme/+page.svelte

@@ -1,12 +1,10 @@
 <script lang="ts">
     import Link from '$lib/link.svelte';
-    import Tech from '$lib/tech.svelte';
 	import Title from '$lib/title.svelte';
 	import Ubication from '$lib/ubication.svelte';
-	let techs: string[] = ['ts', 'js', 'svelte', 'react', 'cpp', 'python', 'rust', 'angular'];
 </script>
 <section class="grid grid-cols-8 gap-2">
-	<grid-section id="main" class="lg:col-span-6 md:col-span-8">
+	<grid-section id="main" class="col-span-6 sm:col-span-8">
 		<Title title="Who am I?"/>
 		<p>I'm a <strong>fullstack</strong> developer (don't mind either front or back), and also a <strong>bioinformatician</strong>.</p>
 		<div class="pb-3">
@@ -23,12 +21,13 @@
 			<p>Employment: Backend Developer @ <Link link="https://taclia.es" text="Taclia" asCode underline/></p>
 		</div>
 	</grid-section>
-	<grid-section id="lateral" class="lg:col-span-2 md:col-span-8">
-		<p class="text-3xl font-semibold py-2">Technologies</p>
-			<div class="flex flex-wrap gap-2">
-				{#each techs as tech}
-					<Tech logoBaseDir="tech" {tech} size="small"/>
-				{/each}
+	<grid-section id="lateral">
+		<p class="text-2xl font-semibold">Technologies</p>
+			<div class="flex">
+				<img src="/tech/ts/ts-logo-512.svg" alt="TypeScript logo" class="w-6">
+				<img src="/tech/js/js-logo-512.svg" alt="JavaScript logo" class="w-6">
+				<img src="/tech/react/react-logo-512.svg" alt="React logo" class="w-6">
+				<img src="/tech/svelte/svelte-logo.svg" alt="Svelte logo" class="w-6">
 			</div>
 	</grid-section>
 </section>

src/routes/styles.css

@@ -15,6 +15,7 @@ section {
 }
 
 grid-section {
+	margin-left: auto;
 	margin-right: auto;
 	margin-top: 1.25rem;
 	margin-bottom: 1.25rem;