fist commit

.gitignore

@@ -0,0 +1,24 @@
+# build output
+dist/
+
+# generated types
+.astro/
+
+# dependencies
+node_modules/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store
+
+# jetbrains setting folder
+.idea/

.vscode/extensions.json

@@ -0,0 +1,4 @@
+{
+  "recommendations": ["astro-build.astro-vscode"],
+  "unwantedRecommendations": []
+}

.vscode/launch.json

@@ -0,0 +1,11 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "command": "./node_modules/.bin/astro dev",
+      "name": "Development server",
+      "request": "launch",
+      "type": "node-terminal"
+    }
+  ]
+}

README.md

@@ -0,0 +1,56 @@
+![](public/img/banner.gif)
+
+<p>
+  <h1 align="center"><b>Hello there, I'm Swumplurd 👾</b></h1>
+</p>
+
+<p>
+  <h4 align="center"><b>"Si puedes imaginarlo, puedes programarlo"</b></h4>
+  <h5 align="center">Programacion ATS</h5>
+</p>
+
+<p align="center">
+<br>
+<a href="https://www.linkedin.com/in/fernando-said-vasquez-tello-bb7087250/"><img src="https://img.shields.io/badge/linkedin-%230077B5.svg?&style=for-the-badge&logo=linkedin&logoColor=white" alt="LinkedIn" /></a>&nbsp;
+<a href="mailto:ing.fernando.vasquez.tello@gmail.com"><img src="https://img.shields.io/badge/gmail-%23D14836.svg?&style=for-the-badge&logo=gmail&logoColor=white" alt="Gmail"/></a>&nbsp;
+
+<br>
+</p>
+
+### Languajes and Tools
+
+<div align="center">
+  <img align="center" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/javascript/javascript-original.svg" width=32/>
+  <img align="center" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/typescript/typescript-original.svg" width=32/>
+  <img align="center" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/java/java-original.svg" width=32/>
+  <img align="center" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/python/python-original.svg" width=32/>
+  <img align="center" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/php/php-plain.svg" width=32/>
+  <img align="center" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/mongodb/mongodb-original-wordmark.svg" width=32/>
+  <img align="center" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/express/express-original.svg" width=32/>
+  <img align="center" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/react/react-original.svg" width=32/>
+  <img align="center" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/redux/redux-original.svg" width=32/>
+  <img align="center" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nextjs/nextjs-original.svg" width=32/>
+  <img align="center" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nodejs/nodejs-original.svg" width=32/>
+  <img align="center" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/mysql/mysql-original.svg" width=32/>
+  <img align="center" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/yarn/yarn-original.svg" width=32/>
+  <img align="center" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/jest/jest-plain.svg" width=32/>
+  <img align="center" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/html5/html5-original.svg" width=32/>
+  <img align="center" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/css3/css3-original.svg" width=32/>
+  <img align="center" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/jquery/jquery-original.svg" width=32/>
+  <img align="center" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/bootstrap/bootstrap-original.svg" width=32/>
+  <img align="center" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/gulp/gulp-plain.svg" width=32/>
+  <img align="center" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/sass/sass-original.svg" width=32/>
+  <img align="center" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/linux/linux-original.svg" width=32/>
+  <img align="center" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/ubuntu/ubuntu-plain.svg" width=32/>
+  <img align="center" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/bash/bash-original.svg" width=32/>
+  <img align="center" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/discordjs/discordjs-original.svg" width=32/>
+  <img align="center" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/figma/figma-original.svg" width=32/>
+</div>
+
+### Softwares
+
+<div align="center">
+  <img align="center" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/vscode/vscode-original.svg" width=32/>
+  <img align="center" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/androidstudio/androidstudio-original.svg" width=32/>
+  <img align="center" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/xd/xd-plain.svg" width=32/>
+</div>

astro.config.mjs

@@ -0,0 +1,17 @@
+// @ts-check
+import { defineConfig } from 'astro/config';
+
+import tailwind from '@astrojs/tailwind';
+
+import react from '@astrojs/react';
+
+import icon from 'astro-icon';
+
+import mdx from '@astrojs/mdx';
+
+// https://astro.build/config
+export default defineConfig({
+  site: "https://swumplurd.github.io",
+  output: 'static',
+  integrations: [tailwind(), react(), icon(), mdx()]
+});

package.json

