Component 047Portfolio

Skill Orbit Hero

Your portrait sits at the center of two slow orbits while skills and highlights circle around it, pausing when visitors look closer.

Hover or focus a skill to pause the orbit and read its detail.

Available for work

Hello, I’m

Hasan

Frontend Developer

I build thoughtful, fast, and accessible web interfaces with React and Next.js.

Available for work

Loading preview…

Live interactive previewExplore the interaction, then make it yours.

Quick start

Save skill-orbit-hero.tsx in your components folder, then import it below. Requires React and Tailwind CSS.

TSXapp/page.tsx

import SkillOrbitHero from "@/components/ui/skill-orbit-hero";

export default function HomePage() {
  return <SkillOrbitHero />;
}

Behind the interaction

Designed to explore, ready to adapt.

Skills travel on two counter-rotating rings around the portrait, always upright and readable.

Hovering or focusing the orbit pauses it, and each skill reveals a short detail for curious visitors.

Typed props for name, role, portrait, skills, and actions, with reduced-motion and keyboard support.

Keep exploring