Update page.tsx
This commit is contained in:
Quinta
+631
-205
@@ -1,235 +1,661 @@
|
||||
"use client";
|
||||
import Link from "next/link"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import {JSX, SVGProps, useState} from "react"
|
||||
import { Card, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import Image from "next/image"
|
||||
import {Github, Linkedin, MenuIcon} from "lucide-react";
|
||||
export default function Home() {
|
||||
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
|
||||
const skills = [
|
||||
"IT Support", "Data Analysis", "Python", "R", "SQL", "Network Architecture",
|
||||
"Network Security", "Cloud Computing", "Data Visualization", "Machine Learning",
|
||||
"Statistical Analysis", "Database Management", "Linux", "Git", "Agile Methodologies",
|
||||
"Project Management", "Business Analysis", "Critical Thinking"
|
||||
];
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Github, Linkedin, Mail, ExternalLink, ChevronDown, Code, Database, BarChart3, Globe, Award, GraduationCap, Image, ExternalLink as LinkIcon } from 'lucide-react';
|
||||
|
||||
const certifications = [
|
||||
const Portfolio = () => {
|
||||
const [activeSection, setActiveSection] = useState('home');
|
||||
const [scrolled, setScrolled] = useState(false);
|
||||
const [showProjectGallery, setShowProjectGallery] = useState(false);
|
||||
|
||||
// Nord Color Palette
|
||||
const nordColors = {
|
||||
bg: '#2E3440',
|
||||
bgLight: '#3B4252',
|
||||
bgLighter: '#434C5E',
|
||||
bgLightest: '#4C566A',
|
||||
text: '#D8DEE9',
|
||||
textMuted: 'rgba(216, 222, 233, 0.6)',
|
||||
accent: '#88C0D0',
|
||||
blue: '#81A1C1',
|
||||
darkBlue: '#5E81AC',
|
||||
cyan: '#8FBCBB',
|
||||
green: '#A3BE8C',
|
||||
yellow: '#EBCB8B',
|
||||
orange: '#D08770',
|
||||
red: '#BF616A',
|
||||
purple: '#B48EAD'
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const handleScroll = () => {
|
||||
setScrolled(window.scrollY > 50);
|
||||
};
|
||||
window.addEventListener('scroll', handleScroll);
|
||||
return () => window.removeEventListener('scroll', handleScroll);
|
||||
}, []);
|
||||
|
||||
const skills = {
|
||||
'Data & Analytics': ['Python', 'R', 'SQL', 'Statistical Analysis', 'Data Visualization', 'Business Intelligence'],
|
||||
'Web Development': ['JavaScript', 'TypeScript', 'React', 'Next.js', 'HTML5', 'CSS3', 'Tailwind CSS'],
|
||||
'Backend & Tools': ['Flask', 'Express', 'MongoDB', 'SQLite', 'Git', 'Linux'],
|
||||
'Other': ['Java', 'LaTeX', 'Project Planning', 'Financial Analysis']
|
||||
};
|
||||
|
||||
const projects = [
|
||||
{
|
||||
name: "Google IT Support Professional Certificate",
|
||||
issuer: "Google",
|
||||
image: "./certificates/Coursera_RZ1V4RU6JP2D.png"
|
||||
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: <Code className="w-6 h-6" />,
|
||||
status: 'Live',
|
||||
images: [
|
||||
'https://via.placeholder.com/600x400/81A1C1/2E3440?text=Algorithm+Visualizer',
|
||||
'https://via.placeholder.com/600x400/88C0D0/2E3440?text=Sorting+Demo',
|
||||
'https://via.placeholder.com/600x400/5E81AC/2E3440?text=Interactive+UI'
|
||||
],
|
||||
features: ['Real-time algorithm visualization', 'Multiple sorting algorithms', 'Step-by-step breakdown', 'Performance comparison'],
|
||||
github: 'https://github.com/Quinta0/valgo',
|
||||
demo: 'https://valgo-demo.vercel.app'
|
||||
},
|
||||
{
|
||||
name: "Google Data Analytics Professional Certificate",
|
||||
issuer: "Google",
|
||||
image: "./certificates/Coursera_EN181NFH7VYT.png"
|
||||
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: 'In Progress',
|
||||
images: [
|
||||
'https://via.placeholder.com/600x400/A3BE8C/2E3440?text=Data+Visualization',
|
||||
'https://via.placeholder.com/600x400/EBCB8B/2E3440?text=ML+Model',
|
||||
'https://via.placeholder.com/600x400/D08770/2E3440?text=Results+Analysis'
|
||||
],
|
||||
features: ['Predictive modeling', 'Feature engineering', 'Data visualization', 'Statistical analysis'],
|
||||
github: 'https://github.com/Quinta0/boston-housing'
|
||||
},
|
||||
{
|
||||
name: "IBM Python for Data Science, AI & Development",
|
||||
issuer: "IBM",
|
||||
image: "./certificates/Coursera_QT9WT5VCHJNU.png"
|
||||
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: [
|
||||
'https://via.placeholder.com/600x400/BF616A/2E3440?text=Fire+Simulation',
|
||||
'https://via.placeholder.com/600x400/B48EAD/2E3440?text=Statistical+Model',
|
||||
'https://via.placeholder.com/600x400/8FBCBB/2E3440?text=Data+Analysis'
|
||||
],
|
||||
features: ['Monte Carlo simulation', 'Environmental factors modeling', 'Statistical analysis', 'Visualization tools'],
|
||||
github: 'https://github.com/Quinta0/forest-fire-sim'
|
||||
}
|
||||
];
|
||||
return (
|
||||
<div className="bg-[#00004d] text-white font-['Segoe UI', 'FiraCode'] min-h-screen">
|
||||
<header className="py-4 px-6 flex items-center justify-between border-b border-[#4d4dff]">
|
||||
<div className="flex items-center gap-4">
|
||||
<TerminalIcon className="w-8 h-8" aria-hidden="true" />
|
||||
<h1 className="text-2xl font-semibold">Pietro Quintavalle</h1>
|
||||
</div>
|
||||
<nav className="hidden md:flex items-center gap-6">
|
||||
{["About", "Skills", "Portfolio", "Certifications"].map((item) => (
|
||||
<Link key={item} href={`#${item.toLowerCase()}`} className="hover:text-[#4d4dff] transition-colors p-2">
|
||||
{item}
|
||||
</Link>
|
||||
))}
|
||||
</nav>
|
||||
<button
|
||||
className="md:hidden text-white p-2"
|
||||
onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
|
||||
aria-label={mobileMenuOpen ? "Close menu" : "Open menu"}
|
||||
>
|
||||
<MenuIcon className="h-6 w-6" aria-hidden="true" />
|
||||
</button>
|
||||
</header>
|
||||
|
||||
{/* Mobile menu */}
|
||||
{mobileMenuOpen && (
|
||||
<div className="md:hidden bg-[#0000b3] py-2">
|
||||
{["About", "Skills", "Certifications", "Portfolio"].map((item) => (
|
||||
<Link
|
||||
key={item}
|
||||
href={`#${item.toLowerCase()}`}
|
||||
className="block py-2 px-4 text-white hover:bg-[#4d4dff] transition-colors"
|
||||
onClick={() => setMobileMenuOpen(false)}
|
||||
const education = [
|
||||
{
|
||||
institution: 'USI Università della Svizzera italiana',
|
||||
degree: "Bachelor's degree Economics",
|
||||
period: 'Sep 2024 - Jun 2027',
|
||||
status: 'Current'
|
||||
},
|
||||
{
|
||||
institution: 'USI Università della Svizzera italiana',
|
||||
degree: 'Bachelor of Science - BS Informatics',
|
||||
period: 'Jan 2022 - Jan 2024',
|
||||
status: 'Completed'
|
||||
},
|
||||
{
|
||||
institution: 'Scuola cantonale di commercio',
|
||||
degree: 'Maturità Cantonale e AFC Economics',
|
||||
period: 'Sep 2017 - Jun 2021',
|
||||
status: 'GPA: 4.5/5'
|
||||
}
|
||||
];
|
||||
|
||||
const certificates = [
|
||||
'Google Data Analytics Professional Certificate',
|
||||
'Google IT Support Professional Certificate',
|
||||
'IT Security: Defense against the digital dark arts',
|
||||
'Python for Data Science, AI & Development'
|
||||
];
|
||||
|
||||
const scrollToSection = (sectionId) => {
|
||||
document.getElementById(sectionId)?.scrollIntoView({ behavior: 'smooth' });
|
||||
setActiveSection(sectionId);
|
||||
};
|
||||
|
||||
const ProjectGallery = ({ project, onClose }) => (
|
||||
<div
|
||||
className="fixed inset-0 z-50 flex items-center justify-center p-4"
|
||||
style={{ backgroundColor: 'rgba(46, 52, 64, 0.95)' }}
|
||||
onClick={onClose}
|
||||
>
|
||||
{item}
|
||||
</Link>
|
||||
<div
|
||||
className="max-w-4xl w-full max-h-[90vh] overflow-y-auto rounded-lg"
|
||||
style={{ backgroundColor: nordColors.bgLight }}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<div className="p-6">
|
||||
<div className="flex justify-between items-start mb-6">
|
||||
<div>
|
||||
<h3 className="text-2xl font-bold mb-2" style={{ color: nordColors.text }}>
|
||||
{project.title}
|
||||
</h3>
|
||||
<div className="flex items-center gap-4">
|
||||
<span className="text-sm" style={{ color: nordColors.blue }}>
|
||||
{project.period}
|
||||
</span>
|
||||
<span
|
||||
className="px-3 py-1 rounded-full text-xs"
|
||||
style={{
|
||||
backgroundColor: nordColors.darkBlue,
|
||||
color: nordColors.text
|
||||
}}
|
||||
>
|
||||
{project.status}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="text-2xl hover:opacity-70"
|
||||
style={{ color: nordColors.textMuted }}
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Project Images */}
|
||||
<div className="grid md:grid-cols-2 gap-4 mb-6">
|
||||
{project.images.map((image, idx) => (
|
||||
<div key={idx} className="aspect-video rounded-lg overflow-hidden">
|
||||
<img
|
||||
src={image}
|
||||
alt={`${project.title} screenshot ${idx + 1}`}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
<main className="px-6 py-12">
|
||||
<section id="about" className="mb-12">
|
||||
<h2 className="text-3xl font-semibold mb-4">About Me</h2>
|
||||
<div className="prose prose-invert max-w-3xl">
|
||||
<p>
|
||||
Hello! I'm Pietro Quintavalle, a dedicated IT hobbyist with a strong foundation in IT support and
|
||||
data analytics who's currently pursuing a bachelor in Economics.
|
||||
My passion lies in leveraging technology to solve complex problems and derive meaningful insights from
|
||||
data.
|
||||
With a combination of technical skills and analytical thinking, I'm equipped to tackle challenges
|
||||
in both IT infrastructure and data-driven decision-making.
|
||||
|
||||
{/* Description */}
|
||||
<div className="mb-6">
|
||||
<h4 className="text-lg font-semibold mb-3" style={{ color: nordColors.blue }}>
|
||||
About This Project
|
||||
</h4>
|
||||
<p className="leading-relaxed" style={{ color: nordColors.textMuted }}>
|
||||
{project.description}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex space-x-4 mt-4">
|
||||
<Link href="https://github.com/Quinta0" passHref>
|
||||
<a aria-label="GitHub Profile">
|
||||
<Button variant="outline" size="icon" className="p-2">
|
||||
<Github className="h-6 w-6" aria-hidden="true"/>
|
||||
</Button>
|
||||
</a>
|
||||
</Link>
|
||||
<Link href="https://linkedin.com/in/pietro-quintavalle-996b96267" passHref>
|
||||
<a aria-label="LinkedIn Profile">
|
||||
<Button variant="outline" size="icon" className="p-2">
|
||||
<Linkedin className="h-6 w-6" aria-hidden="true"/>
|
||||
</Button>
|
||||
</a>
|
||||
</Link>
|
||||
|
||||
{/* Features */}
|
||||
<div className="mb-6">
|
||||
<h4 className="text-lg font-semibold mb-3" style={{ color: nordColors.blue }}>
|
||||
Key Features
|
||||
</h4>
|
||||
<div className="grid md:grid-cols-2 gap-2">
|
||||
{project.features.map((feature, idx) => (
|
||||
<div key={idx} className="flex items-center">
|
||||
<div
|
||||
className="w-2 h-2 rounded-full mr-3"
|
||||
style={{ backgroundColor: nordColors.accent }}
|
||||
></div>
|
||||
<span style={{ color: nordColors.text }}>{feature}</span>
|
||||
</div>
|
||||
</section>
|
||||
<section id="skills" className="mb-16">
|
||||
<h2 className="text-3xl font-bold mb-4">Skills</h2>
|
||||
<div className="relative overflow-hidden h-16">
|
||||
<div className="absolute flex animate-marquee">
|
||||
{[...skills, ...skills].map((skill, index) => (
|
||||
<Badge key={index} variant="secondary" className="mx-2 text-md text-center py-1 px-3">
|
||||
{skill}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section id="portfolio" className="mb-12">
|
||||
<h2 className="text-3xl font-semibold mb-4">Portfolio</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
{[
|
||||
{
|
||||
title: "password-generator",
|
||||
description: "A unique and interactive password generator built with Next.js and React. ",
|
||||
technologies: ["Nextjs", "Encryption", "Typescript"],
|
||||
githubLink: "https://github.com/Quinta0/password-generator"
|
||||
},
|
||||
{
|
||||
title: "Valgo",
|
||||
description: "A website for visualizing sorting algorithms for the visual learners out there.",
|
||||
technologies: ["Typescript", "React", "Algorithms"],
|
||||
githubLink: "https://github.com/Quinta0/valgo"
|
||||
},
|
||||
{
|
||||
title: "Gravity",
|
||||
description: "3D Gravity Simulator is a C++ program that visualizes the gravitational interactions between celestial bodies",
|
||||
technologies: ["C++", "OpenGL", "Physics", "3D", "Simulation", "Cmake", "VCPKG"],
|
||||
githubLink: "https://github.com/Quinta0/gravity"
|
||||
},
|
||||
{
|
||||
title: "Boston Housing Price Prediction",
|
||||
description: "A simulation of the Boston Housing Price Prediction project that involves building a machine learning model to predict housing prices. ",
|
||||
technologies: ["Python", "Machine Learning", "Data Analysis", "Data Visualization", "Jupyter Notebook", "Probability", "Statistics"],
|
||||
githubLink: "https://github.com/Quinta0/BostonHousing"
|
||||
},
|
||||
{
|
||||
title: "Forest Fire Simulation",
|
||||
description: "An assignment for the Probability & Statistics course at USI that aims to model the spread of forest fires over a grid representing a forest landscape.",
|
||||
technologies: ["Statistics", "Python", "Jupyter Notebook", "Simulation", "Probability"],
|
||||
githubLink: "https://github.com/Quinta0/ForestFire"
|
||||
},
|
||||
{
|
||||
title: "AequitasIQ",
|
||||
description: "An intelligent financial analysis tool that creates an interactive dashboard to visualize personal income and expenses.",
|
||||
technologies: ["Python", "Pandas", "LLM", "Ollama", "Plotly", "NumPy", "LangChain"],
|
||||
githubLink: "https://github.com/Quinta0/AequitasIQ-.git"
|
||||
}
|
||||
].map((project, index) => (
|
||||
<div key={index} className="bg-[#0000b3] rounded-md p-4">
|
||||
<h3 className="text-xl font-semibold mb-2">{project.title}</h3>
|
||||
<p className="mb-4">{project.description}</p>
|
||||
<div className="mb-4">
|
||||
{project.technologies.map((tech, techIndex) => (
|
||||
<span key={techIndex}
|
||||
className="inline-block bg-[#4d4dff] text-white rounded-full px-3 py-1 text-sm font-semibold mr-2 mb-2">
|
||||
|
||||
{/* Tech Stack */}
|
||||
<div className="mb-6">
|
||||
<h4 className="text-lg font-semibold mb-3" style={{ color: nordColors.blue }}>
|
||||
Technology Stack
|
||||
</h4>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{project.tech.map((tech) => (
|
||||
<span
|
||||
key={tech}
|
||||
className="px-3 py-1 rounded text-sm"
|
||||
style={{
|
||||
backgroundColor: nordColors.bg,
|
||||
color: nordColors.accent
|
||||
}}
|
||||
>
|
||||
{tech}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex justify-end">
|
||||
<Link
|
||||
href={project.githubLink}
|
||||
className="inline-flex items-center rounded-md bg-[#4d4dff] px-4 py-2 text-sm font-medium text-white shadow-sm transition-colors hover:bg-[#3b3bd9] focus:outline-none focus:ring-2 focus:ring-[#4d4dff] focus:ring-offset-2"
|
||||
aria-label={`View ${project.title} on GitHub`}
|
||||
</div>
|
||||
|
||||
{/* Links */}
|
||||
<div className="flex gap-4">
|
||||
{project.github && (
|
||||
<a
|
||||
href={project.github}
|
||||
className="flex items-center gap-2 px-4 py-2 rounded hover:opacity-80 transition-opacity"
|
||||
style={{ backgroundColor: nordColors.bgLighter, color: nordColors.text }}
|
||||
>
|
||||
View on GitHub
|
||||
</Link>
|
||||
<Github className="w-4 h-4" />
|
||||
View Code
|
||||
</a>
|
||||
)}
|
||||
{project.demo && (
|
||||
<a
|
||||
href={project.demo}
|
||||
className="flex items-center gap-2 px-4 py-2 rounded hover:opacity-80 transition-opacity"
|
||||
style={{ backgroundColor: nordColors.darkBlue, color: nordColors.text }}
|
||||
>
|
||||
<LinkIcon className="w-4 h-4" />
|
||||
Live Demo
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
<section id="certifications" className="mb-16">
|
||||
<h2 className="text-3xl font-semibold mb-4">Certifications</h2>
|
||||
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
|
||||
{certifications.map((cert, index) => (
|
||||
<Card key={index} className="overflow-hidden bg-[#0000b3] text-white">
|
||||
<Image src={cert.image} alt={cert.name} width={400} height={300}
|
||||
className="w-full object-contain"/>
|
||||
<CardHeader>
|
||||
<CardTitle>{cert.name}</CardTitle>
|
||||
<CardDescription className="text-gray-300">{cert.issuer}</CardDescription>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<footer className="bg-[#0000b3] py-6 px-6 text-center text-sm">
|
||||
<p>© 2024 Pietro Quintavalle. All rights reserved.</p>
|
||||
</footer>
|
||||
<style jsx>{`
|
||||
@keyframes marquee {
|
||||
0% {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
.animate-marquee {
|
||||
animation: marquee 30s linear infinite;
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function TerminalIcon(props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) {
|
||||
return (
|
||||
<svg
|
||||
{...props}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
<div className="min-h-screen font-sans" style={{ backgroundColor: nordColors.bg, color: nordColors.text }}>
|
||||
{/* Navigation */}
|
||||
<nav
|
||||
className="fixed top-0 w-full z-40 transition-all duration-300"
|
||||
style={{
|
||||
backgroundColor: scrolled ? 'rgba(46, 52, 64, 0.95)' : 'transparent',
|
||||
borderBottom: scrolled ? `1px solid ${nordColors.bgLight}` : 'none',
|
||||
backdropFilter: scrolled ? 'blur(10px)' : 'none'
|
||||
}}
|
||||
>
|
||||
<polyline points="4 17 10 11 4 5"/>
|
||||
<line x1="12" x2="20" y1="19" y2="19"/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
<div className="max-w-6xl mx-auto px-6 py-4">
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="text-xl font-bold" style={{ color: nordColors.accent }}>
|
||||
Pietro Quintavalle
|
||||
</div>
|
||||
<div className="hidden md:flex space-x-8">
|
||||
{['Home', 'About', 'Projects', 'Education', 'Contact'].map((item) => (
|
||||
<button
|
||||
key={item}
|
||||
onClick={() => scrollToSection(item.toLowerCase())}
|
||||
className="transition-colors hover:opacity-80"
|
||||
style={{
|
||||
color: activeSection === item.toLowerCase() ? nordColors.accent : nordColors.text
|
||||
}}
|
||||
>
|
||||
{item}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
{/* Hero Section */}
|
||||
<section id="home" className="min-h-screen flex items-center justify-center relative">
|
||||
<div className="text-center max-w-4xl mx-auto px-6">
|
||||
<div className="mb-8">
|
||||
<h1 className="text-5xl md:text-7xl font-bold mb-4">
|
||||
<span style={{ color: nordColors.text }}>Pietro</span>
|
||||
<span className="ml-4" style={{ color: nordColors.accent }}>Quintavalle</span>
|
||||
</h1>
|
||||
<div className="text-xl md:text-2xl mb-6" style={{ color: nordColors.blue }}>
|
||||
Economics Student • Data Analytics • Web Development
|
||||
</div>
|
||||
<p className="text-lg max-w-2xl mx-auto leading-relaxed" style={{ color: nordColors.textMuted }}>
|
||||
Passionate about the intersection of economics and technology, exploring how data and code can solve real-world problems.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-center space-x-6 mb-12">
|
||||
<a
|
||||
href="https://github.com/Quinta0"
|
||||
className="p-3 rounded-full transition-colors hover:opacity-80"
|
||||
style={{ backgroundColor: nordColors.bgLight }}
|
||||
>
|
||||
<Github className="w-6 h-6" style={{ color: nordColors.text }} />
|
||||
</a>
|
||||
<a
|
||||
href="https://www.linkedin.com/in/pietro-quintavalle-996b96267/"
|
||||
className="p-3 rounded-full transition-colors hover:opacity-80"
|
||||
style={{ backgroundColor: nordColors.bgLight }}
|
||||
>
|
||||
<Linkedin className="w-6 h-6" style={{ color: nordColors.text }} />
|
||||
</a>
|
||||
<a
|
||||
href="mailto:0pietroquintavalle0@gmail.com"
|
||||
className="p-3 rounded-full transition-colors hover:opacity-80"
|
||||
style={{ backgroundColor: nordColors.bgLight }}
|
||||
>
|
||||
<Mail className="w-6 h-6" style={{ color: nordColors.text }} />
|
||||
</a>
|
||||
<a
|
||||
href="https://quinta0.github.io/whoami/"
|
||||
className="p-3 rounded-full transition-colors hover:opacity-80"
|
||||
style={{ backgroundColor: nordColors.bgLight }}
|
||||
>
|
||||
<Globe className="w-6 h-6" style={{ color: nordColors.text }} />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="absolute bottom-8 left-1/2 transform -translate-x-1/2 animate-bounce">
|
||||
<ChevronDown className="w-6 h-6" style={{ color: nordColors.blue }} />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* About Section */}
|
||||
<section id="about" className="py-20" style={{ backgroundColor: 'rgba(59, 66, 82, 0.3)' }}>
|
||||
<div className="max-w-6xl mx-auto px-6">
|
||||
<h2 className="text-4xl font-bold text-center mb-16" style={{ color: nordColors.accent }}>
|
||||
About Me
|
||||
</h2>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-12 items-center">
|
||||
<div>
|
||||
<p className="text-lg leading-relaxed mb-6" style={{ color: nordColors.text }}>
|
||||
I'm an Economics student at USI with extensive experience in data analytics and web development.
|
||||
My journey combines analytical thinking with technical skills to create meaningful solutions.
|
||||
</p>
|
||||
<p className="text-lg leading-relaxed mb-6" style={{ color: nordColors.text }}>
|
||||
Google-certified in Data Analytics and IT Support, I bring proven expertise in Python, R, SQL,
|
||||
and modern web technologies like Next.js and React.
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<span
|
||||
className="px-3 py-1 rounded-full text-sm"
|
||||
style={{ backgroundColor: nordColors.darkBlue, color: nordColors.text }}
|
||||
>
|
||||
Italian (Native)
|
||||
</span>
|
||||
<span
|
||||
className="px-3 py-1 rounded-full text-sm"
|
||||
style={{ backgroundColor: nordColors.darkBlue, color: nordColors.text }}
|
||||
>
|
||||
English (C2)
|
||||
</span>
|
||||
<span
|
||||
className="px-3 py-1 rounded-full text-sm"
|
||||
style={{ backgroundColor: nordColors.darkBlue, color: nordColors.text }}
|
||||
>
|
||||
Switzerland 🇨🇭
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6">
|
||||
{Object.entries(skills).map(([category, skillList]) => (
|
||||
<div
|
||||
key={category}
|
||||
className="p-6 rounded-lg border"
|
||||
style={{
|
||||
backgroundColor: nordColors.bg,
|
||||
borderColor: nordColors.bgLight
|
||||
}}
|
||||
>
|
||||
<h3 className="text-xl font-semibold mb-3" style={{ color: nordColors.blue }}>
|
||||
{category}
|
||||
</h3>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{skillList.map((skill) => (
|
||||
<span
|
||||
key={skill}
|
||||
className="px-3 py-1 rounded text-sm"
|
||||
style={{
|
||||
backgroundColor: nordColors.bgLighter,
|
||||
color: nordColors.text
|
||||
}}
|
||||
>
|
||||
{skill}
|
||||
</span>
|
||||
))}
|
||||
</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-4xl font-bold text-center mb-16" style={{ color: nordColors.accent }}>
|
||||
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-lg border transition-colors hover:opacity-90 cursor-pointer"
|
||||
style={{
|
||||
backgroundColor: nordColors.bgLight,
|
||||
borderColor: nordColors.bgLighter
|
||||
}}
|
||||
onClick={() => setShowProjectGallery(project)}
|
||||
>
|
||||
<div className="flex items-center mb-4">
|
||||
<div
|
||||
className="p-2 rounded-lg mr-3"
|
||||
style={{ backgroundColor: nordColors.darkBlue }}
|
||||
>
|
||||
{project.icon}
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-xl font-semibold" style={{ color: nordColors.text }}>
|
||||
{project.title}
|
||||
</h3>
|
||||
<p className="text-sm" style={{ color: nordColors.blue }}>
|
||||
{project.period}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="leading-relaxed mb-4" style={{ color: nordColors.textMuted }}>
|
||||
{project.description}
|
||||
</p>
|
||||
|
||||
<div className="flex flex-wrap gap-2 mb-4">
|
||||
{project.tech.map((tech) => (
|
||||
<span
|
||||
key={tech}
|
||||
className="px-2 py-1 rounded text-xs"
|
||||
style={{
|
||||
backgroundColor: nordColors.bg,
|
||||
color: nordColors.accent
|
||||
}}
|
||||
>
|
||||
{tech}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<span
|
||||
className="text-sm flex items-center gap-2"
|
||||
style={{ color: nordColors.blue }}
|
||||
>
|
||||
<Image className="w-4 h-4" />
|
||||
View Gallery
|
||||
</span>
|
||||
<span
|
||||
className="px-2 py-1 rounded text-xs"
|
||||
style={{
|
||||
backgroundColor: nordColors.darkBlue,
|
||||
color: nordColors.text
|
||||
}}
|
||||
>
|
||||
{project.status}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Education & Certificates Section */}
|
||||
<section id="education" className="py-20" style={{ backgroundColor: 'rgba(59, 66, 82, 0.3)' }}>
|
||||
<div className="max-w-6xl mx-auto px-6">
|
||||
<h2 className="text-4xl font-bold text-center mb-16" style={{ color: nordColors.accent }}>
|
||||
Education & Certifications
|
||||
</h2>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-12">
|
||||
{/* Education */}
|
||||
<div>
|
||||
<h3 className="text-2xl font-semibold mb-8 flex items-center" style={{ color: nordColors.blue }}>
|
||||
<GraduationCap className="w-6 h-6 mr-2" />
|
||||
Education
|
||||
</h3>
|
||||
|
||||
<div className="space-y-6">
|
||||
{education.map((edu, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="p-6 rounded-lg border"
|
||||
style={{
|
||||
backgroundColor: nordColors.bg,
|
||||
borderColor: nordColors.bgLight
|
||||
}}
|
||||
>
|
||||
<h4 className="text-lg font-semibold mb-2" style={{ color: nordColors.text }}>
|
||||
{edu.degree}
|
||||
</h4>
|
||||
<p className="mb-2" style={{ color: nordColors.blue }}>
|
||||
{edu.institution}
|
||||
</p>
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-sm" style={{ color: nordColors.textMuted }}>
|
||||
{edu.period}
|
||||
</span>
|
||||
<span
|
||||
className="px-2 py-1 rounded text-xs"
|
||||
style={{ backgroundColor: nordColors.darkBlue, color: nordColors.text }}
|
||||
>
|
||||
{edu.status}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Certificates */}
|
||||
<div>
|
||||
<h3 className="text-2xl font-semibold mb-8 flex items-center" style={{ color: nordColors.blue }}>
|
||||
<Award className="w-6 h-6 mr-2" />
|
||||
Certifications
|
||||
</h3>
|
||||
|
||||
<div className="space-y-4">
|
||||
{certificates.map((cert, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="p-4 rounded-lg border flex items-center"
|
||||
style={{
|
||||
backgroundColor: nordColors.bg,
|
||||
borderColor: nordColors.bgLight
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="w-2 h-2 rounded-full mr-4"
|
||||
style={{ backgroundColor: nordColors.accent }}
|
||||
></div>
|
||||
<span style={{ color: nordColors.text }}>{cert}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="mt-8 p-6 rounded-lg border"
|
||||
style={{
|
||||
backgroundColor: nordColors.bg,
|
||||
borderColor: nordColors.bgLight
|
||||
}}
|
||||
>
|
||||
<h4 className="text-lg font-semibold mb-3" style={{ color: nordColors.blue }}>
|
||||
Interests
|
||||
</h4>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{['Computer Hardware', 'Web Development', 'Finance', 'Economics', 'Literature'].map((interest) => (
|
||||
<span
|
||||
key={interest}
|
||||
className="px-3 py-1 rounded text-sm"
|
||||
style={{
|
||||
backgroundColor: nordColors.bgLighter,
|
||||
color: nordColors.text
|
||||
}}
|
||||
>
|
||||
{interest}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Contact Section */}
|
||||
<section id="contact" className="py-20">
|
||||
<div className="max-w-4xl mx-auto px-6 text-center">
|
||||
<h2 className="text-4xl font-bold mb-8" style={{ color: nordColors.accent }}>
|
||||
Let's Connect
|
||||
</h2>
|
||||
<p className="text-lg mb-12 max-w-2xl mx-auto" style={{ color: nordColors.textMuted }}>
|
||||
I'm always interested in discussing new opportunities, collaborations, or just having a chat about technology and economics.
|
||||
</p>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-8 mb-12">
|
||||
<a
|
||||
href="mailto:0pietroquintavalle0@gmail.com"
|
||||
className="p-6 rounded-lg transition-colors hover:opacity-80 group"
|
||||
style={{ backgroundColor: nordColors.bgLight }}
|
||||
>
|
||||
<Mail className="w-8 h-8 mx-auto mb-4" style={{ color: nordColors.blue }} />
|
||||
<h3 className="text-lg font-semibold mb-2" style={{ color: nordColors.text }}>Email</h3>
|
||||
<p className="text-sm" style={{ color: nordColors.textMuted }}>Drop me a line</p>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="https://www.linkedin.com/in/pietro-quintavalle-996b96267/"
|
||||
className="p-6 rounded-lg transition-colors hover:opacity-80 group"
|
||||
style={{ backgroundColor: nordColors.bgLight }}
|
||||
>
|
||||
<Linkedin className="w-8 h-8 mx-auto mb-4" style={{ color: nordColors.blue }} />
|
||||
<h3 className="text-lg font-semibold mb-2" style={{ color: nordColors.text }}>LinkedIn</h3>
|
||||
<p className="text-sm" style={{ color: nordColors.textMuted }}>Let's connect professionally</p>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="https://github.com/Quinta0"
|
||||
className="p-6 rounded-lg transition-colors hover:opacity-80 group"
|
||||
style={{ backgroundColor: nordColors.bgLight }}
|
||||
>
|
||||
<Github className="w-8 h-8 mx-auto mb-4" style={{ color: nordColors.blue }} />
|
||||
<h3 className="text-lg font-semibold mb-2" style={{ color: nordColors.text }}>GitHub</h3>
|
||||
<p className="text-sm" style={{ color: nordColors.textMuted }}>Check out my code</p>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Footer */}
|
||||
<footer className="py-8 border-t" style={{ borderColor: nordColors.bgLight }}>
|
||||
<div className="max-w-6xl mx-auto px-6 text-center">
|
||||
<p style={{ color: nordColors.textMuted }}>
|
||||
Built with ❄️ using React & Nord theme • Pietro Quintavalle © 2025
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
{/* Project Gallery Modal */}
|
||||
{showProjectGallery && (
|
||||
<ProjectGallery
|
||||
project={showProjectGallery}
|
||||
onClose={() => setShowProjectGallery(false)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Portfolio;
|
||||
|
||||
Reference in New Issue
Block a user