feat: New alter ego image for standard image with custom made svelte effect

Author: etherbeing

astro.config.mjs

@@ -14,7 +14,25 @@ import spotlightjs from "@spotlightjs/astro";
 export default defineConfig({
   vite: {
     plugins: [tailwindcss()],
+    server: {
+      watch: {
+        ignored: [
+          "api/**",
+          "node_modules/**",
+          "target/**",
+          "high_performance/**",
+          "devops/**",
+          "dist/**"
+        ]
+      }
+    }
   },
   output: "static",
-  integrations: [icon(), react(), svelte(), sentry(), spotlightjs()],
+  integrations: [
+    icon(),
+    react(),
+    svelte(),
+    sentry(),
+    spotlightjs()
+  ],
 });

pnpm-workspace.yaml

@@ -1,6 +1,8 @@
+ignoredBuiltDependencies:
+  - sharp
+
 onlyBuiltDependencies:
+  - '@sentry/cli'
   - core-js
   - esbuild
   - sharp
-ignoredBuiltDependencies:
-  - sharp

src/assets/alter-ego.png

@@ -3,10 +3,12 @@ import ferris from "@/assets/ferris.png";
 import SpotlightCard from "./react/SpotlightCard";
 import GlowingHeader from "./react/GlowingHeader";
 import GlowingText from "./react/GlowingText";
-import { Image } from "astro:assets";
 import photo from "@/assets/photo.jpg";
+import alterEgo from "@/assets/alter-ego.png";
 import StarBorder from "./react/StarBorder";
 import { Icon } from "astro-icon/components";
