"use client" import React, { useState, useEffect } from 'react'; import { Terminal, Server, Network, Code, Database, Cpu, Globe, Mail, Phone, MapPin, Menu, X, Linkedin, Github, Briefcase, GraduationCap, 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 = { profile: { name: "Pietro Quintavalle", role: "System Administrator | IT Consultant | Economics Student", tagline: "Bridging Enterprise Infrastructure with Economic Strategy", // 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: "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/" } }, skills: [ { category: "System & Infrastructure", icon: , color: NORD.frost.darkBlue, items: ["Linux", "Windows Server", "Proxmox", "Hyper-V", "Docker", "LXC", "NGINX", "Active Directory"] }, { category: "Networking & Security", icon: , color: NORD.polar.light, items: ["VLAN", "Firewall", "VPN", "DDNS", "Tailscale", "Subnetting"] }, { category: "Development", icon:

, 
      color: NORD.frost.blue,
      items: ["Python", "JavaScript", "TypeScript", "React", "Next.js", "Django", "SQL", "HTML/CSS"] 
    },
    { 
      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,
      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: "BSc in Economics",
      institution: "USI Università della Svizzera italiana",
      period: "Sep 2024 - Present",
      status: "In Progress",
      details: "Microeconomics, Macroeconomics, Statistics, Accounting, Quantitative Methods."
    },
    {
      degree: "BSc 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 ---

// Detailed Tech Map of Switzerland SVG (Nord Themed)
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, color }: { children: React.ReactNode; color?: string }) => {
  return (
    
      {children}
    
  );
};

// --- Main Application ---

export default function App() {
  const [activeSection, setActiveSection] = useState('home');
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const [darkMode, setDarkMode] = useState(true); // Default to dark mode for Nord theme

  useEffect(() => {
    // Prefer dark mode by default for Nord theme
    setDarkMode(true);
  }, []);

  const toggleTheme = () => setDarkMode(!darkMode);

  const navLinks = [
    { id: 'about', label: 'About' },
    { id: 'skills', label: 'Tech Stack' },
    { id: 'experience', label: 'Experience' },
    { id: 'education', label: 'Education' },
    { id: 'projects', label: 'Projects' },
    { id: 'contact', label: 'Connect' },
  ];

  const scrollToSection = (id: string) => {
    const element = document.getElementById(id);
    if (element) {
      element.scrollIntoView({ behavior: 'smooth' });
      setActiveSection(id);
      setIsMenuOpen(false);
    }
  };

  return (
    
      
      {/* Navigation */}
      
        
          
            
              
              Quinta.System
            

            {/* Desktop Nav */}
            
              {navLinks.map(link => (
                
              ))}
              
            

            {/* Mobile Menu Button */}
            
               
              
            
          
        

        {/* Mobile Nav Dropdown */}
        {isMenuOpen && (
          
            {navLinks.map(link => (
              
            ))}
          
        )}
      

      {/* Hero Section */}
      
        
          
            
              
                
                  
                  
                
                Available for Junior SysAdmin & IT Projects
              
              
              
                {DATA.profile.name}
              
              
                {DATA.profile.role}
              
              
                {DATA.profile.tagline}. Integrating robust IT infrastructure skills with economic analysis to deliver efficient, scalable solutions.
              

              
                
                
                {/* Visual Map Indicator */}
                
                   
                     
                   
                   
                     Based in

                     Switzerland
                   
                
              

              
                
                  
                
                
                  
                
              
            

            {/* Terminal Decoration */}
            
              
              
                
                  
                    
                    
                    
                  
                  quinta@server:~
                
                
                  
                    ➜ ~ neofetch
                  
                  
                    
{`       _     _
      | |   | |
 _ __ | |__ | |
| '_ \\| '_ \\| |
| |_) | |_) |_|
| .__/|_.__/(_)
| |            
|_|            `}
                    
                    
                      OS: Linux / Windows Server
                      Host: Proxmox VE Cluster
                      Uptime: 5+ years experience
                      Shell: Bash, PowerShell
                      Spoken: IT, EN, DE, ES, NO
                      Code: Python, JS, React, SQL
                      Status: Open for Work
                    
                  
                  
                    ➜ ~ 
                  
                
              
            
          
        
      

      {/* About Section */}
      
        
          Professional Summary
          
            {DATA.profile.summary}
          
          
          
            {DATA.languages.map((lang, idx) => (
              
                {lang.lang}
                {lang.level}
              
            ))}
          

          
             Certifications
          
          
             {DATA.certifications.map((cert, idx) => (
               
                 {cert}
               
             ))}
          
        
      

      {/* GitHub Stats Section (NEW) */}
      
        
          GitHub Activity
          
            
            
          
        
      

      {/* Skills Section (Updated Style) */}
      
        
          Technical Arsenal
          
            {DATA.skills.map((skillGroup, idx) => (
              
                
                  {skillGroup.icon}
                  {skillGroup.category}
                
                
                  {skillGroup.items.map((item, i) => (
                    {item}
                  ))}
                
              
            ))}
          
        
      

      {/* Experience Section */}
      
        
          Experience
          
            {DATA.experience.map((exp) => (
              
                
                
                
                  {exp.role}
                  
                    {exp.period}
                  
                
                
                
                  {exp.company} • {exp.location}
                
                
                
                  {exp.description}
                

                
                  {exp.achievements.map((item, i) => (
                    
                      
                      {item}
                    
                  ))}
                
              
            ))}
          
        
      

      {/* Education Section */}
      
        
          Education Timeline
          
          
            {/* Vertical Line */}
            

            
              {DATA.education.map((edu, idx) => (
                
                  
                  {/* Date Badge / Center Node */}
                  
                    
                  

                  {/* Empty space for alignment */}
                  

                  {/* Content Card */}
                  
                    
                      {/* Mobile Arrow */}
                      

                      
                        
                          
                          {edu.period}
                        
                        
                          {edu.status}
                        
                      
                      
                      {edu.degree}
                      {edu.institution}
                      {edu.details}
                    
                  
                
              ))}
            
          
        
      

      {/* Projects Section */}
      
        
          Featured Projects
          
            {DATA.projects.map((project, idx) => (
              
                
                  
                    {idx % 2 === 0 ?  : }
                  
                
                
                
                  {project.title}
                
                
                
                  {project.type}
                
                
                
                  {project.description}
                

                
                  {project.tech.map((tech, i) => (
                    {tech}
                  ))}
                
              
            ))}
          
        
      

      {/* Contact Section */}
      
        
          Ready to Collaborate?
          
            Whether you need assistance with server infrastructure, network architecture, or are looking for a Junior SysAdmin, I'm here to help.
          
          
          
            
              
                
              
              {DATA.profile.email}
            
          
        
      

      
        Built with ❄️ using a Nord-inspired monochrome palette • {new Date().getFullYear()} Pietro Quintavalle.
      
    
  );
}