refactor: restructure application components and update routing

jsconfig.json

@@ -0,0 +1,9 @@
+{
+    "compilerOptions": {
+      "baseUrl": ".",
+      "paths": {
+        "@/*": ["src/*"]
+      }
+    },
+    "include": ["src"]
+  }

src/App.jsx

@@ -0,0 +1,42 @@
+import '@/css/App.css'
+import 'bootstrap/dist/css/bootstrap.min.css'
+import 'bootstrap/dist/js/bootstrap.bundle.min.js'
+
+import Home from '@/pages/Home/Home.jsx'
+import Projects from '@/pages/Projects/Projects.jsx'
+
+import Header from '@/components/Header.jsx'
+import Link from '@/components/Link.jsx'
+import NavBar from '@/components/NavBar.jsx'
+import Footer from '@/components/Footer.jsx'
+import { Routes, Route } from 'react-router-dom'
+
+const App = () => {
+
+  const getCurrentYear = () => {
+    const start = new Date('2022-09-10');
+    const now = new Date();
+
+    const delta = now.getFullYear() - start.getFullYear();
+    const septemberOrLater = now.getMonth() >= 8;
+
+    return delta + (septemberOrLater ? 1 : 0);
+  };
+
+  return (
+    <>
+      <Header title="Hola, soy Jose" subtitle={`Estudiante de Ingeniería de Computadores en la US (${getCurrentYear()}º año)`} />
+      <NavBar>
+        <Link to="/" isNavbar>Inicio</Link>
+        <Link to="/proyectos" isNavbar>Proyectos</Link>
+      </NavBar>
+      <Routes>
+        <Route path="/" element={<Home />} />
+        <Route path="/proyectos" element={<Projects />} />
+      </Routes>
+      <Footer />
+    </>
+  );
+}
+
+export default App;

src/components/App.jsx

@@ -1,43 +0,0 @@
-import '../css/App.css'
-import 'bootstrap/dist/css/bootstrap.min.css'
-import 'bootstrap/dist/js/bootstrap.bundle.min.js'
-
-import Home from '../pages/Home/Home.jsx'
-import Projects from '../pages/Projects/Projects.jsx'
-
-import Header from './Header.jsx'
-import Link from './Link.jsx'
-import NavBar from './NavBar.jsx'
-import Footer from './Footer.jsx'
-import { Routes, Route } from 'react-router-dom'
-
-const App = () => {
-
-  const getCursoActualCarrera = () => {
-    const inicio = new Date('2022-09-10');
-    const ahora = new Date();
-
-    const añosPasados = ahora.getFullYear() - inicio.getFullYear();
-    const haPasadoSeptiembre = ahora.getMonth() >= 8;
-
-    const cursoActual = añosPasados + (haPasadoSeptiembre ? 1 : 0);
-    return cursoActual;
-  };
-
-  return (
-    <>
-      <Header title="Hola, soy Jose" subtitle={`Estudiante de Ingeniería de Computadores en la US (${getCursoActualCarrera()}º año)`} />
-      <NavBar>
-        <Link to="/" isNavbar>Inicio</Link>
-        <Link to="/proyectos" isNavbar>Proyectos</Link>
-      </NavBar>
-      <Routes>
-        <Route path="/" element={<Home />} />
-        <Route path="/proyectos" element={<Projects />} />
-      </Routes>
-      <Footer />
-    </>
-  );
-}
-
-export default App;

src/components/Footer.jsx

