Web Application / Frontend

Personal Showcase

ROLE: Frontend EngineerCreative Frontend & Layout

PROJECT OVERVIEW

Built Xpression as an interactive design-driven React application. The web app demonstrates advanced frontend implementations: glassmorphic sections, responsive containers, custom card transitions, and strict TypeScript types.

THE CHALLENGE

Framer Motion layout animations can trigger heavy layout recalculations (reflows) on mobile browsers, causing frame rate drops.

THE SOLUTION

We applied CSS containment parameters and forced GPU acceleration using translate3d parameters during dynamic slide transitions.

DELIVERABLES & FEATURES

Custom fluid card navigation transitions powered by Framer Motion.
Strict type assertions and comprehensive TypeScript compiler config.
Custom CSS themes toggle (Dark mode / Light mode) with local state hooks.
Optimized build outputs deployed to Vercel.

DEV HIGHLIGHT & CODE QUALITY

A reusable animate container component managing smooth slide and opacity transitions for card widgets.

TypeScript React Framer Motion Animationtypescript

import React from "react";
import { motion, AnimatePresence } from "framer-motion";

interface TransitionProps {
  children: React.ReactNode;
  isVisible: boolean;
  direction?: "left" | "right" | "up" | "down";
}

const slideVariants = {
  hidden: (dir: string) => ({
    opacity: 0,
    x: dir === "left" ? -100 : dir === "right" ? 100 : 0,
    y: dir === "up" ? -100 : dir === "down" ? 100 : 0,
  }),
  visible: {
    opacity: 1,
    x: 0,
    y: 0,
    transition: { type: "spring", stiffness: 100, damping: 15 }
  },
  exit: (dir: string) => ({
    opacity: 0,
    x: dir === "left" ? 100 : dir === "right" ? -100 : 0,
    y: dir === "up" ? 100 : dir === "down" ? -100 : 0,
  })
};

export const AnimateSlide: React.FC<TransitionProps> = ({ children, isVisible, direction = "right" }) => {
  return (
    <AnimatePresence mode="wait">
      {isVisible && (
        <motion.div
          custom={direction}
          variants={slideVariants}
          initial="hidden"
          animate="visible"
          exit="exit"
          className="w-full h-full"
        >
          {children}
        </motion.div>
      )}
    </AnimatePresence>
  );
};

PERFORMANCE STATS

MOBILE PAGESPEED

98/100

DESKTOP PAGESPEED100/100

AVG. LOAD TIME0.5s

TECH STACK USED

ReactNext.jsTypeScriptTailwind CSSFramer Motion

Launch Live Store

READY TO SELL MORE?