jonaspm · jonaspm · Apr 5, 2024 · Apr 5, 2024 · Apr 5, 2024 · Apr 5, 2024
diff --git a/astro.config.mjs b/astro.config.mjs
@@ -2,10 +2,11 @@ import { defineConfig } from "astro/config";
 import react from "@astrojs/react";
 import tailwind from "@astrojs/tailwind";
 
+// https://astro.build/config
 export default defineConfig({
   site: "https://jonaspm.github.io",
   integrations: [react(), tailwind()],
   server: {
-    host: true,
-  },
-});
+    host: true
+  }
+});
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -9,17 +9,17 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/react": "^3.0.9",
-    "@types/react": "^18.2.45",
-    "@types/react-dom": "^18.2.18",
-    "astro": "^4.1.3",
+    "@types/react": "^18.2.74",
+    "@types/react-dom": "^18.2.24",
+    "astro": "^4.5.16",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
+    "@astrojs/react": "^3.1.1",
     "@astrojs/tailwind": "^5.1.0",
-    "@biomejs/biome": "^1.5.2",
-    "sass": "^1.69.5",
-    "tailwindcss": "^3.4.1"
+    "@biomejs/biome": "^1.6.4",
+    "sass": "^1.74.1",
+    "tailwindcss": "^3.4.3"
   }
 }
diff --git a/public/images/autosolutions.app.png → src/assets/images/autosolutions.app.png b/public/images/autosolutions.app.png → src/assets/images/autosolutions.app.png
diff --git a/public/images/bg.jpeg → src/assets/images/bg.jpeg b/public/images/bg.jpeg → src/assets/images/bg.jpeg
diff --git a/public/images/enerlinq.com.png → src/assets/images/enerlinq.com.png b/public/images/enerlinq.com.png → src/assets/images/enerlinq.com.png
diff --git a/src/assets/images/gerardoancer.com.png b/src/assets/images/gerardoancer.com.png
diff --git a/public/images/profile.png → src/assets/images/profile.png b/public/images/profile.png → src/assets/images/profile.png
diff --git a/public/images/sorteos.click.png → src/assets/images/sorteos.click.png b/public/images/sorteos.click.png → src/assets/images/sorteos.click.png
diff --git a/src/components/Background.astro b/src/components/Background.astro
diff --git a/src/components/HeaderProfile.tsx b/src/components/HeaderProfile.tsx
@@ -1,11 +1,15 @@
 import "../styles/HeaderProfile.scss";
+import { getImage } from "astro:assets";
 import Box from "./Box";
