From 09630a949ca2554ee811ef7ee9d02390839e68a9 Mon Sep 17 00:00:00 2001
From: Quinta <112334784+Quinta0@users.noreply.github.com>
Date: Thu, 26 Jun 2025 15:30:28 +0200
Subject: [PATCH 1/2] Update page.tsx
---
app/page.tsx | 854 ++++++++++++++++++++++++++++++++++++++-------------
1 file changed, 640 insertions(+), 214 deletions(-)
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
-
-
- {["About", "Skills", "Portfolio", "Certifications"].map((item) => (
-
- {item}
-
- ))}
-
- setMobileMenuOpen(!mobileMenuOpen)}
- aria-label={mobileMenuOpen ? "Close menu" : "Open menu"}
- >
-
-
-
- {/* 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) => (
+
))}
- )}
-
-
- 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.
+
+
+ {/* Tech Stack */}
+
+
+ Technology Stack
+
+
+ {project.tech.map((tech) => (
+
+ {tech}
+
+ ))}
+
+
+
+ {/* Links */}
+
+
+
+
+ );
+
+ return (
+
+ {/* Navigation */}
+
+
+
+
+ Pietro Quintavalle
+
+
+ {['Home', 'About', 'Projects', 'Education', 'Contact'].map((item) => (
+ scrollToSection(item.toLowerCase())}
+ className="transition-colors hover:opacity-80"
+ style={{
+ color: activeSection === item.toLowerCase() ? nordColors.accent : nordColors.text
+ }}
+ >
+ {item}
+
+ ))}
+
+
+
+
+
+ {/* Hero Section */}
+
+
+
+
+ Pietro
+ Quintavalle
+
+
+ Economics Student • Data Analytics • Web Development
+
+
+ Passionate about the intersection of economics and technology, exploring how data and code can solve real-world problems.
+
+
+
+
+
+
+
+
+
+
+
+ {/* About Section */}
+
+
+
+ About Me
+
+
+
+
+
+ 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 🇨🇭
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+ {Object.entries(skills).map(([category, skillList]) => (
+
+
+ {category}
+
+
+ {skillList.map((skill) => (
+
+ {skill}
+
+ ))}
+
+
+ ))}
-
-
- Skills
-
-
- {[...skills, ...skills].map((skill, index) => (
-
- {skill}
-
+
+
+
+
+ {/* Projects Section */}
+
+
+
+ Featured Projects
+
+
+
+ {projects.map((project, index) => (
+
setShowProjectGallery(project)}
+ >
+
+
+ {project.icon}
+
+
+
+ {project.title}
+
+
+ {project.period}
+
+
+
+
+
+ {project.description}
+
+
+
+ {project.tech.map((tech) => (
+
+ {tech}
+
+ ))}
+
+
+
+
+
+ View Gallery
+
+
+ {project.status}
+
+
+
+ ))}
+
+
+
+
+ {/* Education & Certificates Section */}
+
+
+
+ Education & Certifications
+
+
+
+ {/* Education */}
+
+
+
+ Education
+
+
+
+ {education.map((edu, index) => (
+
+
+ {edu.degree}
+
+
+ {edu.institution}
+
+
+
+ {edu.period}
+
+
+ {edu.status}
+
+
+
))}
-
-
- Portfolio
-
- {[
- {
- 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) => (
-
-
{project.title}
-
{project.description}
-
- {project.technologies.map((tech, techIndex) => (
-
- {tech}
-
- ))}
-
-
-
- View on GitHub
-
-
+
+ {/* Certificates */}
+
+
+
+ Certifications
+
+
+
+ {certificates.map((cert, index) => (
+
- ))}
+ ))}
+
+
+
+
+ Interests
+
+
+ {['Computer Hardware', 'Web Development', 'Finance', 'Economics', 'Literature'].map((interest) => (
+
+ {interest}
+
+ ))}
+
+
-
-
- Certifications
-
- {certifications.map((cert, index) => (
-
-
-
- {cert.name}
- {cert.issuer}
-
-
- ))}
-
-
-
-
-
-
- )
-}
+ {/* Contact Section */}
+
-function TerminalIcon(props: JSX.IntrinsicAttributes & SVGProps
) {
- return (
-
-
-
-
- )
-}
\ No newline at end of file
+ {/* Footer */}
+
+
+ {/* Project Gallery Modal */}
+ {showProjectGallery && (
+ setShowProjectGallery(false)}
+ />
+ )}
+
+ );
+};
+
+export default Portfolio;
--
2.54.0
From 3dd4ecf1a778ae7e54a7d034428236158bbc6397 Mon Sep 17 00:00:00 2001
From: Quinta <112334784+Quinta0@users.noreply.github.com>
Date: Thu, 26 Jun 2025 15:48:31 +0200
Subject: [PATCH 2/2] update
---
.eslintrc.json | 9 +-
app/layout.tsx | 53 ++-
components/Portfolio.tsx | 721 +++++++++++++++++++++++++++++++++++++++
lib/constants.ts | 31 ++
next.config.mjs | 11 +-
package.json | 36 +-
tailwind.config.ts | 66 ++--
tsconfig.json | 10 +-
8 files changed, 839 insertions(+), 98 deletions(-)
create mode 100644 components/Portfolio.tsx
create mode 100644 lib/constants.ts
diff --git a/.eslintrc.json b/.eslintrc.json
index 3722418..56543d6 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -1,3 +1,8 @@
{
- "extends": ["next/core-web-vitals", "next/typescript"]
-}
+ "extends": ["next/core-web-vitals", "next/typescript"],
+ "rules": {
+ "@typescript-eslint/no-unused-vars": "error",
+ "@typescript-eslint/no-explicit-any": "warn",
+ "react-hooks/exhaustive-deps": "warn"
+ }
+}
\ No newline at end of file
diff --git a/app/layout.tsx b/app/layout.tsx
index 7dd0d20..82f00bb 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,36 +1,33 @@
-import type { Metadata } from "next";
-import localFont from "next/font/local";
-import "./globals.css";
-import React from "react";
-
-const geistSans = localFont({
- src: "./fonts/GeistVF.woff",
- variable: "--font-geist-sans",
- weight: "100 900",
-});
-const geistMono = localFont({
- src: "./fonts/GeistMonoVF.woff",
- variable: "--font-geist-mono",
- weight: "100 900",
-});
+import type { Metadata } from 'next'
+import './globals.css'
export const metadata: Metadata = {
- title: "Quintavalle Pietro",
- description: "My personal website",
-};
+ title: 'Pietro Quintavalle - Economics Student & Developer',
+ description: 'Economics student at USI with extensive data analytics and web development expertise. Google-certified in Data Analytics and IT Support.',
+ keywords: ['Pietro Quintavalle', 'Economics', 'Data Analytics', 'Web Development', 'Switzerland', 'USI'],
+ authors: [{ name: 'Pietro Quintavalle' }],
+ openGraph: {
+ title: 'Pietro Quintavalle - Economics Student & Developer',
+ description: 'Economics student at USI with extensive data analytics and web development expertise.',
+ url: 'https://your-domain.com',
+ siteName: 'Pietro Quintavalle Portfolio',
+ type: 'website',
+ },
+ twitter: {
+ card: 'summary_large_image',
+ title: 'Pietro Quintavalle - Economics Student & Developer',
+ description: 'Economics student at USI with extensive data analytics and web development expertise.',
+ },
+}
export default function RootLayout({
children,
-}: Readonly<{
- children: React.ReactNode;
-}>) {
+}: {
+ children: React.ReactNode
+}) {
return (
-
- {children}
-
+ {children}
- );
-}
+ )
+}
\ No newline at end of file
diff --git a/components/Portfolio.tsx b/components/Portfolio.tsx
new file mode 100644
index 0000000..7d55c1e
--- /dev/null
+++ b/components/Portfolio.tsx
@@ -0,0 +1,721 @@
+'use client';
+
+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';
+
+// Types
+interface NordColors {
+ bg: string;
+ bgLight: string;
+ bgLighter: string;
+ bgLightest: string;
+ text: string;
+ textMuted: string;
+ accent: string;
+ blue: string;
+ darkBlue: string;
+ cyan: string;
+ green: string;
+ yellow: string;
+ orange: string;
+ red: string;
+ purple: string;
+}
+
+interface Project {
+ title: string;
+ period: string;
+ description: string;
+ tech: string[];
+ icon: React.ReactNode;
+ status: string;
+ images: string[];
+ features: string[];
+ github?: string;
+ demo?: string;
+}
+
+interface Education {
+ institution: string;
+ degree: string;
+ period: string;
+ status: string;
+}
+
+interface ProjectGalleryProps {
+ project: Project;
+ onClose: () => void;
+}
+
+const Portfolio: React.FC = () => {
+ const [activeSection, setActiveSection] = useState('home');
+ const [scrolled, setScrolled] = useState(false);
+ const [showProjectGallery, setShowProjectGallery] = useState(false);
+
+ // Nord Color Palette
+ const nordColors: 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 = (): void => {
+ setScrolled(window.scrollY > 50);
+ };
+ window.addEventListener('scroll', handleScroll);
+ return () => window.removeEventListener('scroll', handleScroll);
+ }, []);
+
+ const skills: Record = {
+ '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: Project[] = [
+ {
+ 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'
+ },
+ {
+ 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'
+ },
+ {
+ 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'
+ }
+ ];
+
+ const education: 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: string[] = [
+ '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: string): void => {
+ document.getElementById(sectionId)?.scrollIntoView({ behavior: 'smooth' });
+ setActiveSection(sectionId);
+ };
+
+ const ProjectGallery: React.FC = ({ project, onClose }) => (
+
+
e.stopPropagation()}
+ >
+
+
+
+
+ {project.title}
+
+
+
+ {project.period}
+
+
+ {project.status}
+
+
+
+
+ ×
+
+
+
+ {/* Project Images */}
+
+ {project.images.map((image: string, idx: number) => (
+
+
+
+ ))}
+
+
+ {/* Description */}
+
+
+ About This Project
+
+
+ {project.description}
+
+
+
+ {/* Features */}
+
+
+ Key Features
+
+
+ {project.features.map((feature: string, idx: number) => (
+
+ ))}
+
+
+
+ {/* Tech Stack */}
+
+
+ Technology Stack
+
+
+ {project.tech.map((tech: string) => (
+
+ {tech}
+
+ ))}
+
+
+
+ {/* Links */}
+
+
+
+
+ );
+
+ return (
+
+ {/* Navigation */}
+
+
+
+
+ Pietro Quintavalle
+
+
+ {['Home', 'About', 'Projects', 'Education', 'Contact'].map((item: string) => (
+ scrollToSection(item.toLowerCase())}
+ className="transition-colors hover:opacity-80"
+ style={{
+ color: activeSection === item.toLowerCase() ? nordColors.accent : nordColors.text
+ }}
+ >
+ {item}
+
+ ))}
+
+
+
+
+
+ {/* Hero Section */}
+
+
+
+
+ Pietro
+ Quintavalle
+
+
+ Economics Student • Data Analytics • Web Development
+
+
+ Passionate about the intersection of economics and technology, exploring how data and code can solve real-world problems.
+
+
+
+
+
+
+
+
+
+
+
+ {/* About Section */}
+
+
+
+ About Me
+
+
+
+
+
+ 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 🇨🇭
+
+
+
+
+
+ {Object.entries(skills).map(([category, skillList]: [string, string[]]) => (
+
+
+ {category}
+
+
+ {skillList.map((skill: string) => (
+
+ {skill}
+
+ ))}
+
+
+ ))}
+
+
+
+
+
+ {/* Projects Section */}
+
+
+
+ Featured Projects
+
+
+
+ {projects.map((project: Project, index: number) => (
+
setShowProjectGallery(project)}
+ >
+
+
+ {project.icon}
+
+
+
+ {project.title}
+
+
+ {project.period}
+
+
+
+
+
+ {project.description}
+
+
+
+ {project.tech.map((tech: string) => (
+
+ {tech}
+
+ ))}
+
+
+
+
+
+ View Gallery
+
+
+ {project.status}
+
+
+
+ ))}
+
+
+
+
+ {/* Education & Certificates Section */}
+
+
+
+ Education & Certifications
+
+
+
+ {/* Education */}
+
+
+
+ Education
+
+
+
+ {education.map((edu: Education, index: number) => (
+
+
+ {edu.degree}
+
+
+ {edu.institution}
+
+
+
+ {edu.period}
+
+
+ {edu.status}
+
+
+
+ ))}
+
+
+
+ {/* Certificates */}
+
+
+
+ Certifications
+
+
+
+ {certificates.map((cert: string, index: number) => (
+
+ ))}
+
+
+
+
+ Interests
+
+
+ {['Computer Hardware', 'Web Development', 'Finance', 'Economics', 'Literature'].map((interest: string) => (
+
+ {interest}
+
+ ))}
+
+
+
+
+
+
+
+ {/* Contact Section */}
+
+
+ {/* Footer */}
+
+
+ {/* Project Gallery Modal */}
+ {showProjectGallery && (
+
setShowProjectGallery(false)}
+ />
+ )}
+
+ );
+};
+
+export default Portfolio;
\ No newline at end of file
diff --git a/lib/constants.ts b/lib/constants.ts
new file mode 100644
index 0000000..bd0b44f
--- /dev/null
+++ b/lib/constants.ts
@@ -0,0 +1,31 @@
+export const NORD_COLORS: 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'
+};
+
+export const SKILLS: Record = {
+ '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']
+};
+
+export const CERTIFICATES: string[] = [
+ 'Google Data Analytics Professional Certificate',
+ 'Google IT Support Professional Certificate',
+ 'IT Security: Defense against the digital dark arts',
+ 'Python for Data Science, AI & Development'
+];
\ No newline at end of file
diff --git a/next.config.mjs b/next.config.mjs
index 4678774..1452eba 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -1,4 +1,11 @@
/** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = {
+ experimental: {
+ appDir: true,
+ },
+ images: {
+ domains: ['via.placeholder.com'],
+ },
+}
-export default nextConfig;
+module.exports = nextConfig
\ No newline at end of file
diff --git a/package.json b/package.json
index afcfe13..052f4cb 100644
--- a/package.json
+++ b/package.json
@@ -1,32 +1,28 @@
{
- "name": "personalwebsite",
+ "name": "pietro-portfolio",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
- "lint": "next lint"
+ "lint": "next lint",
+ "type-check": "tsc --noEmit"
},
"dependencies": {
- "@radix-ui/react-slot": "^1.1.0",
- "class-variance-authority": "^0.7.0",
- "clsx": "^2.1.1",
- "lucide-react": "^0.441.0",
- "next": "14.2.13",
- "react": "^18",
- "react-dom": "^18",
- "tailwind-merge": "^2.5.2",
- "tailwindcss-animate": "^1.0.7"
+ "next": "14.2.4",
+ "react": "^18.3.1",
+ "react-dom": "^18.3.1",
+ "lucide-react": "^0.263.1"
},
"devDependencies": {
- "@types/node": "^20",
- "@types/react": "^18",
- "@types/react-dom": "^18",
- "eslint": "^8",
- "eslint-config-next": "14.2.13",
- "postcss": "^8",
- "tailwindcss": "^3.4.1",
- "typescript": "^5"
+ "@types/node": "^20.14.9",
+ "@types/react": "^18.3.3",
+ "@types/react-dom": "^18.3.0",
+ "eslint": "^8.57.0",
+ "eslint-config-next": "14.2.4",
+ "postcss": "^8.4.39",
+ "tailwindcss": "^3.4.4",
+ "typescript": "^5.5.3"
}
-}
+}
\ No newline at end of file
diff --git a/tailwind.config.ts b/tailwind.config.ts
index ebc9f38..17eb3fa 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -8,49 +8,29 @@ const config: Config = {
"./app/**/*.{js,ts,jsx,tsx,mdx}",
],
theme: {
- extend: {
- colors: {
- background: 'hsl(var(--background))',
- foreground: 'hsl(var(--foreground))',
- card: {
- DEFAULT: 'hsl(var(--card))',
- foreground: 'hsl(var(--card-foreground))'
- },
- popover: {
- DEFAULT: 'hsl(var(--popover))',
- foreground: 'hsl(var(--popover-foreground))'
- },
- primary: {
- DEFAULT: 'hsl(var(--primary))',
- foreground: 'hsl(var(--primary-foreground))'
- },
- secondary: {
- DEFAULT: 'hsl(var(--secondary))',
- foreground: 'hsl(var(--secondary-foreground))'
- },
- muted: {
- DEFAULT: 'hsl(var(--muted))',
- foreground: 'hsl(var(--muted-foreground))'
- },
- accent: {
- DEFAULT: 'hsl(var(--accent))',
- foreground: 'hsl(var(--accent-foreground))'
- },
- destructive: {
- DEFAULT: 'hsl(var(--destructive))',
- foreground: 'hsl(var(--destructive-foreground))'
- },
- border: 'hsl(var(--border))',
- input: 'hsl(var(--input))',
- ring: 'hsl(var(--ring))',
- chart: {
- '1': 'hsl(var(--chart-1))',
- '2': 'hsl(var(--chart-2))',
- '3': 'hsl(var(--chart-3))',
- '4': 'hsl(var(--chart-4))',
- '5': 'hsl(var(--chart-5))'
- }
- },
+ extend: {
+ colors: {
+ nord: {
+ 0: '#2E3440',
+ 1: '#3B4252',
+ 2: '#434C5E',
+ 3: '#4C566A',
+ 4: '#D8DEE9',
+ 5: '#E5E9F0',
+ 6: '#ECEFF4',
+ 7: '#8FBCBB',
+ 8: '#88C0D0',
+ 9: '#81A1C1',
+ 10: '#5E81AC',
+ 11: '#BF616A',
+ 12: '#D08770',
+ 13: '#EBCB8B',
+ 14: '#A3BE8C',
+ 15: '#B48EAD',
+ },
+ },
+ },
+ },
borderRadius: {
lg: 'var(--radius)',
md: 'calc(var(--radius) - 2px)',
diff --git a/tsconfig.json b/tsconfig.json
index e7ff90f..8b63fb1 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,6 +1,6 @@
{
"compilerOptions": {
- "lib": ["dom", "dom.iterable", "esnext"],
+ "lib": ["dom", "dom.iterable", "es6"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
@@ -17,10 +17,14 @@
"name": "next"
}
],
+ "baseUrl": ".",
"paths": {
- "@/*": ["./*"]
+ "@/*": ["./src/*"],
+ "@/components/*": ["./src/components/*"],
+ "@/lib/*": ["./src/lib/*"],
+ "@/types/*": ["./src/types/*"]
}
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
"exclude": ["node_modules"]
-}
+}
\ No newline at end of file
--
2.54.0