import Link from "next/link"; import { ArrowRightIcon } from "lucide-react"; import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; import { Card, CardContent } from "@/components/ui/card"; const cycleSteps = [ { id: 1, name: "Discover", description: "Understanding the problem and gathering requirements", icon: "🔍", color: "bg-blue-500/10 border-blue-500 text-blue-500", }, { id: 2, name: "Define", description: "Clarifying goals and setting project parameters", icon: "📋", color: "bg-purple-500/10 border-purple-500 text-purple-500", }, { id: 3, name: "Design", description: "Creating solutions and planning implementation", icon: "🎨", color: "bg-amber-500/10 border-amber-500 text-amber-500", }, { id: 4, name: "Develop", description: "Building and implementing the solution", icon: "💻", color: "bg-green-500/10 border-green-500 text-green-500", }, { id: 5, name: "Test", description: "Validating functionality and fixing issues", icon: "🧪", color: "bg-red-500/10 border-red-500 text-red-500", }, { id: 6, name: "Deploy", description: "Launching and integrating the solution", icon: "🚀", color: "bg-indigo-500/10 border-indigo-500 text-indigo-500", }, ]; export default function CycleDiagram() { return (

My Approach

Iterative Process

I follow an agile, cyclical approach that allows for continuous improvement and adaptation throughout your project.

{/* Mobile view - vertical cards */}

{cycleSteps.map((step) => (

{step.icon}

{step.name}

{step.description}

))}

{/* Desktop view - circular diagram */}

{/* Large circle in the center */}

🔄

Continuous
Improvement

{/* Circular positioned nodes */} {cycleSteps.map((step, index) => { // Calculate position on the circle const angle = (index * (360 / cycleSteps.length) * Math.PI) / 180; const radius = 237.5; // Distance from center const left = Math.cos(angle) * radius + 250 - 60; // 250 is half of container, 60 is half of node width const top = Math.sin(angle) * radius + 250 - 60; return (

{/* Solid background circle to mask the dashed border */}

{/* Colored background with proper z-index */}

{step.icon}

{step.name}

); })}

); }

Portfolio Process And Approach

Cycle Diagram

Horizontal StepperPreview

Process PrinciplesPreview

Stacked CardsPreview

Vertical TimelinePreview