@@ -0,0 +1,34 @@
+{
+  "name": "nasty-nadir",
+  "type": "module",
+  "version": "0.0.1",
+  "scripts": {
+    "dev": "astro dev",
+    "start": "astro dev",
+    "build": "astro check && astro build",
+    "preview": "astro preview",
+    "astro": "astro",
+    "deploy": "gh-pages -d dist"
+  },
+  "dependencies": {
+    "@astrojs/check": "^0.9.4",
+    "@astrojs/mdx": "^3.1.8",
+    "@astrojs/react": "^3.6.2",
+    "@astrojs/tailwind": "^5.1.1",
+    "@fontsource-variable/inter": "^5.1.0",
+    "@fontsource/roboto": "^5.1.0",
+    "@types/react": "^18.3.11",
+    "@types/react-dom": "^18.3.0",
+    "astro": "^4.15.12",
+    "astro-icon": "^1.1.1",
+    "gh-pages": "^6.2.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "tailwindcss": "^3.4.13",
+    "typescript": "^5.6.2"
+  },
+  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e",
+  "devDependencies": {
+    "@iconify-json/mdi": "^1.2.1"
+  }
+}

public/browserconfig.xml

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig><msapplication><tile><square70x70logo src="/ms-icon-70x70.png"/><square150x150logo src="/ms-icon-150x150.png"/><square310x310logo src="/ms-icon-310x310.png"/><TileColor>#ffffff</TileColor></tile></msapplication></browserconfig>

public/manifest.json

@@ -0,0 +1,41 @@
+{
+ "name": "App",
+ "icons": [
+  {
+   "src": "\/android-icon-36x36.png",
+   "sizes": "36x36",
+   "type": "image\/png",
+   "density": "0.75"
+  },
+  {
+   "src": "\/android-icon-48x48.png",
+   "sizes": "48x48",
+   "type": "image\/png",
+   "density": "1.0"
+  },
+  {
+   "src": "\/android-icon-72x72.png",
+   "sizes": "72x72",
+   "type": "image\/png",
+   "density": "1.5"
+  },
+  {
+   "src": "\/android-icon-96x96.png",
+   "sizes": "96x96",
+   "type": "image\/png",
+   "density": "2.0"
+  },
+  {
+   "src": "\/android-icon-144x144.png",
+   "sizes": "144x144",
+   "type": "image\/png",
+   "density": "3.0"
+  },
+  {
+   "src": "\/android-icon-192x192.png",
+   "sizes": "192x192",
+   "type": "image\/png",
+   "density": "4.0"
+  }
+ ]
+}

src/components/blog/three-js.md

@@ -0,0 +1,112 @@
+
+# Crea tu primer escena 3D con ThreeJS
+
+¿Quieres dar tus primeros pasos en el mundo del desarrollo 3D para la web? ThreeJS es una librería poderosa y sencilla que te permite crear escenas 3D increíbles de manera rápida y eficiente. En este tutorial, te enseñaremos cómo crear tu primera escena 3D paso a paso, desde la configuración básica hasta la aplicación de texturas.
+
+## ¿Qué aprenderás?
+
+- Cómo configurar una escena 3D en ThreeJS.
+- Crear una esfera geométrica.
+- Añadir iluminación ambiental y puntual.
+- Cargar y aplicar texturas a tus objetos.
+
+### Requisitos previos
+
+Antes de comenzar, asegúrate de tener un conocimiento básico de JavaScript y haber instalado ThreeJS en tu proyecto. Si no lo has hecho, puedes agregarlo a tu proyecto mediante un gestor de paquetes como npm:
+
+```bash
+npm install three
+```
+
+### 1. Configurando tu escena
+
+El primer paso es crear una escena básica. Para esto, necesitarás tres componentes clave: la **escena**, la **cámara** y el **renderizador**.
+
+```javascript
+import * as THREE from 'three';
+
+// Crear la escena
+const scene = new THREE.Scene();
+
+// Crear la cámara (Campo de visión, proporción, cercanía, lejanía)
+const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+camera.position.z = 5;
+
+// Crear el renderizador
+const renderer = new THREE.WebGLRenderer();
+renderer.setSize(window.innerWidth, window.innerHeight);
+document.body.appendChild(renderer.domElement);
+```
+
+### 2. Creando una esfera
+
+Vamos a crear una esfera utilizando la clase `SphereGeometry` de ThreeJS. Luego aplicaremos un material simple para visualizarla.
+
+```javascript
+// Crear geometría de la esfera
+const geometry = new THREE.SphereGeometry(1, 32, 32);
+
+// Crear material de la esfera
+const material = new THREE.MeshBasicMaterial({ color: 0x0077ff });
+
+// Crear la malla
+const sphere = new THREE.Mesh(geometry, material);
+
+// Añadir la esfera a la escena
+scene.add(sphere);
+```
+
+### 3. Añadiendo luces
+
+Las luces son fundamentales para hacer que tu escena se vea realista. Añadiremos luz ambiental para iluminar de manera uniforme y luz puntual para resaltar la esfera.
+
+```javascript
+// Añadir luz ambiental
+const ambientLight = new THREE.AmbientLight(0x404040); // Luz suave
+scene.add(ambientLight);
+
+// Añadir luz puntual
+const pointLight = new THREE.PointLight(0xffffff, 1, 100);
+pointLight.position.set(5, 5, 5);
+scene.add(pointLight);
+```
+
+### 4. Cargando y aplicando texturas
+
+Para darle un toque más realista a nuestra esfera, cargaremos una textura utilizando la clase `TextureLoader` de ThreeJS.
+
+```javascript
+// Cargar una textura
+const textureLoader = new THREE.TextureLoader();
+const texture = textureLoader.load('ruta/a/tu/imagen.jpg');
+
+// Aplicar la textura a un nuevo material
+const texturedMaterial = new THREE.MeshBasicMaterial({ map: texture });
+
+// Actualizar la esfera con el nuevo material
+sphere.material = texturedMaterial;
+```
+
+### 5. Animando la escena
+
+Para que la esfera sea interactiva, vamos a crear una animación simple que haga girar la esfera continuamente.
+
+```javascript
+function animate() {
+  requestAnimationFrame(animate);
+
+  // Rotar la esfera
+  sphere.rotation.x += 0.01;
+  sphere.rotation.y += 0.01;
+
+  // Renderizar la escena
+  renderer.render(scene, camera);
+}
+
+// Iniciar la animación
+animate();
+```
+
+### Conclusión
+
+¡Felicidades! Has creado tu primera escena 3D con ThreeJS, añadiendo una esfera, luces y texturas. Esto es solo el principio: con ThreeJS puedes crear todo tipo de geometrías, cargar modelos 3D más complejos y explorar técnicas avanzadas de iluminación. ¡Sigue explorando y divirtiéndote en el mundo del 3D!

