From 691f1bafcb86459fd57406b6389e4ea538a8beb1 Mon Sep 17 00:00:00 2001 From: Quinta0 <0pietroquintavalle0@gmail.com> Date: Mon, 8 Dec 2025 02:27:30 +0100 Subject: [PATCH] changed colors --- app/page.tsx | 334 +++++++++++++++++++++++++++++---------------------- 1 file changed, 189 insertions(+), 145 deletions(-) diff --git a/app/page.tsx b/app/page.tsx index c3294a6..2e2be8c 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -18,9 +18,37 @@ import { Github, Briefcase, GraduationCap, - Calendar + Calendar, + Award, + BarChart2 } from 'lucide-react'; +// --- Nord Theme Colors (Reference) --- +// Polar Night: #2E3440, #3B4252, #434C5E, #4C566A +// Snow Storm: #D8DEE9, #E5E9F0, #ECEFF4 +// Frost: #8FBCBB, #88C0D0, #81A1C1, #5E81AC +// Aurora: #BF616A (Red), #D08770 (Orange), #EBCB8B (Yellow), #A3BE8C (Green), #B48EAD (Purple) + +const NORD = { + polar: { + darkest: "#2E3440", + darker: "#3B4252", + dark: "#434C5E", + light: "#4C566A" + }, + snow: { + dark: "#D8DEE9", + medium: "#E5E9F0", + light: "#ECEFF4" + }, + frost: { + teal: "#8FBCBB", + cyan: "#88C0D0", + blue: "#81A1C1", + darkBlue: "#5E81AC" + } +}; + // --- Data Constants --- const DATA = { @@ -28,9 +56,11 @@ const DATA = { 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.", + // IMPROVEMENT: Updated with README "About Me" text for a more personal touch + summary: "Hi! I'm Pietro, but friends call me Quinta. I'm an Economics student (USI, Lugano) with 5+ years' experience in system administration, virtualization, and network infrastructure. I engineer robust, secure, and scalable solutions—delivering production-grade servers (90%+ uptime) and infrastructure for clients and personal projects. Currently, I'm passionate about bridging the gap between economics and technology through data analytics, machine learning, and modern web development.", location: "Switzerland", - email: "0pietroquintavalle0@gmail.com", + email: "opietroquintavalle0@gmail.com", + phone: "+41(0)79 906 82 53", links: { github: "https://github.com/Quinta0", linkedin: "https://www.linkedin.com/in/pietro-quintavalle-996b96267/" @@ -38,26 +68,34 @@ const DATA = { }, 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"] + category: "System & Infrastructure", + icon: , + color: NORD.frost.darkBlue, + items: ["Linux", "Windows Server", "Proxmox", "Hyper-V", "Docker", "LXC", "NGINX", "Active Directory"] }, { - category: "Network Engineering", - icon: , - items: ["VLANs & Subnetting", "Firewall Policy Management", "Tailscale Mesh VPNs", "Reverse Proxies (NGINX)", "Network Topology Design", "Secure Remote Access"] + category: "Networking & Security", + icon: , + color: NORD.polar.light, + items: ["VLAN", "Firewall", "VPN", "DDNS", "Tailscale", "Subnetting"] }, { - category: "DevOps & Automation", - icon: , - items: ["Infrastructure as Code (IaC)", "Bash & PowerShell Scripting", "Docker Containerization", "LXC Management", "Git Version Control", "Python Automation"] + category: "Development", + icon: , + color: NORD.frost.blue, + items: ["Python", "JavaScript", "TypeScript", "React", "Next.js", "Django", "SQL", "HTML/CSS"] }, { - category: "Analytics & Web", - icon: , - items: ["Grafana & Prometheus", "Disaster Recovery Planning", "React & Next.js", "SQL/SQLite", "Hardware Benchmarking", "Google Data Analytics"] + category: "Data & Monitoring", + icon: , + color: NORD.polar.darker, + items: ["Grafana", "Prometheus", "TrueNAS", "rsync", "RAID", "Backup & Recovery"] }, ], + certifications: [ + "Google Data Analytics Professional Certificate", + "Google IT Support Professional Certificate" + ], experience: [ { id: 1, @@ -76,14 +114,14 @@ const DATA = { ], education: [ { - degree: "Bachelor's Degree in Economics", + degree: "BSc in Economics", institution: "USI Università della Svizzera italiana", period: "Sep 2024 - Present", - status: "Current", + status: "In Progress", details: "Microeconomics, Macroeconomics, Statistics, Accounting, Quantitative Methods." }, { - degree: "Bachelor of Science in Informatics", + degree: "BSc in Informatics", institution: "USI Università della Svizzera italiana", period: "Sep 2022 - June 2024", status: "2 Years Completed", @@ -140,42 +178,46 @@ const DATA = { // --- Components --- +// Detailed Tech Map of Switzerland SVG (Nord Themed) const SwissMap = ({ className }: { className?: string }) => ( + + {/* Ticino Location */} + + + ); 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" - }; +const Badge = ({ children, color }: { children: React.ReactNode; color?: string }) => { return ( - + {children} ); @@ -186,23 +228,22 @@ const Badge = ({ children, variant = "primary" }: { children: React.ReactNode; v export default function App() { const [activeSection, setActiveSection] = useState('home'); const [isMenuOpen, setIsMenuOpen] = useState(false); - const [darkMode, setDarkMode] = useState(false); + const [darkMode, setDarkMode] = useState(true); // Default to dark mode for Nord theme useEffect(() => { - if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) { - setDarkMode(true); - } + // Prefer dark mode by default for Nord theme + setDarkMode(true); }, []); const toggleTheme = () => setDarkMode(!darkMode); const navLinks = [ { id: 'about', label: 'About' }, - { id: 'skills', label: 'Skills' }, + { id: 'skills', label: 'Tech Stack' }, { id: 'experience', label: 'Experience' }, { id: 'education', label: 'Education' }, { id: 'projects', label: 'Projects' }, - { id: 'contact', label: 'Contact' }, + { id: 'contact', label: 'Connect' }, ]; const scrollToSection = (id: string) => { @@ -215,14 +256,14 @@ export default function App() { }; return ( -
+
{/* Navigation */} -