From 5429a17ed67b2b796085d410df88be68d0e38d36 Mon Sep 17 00:00:00 2001 From: Quinta0 <0pietroquintavalle0@gmail.com> Date: Thu, 7 Aug 2025 15:08:09 +0200 Subject: [PATCH] fiixes --- app/page.tsx | 215 ++++++++++++++++++++++--------- components/ui/comp-537.tsx | 63 +++++++++ components/ui/comp-540.tsx | 55 ++++++++ components/ui/comp-541.tsx | 59 +++++++++ components/ui/timeline.tsx | 210 ++++++++++++++++++++++++++++++ public/Quintavalle_Pietro_CV.pdf | Bin 0 -> 170919 bytes 6 files changed, 540 insertions(+), 62 deletions(-) create mode 100644 components/ui/comp-537.tsx create mode 100644 components/ui/comp-540.tsx create mode 100644 components/ui/comp-541.tsx create mode 100644 components/ui/timeline.tsx create mode 100644 public/Quintavalle_Pietro_CV.pdf diff --git a/app/page.tsx b/app/page.tsx index d8152d9..fdbf4a5 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -73,80 +73,98 @@ const Portfolio = () => { { title: 'Enterprise Proxmox Infrastructure', period: 'Professional Client Project', - description: 'Deployed a full single-node virtualization environment using Proxmox VE, with structured rack cabling, DDNS, and NGINX reverse proxy for secure service exposure. Integrated Tailscale VPN for remote management.', + description: 'Deployed a full single-node virtualization environment using Proxmox VE, with structured rack cabling, DDNS, and NGINX reverse proxy for secure service exposure. Integrated Tailscale VPN for remote management. Configured Docker containers and LXC instances to run Nextcloud, Jellyfin, and TrueNAS. Enabled centralized infrastructure visibility using Grafana, Prometheus, and a Homarr dashboard.', tech: ['Proxmox VE', 'NGINX', 'Docker', 'LXC', 'Grafana', 'Tailscale', 'DDNS', 'TrueNAS', 'Linux'], - icon: , + icon: , status: 'Production', - images: [ - 'https://via.placeholder.com/600x400/434C5E/D8DEE9?text=Proxmox+Dashboard', - ], + images: [], features: ['Centralized infrastructure visibility using Grafana', 'Docker containers and LXC instances', 'Nextcloud, Jellyfin, and TrueNAS integration', 'Secure remote access via VPN'], category: 'Infrastructure' }, { title: 'Multi-User NAS Solution', period: 'Professional Client Project', - description: 'Designed and deployed a RAID 10-based NAS system supporting 9 users as a self-hosted cloud storage alternative. Configured SMB/NFS shares, access control lists (ACLs), and failover mechanisms.', + description: 'Designed and deployed a RAID 10-based NAS system supporting 9 users as a self-hosted cloud storage alternative to Google/iCloud. Configured SMB/NFS shares, access control lists (ACLs), and failover mechanisms. Automated snapshotting and rsync-based backups for a reliable, high-availability storage solution.', tech: ['RAID', 'TrueNAS', 'rsync', 'SMB/NFS', 'systemd timers', 'ACLs', 'Linux'], icon: , status: 'Production', - images: [ - 'https://via.placeholder.com/600x400/434C5E/D8DEE9?text=NAS+Dashboard', - ], + images: [], features: ['Automated snapshotting and rsync-based backups', 'High-availability storage solution', 'Multi-user access control', 'Failover mechanisms'], category: 'Storage' }, { title: 'Custom Gaming Systems', period: 'Professional Client Project', - description: 'Engineered and delivered 12+ custom PC builds, including high-performance gaming rigs and workstation-grade machines. Focused on component compatibility analysis, PSU sizing, and thermal management.', + description: 'Engineered and delivered 12+ custom PC builds, including high-performance gaming rigs and workstation-grade machines. Focused on component compatibility analysis, PSU sizing, airflow and thermal management, and BIOS/driver optimization for performance tuning.', tech: ['Hardware Engineering', 'BIOS Configuration', 'Thermal Management', 'Performance Tuning'], - icon: , + icon: , status: 'Delivered', - images: [ - 'https://via.placeholder.com/600x400/434C5E/D8DEE9?text=Custom+PC+Build', - ], + images: [], features: ['Component compatibility analysis', 'PSU sizing and airflow optimization', 'BIOS/driver optimization', 'System benchmarking'], category: 'Hardware' }, { title: 'Personal Homelab Infrastructure', period: 'Personal Project', - description: 'Replicated enterprise-level infrastructure architecture in a personal homelab, using Proxmox, Docker, and LXC. Focused on Infrastructure as Code (IaC) principles and container orchestration.', + description: 'Replicated enterprise-level infrastructure architecture in a personal homelab, using Proxmox, Docker, and LXC. Focused on Infrastructure as Code (IaC) principles, virtual machine provisioning, monitoring, and container orchestration. Demonstrated ability to standardize and document reproducible deployment procedures.', tech: ['Proxmox VE', 'Docker', 'LXC', 'Bash', 'Tailscale', 'Grafana', 'IaC'], icon: , status: 'Ongoing', - images: [ - 'https://via.placeholder.com/600x400/434C5E/D8DEE9?text=Homelab+Setup', - ], + images: [], features: ['Infrastructure as Code (IaC) principles', 'Virtual machine provisioning', 'Monitoring and container orchestration', 'Standardized deployment procedures'], category: 'Infrastructure' }, { title: 'Valgo - Algorithm Visualizer', - period: 'Personal Development Project', + period: 'Jun 2024 - Present', description: 'Interactive web application designed to help users understand and visualize various sorting algorithms. Built with Next.js and React to make learning algorithms more engaging and intuitive.', - tech: ['Next.js', 'React', 'TypeScript', 'Tailwind CSS'], + tech: ['Next.js', 'React', 'JavaScript', 'Algorithm Visualization'], icon: , status: 'Live', images: [ - 'https://via.placeholder.com/600x400/434C5E/D8DEE9?text=Algorithm+Visualizer', + 'valgo.png', ], features: ['Real-time algorithm visualization', 'Multiple sorting algorithms', 'Step-by-step breakdown', 'Performance comparison'], github: 'https://github.com/Quinta0/valgo', demo: 'https://quinta0.github.io/valgo/', category: 'Development' }, + { + title: 'Boston Housing Price Prediction', + period: 'May 2024 - Present', + description: 'Machine learning model to predict housing prices in the Boston area based on various features such as crime rate, average number of rooms per dwelling, and accessibility to radial highways.', + tech: ['Python', 'Machine Learning', 'Data Analysis', 'Statistical Modeling'], + icon: , + status: 'Academic Project', + images: [ + 'Housing.jpeg', + ], + features: ['Predictive modeling', 'Feature engineering', 'Data visualization', 'Statistical analysis'], + github: 'https://github.com/Quinta0/BostonHousing', + category: 'Data Science' + }, + { + title: 'Forest Fire Simulation', + period: 'Mar 2024 - Present', + description: 'Probability & Statistics course project modeling the spread of forest fires over a grid. Accounts for vegetation types, terrain elevation, wind patterns, humidity levels, and spontaneous ignition.', + tech: ['Python', 'Statistical Modeling', 'Simulation', 'Data Science'], + icon: , + status: 'Academic Project', + images: [ + 'forestfire.jpg', + ], + features: ['Monte Carlo simulation', 'Environmental factors modeling', 'Statistical analysis', 'Visualization tools'], + github: 'https://github.com/Quinta0/ForestFire', + category: 'Data Science' + }, { title: 'Finance Tracker Application', period: 'In Development', - description: 'Designing a simple and intuitive personal finance app built with Django (Python) and SQLite, focused on clarity, control, and peace of mind. Features category-based expense tracking and budget summaries.', + description: 'Designing a simple and intuitive personal finance app built with Django (Python) and SQLite, focused on clarity, control, and peace of mind. Features category-based expense tracking, budget summaries, and clear data visualizations.', tech: ['Django', 'Python', 'SQLite', 'Chart.js', 'HTML/CSS', 'JavaScript'], icon: , status: 'In Development', - images: [ - 'https://via.placeholder.com/600x400/434C5E/D8DEE9?text=Finance+Tracker', - ], + images: [], features: ['Category-based expense tracking', 'Budget summaries', 'Data visualizations', '50/30/20 budgeting framework'], category: 'Development' } @@ -155,11 +173,11 @@ const Portfolio = () => { const education = [ { id: 1, - institution: 'Scuola cantonale di commercio, Bellinzona', - degree: 'Maturità Cantonale & AFC Economics', - period: 'September 2018 - June 2022', - status: '4.5/6 (Maturità), 5/6 (AFC)', - description: 'Completed secondary education with focus on economics and business administration.' + institution: 'USI Università della Svizzera italiana, Lugano', + degree: "Bachelor's Degree in Economics (English Stream)", + period: 'September 2024 - Present', + status: 'Current', + description: 'Pursuing coursework in microeconomics, macroeconomics, statistics, accounting, and quantitative methods with particular interest in finance.' }, { id: 2, @@ -171,11 +189,11 @@ const Portfolio = () => { }, { id: 3, - institution: 'USI Università della Svizzera italiana, Lugano', - degree: "Bachelor's Degree in Economics (English Stream)", - period: 'September 2024 - Present', - status: 'Current', - description: 'Pursuing coursework in microeconomics, macroeconomics, statistics, accounting, and quantitative methods with particular interest in finance.' + institution: 'Scuola cantonale di commercio, Bellinzona', + degree: 'Maturità Cantonale & AFC Economics', + period: 'September 2018 - June 2022', + status: '4.5/6 (Maturità), 5/6 (AFC)', + description: 'Completed secondary education with focus on economics and business administration.' } ]; @@ -246,17 +264,34 @@ const Portfolio = () => { {/* Project Images */} -
- {project.images.map((image, idx) => ( -
- {`${project.title} + {project.images && project.images.length > 0 ? ( +
+ {project.images.map((image, idx) => ( +
+ {`${project.title} +
+ ))} +
+ ) : ( +
+
+ {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} +

+ )} + +
+ + + + {edu.period} +
+
+
+ ))} +
+
{/* 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 ( + + ) +} + +// 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 ( +