src/components/resume/Awards.astro

@@ -0,0 +1,19 @@
+---
+
+---
+
+<section class="mt-8">
+  <h2 class="text-2xl font-semibold">Awards</h2>
+  <article class="mb-8">
+    <h3 class="text-xl">
+      2nd Place in the TecNM CDMX regional programming contest.
+    </h3>
+    <p class="mb-2 dark:text-gray-400 text-gray-600">2020</p>
+  </article>
+  <article class="mb-8">
+    <h3 class="text-xl">
+      1st place in academic achievement of the computer systems engineering degree.
+    </h3>
+    <p class="mb-2 dark:text-gray-400 text-gray-600">2023</p>
+  </article>
+</section>

src/components/resume/Contact.astro

@@ -0,0 +1,22 @@
+---
+import { Icon } from "astro-icon/components";
+
+---
+
+<div class="flex flex-col sm:flex-row sm:gap-3 mt-1">
+    <a
+        class="flex items-center gap-1 hover:font-medium"
+        target="_blank"
+        href="mailto:fsv.tello@gmail.com"
+        ><Icon class="w-5 h-5" name="mdi:email" /> fsv.tello@gmail.com</a
+    >
+    <a class="flex items-center gap-1 hover:font-medium" target="_blank" href="https://www.linkedin.com/in/fernando-said-vasquez-tello-bb7087250/"
+        ><Icon class="w-5 h-5" name="mdi:linkedin" /> Linkedin</a
+    >
+    <a
+        class="flex items-center gap-1 hover:font-medium"
+        target="_blank"
+        href="https://github.com/Swumplurd"
+        ><Icon class="w-5 h-5" name="mdi:github" /> Github</a
+    >
+</div>

src/components/resume/Education.astro

@@ -0,0 +1,25 @@
+---
+
+---
+
+<section class="mt-8">
+  <h2 class="text-2xl font-semibold">Education</h2>
+  <article class="mb-8">
+    <h3 class="text-xl">
+      TecNM Campus Milpa Alta II - Computer Systems Engineering. 
+    </h3>
+    <p class="mb-2 dark:text-gray-400 text-gray-600">2018 — 2023</p>
+    <p>
+      Graduated, Professional ID: 13663326
+    </p>
+  </article>
+  <article class="mb-8">
+    <h3 class="text-xl">
+      Escuela Superior de Ingeniería Mecánica y Eléctrica - Communications and Electronics Engineering
+    </h3>
+    <p class="mb-2 dark:text-gray-400 text-gray-600">2014 — 2017</p>
+    <p>
+      5th semester
+    </p>
+  </article>
+</section>

src/components/resume/Languages.astro

@@ -0,0 +1,13 @@
+---
+
+---
+
+<section class="mt-8">
+    <h2 class="text-2xl font-semibold">Languages</h2>
+    <article class="mb-8">
+        <ul>
+            <li class="list-disc list-inside">Spanish - Native</li>
+            <li class="list-disc list-inside">English - Medium</li>
+        </ul>
+    </article>
+</section>