From 1905af853f3037d56c0fe36785861cea25cc938a Mon Sep 17 00:00:00 2001 From: Quinta0 <0pietroquintavalle0@gmail.com> Date: Mon, 8 Dec 2025 02:08:23 +0100 Subject: [PATCH] revamp all --- app/layout.tsx | 2 +- app/page.tsx | 1516 +++++++++++++----------------------- components/ui/badge.tsx | 36 - components/ui/button.tsx | 56 -- components/ui/card.tsx | 79 -- components/ui/comp-537.tsx | 63 -- components/ui/comp-540.tsx | 55 -- components/ui/comp-541.tsx | 59 -- components/ui/input.tsx | 24 - components/ui/textarea.tsx | 23 - components/ui/timeline.tsx | 209 ----- switzerland.svg | 121 +++ 12 files changed, 645 insertions(+), 1598 deletions(-) delete mode 100644 components/ui/badge.tsx delete mode 100644 components/ui/button.tsx delete mode 100644 components/ui/card.tsx delete mode 100644 components/ui/comp-537.tsx delete mode 100644 components/ui/comp-540.tsx delete mode 100644 components/ui/comp-541.tsx delete mode 100644 components/ui/input.tsx delete mode 100644 components/ui/textarea.tsx delete mode 100644 components/ui/timeline.tsx create mode 100644 switzerland.svg diff --git a/app/layout.tsx b/app/layout.tsx index 328bfe8..06662dc 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -7,7 +7,7 @@ export const metadata: Metadata = { keywords: ['Pietro Quintavalle', 'Economics', 'Data Analytics', 'Web Development', 'Switzerland', 'USI'], authors: [{ name: 'Pietro Quintavalle' }], openGraph: { - title: 'Pietro Quintavalle - Economics Student & Developer', + title: 'Pietro Quintavalle', description: 'Economics student at USI with extensive data analytics and web development expertise.', url: 'https://your-domain.com', siteName: 'Pietro Quintavalle Portfolio', diff --git a/app/page.tsx b/app/page.tsx index 631f301..c3294a6 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,1072 +1,602 @@ "use client" + import React, { useState, useEffect } from 'react'; -import { Github, Linkedin, Mail, ChevronDown, Code, Database, BarChart3, Globe, Award, GraduationCap, Image, ExternalLink as LinkIcon, Briefcase, Calendar, Moon, Sun } from 'lucide-react'; +import { + Terminal, + Server, + Network, + Code, + Database, + Cpu, + Globe, + Mail, + Phone, + MapPin, + Menu, + X, + Linkedin, + Github, + Briefcase, + GraduationCap, + Calendar +} from 'lucide-react'; -const Portfolio = () => { - const [activeSection, setActiveSection] = useState('home'); - const [scrolled, setScrolled] = useState(false); - const [showProjectGallery, setShowProjectGallery] = useState(null); - const [isDarkMode, setIsDarkMode] = useState(true); +// --- Data Constants --- - // Dark Mode Colors - Improved readability - const darkColors = { - bg: '#0B0F1F', // Darker for better contrast - bgLight: '#1A1F3A', - bgLighter: '#252B48', - bgCard: '#161B33', - bgHover: '#1F2544', - text: '#F0F4FF', // Brighter white for readability - textMuted: '#B8C1E3', // Lighter muted text - primary: '#7C6CE7', - secondary: '#00D4FF', - accent: '#FF6B9D', - blue: '#00D4FF', - darkBlue: '#5B4BD6', - cyan: '#00F2FE', - green: '#00E676', - yellow: '#FFB800', - orange: '#FF9500', - red: '#FF6B9D', - purple: '#B48EAD', - success: '#00E676', - warning: '#FFB800', - gradient1: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)', - gradient2: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)', - gradient3: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)', - gradientHero: 'linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%)', - }; - - // Light Mode Colors - const lightColors = { - bg: '#FFFFFF', // Pure white - bgLight: '#F8F9FC', // Very light gray-blue - bgLighter: '#EEF1F8', // Light gray - bgCard: '#FAFBFF', // Off-white card - bgHover: '#E8ECFA', // Hover state - text: '#1A1F3A', // Dark blue-gray for text - textMuted: '#5E6B8C', // Muted blue-gray - primary: '#6C5CE7', // Keep vibrant purple - secondary: '#0099CC', // Darker cyan for contrast - accent: '#E94B7A', // Slightly darker pink - blue: '#0099CC', - darkBlue: '#5B4BD6', - cyan: '#00A8CC', - green: '#00C853', - yellow: '#FF9800', - orange: '#FF6B00', - red: '#E94B7A', - purple: '#9C4D97', - success: '#00C853', - warning: '#FF9800', - gradient1: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)', - gradient2: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)', - gradient3: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)', - gradientHero: 'linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%)', - }; - - const colors = isDarkMode ? darkColors : lightColors; - - useEffect(() => { - const handleScroll = () => { - setScrolled(window.scrollY > 50); - }; - window.addEventListener('scroll', handleScroll); - return () => window.removeEventListener('scroll', handleScroll); - }, []); - - const skills = { - 'System Administration': ['Linux/Windows Server', 'Active Directory', 'Group Policy', 'Office 365', 'PowerShell', 'Bash Scripting'], - 'Virtualization & Cloud': ['Proxmox VE', 'Hyper-V', 'Docker', 'LXC', 'Infrastructure as Code', 'NGINX'], - 'Networking & Security': ['VLAN Configuration', 'Firewall Management', 'VPN (Tailscale)', 'Network Troubleshooting', 'DDNS'], - 'Development & Analytics': ['Python', 'JavaScript', 'React', 'Next.js', 'SQL', 'Data Analysis'], - 'Monitoring & Tools': ['Grafana', 'Prometheus', 'Git', 'Backup & Recovery', 'RAID Systems'] - }; - - const experience = [ - { - title: 'Systems Engineering Consultant', - company: 'Freelance', - period: 'January 2020 - Present', - location: 'Ticino, Switzerland', - description: 'Delivered end-to-end IT infrastructure and systems engineering services to multiple clients, with a focus on server deployment, virtualization platforms, and network architecture.', - achievements: [ - 'Built and maintained 6-10 production-grade servers with 90%+ uptime', - 'Designed VLAN-based network topologies and firewall policies', - 'Implemented secure remote access via VPN (Tailscale)', - 'Created automation scripts for routine maintenance and monitoring', - 'Managed Windows Server environments with Active Directory integration' - ] +const DATA = { + profile: { + name: "Pietro Quintavalle", + role: "System Administrator | IT Consultant | Economics Student", + tagline: "Bridging Enterprise Infrastructure with Economic Strategy", + summary: "I am a Systems Administrator with a strategic edge. Combining 5+ years of bare-metal virtualization and network engineering experience with an academic foundation in Economics, I don't just 'keep the lights on'—I build cost-efficient, scalable infrastructure that drives business value. My expertise spans from deploying complex Proxmox clusters to optimizing IT budgets.", + location: "Switzerland", + email: "0pietroquintavalle0@gmail.com", + links: { + github: "https://github.com/Quinta0", + linkedin: "https://www.linkedin.com/in/pietro-quintavalle-996b96267/" } - ]; - - const projects = [ - { - 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. 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: , - status: 'Production', - images: [], - features: ['Centralized infrastructure visibility using Grafana', 'Docker containers and LXC instances', 'Nextcloud, Jellyfin, and TrueNAS integration', 'Secure remote access via VPN'], - category: 'Infrastructure' + }, + skills: [ + { + category: "Infrastructure & Virtualization", + icon: , + items: ["Proxmox VE (Clustering)", "Hyper-V", "Windows Server (AD/DNS/GP)", "Linux (Debian/Ubuntu/Alpine)", "Office 365 Administration", "Bare Metal Deployment"] }, - { - 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 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: [], - features: ['Automated snapshotting and rsync-based backups', 'High-availability storage solution', 'Multi-user access control', 'Failover mechanisms'], - category: 'Storage' + { + category: "Network Engineering", + icon: , + items: ["VLANs & Subnetting", "Firewall Policy Management", "Tailscale Mesh VPNs", "Reverse Proxies (NGINX)", "Network Topology Design", "Secure Remote Access"] }, - { - 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, airflow and thermal management, and BIOS/driver optimization for performance tuning.', - tech: ['Hardware Engineering', 'BIOS Configuration', 'Thermal Management', 'Performance Tuning'], - icon: , - status: 'Delivered', - images: [], - features: ['Component compatibility analysis', 'PSU sizing and airflow optimization', 'BIOS/driver optimization', 'System benchmarking'], - category: 'Hardware' + { + category: "DevOps & Automation", + icon: , + items: ["Infrastructure as Code (IaC)", "Bash & PowerShell Scripting", "Docker Containerization", "LXC Management", "Git Version Control", "Python Automation"] }, - { - 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, 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: [], - features: ['Infrastructure as Code (IaC) principles', 'Virtual machine provisioning', 'Monitoring and container orchestration', 'Standardized deployment procedures'], - category: 'Infrastructure' + { + category: "Analytics & Web", + icon: , + items: ["Grafana & Prometheus", "Disaster Recovery Planning", "React & Next.js", "SQL/SQLite", "Hardware Benchmarking", "Google Data Analytics"] }, - { - title: 'Valgo - Algorithm Visualizer', - 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', 'JavaScript', 'Algorithm Visualization'], - icon: , - status: 'Live', - images: [ - '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, budget summaries, and clear data visualizations.', - tech: ['Django', 'Python', 'SQLite', 'Chart.js', 'HTML/CSS', 'JavaScript'], - icon: , - status: 'In Development', - images: [], - features: ['Category-based expense tracking', 'Budget summaries', 'Data visualizations', '50/30/20 budgeting framework'], - category: 'Development' - } - ]; - - const education = [ + ], + experience: [ { id: 1, - 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, - institution: 'USI Università della Svizzera italiana, Lugano', - degree: 'Bachelor of Science in Informatics (English Stream)', - period: 'September 2022 - June 2024', - status: '2 years completed', - description: 'Completed comprehensive coursework in software engineering, AGILE methodologies, data structures and algorithms, and database systems.' - }, - { - id: 3, - 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.' + role: "Systems Engineering Consultant", + company: "Freelance", + location: "Ticino, Switzerland", + period: "Jan 2020 - Present", + description: "Delivering end-to-end IT infrastructure services.", + achievements: [ + "Built and maintained 6-10 production-grade servers with 90%+ uptime using automation tools.", + "Designed VLAN-based network topologies and firewall policies.", + "Managed Windows Server environments including AD and Disaster Recovery.", + "Implemented secure remote access via Tailscale VPN." + ] } + ], + education: [ + { + degree: "Bachelor's Degree in Economics", + institution: "USI Università della Svizzera italiana", + period: "Sep 2024 - Present", + status: "Current", + details: "Microeconomics, Macroeconomics, Statistics, Accounting, Quantitative Methods." + }, + { + degree: "Bachelor of Science in Informatics", + institution: "USI Università della Svizzera italiana", + period: "Sep 2022 - June 2024", + status: "2 Years Completed", + details: "Software Engineering, Agile, Data Structures, OOP (Java, C++), Web Dev." + }, + { + degree: "Maturità Cantonale & AFC Economics", + institution: "Scuola cantonale di commercio", + period: "Sep 2018 - June 2022", + status: "Completed", + details: "Achieved 4.5/6 (Maturità), 5/6 (AFC). Above average performance." + } + ], + projects: [ + { + title: "Enterprise Proxmox Infrastructure", + type: "Professional Client Project", + tech: ["Proxmox", "Docker", "LXC", "NGINX", "Tailscale"], + description: "Deployed a full single-node virtualization environment with structured cabling, reverse proxy, and centralized monitoring via Grafana and Prometheus." + }, + { + title: "Multi-User NAS Solution", + type: "Professional Client Project", + tech: ["TrueNAS", "RAID 10", "ZFS", "Linux", "ACLs"], + description: "Designed a RAID 10-based NAS supporting 9 users, serving as a self-hosted cloud alternative with automated rsync backups and strict access controls." + }, + { + title: "Valgo - Algo Visualizer", + type: "Personal Project", + tech: ["React", "Next.js", "TypeScript", "Tailwind"], + description: "Developed a web-based algorithm visualization tool focusing on front-end performance and real-time UI interactivity to demonstrate logic." + }, + { + title: "Finance Tracker App", + type: "In Development", + tech: ["Django", "Python", "SQLite", "Chart.js"], + description: "Building a personal finance tool implementing the 50/30/20 rule, focusing on clarity and data visualization for budget management." + }, + { + title: "Personal Homelab", + type: "Personal Project", + tech: ["IaC", "Bash", "Virtualization", "Networking"], + description: "Replicated enterprise-level infrastructure using IaC principles to standardize and document reproducible deployment procedures." + } + ], + languages: [ + { lang: "Italian", level: "Native" }, + { lang: "English", level: "Fluent" }, + { lang: "German", level: "Conversational" }, + { lang: "Spanish", level: "Basic" }, + { lang: "Norwegian", level: "Basic" } + ] +}; + +// --- Components --- + +const SwissMap = ({ className }: { className?: string }) => ( + + + +); + +const SectionHeading = ({ children, icon: Icon }: { children: React.ReactNode; icon?: React.ComponentType }) => ( +
+
+ {Icon && } +
+

+ {children} +

+
+); + +const Card = ({ children, className = "" }: { children: React.ReactNode; className?: string }) => ( +
+ {children} +
+); + +const Badge = ({ children, variant = "primary" }: { children: React.ReactNode; variant?: "primary" | "secondary" | "outline" }) => { + const variants: Record<"primary" | "secondary" | "outline", string> = { + primary: "bg-blue-100 text-blue-700 dark:bg-blue-900/50 dark:text-blue-300", + secondary: "bg-slate-100 text-slate-700 dark:bg-slate-700 dark:text-slate-300", + outline: "border border-slate-300 text-slate-600 dark:border-slate-600 dark:text-slate-400" + }; + return ( + + {children} + + ); +}; + +// --- Main Application --- + +export default function App() { + const [activeSection, setActiveSection] = useState('home'); + const [isMenuOpen, setIsMenuOpen] = useState(false); + const [darkMode, setDarkMode] = useState(false); + + useEffect(() => { + if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) { + setDarkMode(true); + } + }, []); + + const toggleTheme = () => setDarkMode(!darkMode); + + const navLinks = [ + { id: 'about', label: 'About' }, + { id: 'skills', label: 'Skills' }, + { id: 'experience', label: 'Experience' }, + { id: 'education', label: 'Education' }, + { id: 'projects', label: 'Projects' }, + { id: 'contact', label: 'Contact' }, ]; - const certificates = [ - 'Google Data Analytics Professional Certificate', - 'Google IT Support Professional Certificate' - ]; - - const scrollToSection = (sectionId: string) => { - document.getElementById(sectionId)?.scrollIntoView({ behavior: 'smooth' }); - setActiveSection(sectionId); + const scrollToSection = (id: string) => { + const element = document.getElementById(id); + if (element) { + element.scrollIntoView({ behavior: 'smooth' }); + setActiveSection(id); + setIsMenuOpen(false); + } }; - type Project = typeof projects[number]; - interface ProjectGalleryProps { - project: Project; - onClose: () => void; - } - - const ProjectGallery: React.FC = ({ project, onClose }) => ( -
-
e.stopPropagation()} - > -
-
-
-

- {project.title} -

-
- - {project.period} - - - {project.status} - - - {project.category} - -
-
- -
- - {/* Project Images */} - {project.images && project.images.length > 0 ? ( -
- {project.images.map((image, idx) => ( -
- {`${project.title} -
- ))} -
- ) : ( -
-
- {project.icon} -
-

- Infrastructure/Hardware Project - No visual interface -

-
- )} - - {/* Description */} -
-

- About This Project -

-

- {project.description} -

-
- - {/* Features */} -
-

- Key Features -

-
- {project.features.map((feature, idx) => ( -
-
- {feature} -
- ))} -
-
- - {/* Tech Stack */} -
-

- Technology Stack -

-
- {project.tech.map((tech) => ( - - {tech} - - ))} -
-
- - {/* Links */} -
- {project.github && ( - - - View Code - - )} - {project.demo && ( - - - Live Demo - - )} -
-
-
-
- ); - return ( -
- {/* Animated background gradient */} -
-
-
-
-
- +
+ {/* Navigation */} -