- {project.images.map((image, idx) => (
-
-
+ {project.images && project.images.length > 0 ? (
+
+ {project.images.map((image, idx) => (
+
+
+
+ ))}
+
+ ) : (
+
+
+ {project.icon}
- ))}
-
+
+ Infrastructure/Hardware Project - No visual interface
+
+
+ )}
{/* Description */}
@@ -688,23 +723,79 @@ const Portfolio = () => {
Education Timeline
-
- {education.map((edu) => ( // ← Changed from 'education' to 'edu'
-
-
-
- {edu.period}
- {edu.degree}
-
-
- {edu.description}
-
- ))}
-
+
+ {/* Timeline Line */}
+
+
+
+ {education.map((edu, index) => (
+
+ {/* Timeline Indicator */}
+
+
+ {/* Timeline Content */}
+
+
+
+
+ {edu.degree}
+
+
+ {edu.institution}
+
+
+
+ {edu.status}
+
+
+
+ {edu.description && (
+
+ {edu.description}
+
+ )}
+
+
+
+
+ ))}
+
+
{/* Certificates */}
diff --git a/components/ui/comp-537.tsx b/components/ui/comp-537.tsx
new file mode 100644
index 0000000..35bdc81
--- /dev/null
+++ b/components/ui/comp-537.tsx
@@ -0,0 +1,63 @@
+import {
+ Timeline,
+ TimelineDate,
+ TimelineHeader,
+ TimelineIndicator,
+ TimelineItem,
+ TimelineSeparator,
+ TimelineTitle,
+} from "components/ui/timeline"
+
+const items = [
+ {
+ id: 1,
+ date: "Mar 15, 2024",
+ title: "Project Kickoff",
+ },
+ {
+ id: 2,
+ date: "Mar 22, 2024",
+ title: "Design Phase",
+ },
+ {
+ id: 3,
+ date: "Apr 5, 2024",
+ title: "Development Sprint",
+ },
+ {
+ id: 4,
+ date: "Apr 19, 2024",
+ title: "Testing & Deployment",
+ },
+ {
+ id: 5,
+ date: "May 3, 2024",
+ title: "User Training",
+ },
+ {
+ id: 6,
+ date: "May 17, 2024",
+ title: "Project Handover",
+ },
+]
+
+export default function Component() {
+ return (
+
+ {items.map((item) => (
+
+
+
+ {item.date}
+ {item.title}
+
+
+
+ ))}
+
+ )
+}
diff --git a/components/ui/comp-540.tsx b/components/ui/comp-540.tsx
new file mode 100644
index 0000000..f217b31
--- /dev/null
+++ b/components/ui/comp-540.tsx
@@ -0,0 +1,55 @@
+import {
+ Timeline,
+ TimelineContent,
+ TimelineDate,
+ TimelineHeader,
+ TimelineIndicator,
+ TimelineItem,
+ TimelineSeparator,
+ TimelineTitle,
+} from "components/ui/timeline"
+
+const items = [
+ {
+ id: 1,
+ date: "Mar 15, 2024",
+ title: "Project Kickoff",
+ description: "Initial team meeting.",
+ },
+ {
+ id: 2,
+ date: "Mar 22, 2024",
+ title: "Design Phase",
+ description: "Completed wireframes.",
+ },
+ {
+ id: 3,
+ date: "Apr 5, 2024",
+ title: "Development Sprint",
+ description: "Backend development.",
+ },
+ {
+ id: 4,
+ date: "Apr 19, 2024",
+ title: "Testing & Deployment",
+ description: "Performance optimization.",
+ },
+]
+
+export default function Component() {
+ return (
+
+ {items.map((item) => (
+
+
+
+ {item.date}
+ {item.title}
+
+
+ {item.description}
+
+ ))}
+
+ )
+}
diff --git a/components/ui/comp-541.tsx b/components/ui/comp-541.tsx
new file mode 100644
index 0000000..e70caa2
--- /dev/null
+++ b/components/ui/comp-541.tsx
@@ -0,0 +1,59 @@
+import {
+ Timeline,
+ TimelineContent,
+ TimelineDate,
+ TimelineHeader,
+ TimelineIndicator,
+ TimelineItem,
+ TimelineSeparator,
+ TimelineTitle,
+} from "components/ui/timeline"
+
+const items = [
+ {
+ id: 1,
+ date: "Mar 15, 2024",
+ title: "Project Kickoff",
+ description: "Initial team meeting.",
+ },
+ {
+ id: 2,
+ date: "Mar 22, 2024",
+ title: "Design Phase",
+ description: "Completed wireframes.",
+ },
+ {
+ id: 3,
+ date: "Apr 5, 2024",
+ title: "Development Sprint",
+ description: "Backend development.",
+ },
+ {
+ id: 4,
+ date: "Apr 19, 2024",
+ title: "Testing & Deployment",
+ description: "Performance optimization.",
+ },
+]
+
+export default function Component() {
+ return (
+
+ {items.map((item) => (
+
+
+
+ {item.date}
+ {item.title}
+
+
+ {item.description}
+
+ ))}
+
+ )
+}
diff --git a/components/ui/timeline.tsx b/components/ui/timeline.tsx
new file mode 100644
index 0000000..eb6d709
--- /dev/null
+++ b/components/ui/timeline.tsx
@@ -0,0 +1,210 @@
+"use client"
+
+import * as React from "react"
+import { Slot } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+// Types
+type TimelineContextValue = {
+ activeStep: number
+ setActiveStep: (step: number) => void
+}
+
+// Context
+const TimelineContext = React.createContext
(
+ undefined
+)
+
+const useTimeline = () => {
+ const context = React.useContext(TimelineContext)
+ if (!context) {
+ throw new Error("useTimeline must be used within a Timeline")
+ }
+ return context
+}
+
+// Components
+interface TimelineProps extends React.HTMLAttributes {
+ defaultValue?: number
+ value?: number
+ onValueChange?: (value: number) => void
+ orientation?: "horizontal" | "vertical"
+}
+
+function Timeline({
+ defaultValue = 1,
+ value,
+ onValueChange,
+ orientation = "vertical",
+ className,
+ ...props
+}: TimelineProps) {
+ const [activeStep, setInternalStep] = React.useState(defaultValue)
+
+ const setActiveStep = React.useCallback(
+ (step: number) => {
+ if (value === undefined) {
+ setInternalStep(step)
+ }
+ onValueChange?.(step)
+ },
+ [value, onValueChange]
+ )
+
+ const currentStep = value ?? activeStep
+
+ return (
+
+
+
+ )
+}
+
+// TimelineContent
+function TimelineContent({
+ className,
+ ...props
+}: React.HTMLAttributes) {
+ return (
+
+ )
+}
+
+// TimelineDate
+interface TimelineDateProps extends React.HTMLAttributes {
+ asChild?: boolean
+}
+
+function TimelineDate({
+ asChild = false,
+ className,
+ ...props
+}: TimelineDateProps) {
+ const Comp = asChild ? Slot.Root : "time"
+
+ return (
+
+ )
+}
+
+// TimelineHeader
+function TimelineHeader({
+ className,
+ ...props
+}: React.HTMLAttributes) {
+ return (
+
+ )
+}
+
+// TimelineIndicator
+interface TimelineIndicatorProps extends React.HTMLAttributes {
+ asChild?: boolean
+}
+
+function TimelineIndicator({
+ asChild = false,
+ className,
+ children,
+ ...props
+}: TimelineIndicatorProps) {
+ return (
+
+ {children}
+
+ )
+}
+
+// TimelineItem
+interface TimelineItemProps extends React.HTMLAttributes {
+ step: number
+}
+
+function TimelineItem({ step, className, ...props }: TimelineItemProps) {
+ const { activeStep } = useTimeline()
+
+ return (
+
+ )
+}
+
+// TimelineSeparator
+function TimelineSeparator({
+ className,
+ ...props
+}: React.HTMLAttributes) {
+ return (
+
+ )
+}
+
+// TimelineTitle
+function TimelineTitle({
+ className,
+ ...props
+}: React.HTMLAttributes) {
+ return (
+
+ )
+}
+
+export {
+ Timeline,
+ TimelineContent,
+ TimelineDate,
+ TimelineHeader,
+ TimelineIndicator,
+ TimelineItem,
+ TimelineSeparator,
+ TimelineTitle,
+}
diff --git a/public/Quintavalle_Pietro_CV.pdf b/public/Quintavalle_Pietro_CV.pdf
new file mode 100644
index 0000000..de289d5
Binary files /dev/null and b/public/Quintavalle_Pietro_CV.pdf differ