Merge pull request #18 from jonaspm/dev

chore/update profile

Author: jonaspm

public/images/enerlinq.com.png

@@ -1,4 +1,3 @@
-import React from "react";
 import HeaderResume from "./HeaderResume";
 import HeaderProfile from "./HeaderProfile";
 import "../styles/Header.scss";

src/components/Header.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import "../styles/HeaderProfile.scss";
 import Box from "./Box";
 

src/components/HeaderProfile.tsx

@@ -4,6 +4,8 @@ import Box from "./Box";
 import Icon from "./icons/Icon";
 
 function HeaderResume() {
+  const name = 'Jonás Perusquía Morales';
+  const job = 'Chief Technology Officer at Enerlinq Innovations';
   const socialNetworks = [
     {
       name: "Facebook",
@@ -73,27 +75,26 @@ function HeaderResume() {
           <path d="M22.5 6.908V6.75a3 3 0 00-3-3h-15a3 3 0 00-3 3v.158l9.714 5.978a1.5 1.5 0 001.572 0L22.5 6.908z" />
         </svg>
       ),
-      url: "mailto:jonaspm_99@outlook.com",
+      url: "mailto:jperusm@outlook.com",
     },
   ];
 
   return (
     <Box className="header-resume items-center justify-center text-center grid gap-6 hover:bg-secondary/60 transition-all duration-700">
-      <div></div>
+      <div />
       <h1 className="text-2xl font-bold">
-        <span className="overflow-hidden whitespace-nowrap animate-typewriter inline-block max-w-[11em] align-bottom md:text-4xl">
-          Jonás Perusquía Morales
+        <span className="overflow-hidden whitespace-nowrap inline-block align-bottom md:text-4xl relative border-r-4 animate-typewriter">
+          {name}
         </span>
-        <span className="border-r-4 border-r-transparent animate-blinking md:text-4xl"></span>
       </h1>
       <span className="text-lg">
-        Senior Software Associate at Concentrix Catalyst
+        {job}
       </span>
       <div className="flex flex-row justify-center gap-6 flex-wrap items-center">
-        {socialNetworks.map((socialNetwork, index) => {
+        {socialNetworks.map(socialNetwork => {
           return (
             <a
-              key={index}
+              key={socialNetwork.name}
               href={socialNetwork.url}
               target="_blank"
               rel="noreferrer"

src/components/HeaderResume.tsx

@@ -13,21 +13,22 @@ type Project = {
 function MainBody({ projects }: { projects: Project[] }) {
 
 	const skills = [
-		'HTML',
-		'JavaScript',
-		'CSS',
+		'HTML-CSS-JavaScript',
+		'TypeScript',
+		'Svelte',
 		'React',
+		'AngularJS',
+		'Next.js',
+		'Astro',
 		'Node.js',
 		'Express',
-		'MySQL',
-		'Git',
-		'Scrum',
-		'ServiceNOW',
+		'SQL Databases',
 		'MongoDB',
-		'Angular.js',
-		'Next.js',
-		'Astro',
-		'TypeScript',
+		'ServiceNOW',
+		'Version Control',
+		'Agile Methodologies',
+		'Project Management',
+		'Cloud Computing',
 	]
 
 	const aboutText =

src/components/MainBody.tsx

@@ -3,22 +3,29 @@ import Layout from "@/layouts/Layout.astro"
 import MainBody from "@/components/MainBody"
 import sorteosClickImage from "@/images/sorteos.click.png"
 import autosolutionsImage from "@/images/autosolutions.app.png"
+import enerlinqImage from "@/images/enerlinq.com.png"
 import { getImage } from "astro:assets"
 
 const projects = [
-		{
-			name: 'Sorteos Click',
-			url: 'https://sorteos.click',
-			description: 'Create and manage your own raffles for FREE.',
-			image: await getImage({src: sorteosClickImage, format: 'avif'}),
-		},
-		{
-			name: 'Autosolutions',
-			url: 'https://autosolutions.app',
-			description: 'On-demand services for your vehicle & more.',
-			image: await getImage({src: autosolutionsImage, format: 'avif'}),
-		}
-	]
+	{
+		name: 'Enerlinq',
+		url: 'https://enerlinq.com',
+		description: 'Technology and innovation lab. Startup company.',
+		image: await getImage({src: enerlinqImage, format: 'avif'}),
+	},
+	{
+		name: 'Autosolutions',
+		url: 'https://autosolutions.app',
+		description: 'On-demand services for your vehicle & more.',
+		image: await getImage({src: autosolutionsImage, format: 'avif'}),
+	},
+	{
+		name: 'Sorteos Click',
+		url: 'https://sorteos.click',
+		description: 'Create and manage your own raffles for FREE.',
+		image: await getImage({src: sorteosClickImage, format: 'avif'}),
+	},
+]
 ---
 
 <Layout title="Jonas Perusquia Morales">

src/pages/index.astro

@@ -48,4 +48,4 @@ body {
   font-weight: var(--font-weight);
   text-shadow: var(--font-shadow);
   font-size: var(--font-size);
-}
+}

src/styles/global.scss

@@ -15,8 +15,7 @@ module.exports = {
     },
     extend: {
       animation: {
-        typewriter: "typewriter 5s steps(23) 0s infinite alternate both",
-        blinking: "blinkTextCursor 800ms infinite normal",
+        typewriter: "typewriter 8s steps(23) -6s infinite alternate both, blinkTextCursor 800ms infinite normal",
         "fade-in":
           "fadeIn 800ms calc(var(--delay-index) * 0.5s) ease-out forwards",
       },
@@ -32,9 +31,9 @@ module.exports = {
           },
         },
         typewriter: {
-          "0%": { width: "0" },
-          "20%": { width: "0" },
-          "80%": { width: "100%" },
+          "0%": { width: "0%" },
+          "37.5%": { width: "0%" },
+          "62.5%": { width: "100%" },
           "100%": { width: "100%" },
         },
         blinkTextCursor: {