Mobile optimizations

2026-04-14 11:03:50 +00:00 · 2026-04-06 13:08:41 -07:00
parent bab4a516be
commit c2407408fa
33 changed files with 936 additions and 318 deletions
--- a/src/components/about/current-focus.tsx
+++ b/src/components/about/current-focus.tsx
@@ -1,57 +1,5 @@
-import React, { useEffect, useRef, useState } from "react";
 import { Code2, BookOpen, RocketIcon, Compass } from "lucide-react";
-
-function AnimateIn({ children, delay = 0 }: { children: React.ReactNode; delay?: number }) {
-  const ref = useRef<HTMLDivElement>(null);
-  const [visible, setVisible] = useState(false);
-  const [skip, setSkip] = useState(false);
-
-  useEffect(() => {
-    const el = ref.current;
-    if (!el) return;
-
-    const rect = el.getBoundingClientRect();
-    const inView = rect.top < window.innerHeight && rect.bottom > 0;
-    const isReload = performance.getEntriesByType?.("navigation")?.[0]?.type === "reload";
-
-    if (inView && isReload) {
-      setSkip(true);
-      setVisible(true);
-      return;
-    }
-    if (inView) {
-      requestAnimationFrame(() => setVisible(true));
-      return;
-    }
-
-    const observer = new IntersectionObserver(
-      ([entry]) => {
-        if (entry.isIntersecting) {
-          setVisible(true);
-          observer.disconnect();
-        }
-      },
-      { threshold: 0.15 }
-    );
-
-    observer.observe(el);
-    return () => observer.disconnect();
-  }, []);
-
-  return (
-    <div
-      ref={ref}
-      className={skip ? "" : "transition-all duration-700 ease-out"}
-      style={skip ? {} : {
-        transitionDelay: `${delay}ms`,
-        opacity: visible ? 1 : 0,
-        transform: visible ? "translateY(0)" : "translateY(24px)",
-      }}
-    >
-      {children}
-    </div>
-  );
-}
+import { AnimateIn } from "@/components/animate-in";

 export default function CurrentFocus() {
  const recentProjects = [
@@ -98,7 +46,7 @@ export default function CurrentFocus() {
                <a
                  href={project.href}
                  className="block p-4 sm:p-6 rounded-lg border border-foreground/10 hover:border-yellow-bright/50
-                           transition-all duration-300 group bg-background/50 h-full"
+                           transition-colors duration-300 group bg-background/50 h-full"
                >
                  <h4 className="font-bold text-lg group-hover:text-yellow-bright transition-colors">
                    {project.title}
--- a/src/components/about/intro.tsx
+++ b/src/components/about/intro.tsx
@@ -48,36 +48,37 @@ export default function Intro() {
  const anim = (delay: number) =>
    ({
      opacity: visible ? 1 : 0,
-      transform: visible ? "translateY(0)" : "translateY(20px)",
-      transition: `all 0.7s ease-out ${delay}ms`,
+      transform: visible ? "translate3d(0,0,0)" : "translate3d(0,20px,0)",
+      transition: `opacity 0.7s ease-out ${delay}ms, transform 0.7s ease-out ${delay}ms`,
+      willChange: "transform, opacity",
    }) as React.CSSProperties;

  return (
    <div ref={ref} className="w-full max-w-4xl px-4">
      <div className="space-y-8 md:space-y-12">
-        <div className="flex flex-col sm:flex-row items-center sm:items-center justify-center gap-8 sm:gap-16">
+        <div className="flex flex-col sm:flex-row items-center justify-center gap-8 sm:gap-16">
          <div
-            className="w-32 h-32 sm:w-48 sm:h-48 shrink-0"
+            className="w-44 h-44 sm:w-40 sm:h-40 lg:w-48 lg:h-48 shrink-0"
            style={anim(0)}
          >
            <img
              src="/me.jpeg"
              alt="Timothy Pidashev"
-              className="rounded-lg object-cover w-full h-full ring-2 ring-yellow-bright hover:ring-orange-bright transition-all duration-300"
+              className="rounded-lg object-cover w-full h-full ring-2 ring-yellow-bright hover:ring-orange-bright transition-colors duration-300"
            />
          </div>
          <div className="text-center sm:text-left space-y-4 sm:space-y-6" style={anim(150)}>
-            <h2 className="text-xl sm:text-5xl font-bold text-yellow-bright">
+            <h2 className="text-3xl sm:text-3xl lg:text-5xl font-bold text-yellow-bright">
              Timothy Pidashev
            </h2>
-            <div className="text-sm sm:text-xl text-foreground/70 space-y-2 sm:space-y-3">
-              <p className="flex items-center justify-center font-bold sm:justify-start gap-2" style={anim(300)}>
+            <div className="text-base sm:text-lg lg:text-xl text-foreground/70 space-y-2 sm:space-y-3">
+              <p className="flex items-center justify-center sm:justify-start font-bold gap-2" style={anim(300)}>
                <span className="text-blue">Software Systems Engineer</span>
              </p>
-              <p className="flex items-center justify-center font-bold sm:justify-start gap-2" style={anim(450)}>
+              <p className="flex items-center justify-center sm:justify-start font-bold gap-2" style={anim(450)}>
                <span className="text-green">Open Source Enthusiast</span>
              </p>
-              <p className="flex items-center justify-center font-bold sm:justify-start gap-2" style={anim(600)}>
+              <p className="flex items-center justify-center sm:justify-start font-bold gap-2" style={anim(600)}>
                <span className="text-yellow">Coffee Connoisseur</span>
              </p>
            </div>
--- a/src/components/about/outside-coding.tsx
+++ b/src/components/about/outside-coding.tsx
@@ -1,57 +1,5 @@
-import React, { useEffect, useRef, useState } from "react";
 import { Cross, Fish, Mountain, Book } from "lucide-react";
-
-function AnimateIn({ children, delay = 0 }: { children: React.ReactNode; delay?: number }) {
-  const ref = useRef<HTMLDivElement>(null);
-  const [visible, setVisible] = useState(false);
-  const [skip, setSkip] = useState(false);
-
-  useEffect(() => {
-    const el = ref.current;
-    if (!el) return;
-
-    const rect = el.getBoundingClientRect();
-    const inView = rect.top < window.innerHeight && rect.bottom > 0;
-    const isReload = performance.getEntriesByType?.("navigation")?.[0]?.type === "reload";
-
-    if (inView && isReload) {
-      setSkip(true);
-      setVisible(true);
-      return;
-    }
-    if (inView) {
-      requestAnimationFrame(() => setVisible(true));
-      return;
-    }
-
-    const observer = new IntersectionObserver(
-      ([entry]) => {
-        if (entry.isIntersecting) {
-          setVisible(true);
-          observer.disconnect();
-        }
-      },
-      { threshold: 0.15 }
-    );
-
-    observer.observe(el);
-    return () => observer.disconnect();
-  }, []);
-
-  return (
-    <div
-      ref={ref}
-      className={skip ? "" : "transition-all duration-700 ease-out"}
-      style={skip ? {} : {
-        transitionDelay: `${delay}ms`,
-        opacity: visible ? 1 : 0,
-        transform: visible ? "translateY(0) scale(1)" : "translateY(20px) scale(0.97)",
-      }}
-    >
-      {children}
-    </div>
-  );
-}
+import { AnimateIn } from "@/components/animate-in";

 const interests = [
  {
@@ -86,12 +34,12 @@ export default function OutsideCoding() {
          </h2>
        </AnimateIn>

-        <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
+        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-6">
          {interests.map((interest, i) => (
            <AnimateIn key={interest.title} delay={100 + i * 100}>
              <div
                className="flex flex-col items-center text-center p-4 rounded-lg border border-foreground/10
-                           hover:border-yellow-bright/50 transition-all duration-300 bg-background/50 h-full"
+                           hover:border-yellow-bright/50 transition-colors duration-300 bg-background/50 h-full"
              >
                <div className="mb-3">{interest.icon}</div>
                <h3 className="font-bold text-foreground/90 mb-2">{interest.title}</h3>
--- a/src/components/about/stats-activity.tsx
+++ b/src/components/about/stats-activity.tsx
@@ -1,3 +1,4 @@
+import { useState } from "react";

 interface ActivityDay {
  grand_total: { total_seconds: number };
@@ -9,6 +10,7 @@ interface ActivityGridProps {
 }

 export const ActivityGrid = ({ data }: ActivityGridProps) => {
+  const [tapped, setTapped] = useState<string | null>(null);
  const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
  const days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];

@@ -46,7 +48,7 @@ export const ActivityGrid = ({ data }: ActivityGridProps) => {
  }

  return (
-    <div className="bg-background border border-foreground/10 rounded-lg p-6 hover:border-foreground/20 transition-colors">
+    <div className="bg-background/50 border border-foreground/10 rounded-lg p-6 hover:border-foreground/20 transition-colors">
      <div className="text-lg text-aqua-bright mb-6">Activity</div>

      <div className="flex gap-4">
@@ -69,12 +71,13 @@ export const ActivityGrid = ({ data }: ActivityGridProps) => {
                    <div
                      key={dayIndex}
                      className={`w-3 h-3 rounded-sm ${getColorClass(intensity)}
-                        hover:ring-1 hover:ring-foreground/30 transition-all cursor-pointer
+                        hover:ring-1 hover:ring-foreground/30 transition-colors cursor-pointer
                        group relative`}
+                      onClick={() => setTapped(tapped === day.date ? null : day.date)}
                    >
-                      <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 p-2
-                        bg-background border border-foreground/10 rounded-md opacity-0
-                        group-hover:opacity-100 transition-opacity z-10 whitespace-nowrap text-xs">
+                      <div className={`absolute bottom-full left-1/2 -translate-x-1/2 mb-2 p-2
+                        bg-background border border-foreground/10 rounded-md transition-opacity z-10 whitespace-nowrap text-xs
+                        ${tapped === day.date ? "opacity-100" : "opacity-0 group-hover:opacity-100"}`}>
                        {hours.toFixed(1)} hours on {day.date}
                      </div>
                    </div>
--- a/src/components/about/stats-alltime.tsx
+++ b/src/components/about/stats-alltime.tsx
@@ -60,21 +60,23 @@ const Stats = () => {

    const totalSeconds = stats.total_seconds;
    const duration = 2000;
-    const steps = 60;
-    let currentStep = 0;
+    let start: number | null = null;
+    let rafId: number;

-    const timer = setInterval(() => {
-      currentStep += 1;
-      if (currentStep >= steps) {
-        setCount(totalSeconds);
-        clearInterval(timer);
-        return;
+    const step = (timestamp: number) => {
+      if (!start) start = timestamp;
+      const elapsed = timestamp - start;
+      const progress = Math.min(elapsed / duration, 1);
+      const eased = 1 - Math.pow(1 - progress, 4);
+      setCount(Math.floor(totalSeconds * eased));
+
+      if (progress < 1) {
+        rafId = requestAnimationFrame(step);
      }
-      const progress = 1 - Math.pow(1 - currentStep / steps, 4);
-      setCount(Math.floor(totalSeconds * progress));
-    }, duration / steps);
+    };

-    return () => clearInterval(timer);
+    rafId = requestAnimationFrame(step);
+    return () => cancelAnimationFrame(rafId);
  }, [isVisible, stats]);

  if (error) return null;
@@ -88,25 +90,25 @@ const Stats = () => {

  return (
    <div ref={sectionRef} className="flex flex-col items-center justify-center min-h-[50vh] gap-6">
-      <div className={skipAnim ? "text-2xl opacity-80" : `text-2xl opacity-0 ${isVisible ? "animate-fade-in-first" : ""}`}>
+      <div className={skipAnim ? "text-lg md:text-2xl opacity-80" : `text-lg md:text-2xl opacity-0 ${isVisible ? "animate-fade-in-first" : ""}`}>
        I've spent
      </div>

      <div className="relative">
-        <div className="text-8xl text-center relative z-10">
+        <div className="text-5xl md:text-8xl text-center relative z-10">
          <span className="font-bold relative">
            <span className={skipAnim ? "bg-gradient-text" : `bg-gradient-text opacity-0 ${isVisible ? "animate-fade-in-second" : ""}`}>
              {formattedHours}
            </span>
          </span>
-          <span className={skipAnim ? "text-4xl opacity-60 ml-4" : `text-4xl opacity-0 ${isVisible ? "animate-slide-in-hours" : ""}`}>
+          <span className={skipAnim ? "text-2xl md:text-4xl opacity-60 ml-4" : `text-2xl md:text-4xl opacity-0 ${isVisible ? "animate-slide-in-hours" : ""}`}>
            hours
          </span>
        </div>
      </div>

      <div className="flex flex-col items-center gap-3 text-center">
-        <div className={skipAnim ? "text-xl opacity-80" : `text-xl opacity-0 ${isVisible ? "animate-fade-in-third" : ""}`}>
+        <div className={skipAnim ? "text-base md:text-xl opacity-80" : `text-base md:text-xl opacity-0 ${isVisible ? "animate-fade-in-third" : ""}`}>
          writing code & building apps
        </div>
        <div className={skipAnim ? "flex items-center gap-3 text-lg opacity-60" : `flex items-center gap-3 text-lg opacity-0 ${isVisible ? "animate-fade-in-fourth" : ""}`}>
--- a/src/components/about/stats-detailed.tsx
+++ b/src/components/about/stats-detailed.tsx
@@ -131,7 +131,7 @@ const DetailedStats = () => {
        <>
          {/* Header */}
          <h2
-            className={`text-2xl md:text-4xl font-bold text-center text-yellow-bright ${skipAnim ? "" : "transition-all duration-700 ease-out"}`}
+            className={`text-2xl md:text-4xl font-bold text-center text-yellow-bright ${skipAnim ? "" : "transition-[opacity,transform] duration-700 ease-out"}`}
            style={skipAnim ? {} : {
              opacity: visible ? 1 : 0,
              transform: visible ? "translateY(0)" : "translateY(20px)",
@@ -147,7 +147,7 @@ const DetailedStats = () => {
              return (
                <div
                  key={card.title}
-                  className={`bg-background border border-foreground/10 rounded-lg p-6 ${card.borderHover} ${skipAnim ? "" : "transition-all duration-500 ease-out"}`}
+                  className={`bg-background/50 border border-foreground/10 rounded-lg p-6 ${card.borderHover} ${skipAnim ? "" : "transition-[opacity,transform] duration-500 ease-out"}`}
                  style={skipAnim ? {} : {
                    transitionDelay: `${150 + i * 100}ms`,
                    opacity: visible ? 1 : 0,
@@ -174,7 +174,7 @@ const DetailedStats = () => {

          {/* Languages */}
          <div
-            className={`bg-background border border-foreground/10 rounded-lg p-6 hover:border-purple-bright/50 ${skipAnim ? "" : "transition-all duration-700 ease-out"}`}
+            className={`bg-background/50 border border-foreground/10 rounded-lg p-6 hover:border-purple-bright/50 ${skipAnim ? "" : "transition-[opacity,transform] duration-700 ease-out"}`}
            style={skipAnim ? {} : {
              transitionDelay: "550ms",
              opacity: visible ? 1 : 0,
@@ -194,9 +194,11 @@ const DetailedStats = () => {
                      <div
                        className={`h-full ${lang.color} rounded-full`}
                        style={{
-                          width: visible ? `${lang.percent}%` : "0%",
+                          width: `${lang.percent}%`,
                          opacity: 0.85,
-                          transition: skipAnim ? "none" : `width 1s ease-out ${700 + i * 80}ms`,
+                          transform: visible ? "scaleX(1)" : "scaleX(0)",
+                          transformOrigin: "left",
+                          transition: skipAnim ? "none" : `transform 1s ease-out ${700 + i * 80}ms`,
                        }}
                      />
                    </div>
@@ -212,7 +214,7 @@ const DetailedStats = () => {
          {/* Activity Grid */}
          {activity && (
            <div
-              className={skipAnim ? "" : "transition-all duration-700 ease-out"}
+              className={skipAnim ? "" : "transition-[opacity,transform] duration-700 ease-out"}
              style={skipAnim ? {} : {
                transitionDelay: "750ms",
                opacity: visible ? 1 : 0,
--- a/src/components/about/timeline.tsx
+++ b/src/components/about/timeline.tsx
@@ -87,7 +87,7 @@ function TimelineCard({ item, index }: { item: (typeof timelineItems)[number]; i
            absolute -left-8 sm:left-1/2 w-6 h-6 sm:w-8 sm:h-8 bg-background
            rounded-full border-2 border-yellow-bright sm:-translate-x-1/2
            flex items-center justify-center z-10
-            ${skip ? "" : "transition-all duration-500"}
+            ${skip ? "" : "transition-[opacity,transform] duration-500"}
            ${visible ? "scale-100 opacity-100" : "scale-0 opacity-0"}
          `}
        >
@@ -99,7 +99,7 @@ function TimelineCard({ item, index }: { item: (typeof timelineItems)[number]; i
          className={`
            w-full sm:w-[calc(50%-32px)]
            ${isLeft ? "sm:pr-8 md:pr-12" : "sm:pl-8 md:pl-12"}
-            ${skip ? "" : "transition-all duration-700 ease-out"}
+            ${skip ? "" : "transition-[opacity,transform] duration-700 ease-out"}
            ${visible
              ? "opacity-100 translate-x-0"
              : `opacity-0 ${isLeft ? "sm:translate-x-8" : "sm:-translate-x-8"} translate-y-4 sm:translate-y-0`
@@ -168,8 +168,8 @@ export default function Timeline() {
        <div className="absolute left-4 sm:left-1/2 h-full w-0.5 -translate-x-1/2">
          <div
            ref={lineRef}
-            className="w-full bg-foreground/10 transition-all duration-[1500ms] ease-out origin-top"
-            style={{ height: `${lineHeight}%` }}
+            className="w-full h-full bg-foreground/10 transition-transform duration-[1500ms] ease-out origin-top"
+            style={{ transform: `scaleY(${lineHeight / 100})` }}
          />
        </div>