## Overview This template is designed to create a strong visual impact while keeping the user experience smooth and seamless. Perfect for showcasing design, photography, or animation, its clean and minimal layout ensures your portfolio looks professional and stays free of distractions.

## Key Components Animation/Effect Featuring captivating animations like entrance effects, zoom-ins, and morphing dialogs, this template grabs attention instantly, creating an engaging experience for your audience. Responsive Design Fully responsive and ready to use out of the box, this template adapts seamlessly to any device. Easily customize breakpoints and fine-tune your design on a user-friendly, free-form canvas to match your vision perfectly. Text & Color The design emphasizes subtle color palettes and clean typography to ensure a sleek and focused user experience. However, the framework is fully customizable, allowing you to easily adjust colors, typography, and other visual elements to align with your specific branding or design preferences. Video Dynamic video integration, seamlessly displayed as a background for cards. This feature leverages the lightweight and highly efficient

## Supporting Components This design is built using TypeScript, Tailwind, and Framer Motion for animations. It also includes extra components to enhance and complete the hero section.
To enhance the user experience, I implemented floating navigation across the website using position: fixed. This design choice ensures seamless accessibility and adds a modern, interactive feel to the interface. ``` // navbar.tsx import React from "react"; import { PersonStanding, Mail, Compass } from "lucide-react"; import { Button, buttonVariants } from "@/components/ui/button"; const BottomNavigation = () => { const Tools = [ { name: "frankgoodman", icon: , link: "/", }, { name: "index", icon: , action: "toggle", }, { name: "about", icon: , link: "/about", }, ]; return ( <> ); }; export default BottomNavigation; ``` I created a wrapper that animates all items from opacity 0 to 1 on reload, with a brief delay between each item’s appearance for a smooth transition effect. ``` // animated-group.tsx "use client"; import { ReactNode } from "react"; import { motion, Variants } from "framer-motion"; import React from "react"; type PresetType = | "fade" | "slide" | "scale" | "blur" | "blur-slide" | "zoom" | "flip" | "bounce" | "rotate" | "swing"; type AnimatedGroupProps = { children: ReactNode; className?: string; variants?: { container?: Variants; item?: Variants; }; preset?: PresetType; }; const defaultContainerVariants: Variants = { hidden: { opacity: 0 }, visible: { opacity: 1, transition: { staggerChildren: 0.1, }, }, }; const defaultItemVariants: Variants = { hidden: { opacity: 0 }, visible: { opacity: 1 }, }; const presetVariants: Record< PresetType, { container: Variants; item: Variants } > = { fade: { container: defaultContainerVariants, item: { hidden: { opacity: 0 }, visible: { opacity: 1 }, }, }, slide: { container: defaultContainerVariants, item: { hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0 }, }, }, scale: { container: defaultContainerVariants, item: { hidden: { opacity: 0, scale: 0.8 }, visible: { opacity: 1, scale: 1 }, }, }, blur: { container: defaultContainerVariants, item: { hidden: { opacity: 0, filter: "blur(4px)" }, visible: { opacity: 1, filter: "blur(0px)" }, }, }, "blur-slide": { container: defaultContainerVariants, item: { hidden: { opacity: 0, filter: "blur(4px)", y: 20 }, visible: { opacity: 1, filter: "blur(0px)", y: 0 }, }, }, zoom: { container: defaultContainerVariants, item: { hidden: { opacity: 0, scale: 0.5 }, visible: { opacity: 1, scale: 1, transition: { type: "spring", stiffness: 300, damping: 20 }, }, }, }, flip: { container: defaultContainerVariants, item: { hidden: { opacity: 0, rotateX: -90 }, visible: { opacity: 1, rotateX: 0, transition: { type: "spring", stiffness: 300, damping: 20 }, }, }, }, bounce: { container: defaultContainerVariants, item: { hidden: { opacity: 0, y: -50 }, visible: { opacity: 1, y: 0, transition: { type: "spring", stiffness: 400, damping: 10 }, }, }, }, rotate: { container: defaultContainerVariants, item: { hidden: { opacity: 0, rotate: -180 }, visible: { opacity: 1, rotate: 0, transition: { type: "spring", stiffness: 200, damping: 15 }, }, }, }, swing: { container: defaultContainerVariants, item: { hidden: { opacity: 0, rotate: -10 }, visible: { opacity: 1, rotate: 0, transition: { type: "spring", stiffness: 300, damping: 8 }, }, }, }, }; function AnimatedGroup({ children, className, variants, preset, }: AnimatedGroupProps) { const selectedVariants = preset ? presetVariants[preset] : { container: defaultContainerVariants, item: defaultItemVariants }; const containerVariants = variants?.container || selectedVariants.container; const itemVariants = variants?.item || selectedVariants.item; return ( {React.Children.map(children, (child, index) => ( {child} ))} ); } export { AnimatedGroup }; ``` The card component showcases our main content with animations like zoom-in and entrance effects for each card tag. It also uses images and videos as backgrounds, sourced from Unsplash for high-quality visuals. ``` // work-card.tsx import { ArrowUpRight } from "lucide-react"; import { useState } from "react"; import { motion } from "framer-motion"; import { MorphingDialog, MorphingDialogTrigger, MorphingDialogContent, MorphingDialogTitle, MorphingDialogImage, MorphingDialogSubtitle, MorphingDialogClose, MorphingDialogDescription, MorphingDialogContainer, } from "./morphic-dialog"; interface Media { type: "image" | "video"; src: string; } interface WorkCardProps { title: string; category: string[]; media: Media; } export function WorkCard({ title, media, category }: WorkCardProps) { const [isHovered, setIsHovered] = useState(false); return ( <> setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} > {media.type === "video" ? (

When Dribble Meet Code