1072 lines
48 KiB
TypeScript
1072 lines
48 KiB
TypeScript
"use client"
|
||
import React, { useState, useEffect } from 'react';
|
||
import { Github, Linkedin, Mail, ChevronDown, Code, Database, BarChart3, Globe, Award, GraduationCap, Image, ExternalLink as LinkIcon, Server, Shield, Settings, Briefcase, Calendar, Moon, Sun } from 'lucide-react';
|
||
|
||
const Portfolio = () => {
|
||
const [activeSection, setActiveSection] = useState('home');
|
||
const [scrolled, setScrolled] = useState(false);
|
||
const [showProjectGallery, setShowProjectGallery] = useState<Project | null>(null);
|
||
const [isDarkMode, setIsDarkMode] = useState(true);
|
||
|
||
// 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 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: <Code className="w-6 h-6" />,
|
||
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'
|
||
},
|
||
{
|
||
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: <Database className="w-6 h-6" />,
|
||
status: 'Production',
|
||
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, airflow and thermal management, and BIOS/driver optimization for performance tuning.',
|
||
tech: ['Hardware Engineering', 'BIOS Configuration', 'Thermal Management', 'Performance Tuning'],
|
||
icon: <Code className="w-6 h-6" />,
|
||
status: 'Delivered',
|
||
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, 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: <Code className="w-6 h-6" />,
|
||
status: 'Ongoing',
|
||
images: [],
|
||
features: ['Infrastructure as Code (IaC) principles', 'Virtual machine provisioning', 'Monitoring and container orchestration', 'Standardized deployment procedures'],
|
||
category: 'Infrastructure'
|
||
},
|
||
{
|
||
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: <Globe className="w-6 h-6" />,
|
||
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: <BarChart3 className="w-6 h-6" />,
|
||
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: <Database className="w-6 h-6" />,
|
||
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: <BarChart3 className="w-6 h-6" />,
|
||
status: 'In Development',
|
||
images: [],
|
||
features: ['Category-based expense tracking', 'Budget summaries', 'Data visualizations', '50/30/20 budgeting framework'],
|
||
category: 'Development'
|
||
}
|
||
];
|
||
|
||
const education = [
|
||
{
|
||
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.'
|
||
}
|
||
];
|
||
|
||
const certificates = [
|
||
'Google Data Analytics Professional Certificate',
|
||
'Google IT Support Professional Certificate'
|
||
];
|
||
|
||
const scrollToSection = (sectionId: string) => {
|
||
document.getElementById(sectionId)?.scrollIntoView({ behavior: 'smooth' });
|
||
setActiveSection(sectionId);
|
||
};
|
||
|
||
type Project = typeof projects[number];
|
||
interface ProjectGalleryProps {
|
||
project: Project;
|
||
onClose: () => void;
|
||
}
|
||
|
||
const ProjectGallery: React.FC<ProjectGalleryProps> = ({ project, onClose }) => (
|
||
<div
|
||
className="fixed inset-0 z-50 flex items-center justify-center p-4 backdrop-blur-sm"
|
||
style={{ backgroundColor: isDarkMode ? 'rgba(11, 15, 31, 0.95)' : 'rgba(0, 0, 0, 0.75)' }}
|
||
onClick={onClose}
|
||
>
|
||
<div
|
||
className="max-w-4xl w-full max-h-[90vh] overflow-y-auto rounded-2xl"
|
||
style={{ backgroundColor: colors.bgCard, border: `2px solid ${colors.primary}` }}
|
||
onClick={(e) => e.stopPropagation()}
|
||
>
|
||
<div className="p-8">
|
||
<div className="flex justify-between items-start mb-6">
|
||
<div>
|
||
<h3 className="text-3xl font-bold mb-3 gradient-text" style={{ fontFamily: "'Space Grotesk', sans-serif" }}>
|
||
{project.title}
|
||
</h3>
|
||
<div className="flex items-center gap-4 flex-wrap">
|
||
<span className="text-sm px-3 py-1 rounded-lg" style={{
|
||
background: colors.gradient3,
|
||
color: colors.text,
|
||
fontFamily: "'JetBrains Mono', monospace"
|
||
}}>
|
||
{project.period}
|
||
</span>
|
||
<span
|
||
className="px-4 py-1 rounded-xl text-sm font-medium"
|
||
style={{
|
||
background: colors.gradient1,
|
||
color: colors.text
|
||
}}
|
||
>
|
||
{project.status}
|
||
</span>
|
||
<span
|
||
className="px-3 py-1 rounded-lg text-sm font-medium"
|
||
style={{
|
||
background: colors.gradient2,
|
||
color: colors.text
|
||
}}
|
||
>
|
||
{project.category}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<button
|
||
onClick={onClose}
|
||
className="text-3xl hover:opacity-70 transition-all hover:scale-110 px-3"
|
||
style={{ color: colors.textMuted }}
|
||
>
|
||
×
|
||
</button>
|
||
</div>
|
||
|
||
{/* Project Images */}
|
||
{project.images && project.images.length > 0 ? (
|
||
<div className="grid md:grid-cols-2 gap-4 mb-6">
|
||
{project.images.map((image, idx) => (
|
||
<div key={idx} className="aspect-video rounded-xl overflow-hidden border" style={{ borderColor: colors.bgLight }}>
|
||
<img
|
||
src={image}
|
||
alt={`${project.title} screenshot ${idx + 1}`}
|
||
className="w-full h-full object-cover"
|
||
/>
|
||
</div>
|
||
))}
|
||
</div>
|
||
) : (
|
||
<div
|
||
className="p-8 rounded-2xl border mb-6 text-center"
|
||
style={{
|
||
backgroundColor: colors.bg,
|
||
borderColor: colors.bgLight
|
||
}}
|
||
>
|
||
<div className="mb-4" style={{ color: colors.primary }}>
|
||
{project.icon}
|
||
</div>
|
||
<p className="text-sm" style={{ color: colors.textMuted, fontFamily: "'Inter', sans-serif" }}>
|
||
Infrastructure/Hardware Project - No visual interface
|
||
</p>
|
||
</div>
|
||
)}
|
||
|
||
{/* Description */}
|
||
<div className="mb-6">
|
||
<h4 className="text-xl font-semibold mb-3" style={{ color: colors.secondary, fontFamily: "'Space Grotesk', sans-serif" }}>
|
||
About This Project
|
||
</h4>
|
||
<p className="leading-relaxed text-lg" style={{ color: colors.textMuted, fontFamily: "'Inter', sans-serif" }}>
|
||
{project.description}
|
||
</p>
|
||
</div>
|
||
|
||
{/* Features */}
|
||
<div className="mb-6">
|
||
<h4 className="text-xl font-semibold mb-4" style={{ color: colors.secondary, fontFamily: "'Space Grotesk', sans-serif" }}>
|
||
Key Features
|
||
</h4>
|
||
<div className="grid md:grid-cols-2 gap-3">
|
||
{project.features.map((feature, idx) => (
|
||
<div key={idx} className="flex items-center">
|
||
<div
|
||
className="w-2 h-2 rounded-full mr-3"
|
||
style={{ background: colors.gradient1 }}
|
||
></div>
|
||
<span style={{ color: colors.text, fontFamily: "'Inter', sans-serif" }}>{feature}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Tech Stack */}
|
||
<div className="mb-6">
|
||
<h4 className="text-xl font-semibold mb-4" style={{ color: colors.secondary, fontFamily: "'Space Grotesk', sans-serif" }}>
|
||
Technology Stack
|
||
</h4>
|
||
<div className="flex flex-wrap gap-2">
|
||
{project.tech.map((tech) => (
|
||
<span
|
||
key={tech}
|
||
className="px-4 py-2 rounded-xl text-sm font-medium transition-all hover:scale-105"
|
||
style={{
|
||
backgroundColor: colors.bgHover,
|
||
color: colors.primary,
|
||
fontFamily: "'JetBrains Mono', monospace"
|
||
}}
|
||
>
|
||
{tech}
|
||
</span>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Links */}
|
||
<div className="flex gap-4">
|
||
{project.github && (
|
||
<a
|
||
href={project.github}
|
||
className="flex items-center gap-2 px-6 py-3 rounded-xl hover:opacity-90 transition-all hover:scale-105 font-medium"
|
||
style={{ background: colors.gradient1, color: colors.text }}
|
||
>
|
||
<Github className="w-5 h-5" />
|
||
View Code
|
||
</a>
|
||
)}
|
||
{project.demo && (
|
||
<a
|
||
href={project.demo}
|
||
className="flex items-center gap-2 px-6 py-3 rounded-xl hover:opacity-90 transition-all hover:scale-105 font-medium"
|
||
style={{ background: colors.gradient3, color: colors.text }}
|
||
>
|
||
<LinkIcon className="w-5 h-5" />
|
||
Live Demo
|
||
</a>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
|
||
return (
|
||
<div className="min-h-screen" style={{ backgroundColor: colors.bg, color: colors.text }}>
|
||
{/* Animated background gradient */}
|
||
<div className="fixed inset-0 pointer-events-none" style={{ opacity: isDarkMode ? 0.2 : 0.1 }}>
|
||
<div className="absolute top-0 left-0 w-96 h-96 bg-purple-500 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-pulse"></div>
|
||
<div className="absolute top-0 right-0 w-96 h-96 bg-cyan-500 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-pulse" style={{ animationDelay: '1s' }}></div>
|
||
<div className="absolute bottom-0 left-1/2 w-96 h-96 bg-pink-500 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-pulse" style={{ animationDelay: '2s' }}></div>
|
||
</div>
|
||
|
||
{/* Navigation */}
|
||
<nav
|
||
className="fixed top-0 w-full z-40 transition-all duration-300"
|
||
style={{
|
||
backgroundColor: scrolled ? (isDarkMode ? 'rgba(11, 15, 31, 0.95)' : 'rgba(255, 255, 255, 0.95)') : 'transparent',
|
||
borderBottom: scrolled ? `1px solid ${colors.bgLight}` : 'none',
|
||
backdropFilter: scrolled ? 'blur(20px)' : 'none'
|
||
}}
|
||
>
|
||
<div className="max-w-6xl mx-auto px-6 py-4">
|
||
<div className="flex justify-between items-center">
|
||
<div className="text-xl font-bold gradient-text" style={{ fontFamily: "'Space Grotesk', sans-serif" }}>
|
||
Pietro Quintavalle
|
||
</div>
|
||
<div className="hidden md:flex items-center space-x-8">
|
||
{['Home', 'About', 'Experience', 'Projects', 'Education', 'Contact'].map((item) => (
|
||
<button
|
||
key={item}
|
||
onClick={() => scrollToSection(item.toLowerCase())}
|
||
className="transition-all hover:scale-105 relative group"
|
||
style={{
|
||
color: activeSection === item.toLowerCase() ? colors.primary : colors.text,
|
||
fontFamily: "'Inter', sans-serif",
|
||
fontWeight: 500
|
||
}}
|
||
>
|
||
{item}
|
||
<span
|
||
className="absolute -bottom-1 left-0 w-full h-0.5 transition-transform origin-left"
|
||
style={{
|
||
background: colors.gradient1,
|
||
transform: activeSection === item.toLowerCase() ? 'scaleX(1)' : 'scaleX(0)'
|
||
}}
|
||
/>
|
||
</button>
|
||
))}
|
||
{/* Dark Mode Toggle */}
|
||
<button
|
||
onClick={() => setIsDarkMode(!isDarkMode)}
|
||
className="p-2 rounded-xl transition-all hover:scale-110"
|
||
style={{
|
||
background: colors.gradient1,
|
||
color: colors.text
|
||
}}
|
||
aria-label="Toggle dark mode"
|
||
>
|
||
{isDarkMode ? <Sun className="w-5 h-5" /> : <Moon className="w-5 h-5" />}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
{/* Hero Section */}
|
||
<section id="home" className="min-h-screen flex items-center justify-center relative overflow-hidden">
|
||
<div className="text-center max-w-4xl mx-auto px-6 relative z-10">
|
||
<div className="mb-8 animate-fadeInUp">
|
||
<h1 className="text-6xl md:text-8xl font-bold mb-6" style={{ fontFamily: "'Space Grotesk', sans-serif" }}>
|
||
<span style={{ color: colors.text }}>Pietro</span>
|
||
<br />
|
||
<span className="gradient-text">Quintavalle</span>
|
||
</h1>
|
||
<div className="text-xl md:text-3xl mb-8 font-medium" style={{
|
||
color: colors.secondary,
|
||
fontFamily: "'Inter', sans-serif",
|
||
letterSpacing: '-0.01em'
|
||
}}>
|
||
IT Systems Engineer • Economics Student • Infrastructure Specialist
|
||
</div>
|
||
<p className="text-lg md:text-xl max-w-2xl mx-auto leading-relaxed" style={{
|
||
color: colors.textMuted,
|
||
fontFamily: "'Inter', sans-serif"
|
||
}}>
|
||
Certified IT Support professional with 5+ years of hands-on experience in system administration,
|
||
virtualization, and network infrastructure. Seeking Junior SysAdmin roles to contribute reliable,
|
||
scalable solutions in enterprise systems.
|
||
</p>
|
||
</div>
|
||
|
||
<div className="flex justify-center space-x-6 mb-16">
|
||
<a
|
||
href="https://github.com/Quinta0"
|
||
className="p-4 rounded-xl transition-all hover:scale-110 hover:shadow-2xl group"
|
||
style={{
|
||
background: colors.gradient1,
|
||
}}
|
||
>
|
||
<Github className="w-6 h-6" style={{ color: colors.text }} />
|
||
</a>
|
||
<a
|
||
href="https://www.linkedin.com/in/pietro-quintavalle-996b96267/"
|
||
className="p-4 rounded-xl transition-all hover:scale-110 hover:shadow-2xl group"
|
||
style={{
|
||
background: colors.gradient3,
|
||
}}
|
||
>
|
||
<Linkedin className="w-6 h-6" style={{ color: colors.text }} />
|
||
</a>
|
||
<a
|
||
href="mailto:0pietroquintavalle0@gmail.com"
|
||
className="p-4 rounded-xl transition-all hover:scale-110 hover:shadow-2xl group"
|
||
style={{
|
||
background: colors.gradient2,
|
||
}}
|
||
>
|
||
<Mail className="w-6 h-6" style={{ color: colors.text }} />
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="absolute bottom-8 left-1/2 transform -translate-x-1/2 animate-bounce">
|
||
<ChevronDown className="w-8 h-8" style={{ color: colors.secondary }} />
|
||
</div>
|
||
</section>
|
||
|
||
{/* About Section */}
|
||
<section id="about" className="py-20 relative">
|
||
<div className="max-w-6xl mx-auto px-6">
|
||
<h2 className="text-5xl md:text-6xl font-bold text-center mb-20 gradient-text" style={{ fontFamily: "'Space Grotesk', sans-serif" }}>
|
||
About Me
|
||
</h2>
|
||
|
||
<div className="grid md:grid-cols-2 gap-12 items-center">
|
||
<div>
|
||
<p className="text-lg md:text-xl leading-relaxed mb-6" style={{ color: colors.text, fontFamily: "'Inter', sans-serif" }}>
|
||
I'm an IT Support–certified Economics student with 5+ years of hands-on experience in system
|
||
administration, virtualization (Proxmox, Hyper-V), and network infrastructure.
|
||
</p>
|
||
<p className="text-lg md:text-xl leading-relaxed mb-6" style={{ color: colors.text, fontFamily: "'Inter', sans-serif" }}>
|
||
Skilled in scripting, automation, and server deployment across Windows and Linux environments.
|
||
I've built and maintained 6-10 production-grade servers with 90%+ uptime using automation tools
|
||
and Infrastructure as Code (IaC) principles.
|
||
</p>
|
||
<p className="text-lg md:text-xl leading-relaxed mb-8" style={{ color: colors.text, fontFamily: "'Inter', sans-serif" }}>
|
||
Currently pursuing Economics at USI while continuing to deliver scalable, secure, and
|
||
high-availability infrastructure solutions to clients.
|
||
</p>
|
||
<div className="flex flex-wrap gap-3">
|
||
<span
|
||
className="px-4 py-2 rounded-xl text-sm font-medium transition-all hover:scale-105"
|
||
style={{ background: colors.gradient1, color: colors.text }}
|
||
>
|
||
🇮🇹 Italian (Native)
|
||
</span>
|
||
<span
|
||
className="px-4 py-2 rounded-xl text-sm font-medium transition-all hover:scale-105"
|
||
style={{ background: colors.gradient3, color: colors.text }}
|
||
>
|
||
🇺🇸 English (Fluent)
|
||
</span>
|
||
<span
|
||
className="px-4 py-2 rounded-xl text-sm font-medium transition-all hover:scale-105"
|
||
style={{ background: colors.gradient2, color: colors.text }}
|
||
>
|
||
🇩🇪 German (Conversational)
|
||
</span>
|
||
<span
|
||
className="px-4 py-2 rounded-xl text-sm font-medium transition-all hover:scale-105"
|
||
style={{ backgroundColor: colors.success, color: colors.bg }}
|
||
>
|
||
📍 Switzerland 🇨🇭
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="space-y-6">
|
||
{Object.entries(skills).map(([category, skillList]) => (
|
||
<div
|
||
key={category}
|
||
className="p-6 rounded-2xl border transition-all hover:scale-105 hover:shadow-2xl group"
|
||
style={{
|
||
backgroundColor: colors.bgCard,
|
||
borderColor: colors.bgLight,
|
||
borderWidth: '1px'
|
||
}}
|
||
>
|
||
<h3 className="text-xl font-semibold mb-4" style={{ color: colors.secondary, fontFamily: "'Space Grotesk', sans-serif" }}>
|
||
{category}
|
||
</h3>
|
||
<div className="flex flex-wrap gap-2">
|
||
{skillList.map((skill) => (
|
||
<span
|
||
key={skill}
|
||
className="px-3 py-1 rounded-lg text-sm transition-all hover:scale-105"
|
||
style={{
|
||
backgroundColor: colors.bgHover,
|
||
color: colors.text,
|
||
fontFamily: "'JetBrains Mono', monospace"
|
||
}}
|
||
>
|
||
{skill}
|
||
</span>
|
||
))}
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Experience Section */}
|
||
<section id="experience" className="py-20">
|
||
<div className="max-w-6xl mx-auto px-6">
|
||
<h2 className="text-5xl md:text-6xl font-bold text-center mb-20 gradient-text" style={{ fontFamily: "'Space Grotesk', sans-serif" }}>
|
||
Professional Experience
|
||
</h2>
|
||
|
||
<div className="max-w-4xl mx-auto">
|
||
{experience.map((exp, index) => (
|
||
<div
|
||
key={index}
|
||
className="p-8 rounded-2xl border mb-8 transition-all hover:scale-[1.02] hover:shadow-2xl group"
|
||
style={{
|
||
backgroundColor: colors.bgCard,
|
||
borderColor: colors.primary,
|
||
borderWidth: '2px'
|
||
}}
|
||
>
|
||
<div className="flex items-start justify-between mb-6">
|
||
<div className="flex items-center mb-4">
|
||
<div
|
||
className="p-4 rounded-xl mr-4 transition-all group-hover:scale-110"
|
||
style={{ background: colors.gradient1 }}
|
||
>
|
||
<Briefcase className="w-7 h-7" style={{ color: colors.text }} />
|
||
</div>
|
||
<div>
|
||
<h3 className="text-2xl md:text-3xl font-bold mb-2" style={{ color: colors.text, fontFamily: "'Space Grotesk', sans-serif" }}>
|
||
{exp.title}
|
||
</h3>
|
||
<div className="flex items-center gap-4 mt-2">
|
||
<span className="text-lg font-medium" style={{ color: colors.secondary }}>
|
||
{exp.company}
|
||
</span>
|
||
<span className="text-sm" style={{ color: colors.textMuted }}>
|
||
{exp.location}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="flex items-center text-sm px-4 py-2 rounded-xl" style={{
|
||
background: colors.gradient3,
|
||
color: colors.text,
|
||
fontFamily: "'JetBrains Mono', monospace"
|
||
}}>
|
||
<Calendar className="w-4 h-4 mr-2" />
|
||
{exp.period}
|
||
</div>
|
||
</div>
|
||
|
||
<p className="text-lg leading-relaxed mb-6" style={{ color: colors.textMuted, fontFamily: "'Inter', sans-serif" }}>
|
||
{exp.description}
|
||
</p>
|
||
|
||
<div>
|
||
<h4 className="text-lg font-semibold mb-4" style={{ color: colors.primary, fontFamily: "'Space Grotesk', sans-serif" }}>
|
||
Key Achievements:
|
||
</h4>
|
||
<div className="space-y-3">
|
||
{exp.achievements.map((achievement, idx) => (
|
||
<div key={idx} className="flex items-start group/item">
|
||
<div
|
||
className="w-2 h-2 rounded-full mt-2 mr-4 flex-shrink-0 transition-all group-hover/item:scale-150"
|
||
style={{ background: colors.gradient2 }}
|
||
></div>
|
||
<span style={{ color: colors.text, fontFamily: "'Inter', sans-serif" }}>{achievement}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Projects Section */}
|
||
<section id="projects" className="py-20">
|
||
<div className="max-w-6xl mx-auto px-6">
|
||
<h2 className="text-5xl md:text-6xl font-bold text-center mb-20 gradient-text" style={{ fontFamily: "'Space Grotesk', sans-serif" }}>
|
||
Featured Projects
|
||
</h2>
|
||
|
||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||
{projects.map((project, index) => (
|
||
<div
|
||
key={index}
|
||
className="p-6 rounded-2xl border transition-all hover:scale-105 hover:shadow-2xl cursor-pointer group"
|
||
style={{
|
||
backgroundColor: colors.bgCard,
|
||
borderColor: colors.bgLight,
|
||
borderWidth: '1px'
|
||
}}
|
||
onClick={() => setShowProjectGallery(project)}
|
||
>
|
||
<div className="flex items-center mb-4">
|
||
<div
|
||
className="p-3 rounded-xl mr-3 transition-all group-hover:scale-110"
|
||
style={{ background: colors.gradient1 }}
|
||
>
|
||
{project.icon}
|
||
</div>
|
||
<div className="flex-1">
|
||
<h3 className="text-xl font-semibold" style={{ color: colors.text, fontFamily: "'Space Grotesk', sans-serif" }}>
|
||
{project.title}
|
||
</h3>
|
||
<div className="flex items-center gap-2 mt-1">
|
||
<p className="text-sm" style={{ color: colors.secondary, fontFamily: "'JetBrains Mono', monospace" }}>
|
||
{project.period}
|
||
</p>
|
||
<span
|
||
className="px-2 py-0.5 rounded-lg text-xs font-medium"
|
||
style={{
|
||
background: colors.gradient3,
|
||
color: colors.bg
|
||
}}
|
||
>
|
||
{project.category}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<p className="leading-relaxed mb-4 text-sm" style={{ color: colors.textMuted, fontFamily: "'Inter', sans-serif" }}>
|
||
{project.description}
|
||
</p>
|
||
|
||
<div className="flex flex-wrap gap-2 mb-4">
|
||
{project.tech.slice(0, 3).map((tech) => (
|
||
<span
|
||
key={tech}
|
||
className="px-3 py-1 rounded-lg text-xs font-medium transition-all hover:scale-105"
|
||
style={{
|
||
backgroundColor: colors.bgHover,
|
||
color: colors.secondary,
|
||
fontFamily: "'JetBrains Mono', monospace"
|
||
}}
|
||
>
|
||
{tech}
|
||
</span>
|
||
))}
|
||
{project.tech.length > 3 && (
|
||
<span
|
||
className="px-3 py-1 rounded-lg text-xs"
|
||
style={{
|
||
backgroundColor: colors.bgLighter,
|
||
color: colors.textMuted
|
||
}}
|
||
>
|
||
+{project.tech.length - 3} more
|
||
</span>
|
||
)}
|
||
</div>
|
||
|
||
<div className="flex items-center justify-between">
|
||
<span
|
||
className="text-sm flex items-center gap-2 font-medium"
|
||
style={{ color: colors.primary }}
|
||
>
|
||
<Image className="w-4 h-4" />
|
||
View Details
|
||
</span>
|
||
<span
|
||
className="px-3 py-1 rounded-lg text-xs font-medium"
|
||
style={{
|
||
background: project.status === 'Production' ? colors.gradient3 :
|
||
project.status === 'Live' ? colors.gradient1 : colors.gradient2,
|
||
color: colors.text
|
||
}}
|
||
>
|
||
{project.status}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Education & Certificates Section */}
|
||
<section id="education" className="py-20">
|
||
<div className="max-w-6xl mx-auto px-6">
|
||
<h2 className="text-5xl md:text-6xl font-bold text-center mb-20 gradient-text" style={{ fontFamily: "'Space Grotesk', sans-serif" }}>
|
||
Education & Certifications
|
||
</h2>
|
||
|
||
<div className="grid md:grid-cols-2 gap-12">
|
||
{/* Education Timeline */}
|
||
<div>
|
||
<h3 className="text-2xl font-semibold mb-8 flex items-center" style={{ color: colors.secondary, fontFamily: "'Space Grotesk', sans-serif" }}>
|
||
<GraduationCap className="w-7 h-7 mr-3" />
|
||
Education Timeline
|
||
</h3>
|
||
|
||
<div className="relative">
|
||
{/* Timeline Line */}
|
||
<div
|
||
className="absolute left-4 top-0 bottom-0 w-0.5"
|
||
style={{ background: colors.gradient1 }}
|
||
></div>
|
||
|
||
<div className="space-y-8">
|
||
{education.map((edu, index) => (
|
||
<div key={index} className="relative flex items-start group">
|
||
{/* Timeline Indicator */}
|
||
<div className="relative z-10 flex-shrink-0">
|
||
<div
|
||
className="w-8 h-8 rounded-full border-4 flex items-center justify-center transition-all group-hover:scale-125"
|
||
style={{
|
||
backgroundColor: colors.bgCard,
|
||
borderColor: index === 0 ? colors.primary : colors.secondary
|
||
}}
|
||
>
|
||
<div
|
||
className="w-3 h-3 rounded-full"
|
||
style={{
|
||
backgroundColor: index === 0 ? colors.primary : colors.secondary
|
||
}}
|
||
></div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Timeline Content */}
|
||
<div
|
||
className="ml-6 p-6 rounded-2xl border flex-1 transition-all hover:scale-105 hover:shadow-2xl"
|
||
style={{
|
||
backgroundColor: colors.bgCard,
|
||
borderColor: colors.bgLight,
|
||
borderWidth: '1px'
|
||
}}
|
||
>
|
||
<div className="flex justify-between items-start mb-3">
|
||
<div>
|
||
<h4 className="text-lg font-semibold mb-2" style={{ color: colors.text, fontFamily: "'Space Grotesk', sans-serif" }}>
|
||
{edu.degree}
|
||
</h4>
|
||
<p className="font-medium" style={{ color: colors.secondary, fontFamily: "'Inter', sans-serif" }}>
|
||
{edu.institution}
|
||
</p>
|
||
</div>
|
||
<span
|
||
className="px-3 py-1 rounded-xl text-xs font-medium"
|
||
style={{
|
||
background: index === 0 ? colors.gradient1 : colors.gradient3,
|
||
color: colors.text
|
||
}}
|
||
>
|
||
{edu.status}
|
||
</span>
|
||
</div>
|
||
|
||
{edu.description && (
|
||
<p className="text-sm mb-3 leading-relaxed" style={{ color: colors.textMuted, fontFamily: "'Inter', sans-serif" }}>
|
||
{edu.description}
|
||
</p>
|
||
)}
|
||
|
||
<div className="flex items-center text-sm" style={{ color: colors.textMuted, fontFamily: "'JetBrains Mono', monospace" }}>
|
||
<svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
||
</svg>
|
||
{edu.period}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Certificates */}
|
||
<div>
|
||
<h3 className="text-2xl font-semibold mb-8 flex items-center" style={{ color: colors.secondary, fontFamily: "'Space Grotesk', sans-serif" }}>
|
||
<Award className="w-7 h-7 mr-3" />
|
||
Certifications
|
||
</h3>
|
||
|
||
<div className="space-y-4">
|
||
{certificates.map((cert, index) => (
|
||
<div
|
||
key={index}
|
||
className="p-6 rounded-2xl border flex items-center transition-all hover:scale-105 hover:shadow-2xl group"
|
||
style={{
|
||
backgroundColor: colors.bgCard,
|
||
borderColor: colors.bgLight,
|
||
borderWidth: '1px'
|
||
}}
|
||
>
|
||
<div
|
||
className="w-3 h-3 rounded-full mr-4 transition-all group-hover:scale-150"
|
||
style={{ background: colors.gradient2 }}
|
||
></div>
|
||
<span style={{ color: colors.text, fontFamily: "'Inter', sans-serif" }}>{cert}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
<div
|
||
className="mt-6 p-6 rounded-2xl border transition-all hover:scale-105 hover:shadow-2xl"
|
||
style={{
|
||
backgroundColor: colors.bgCard,
|
||
borderColor: colors.bgLight,
|
||
borderWidth: '1px'
|
||
}}
|
||
>
|
||
<h4 className="text-lg font-semibold mb-4 flex items-center" style={{ color: colors.secondary, fontFamily: "'Space Grotesk', sans-serif" }}>
|
||
<span className="mr-2">🎨</span>
|
||
Self-Learning & Hobbies
|
||
</h4>
|
||
<div className="space-y-3">
|
||
<div className="flex items-start">
|
||
<div
|
||
className="w-2 h-2 rounded-full mt-2 mr-4 flex-shrink-0"
|
||
style={{ background: colors.gradient1 }}
|
||
></div>
|
||
<div>
|
||
<p className="font-medium" style={{ color: colors.text, fontFamily: "'Inter', sans-serif" }}>
|
||
CAD Design & 3D Printing
|
||
</p>
|
||
<p className="text-sm mt-1" style={{ color: colors.textMuted, fontFamily: "'Inter', sans-serif" }}>
|
||
Learning CAD via Fusion 360 for 3D design and printing projects as a creative hobby
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div
|
||
className="mt-8 p-6 rounded-2xl border transition-all hover:shadow-2xl"
|
||
style={{
|
||
backgroundColor: colors.bgCard,
|
||
borderColor: colors.bgLight,
|
||
borderWidth: '1px'
|
||
}}
|
||
>
|
||
<h4 className="text-lg font-semibold mb-4" style={{ color: colors.primary, fontFamily: "'Space Grotesk', sans-serif" }}>
|
||
Interests & Specialties
|
||
</h4>
|
||
<div className="flex flex-wrap gap-2">
|
||
{['Computer Hardware', 'Economics & Finance', 'Web Development', 'CAD & 3D Design', '3D Printing', 'Literature', 'Photography', 'Virtualization', 'Network Security'].map((interest) => (
|
||
<span
|
||
key={interest}
|
||
className="px-3 py-1 rounded-lg text-sm transition-all hover:scale-105"
|
||
style={{
|
||
backgroundColor: colors.bgHover,
|
||
color: colors.text,
|
||
fontFamily: "'Inter', sans-serif"
|
||
}}
|
||
>
|
||
{interest}
|
||
</span>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Contact Section */}
|
||
<section id="contact" className="py-20 relative">
|
||
<div className="max-w-4xl mx-auto px-6 text-center">
|
||
<h2 className="text-5xl md:text-6xl font-bold mb-8 gradient-text" style={{ fontFamily: "'Space Grotesk', sans-serif" }}>
|
||
Let's Connect
|
||
</h2>
|
||
<p className="text-xl mb-16 max-w-2xl mx-auto" style={{ color: colors.textMuted, fontFamily: "'Inter', sans-serif" }}>
|
||
I'm always interested in discussing new opportunities, collaborations, or Junior SysAdmin positions.
|
||
Let's connect and explore how my infrastructure expertise can benefit your organization.
|
||
</p>
|
||
|
||
<div className="grid md:grid-cols-3 gap-8 mb-16">
|
||
<a
|
||
href="mailto:0pietroquintavalle0@gmail.com"
|
||
className="p-8 rounded-2xl transition-all hover:scale-110 hover:shadow-2xl group"
|
||
style={{ background: colors.gradient2 }}
|
||
>
|
||
<Mail className="w-10 h-10 mx-auto mb-4 transition-all group-hover:scale-110" style={{ color: colors.text }} />
|
||
<h3 className="text-lg font-semibold mb-2" style={{ color: colors.text, fontFamily: "'Space Grotesk', sans-serif" }}>Email</h3>
|
||
<p className="text-sm" style={{ color: colors.text, fontFamily: "'Inter', sans-serif" }}>Professional inquiries</p>
|
||
</a>
|
||
|
||
<a
|
||
href="https://www.linkedin.com/in/pietro-quintavalle-996b96267/"
|
||
className="p-8 rounded-2xl transition-all hover:scale-110 hover:shadow-2xl group"
|
||
style={{ background: colors.gradient3 }}
|
||
>
|
||
<Linkedin className="w-10 h-10 mx-auto mb-4 transition-all group-hover:scale-110" style={{ color: colors.text }} />
|
||
<h3 className="text-lg font-semibold mb-2" style={{ color: colors.text, fontFamily: "'Space Grotesk', sans-serif" }}>LinkedIn</h3>
|
||
<p className="text-sm" style={{ color: colors.text, fontFamily: "'Inter', sans-serif" }}>Professional network</p>
|
||
</a>
|
||
|
||
<a
|
||
href="https://github.com/Quinta0"
|
||
className="p-8 rounded-2xl transition-all hover:scale-110 hover:shadow-2xl group"
|
||
style={{ background: colors.gradient1 }}
|
||
>
|
||
<Github className="w-10 h-10 mx-auto mb-4 transition-all group-hover:scale-110" style={{ color: colors.text }} />
|
||
<h3 className="text-lg font-semibold mb-2" style={{ color: colors.text, fontFamily: "'Space Grotesk', sans-serif" }}>GitHub</h3>
|
||
<p className="text-sm" style={{ color: colors.text, fontFamily: "'Inter', sans-serif" }}>Code repositories</p>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Footer */}
|
||
<footer className="py-12 border-t" style={{ borderColor: colors.bgLight }}>
|
||
<div className="max-w-6xl mx-auto px-6 text-center">
|
||
<div className="mb-6">
|
||
<div className="flex justify-center items-center gap-8 mb-6">
|
||
<a
|
||
href="https://github.com/Quinta0"
|
||
className="text-sm hover:opacity-80 transition-all hover:scale-105"
|
||
style={{ color: colors.secondary, fontFamily: "'Inter', sans-serif", fontWeight: 500 }}
|
||
>
|
||
GitHub
|
||
</a>
|
||
<a
|
||
href="https://www.linkedin.com/in/pietro-quintavalle-996b96267/"
|
||
className="text-sm hover:opacity-80 transition-all hover:scale-105"
|
||
style={{ color: colors.secondary, fontFamily: "'Inter', sans-serif", fontWeight: 500 }}
|
||
>
|
||
LinkedIn
|
||
</a>
|
||
<a
|
||
href="mailto:0pietroquintavalle0@gmail.com"
|
||
className="text-sm hover:opacity-80 transition-all hover:scale-105"
|
||
style={{ color: colors.secondary, fontFamily: "'Inter', sans-serif", fontWeight: 500 }}
|
||
>
|
||
Email
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<p className="mb-3" style={{ color: colors.textMuted, fontFamily: "'Inter', sans-serif" }}>
|
||
Built with ⚡ using React & Modern Design • Pietro Quintavalle © 2025
|
||
</p>
|
||
<p className="text-sm" style={{ color: colors.textMuted, fontFamily: "'JetBrains Mono', monospace" }}>
|
||
IT Support Professional | Systems Engineer | Economics Student
|
||
</p>
|
||
</div>
|
||
</footer>
|
||
|
||
{/* Project Gallery Modal */}
|
||
{showProjectGallery && (
|
||
<ProjectGallery
|
||
project={showProjectGallery}
|
||
onClose={() => setShowProjectGallery(null)}
|
||
/>
|
||
)}
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default Portfolio; |