+import AlterEgo from "./svelte/AlterEgo.svelte";
+import DecryptedText from "./react/DecryptedText";
 
 const infoLeft: Array<{ header: string; content: string }> = [
     {
@@ -83,19 +85,29 @@ const infoRight: Array<{ header: string; content: string }> = [
             client:only="react"
             className="flex flex-col justify-between aspect-9/16 p-0! w-75 bg-transparent backdrop-blur-2xl"
         >
-            <div class={"max-h-[60%] overflow-hidden hover:alter-ego"}>
-                <Image src={photo} alt="Photo" />
-            </div>
+            <AlterEgo
+                client:only="svelte"
+                alter={alterEgo.src}
+                base={photo.src}
+            />
             <div class="flex flex-col my-5 px-5">
                 <GlowingText client:only="react">
-                    <span class="text-xl font-bold">Short bio</span>
+                    <span class="text-xl font-bold select-none">Short bio</span>
                 </GlowingText>
-                <p class="text-sm text-justify cursor-default">
-                    I'm a cybersecurity enthusiast and Rust developer with a
-                    knack for solving complex problems.
+                <p class="text-sm text-justify cursor-default select-none">
+                    <DecryptedText
+                        client:only="react"
+                        sequential={true}
+                        text={"I'm a cybersecurity enthusiast and Rust developer with a knack for solving complex problems."}
+                        animateOn="view"
+                        speed={50}
+                        maxIterations={3}
+                    />
                 </p>
-                <div class="w-full flex justify-end items-end px-3 mt-5 mb-3 z-10 cursor-pointer">
-                    <a
+                <div
+                    class="w-full flex justify-end items-end px-3 mt-5 mb-3 z-10 cursor-pointer"
+                >
+                    <a 
                         target="_blank"
                         href="https://paypal.me/etherbeing"
                         class="w-full"

src/components/About.astro

@@ -4,8 +4,8 @@ import StarBorder from "./react/StarBorder";
 import TextType from "./react/TextType";
 ---
 
-<section
-    class="relative min-h-screen w-full flex justify-center items-center flex-col py-32 text-center select-none cursor-default"
+<section id="home"
+    class="relative min-h-screen flex justify-center items-center flex-col py-32 text-center select-none cursor-default"
 >
     <h1 class="z-10 text-5xl font-bold animate-fade-up">
         <TextType

src/components/Hero.astro

@@ -8,34 +8,34 @@ const navs: Array<{
   label: string;
   links: Array<{ label: string; href: string }>;
 }> = [
-  {
-    label: "Info",
-    links: [
-      { label: "About", href: "#about" },
-      { label: "Core Skills", href: "#core-skills" },
-      { label: "Services", href: "#services" },
-      { label: "Projects", href: "#projects" },
-      { label: "Blog", href: "#blog" },
-      { label: "Contact", href: "#contact" },
-    ],
-  },
-  {
-    label: "Projects",
-    links: [
-      { label: "CVE Forge", href: "https://github.com/etherbeing/cveforge" },
-      {
-        label: "This Website",
-        href: "https://github.com/etherbeing/etherbeing.github.io",
-      },
-      { label: "Senjor", href: "https://github.com/etherbeing/senjor" },
-      { label: "Powerhouse", href: "https://github.com/etherbeing/powerhouse" },
-      { label: "TFProtocol", href: "https://github.com/etherbeing/tfprotocol" },
-    ],
-  },
-];
+    {
+      label: "Info",
+      links: [
+        { label: "About", href: "#about" },
+        { label: "Core Skills", href: "#core-skills" },
+        { label: "Services", href: "#services" },
+        { label: "Projects", href: "#projects" },
+        { label: "Blog", href: "#blog" },
+        { label: "Contact", href: "#contact" },
+      ],
+    },
+    {
+      label: "Projects",
+      links: [
+        { label: "CVE Forge", href: "https://github.com/etherbeing/cveforge" },
+        {
+          label: "This Website",
+          href: "https://github.com/etherbeing/etherbeing.github.io",
+        },
+        { label: "Senjor", href: "https://github.com/etherbeing/senjor" },
+        { label: "Powerhouse", href: "https://github.com/etherbeing/powerhouse" },
+        { label: "TFProtocol", href: "https://github.com/etherbeing/tfprotocol" },
+      ],
+    },
+  ];
 
 export default function Header() {
-  const [isOpen, setIsOpen] = useState(false);
+  const [isOpen, setIsOpen] = useState<boolean|undefined>();
 
   return (
     <header className="z-20 fixed w-screen flex items-center justify-center mt-10">
@@ -48,65 +48,71 @@ export default function Header() {
               src={`https://github.com/${import.meta.env.PUBLIC_GITHUB_USER}.png`}
             />
           </a>
+          <h1 className="text-2xl font-bold my-0 py-0 cursor-default select-none">
+            etherbeing
+          </h1>
           <Hamburger
             size={20}
             label="Show options"
             toggled={isOpen}
             onToggle={setIsOpen}
           ></Hamburger>
         </div>
-        <nav
-          style={{
-            animationDelay: `${navs.length * 100}ms`,
-          }}
-          className={`w-full grid grid-cols-1 md:grid-cols-2 gap-3 overflow-hidden transition-all duration-300 h-0 ${isOpen ? "nav-expand" : "nav-collapse"}`}
-        >
-          {navs.map((nav, i) => (
-            <SpotlightCard
-              key={i}
-              className={`mt-5 w-full flex flex-col gap-3 translate-y-100 opacity-0`}
-              style={{
-                animationDelay: `${i * 100 + 100}ms`,
-                backgroundColor: oklchGradient(
-                  0,
-                  10,
-                  0.05,
-                  300,
-                  i,
-                  navs.length,
-                ),
-              }}
-            >
-              <h3 className="text-lg font-bold cursor-default">{nav.label}</h3>
-              <div className="flex flex-col gap-3">
-                {nav.links.map((link, i) => (
-                  <a
-                    onClick={(e) => {
-                      e.preventDefault();
-                      e.stopPropagation();
-                      const hash = new URL(e.currentTarget.href).hash;
-                      let section = document.querySelector(hash);
-                      if (section) {
-                        section.scrollIntoView({
-                          behavior: "smooth",
-                        });
-                      } else {
-                        location.assign(`/${hash}`);
-                      }
-                      setIsOpen(false);
-                    }}
-                    key={i}
-                    href={link.href}
-                    className="text-sm inline-flex items-center"
-                  >
-                    <GoArrowUpRight className="mr-2" />
-                    {link.label}
-                  </a>
-                ))}
-              </div>
-            </SpotlightCard>
-          ))}
-        </nav>
+        {isOpen !== undefined ? (
+
+          <nav
+            style={{
+              animationDelay: `${navs.length * 100}ms`,
+            }}
+            className={`w-full grid grid-cols-1 md:grid-cols-2 gap-3 overflow-hidden transition-all duration-300 h-0 ${isOpen ? "nav-expand" : "nav-collapse"}`}
+          >
+            {navs.map((nav, i) => (
+              <SpotlightCard
+                key={i}
+                className={`mt-5 w-full flex flex-col gap-3 translate-y-100 opacity-0`}
+                style={{
+                  animationDelay: `${i * 100 + 100}ms`,
+                  backgroundColor: oklchGradient(
+                    0,
+                    10,
+                    0.05,
+                    300,
+                    i,
+                    navs.length,
+                  ),
+                }}
+              >
+                <h3 className="text-lg font-bold cursor-default">{nav.label}</h3>
+                <div className="flex flex-col gap-3">
+                  {nav.links.map((link, i) => (
+                    <a
+                      onClick={(e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        const hash = new URL(e.currentTarget.href).hash;
+                        let section = document.querySelector(hash);
+                        if (section) {
+                          section.scrollIntoView({
+                            behavior: "smooth",
+                          });
+                        } else {
+                          location.assign(`/${hash}`);
+                        }
+                        setIsOpen(false);
+                      }}
+                      key={i}
+                      href={link.href}
+                      className="text-sm inline-flex items-center"
+                    >
+                      <GoArrowUpRight className="mr-2" />
+                      {link.label}
+                    </a>
+                  ))}
+                </div>
+              </SpotlightCard>
+            ))}
+          </nav>
+        ) : null}
       </SpotlightCard>
     </header>
   );

src/components/react/Header.tsx

@@ -0,0 +1,58 @@
+<script lang="ts">
+    import { init } from "@sentry/astro";
+    import { time } from "motion/react";
+
+    const { alter, base }: { alter: string; base: string } = $props();
+    let x: number = $state(100);
+    let to: number = $state(100);
+    const speed = 0.01;
+    const acceleration = 1;
+    $effect(() => {
+        if (x !== to) {
+            setTimeout(() => {
+                const initial = x;
+                if (x < to) {
+                    x += acceleration;
+                } else if (x > to) {
+                    x -= acceleration;
+                } else {
+                    return;
+                }
+                if (initial < to && x > to) {
+                    x = to;
+                } else if (initial > to && x < to) {
+                    x = to;
+                }
+            }, speed);
+        }
+    });
+    let ref = $state();
+</script>
+
+<div
+    role="img"
+    bind:this={ref}
+    class={"max-h-[60%] h-full w-full overflow-hidden relative -z-10 left-0 top-0"}
+    onfocus={null}
+    onmouseenter={(e) => {
+        to = (e.offsetX * 100) / e.currentTarget.clientWidth;
+    }}
+    onmousemove={(e) => {
+        to = (e.offsetX * 100) / e.currentTarget.clientWidth;
+    }}
+    onmouseleave={(e) => {
+        to = (e.offsetX * 100) / e.currentTarget.clientWidth > 50?100:0;
+    }}
+>
+    <img
+        alt={"base"}
+        src={base}
+        class="absolute left-0 top-0 min-h-full w-full"
+    />
+    <img
+        alt={"alter"}
+        src={alter}
+        class="absolute left-0 top-0 min-h-full w-full"
+        style="mask-image: linear-gradient(to right, transparent 0%, transparent {x}%, black {x}%, black 100%)"
+    />
+</div>

src/components/svelte/AlterEgo.svelte

@@ -22,4 +22,4 @@ const apiUrl = import.meta.env.PUBLIC_API_URL;
     <BlogPost apiUrl={apiUrl} client:only="react" />
     <Contact />
     <Footer />
-</Layout>
+</Layout>

src/pages/index.astro

@@ -0,0 +1,36 @@
+import { gsap } from "gsap";
+import ScrollTrigger from "gsap/ScrollTrigger";
+
+gsap.registerPlugin(ScrollTrigger);
+
+export function initScrollManager(sections_ids: string[]) {
+    sections_ids.map(id => document.getElementById(id)).forEach((section, i, array) => {
+
+        const next = array[i + 1]; // optional for end boundary
+
+        gsap.fromTo(
+            section,
+            { scale: 0.6 },    // when not visible / before entering
+            {
+                scale: 1,    // while centered in viewport
+                ease: "none",
+                scrollTrigger: {
+                    trigger: section,
+                    endTrigger: next || section, // last one falls back to itself
+                    scrub: true,
+                    start: "top 50%",   // begins scaling when top touches bottom of screen
+                    end: "bottom top",     // back to shrink when leaving
+                    // markers: true,      // enable for debugging
+                    onUpdate: self => {
+                        // shrink back near exit
+                        const progress = self.progress;
+                        const scale = progress < 0.5
+                            ? gsap.utils.interpolate(0.6, 1.2, progress * 2)      // enter zoom
+                            : gsap.utils.interpolate(1.2, 0.6, (progress - 0.5) * 2); // exit shrink
+                        gsap.set(section, { scale });
+                    }
+                }
+            }
+        );
+    });
+}

src/scripts/scrollTrap.ts

@@ -51,7 +51,7 @@ echo $! > $API_PID
 # Frontend server
 WEB_PID=$TMP_PIDS/web.pid
 cd $ROOT_DIRECTORY
-pnpm run dev &
+pnpm run dev --verbose &
 echo $! > $WEB_PID
 
 echo "Services are now up and running, now waiting for them to die (NOTE that killing the frontend pid is enough to kill them all)"