derinbartan.com: Champion Athlete Portfolio with Next.js and Framer Motion

I developed a modern, interactive, and performant portfolio website using Next.js and Framer Motion technologies to best showcase the international sailing career of my daughter Derin Bartan, ILCA 4 U16 World and European Champion, in the digital world. In this article, I’ll share the project’s technical details, animation strategies, and my experience creating a digital platform for a world champion.

Project Vision: Bringing Championship to Digital

Instead of merely listing Derin’s major achievements like the World Championship she won in Los Angeles and the European Championship in Poland, I aimed to provide visitors with an experience that conveys the magnitude of these accomplishments. By combining Next.js’s powerful performance with Framer Motion’s impressive animation capabilities, I created a site that reflects the championship spirit with every scroll, hover, and click.

Technical Architecture: Next.js 14 App Router

I built the project on Next.js 14’s App Router architecture. The main reasons behind this choice were:

Thanks to Server Components, I achieved a fast initial loading experience rendered on the server side without sending large JavaScript bundles to the client. Fast access was critical, especially on mobile devices, for families and coaches following international competitions.

Using the Metadata API, I dynamically managed SEO optimization for each page. I strategically placed important keywords like “ILCA 4 World Champion,” “Turkey Sailing National Team.”

Dynamic Animations with Framer Motion

The highlight of the site was the animations I created with Framer Motion. Each animation was carefully designed to reflect Derin’s dynamism in sailing and her journey of success.

Hero Section Animations

In the hero section on the homepage, I used scroll-triggered animations for the championship titles to smoothly appear as they enter the viewport. The title “ILCA 4 U16 World Champion 2025” is presented with a special reveal animation to capture visitors’ attention.

// Hero title animation example
const titleVariants = {
  hidden: { opacity: 0, y: 50 },
  visible: {
    opacity: 1,
    y: 0,
    transition: {
      duration: 0.8,
      ease: 'easeOut',
    },
  },
};