diff --git a/app/page.tsx b/app/page.tsx
index e0b2b32..644b5a3 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -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: ,
+ 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: ,
+ 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: ,
+ 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 (
-
-
-
-
-
Pietro Quintavalle
-
-
-
-
- {/* Mobile menu */}
- {mobileMenuOpen && (
-
- {["About", "Skills", "Certifications", "Portfolio"].map((item) => (
- setMobileMenuOpen(false)}
- >
- {item}
-
+ 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 }) => (
+
+
e.stopPropagation()}
+ >
+
+
+
+
+ {project.title}
+
+
+
+ {project.period}
+
+
+ {project.status}
+
+
+
+
+
+
+ {/* Project Images */}
+
+ {project.images.map((image, idx) => (
+
+
+
+ ))}
+
+
+ {/* Description */}
+
+
+ About This Project
+
+
+ {project.description}
+
+
+
+ {/* Features */}
+
+
+ Key Features
+
+
+ {project.features.map((feature, idx) => (
+
+
+ {feature}
+
))}
- )}
-
-
-
About Me
-
-
- 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.
+
+ 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.
+
+ 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.
+
+
+
+ Italian (Native)
+
+
+ English (C2)
+
+
+ Switzerland 🇨🇭
+
+