@@ -21,7 +21,7 @@ const Footer = () => {
       <span className="mx-3">|</span>
       <div className="d-flex gap-3 justify-content-center">
         {[
-          { text: 'GitHub', to: 'https://github.com/Gallardo7761' },
+          { text: 'MiarmaGit', to: 'https://git.miarma.net/Gallardo7761' },
           { text: 'Instagram', to: 'https://instagram.com/gallardoo7761' },
           { text: 'Reddit', to: 'https://reddit.com/u/Gallardo7761' },
         ].map((social) => (
@@ -29,7 +29,9 @@ const Footer = () => {
             {social.text}
           </Link>
         ))}
+        <li className="nav-item" style={{ listStyleType: "none" }}>
           <a className='mastodon-verify' rel="me" href="https://mastodon.social/@gallardo7761">Mastodon</a>
+        </li>
       </div>
     </footer>
   );

src/main.jsx

@@ -2,8 +2,8 @@ import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import { BrowserRouter } from 'react-router-dom';
 
-import App from './components/App.jsx';
-import './css/index.css';
+import App from './App.jsx';
+import '@/css/index.css';
 
 createRoot(document.getElementById('root')).render(
   <StrictMode>

src/pages/Home/Home.jsx

@@ -26,7 +26,7 @@ const AboutSection = () => {
           >
             <div className="rounded-circle overflow-hidden mx-auto shadow-lg" style={{ width: '300px', height: '300px' }}>
               <motion.img
-                src="https://avatars.githubusercontent.com/u/100301878?v=4"
+                src="https://git.miarma.net/avatars/2fba8e2d4e39fffec3bbfe128df0cb9934ccf9b49fd6d310244c6b6209739425?size=512"
                 alt="Avatar"
                 className="w-100 h-100 object-cover"
                 whileHover={{ scale: 1.05 }}
@@ -44,10 +44,10 @@ const AboutSection = () => {
             <h2 className="h3 fw-bold mb-3">Sobre Mí</h2>
             <p className="text-muted mb-4">
               Soy un estudiante de Ingeniería de Computadores en la Universidad de Sevilla, en mi cuarto año. 
-              Actualmente me dedico a linux, redes, microcontroladores y webdev.
+              Actualmente me dedico a linux, redes, microcontroladores y webdev. Por aquí abajo dejo con lo que suelo trastear:
             </p>
             <div className="d-flex flex-wrap gap-2">
-              {['C/C++', 'Java', 'React', 'Vanilla JS', 'Python', 'MariaDB', 'Linux' ].map((skill) => (
+              {['C', 'Rust', 'Java', 'JS (Vanilla + React)', 'Python', 'DB', 'Linux', 'HDL'].map((skill) => (
                 <motion.span
                   key={skill}
                   className="badge px-3 py-2"
@@ -98,9 +98,9 @@ const ProjectsSection = () => {
         <h2 className="h3 fw-bold mb-4 text-center">Mis Proyectos Favoritos</h2>
         <div className="row g-4">
           {[
-            { title: 'core', desc: 'Mega-backend que alimenta todos mis servicios' },
-            { title: 'mkernel', desc: 'Plugin que hace que mi servidor de Minecraft funcione' },
-            { title: 'amodgus', desc: 'Mod de Minecraft para introducir al Amongus (sus)' },
+            { title: 'miarma-backend', desc: 'Backend Spring que alimenta todos mis servicios' },
+            { title: 'riscv-ac', desc: 'Implementación HDL del procesador RISC-V de la asignatura AC' },
+            { title: 'contaminus', desc: 'Proyecto presentado al hackathon Hack4Change 24/25 de la ETSII (aunque el jurado no nos echase mucha cuenta...). Mezcla frontend, backend e IoT.' },
           ].map((project, index) => (
             <motion.div
               key={project.title}

src/pages/Projects/Projects.jsx

@@ -21,7 +21,7 @@ export default function ProjectsLanding() {
     <div className="container mt-5 mb-5 text-white">
       <h1 className="text-center text-dark mb-4">Mis Proyectos en GitHub</h1>
       <p className="text-center text-muted mb-4">
-        Aquí puedes ver algunos de los proyectos en los que he trabajado. 🚀
+        (Copia temporal del mirror de GitHub, próximamente desde mi propia instancia Gitea!!!)
       </p>
       <div className="row">
         {repos.map((repo) => (

vite.config.js

@@ -1,10 +1,16 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
+import { resolve } from 'path';
 
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [react()],
   build: {
     outDir: 'dist'
-  }
+  },
+  resolve: {
+    alias: {
+      '@': resolve(__dirname, './src'),
+    },
+  },
 })