+import profileImg from "@/assets/images/profile.png";
+
+const profileImage = await getImage({src: profileImg, format: 'avif'});
 
 function HeaderProfile() {
   return (
     <Box className="header-profile !backdrop-blur-none p-5 !bg-secondary/0">
       <Box className="aspect-square !rounded-full max-w-xs self-center profile-container">
-        <div className="profile aspect-square w-full rounded-full"></div>
+        <div style={{backgroundImage: `url('${profileImage.src}')`}} className="profile aspect-square w-full rounded-full" />
       </Box>
     </Box>
   );

diff --git a/src/components/MainBody.tsx b/src/components/MainBody.tsx
@@ -85,14 +85,14 @@ function MainBody({ projects }: { projects: Project[] }) {
 					<ul className="flex justify-center gap-8 flex-row flex-wrap">
 						{
 							projects.map((project, index) => (
-									<li key={index} className="flex w-5/6 xs:w-48 flex-col align-center">
+									<li key={index} className="project flex w-5/6 xs:w-48 flex-col align-center">
 										<a
-											className="link flex flex-col items-center text-center p-4 shadow-md rounded-md hover:scale-110 transition-transform duration-200 bg-secondary/30"
+											className="link flex flex-col items-center text-center p-4 shadow-md rounded-md tra transition-transform duration-200 bg-secondary/30"
 											href={project.url}
 										>
 											<span>{project.name}</span>
 											<img
-												className="w-full rounded-sm object-contain hover:scale-110 transition-transform duration-200 delay-150 my-2"
+												className="w-full rounded-[4px] object-contain transition-transform duration-200 delay-150 my-2"
 												src={project.image.src}
 												alt={project.name}
 											/>

diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -1,14 +1,17 @@
 ---
 import "@/styles/index.scss"
-import Background from "@/components/Background.astro"
 import Header from "@/components/Header"
 import Footer from "@/components/Footer"
+import bg from "@/assets/images/bg.jpeg"
+import { getImage } from "astro:assets"
+
+const bgImage = await getImage({src: bg, format: 'avif'})
 
 const { title } = Astro.props
 ---
 
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" class="min-h-dvh bg-cover bg-center bg-no-repeat bg-fixed">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width" />
@@ -23,12 +26,22 @@ const { title } = Astro.props
       })(window, document, "clarity", "script", "l5tvca8qee");
   </script>
   </head>
-  <body>
-    <Background />
-    <Header />
-    <main>
-      <slot />
-    </main>
-    <Footer />
+  <body class="h-full">
+    <div class="app-container">
+      <Header />
+      <main>
+        <slot />
+      </main>
+      <Footer />
+    </div>
   </body>
+  <style define:vars={{'bg-image': `url('${bgImage.src}')`}}>
+    html {
+      background-image: linear-gradient(
+        315deg,
+        rgba(255, 43, 43, 0.4),
+        rgba(45, 101, 255, 0.4)
+      ), var(--bg-image);
+    }
+  </style>
 </html>
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -1,16 +1,17 @@
 ---
 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 sorteosClickImage from "@/assets/images/sorteos.click.png"
+import autosolutionsImage from "@/assets/images/autosolutions.app.png"
+import enerlinqImage from "@/assets/images/enerlinq.com.png"
+import gerardoAncerImage from "@/assets/images/gerardoancer.com.png"
 import { getImage } from "astro:assets"
 
 const projects = [
 	{
 		name: 'Enerlinq',
 		url: 'https://enerlinq.com',
-		description: 'Technology and innovation lab. Startup company.',
+		description: 'Technology and innovation startup company.',
 		image: await getImage({src: enerlinqImage, format: 'avif'}),
 	},
 	{
@@ -25,6 +26,12 @@ const projects = [
 		description: 'Create and manage your own raffles for FREE.',
 		image: await getImage({src: sorteosClickImage, format: 'avif'}),
 	},
+	{
+		name: 'Gerardo Ancer portfolio',
+		url: 'https://gerardoancer.com',
+		description: 'Portfolio website for Gerardo Ancer.',
+		image: await getImage({src: gerardoAncerImage, format: 'avif'}),
+	}
 ]
 ---
 

diff --git a/src/styles/Background.scss b/src/styles/Background.scss
diff --git a/src/styles/HeaderProfile.scss b/src/styles/HeaderProfile.scss
@@ -13,7 +13,6 @@
   direction: ltr;
 
   & .profile {
-    background-image: url("/images/profile.png");
     background-size: 125%;
     background-position: top center;
     opacity: 90%;

diff --git a/src/styles/global.scss b/src/styles/global.scss
@@ -4,6 +4,7 @@
 // SASS VARIABLES
 
 // COLORS
+$color-bg: rgba(255, 255, 255, 0.1);
 $color-primary: rgb(255, 255, 255);
 $color-secondary: rgb(49, 49, 49);
 $font-family: "Nunito", sans-serif;
@@ -16,6 +17,7 @@ $font-color-secondary: rgba(255, 255, 255, 1);
 
 :root {
   // COLORS
+  --color-bg: #{$color-bg};
   --color-primary: #{$color-primary};
   --color-secondary: #{$color-secondary};
   --font-family: #{$font-family};
@@ -42,10 +44,43 @@ $font-color-secondary: rgba(255, 255, 255, 1);
 }
 
 body {
-  background-color: var(--color-primary);
+  background-color: var(--color-bg);
   color: var(--font-color-primary);
   font-family: var(--font-family);
   font-weight: var(--font-weight);
   text-shadow: var(--font-shadow);
   font-size: var(--font-size);
+}
+
+.app-container {
+  animation-name: background-show;
+  animation-duration: 2s;
+  animation-iteration-count: 1;
+  animation-fill-mode: forwards;
+  animation-delay: 1s;
+  opacity: 0;
+}
+
+@keyframes background-show {
+  from {
+    opacity: 0;
+    transform: scale(1.1);
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+// Projects
+.project {
+
+  &:hover {
+    & a {
+      @apply scale-110;
+    }
+    & img {
+      @apply scale-110;
+    }
+  }
 }
diff --git a/tsconfig.json b/tsconfig.json
@@ -9,6 +9,8 @@
       "@/components/*": ["src/components/*"],
       "@/layouts/*": ["src/layouts/*"],
       "@/images/*": ["public/images/*"],
+      "@/pages/*": ["src/pages/*"],
+      "@/assets/*": ["src/assets/*"]
     }
   }
 }