Quinta/whoami
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: clean up formatting and improve code readability in Portfolio component

Browse Source
This commit is contained in:
Quinta
2025-06-26 16:50:57 +02:00
parent 554bf9ba93
commit 73677afdbe
1 changed files with 105 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/page.tsx
+105 -104
View File
@@ -1,3 +1,4 @@
"use client"
import React, { useState, useEffect } from 'react'; 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'; import { Github, Linkedin, Mail, ExternalLink, ChevronDown, Code, Database, BarChart3, Globe, Award, GraduationCap, Image, ExternalLink as LinkIcon } from 'lucide-react';
@@ -123,12 +124,12 @@ const Portfolio = () => {
}; };
const ProjectGallery = ({ project, onClose }) => ( const ProjectGallery = ({ project, onClose }) => (
<div <div
className="fixed inset-0 z-50 flex items-center justify-center p-4" className="fixed inset-0 z-50 flex items-center justify-center p-4"
style={{ backgroundColor: 'rgba(46, 52, 64, 0.95)' }} style={{ backgroundColor: 'rgba(46, 52, 64, 0.95)' }}
onClick={onClose} onClick={onClose}
> >
<div <div
className="max-w-4xl w-full max-h-[90vh] overflow-y-auto rounded-lg" className="max-w-4xl w-full max-h-[90vh] overflow-y-auto rounded-lg"
style={{ backgroundColor: nordColors.bgLight }} style={{ backgroundColor: nordColors.bgLight }}
onClick={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}
@@ -143,18 +144,18 @@ const Portfolio = () => {
<span className="text-sm" style={{ color: nordColors.blue }}> <span className="text-sm" style={{ color: nordColors.blue }}>
{project.period} {project.period}
</span> </span>
<span <span
className="px-3 py-1 rounded-full text-xs" className="px-3 py-1 rounded-full text-xs"
style={{ style={{
backgroundColor: nordColors.darkBlue, backgroundColor: nordColors.darkBlue,
color: nordColors.text color: nordColors.text
}} }}
> >
{project.status} {project.status}
</span> </span>
</div> </div>
</div> </div>
<button <button
onClick={onClose} onClick={onClose}
className="text-2xl hover:opacity-70" className="text-2xl hover:opacity-70"
style={{ color: nordColors.textMuted }} style={{ color: nordColors.textMuted }}
@@ -167,8 +168,8 @@ const Portfolio = () => {
<div className="grid md:grid-cols-2 gap-4 mb-6"> <div className="grid md:grid-cols-2 gap-4 mb-6">
{project.images.map((image, idx) => ( {project.images.map((image, idx) => (
<div key={idx} className="aspect-video rounded-lg overflow-hidden"> <div key={idx} className="aspect-video rounded-lg overflow-hidden">
<img <img
src={image} src={image}
alt={`${project.title} screenshot ${idx + 1}`} alt={`${project.title} screenshot ${idx + 1}`}
className="w-full h-full object-cover" className="w-full h-full object-cover"
/> />
@@ -194,7 +195,7 @@ const Portfolio = () => {
<div className="grid md:grid-cols-2 gap-2"> <div className="grid md:grid-cols-2 gap-2">
{project.features.map((feature, idx) => ( {project.features.map((feature, idx) => (
<div key={idx} className="flex items-center"> <div key={idx} className="flex items-center">
<div <div
className="w-2 h-2 rounded-full mr-3" className="w-2 h-2 rounded-full mr-3"
style={{ backgroundColor: nordColors.accent }} style={{ backgroundColor: nordColors.accent }}
></div> ></div>
@@ -211,12 +212,12 @@ const Portfolio = () => {
</h4> </h4>
<div className="flex flex-wrap gap-2"> <div className="flex flex-wrap gap-2">
{project.tech.map((tech) => ( {project.tech.map((tech) => (
<span <span
key={tech} key={tech}
className="px-3 py-1 rounded text-sm" className="px-3 py-1 rounded text-sm"
style={{ style={{
backgroundColor: nordColors.bg, backgroundColor: nordColors.bg,
color: nordColors.accent color: nordColors.accent
}} }}
> >
{tech} {tech}
@@ -228,7 +229,7 @@ const Portfolio = () => {
{/* Links */} {/* Links */}
<div className="flex gap-4"> <div className="flex gap-4">
{project.github && ( {project.github && (
<a <a
href={project.github} href={project.github}
className="flex items-center gap-2 px-4 py-2 rounded hover:opacity-80 transition-opacity" className="flex items-center gap-2 px-4 py-2 rounded hover:opacity-80 transition-opacity"
style={{ backgroundColor: nordColors.bgLighter, color: nordColors.text }} style={{ backgroundColor: nordColors.bgLighter, color: nordColors.text }}
@@ -238,7 +239,7 @@ const Portfolio = () => {
</a> </a>
)} )}
{project.demo && ( {project.demo && (
<a <a
href={project.demo} href={project.demo}
className="flex items-center gap-2 px-4 py-2 rounded hover:opacity-80 transition-opacity" className="flex items-center gap-2 px-4 py-2 rounded hover:opacity-80 transition-opacity"
style={{ backgroundColor: nordColors.darkBlue, color: nordColors.text }} style={{ backgroundColor: nordColors.darkBlue, color: nordColors.text }}
@@ -256,7 +257,7 @@ const Portfolio = () => {
return ( return (
<div className="min-h-screen font-sans" style={{ backgroundColor: nordColors.bg, color: nordColors.text }}> <div className="min-h-screen font-sans" style={{ backgroundColor: nordColors.bg, color: nordColors.text }}>
{/* Navigation */} {/* Navigation */}
<nav <nav
className="fixed top-0 w-full z-40 transition-all duration-300" className="fixed top-0 w-full z-40 transition-all duration-300"
style={{ style={{
backgroundColor: scrolled ? 'rgba(46, 52, 64, 0.95)' : 'transparent', backgroundColor: scrolled ? 'rgba(46, 52, 64, 0.95)' : 'transparent',
@@ -275,8 +276,8 @@ const Portfolio = () => {
key={item} key={item}
onClick={() => scrollToSection(item.toLowerCase())} onClick={() => scrollToSection(item.toLowerCase())}
className="transition-colors hover:opacity-80" className="transition-colors hover:opacity-80"
style={{ style={{
color: activeSection === item.toLowerCase() ? nordColors.accent : nordColors.text color: activeSection === item.toLowerCase() ? nordColors.accent : nordColors.text
}} }}
> >
{item} {item}
@@ -302,31 +303,31 @@ const Portfolio = () => {
Passionate about the intersection of economics and technology, exploring how data and code can solve real-world problems. Passionate about the intersection of economics and technology, exploring how data and code can solve real-world problems.
</p> </p>
</div> </div>
<div className="flex justify-center space-x-6 mb-12"> <div className="flex justify-center space-x-6 mb-12">
<a <a
href="https://github.com/Quinta0" href="https://github.com/Quinta0"
className="p-3 rounded-full transition-colors hover:opacity-80" className="p-3 rounded-full transition-colors hover:opacity-80"
style={{ backgroundColor: nordColors.bgLight }} style={{ backgroundColor: nordColors.bgLight }}
> >
<Github className="w-6 h-6" style={{ color: nordColors.text }} /> <Github className="w-6 h-6" style={{ color: nordColors.text }} />
</a> </a>
<a <a
href="https://www.linkedin.com/in/pietro-quintavalle-996b96267/" href="https://www.linkedin.com/in/pietro-quintavalle-996b96267/"
className="p-3 rounded-full transition-colors hover:opacity-80" className="p-3 rounded-full transition-colors hover:opacity-80"
style={{ backgroundColor: nordColors.bgLight }} style={{ backgroundColor: nordColors.bgLight }}
> >
<Linkedin className="w-6 h-6" style={{ color: nordColors.text }} /> <Linkedin className="w-6 h-6" style={{ color: nordColors.text }} />
</a> </a>
<a <a
href="mailto:0pietroquintavalle0@gmail.com" href="mailto:0pietroquintavalle0@gmail.com"
className="p-3 rounded-full transition-colors hover:opacity-80" className="p-3 rounded-full transition-colors hover:opacity-80"
style={{ backgroundColor: nordColors.bgLight }} style={{ backgroundColor: nordColors.bgLight }}
> >
<Mail className="w-6 h-6" style={{ color: nordColors.text }} /> <Mail className="w-6 h-6" style={{ color: nordColors.text }} />
</a> </a>
<a <a
href="https://quinta0.github.io/whoami/" href="https://quinta0.github.io/whoami/"
className="p-3 rounded-full transition-colors hover:opacity-80" className="p-3 rounded-full transition-colors hover:opacity-80"
style={{ backgroundColor: nordColors.bgLight }} style={{ backgroundColor: nordColors.bgLight }}
> >
@@ -334,7 +335,7 @@ const Portfolio = () => {
</a> </a>
</div> </div>
</div> </div>
<div className="absolute bottom-8 left-1/2 transform -translate-x-1/2 animate-bounce"> <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 }} /> <ChevronDown className="w-6 h-6" style={{ color: nordColors.blue }} />
</div> </div>
@@ -346,31 +347,31 @@ const Portfolio = () => {
<h2 className="text-4xl font-bold text-center mb-16" style={{ color: nordColors.accent }}> <h2 className="text-4xl font-bold text-center mb-16" style={{ color: nordColors.accent }}>
About Me About Me
</h2> </h2>
<div className="grid md:grid-cols-2 gap-12 items-center"> <div className="grid md:grid-cols-2 gap-12 items-center">
<div> <div>
<p className="text-lg leading-relaxed mb-6" style={{ color: nordColors.text }}> <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. 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. My journey combines analytical thinking with technical skills to create meaningful solutions.
</p> </p>
<p className="text-lg leading-relaxed mb-6" style={{ color: nordColors.text }}> <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, 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. and modern web technologies like Next.js and React.
</p> </p>
<div className="flex flex-wrap gap-3"> <div className="flex flex-wrap gap-3">
<span <span
className="px-3 py-1 rounded-full text-sm" className="px-3 py-1 rounded-full text-sm"
style={{ backgroundColor: nordColors.darkBlue, color: nordColors.text }} style={{ backgroundColor: nordColors.darkBlue, color: nordColors.text }}
> >
Italian (Native) Italian (Native)
</span> </span>
<span <span
className="px-3 py-1 rounded-full text-sm" className="px-3 py-1 rounded-full text-sm"
style={{ backgroundColor: nordColors.darkBlue, color: nordColors.text }} style={{ backgroundColor: nordColors.darkBlue, color: nordColors.text }}
> >
English (C2) English (C2)
</span> </span>
<span <span
className="px-3 py-1 rounded-full text-sm" className="px-3 py-1 rounded-full text-sm"
style={{ backgroundColor: nordColors.darkBlue, color: nordColors.text }} style={{ backgroundColor: nordColors.darkBlue, color: nordColors.text }}
> >
@@ -378,15 +379,15 @@ const Portfolio = () => {
</span> </span>
</div> </div>
</div> </div>
<div className="space-y-6"> <div className="space-y-6">
{Object.entries(skills).map(([category, skillList]) => ( {Object.entries(skills).map(([category, skillList]) => (
<div <div
key={category} key={category}
className="p-6 rounded-lg border" className="p-6 rounded-lg border"
style={{ style={{
backgroundColor: nordColors.bg, backgroundColor: nordColors.bg,
borderColor: nordColors.bgLight borderColor: nordColors.bgLight
}} }}
> >
<h3 className="text-xl font-semibold mb-3" style={{ color: nordColors.blue }}> <h3 className="text-xl font-semibold mb-3" style={{ color: nordColors.blue }}>
@@ -394,12 +395,12 @@ const Portfolio = () => {
</h3> </h3>
<div className="flex flex-wrap gap-2"> <div className="flex flex-wrap gap-2">
{skillList.map((skill) => ( {skillList.map((skill) => (
<span <span
key={skill} key={skill}
className="px-3 py-1 rounded text-sm" className="px-3 py-1 rounded text-sm"
style={{ style={{
backgroundColor: nordColors.bgLighter, backgroundColor: nordColors.bgLighter,
color: nordColors.text color: nordColors.text
}} }}
> >
{skill} {skill}
@@ -419,20 +420,20 @@ const Portfolio = () => {
<h2 className="text-4xl font-bold text-center mb-16" style={{ color: nordColors.accent }}> <h2 className="text-4xl font-bold text-center mb-16" style={{ color: nordColors.accent }}>
Featured Projects Featured Projects
</h2> </h2>
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
{projects.map((project, index) => ( {projects.map((project, index) => (
<div <div
key={index} key={index}
className="p-6 rounded-lg border transition-colors hover:opacity-90 cursor-pointer" className="p-6 rounded-lg border transition-colors hover:opacity-90 cursor-pointer"
style={{ style={{
backgroundColor: nordColors.bgLight, backgroundColor: nordColors.bgLight,
borderColor: nordColors.bgLighter borderColor: nordColors.bgLighter
}} }}
onClick={() => setShowProjectGallery(project)} onClick={() => setShowProjectGallery(project)}
> >
<div className="flex items-center mb-4"> <div className="flex items-center mb-4">
<div <div
className="p-2 rounded-lg mr-3" className="p-2 rounded-lg mr-3"
style={{ backgroundColor: nordColors.darkBlue }} style={{ backgroundColor: nordColors.darkBlue }}
> >
@@ -447,19 +448,19 @@ const Portfolio = () => {
</p> </p>
</div> </div>
</div> </div>
<p className="leading-relaxed mb-4" style={{ color: nordColors.textMuted }}> <p className="leading-relaxed mb-4" style={{ color: nordColors.textMuted }}>
{project.description} {project.description}
</p> </p>
<div className="flex flex-wrap gap-2 mb-4"> <div className="flex flex-wrap gap-2 mb-4">
{project.tech.map((tech) => ( {project.tech.map((tech) => (
<span <span
key={tech} key={tech}
className="px-2 py-1 rounded text-xs" className="px-2 py-1 rounded text-xs"
style={{ style={{
backgroundColor: nordColors.bg, backgroundColor: nordColors.bg,
color: nordColors.accent color: nordColors.accent
}} }}
> >
{tech} {tech}
@@ -468,18 +469,18 @@ const Portfolio = () => {
</div> </div>
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<span <span
className="text-sm flex items-center gap-2" className="text-sm flex items-center gap-2"
style={{ color: nordColors.blue }} style={{ color: nordColors.blue }}
> >
<Image className="w-4 h-4" /> <Image className="w-4 h-4" />
View Gallery View Gallery
</span> </span>
<span <span
className="px-2 py-1 rounded text-xs" className="px-2 py-1 rounded text-xs"
style={{ style={{
backgroundColor: nordColors.darkBlue, backgroundColor: nordColors.darkBlue,
color: nordColors.text color: nordColors.text
}} }}
> >
{project.status} {project.status}
@@ -497,7 +498,7 @@ const Portfolio = () => {
<h2 className="text-4xl font-bold text-center mb-16" style={{ color: nordColors.accent }}> <h2 className="text-4xl font-bold text-center mb-16" style={{ color: nordColors.accent }}>
Education & Certifications Education & Certifications
</h2> </h2>
<div className="grid md:grid-cols-2 gap-12"> <div className="grid md:grid-cols-2 gap-12">
{/* Education */} {/* Education */}
<div> <div>
@@ -505,15 +506,15 @@ const Portfolio = () => {
<GraduationCap className="w-6 h-6 mr-2" /> <GraduationCap className="w-6 h-6 mr-2" />
Education Education
</h3> </h3>
<div className="space-y-6"> <div className="space-y-6">
{education.map((edu, index) => ( {education.map((edu, index) => (
<div <div
key={index} key={index}
className="p-6 rounded-lg border" className="p-6 rounded-lg border"
style={{ style={{
backgroundColor: nordColors.bg, backgroundColor: nordColors.bg,
borderColor: nordColors.bgLight borderColor: nordColors.bgLight
}} }}
> >
<h4 className="text-lg font-semibold mb-2" style={{ color: nordColors.text }}> <h4 className="text-lg font-semibold mb-2" style={{ color: nordColors.text }}>
@@ -526,7 +527,7 @@ const Portfolio = () => {
<span className="text-sm" style={{ color: nordColors.textMuted }}> <span className="text-sm" style={{ color: nordColors.textMuted }}>
{edu.period} {edu.period}
</span> </span>
<span <span
className="px-2 py-1 rounded text-xs" className="px-2 py-1 rounded text-xs"
style={{ backgroundColor: nordColors.darkBlue, color: nordColors.text }} style={{ backgroundColor: nordColors.darkBlue, color: nordColors.text }}
> >
@@ -537,25 +538,25 @@ const Portfolio = () => {
))} ))}
</div> </div>
</div> </div>
{/* Certificates */} {/* Certificates */}
<div> <div>
<h3 className="text-2xl font-semibold mb-8 flex items-center" style={{ color: nordColors.blue }}> <h3 className="text-2xl font-semibold mb-8 flex items-center" style={{ color: nordColors.blue }}>
<Award className="w-6 h-6 mr-2" /> <Award className="w-6 h-6 mr-2" />
Certifications Certifications
</h3> </h3>
<div className="space-y-4"> <div className="space-y-4">
{certificates.map((cert, index) => ( {certificates.map((cert, index) => (
<div <div
key={index} key={index}
className="p-4 rounded-lg border flex items-center" className="p-4 rounded-lg border flex items-center"
style={{ style={{
backgroundColor: nordColors.bg, backgroundColor: nordColors.bg,
borderColor: nordColors.bgLight borderColor: nordColors.bgLight
}} }}
> >
<div <div
className="w-2 h-2 rounded-full mr-4" className="w-2 h-2 rounded-full mr-4"
style={{ backgroundColor: nordColors.accent }} style={{ backgroundColor: nordColors.accent }}
></div> ></div>
@@ -563,12 +564,12 @@ const Portfolio = () => {
</div> </div>
))} ))}
</div> </div>
<div <div
className="mt-8 p-6 rounded-lg border" className="mt-8 p-6 rounded-lg border"
style={{ style={{
backgroundColor: nordColors.bg, backgroundColor: nordColors.bg,
borderColor: nordColors.bgLight borderColor: nordColors.bgLight
}} }}
> >
<h4 className="text-lg font-semibold mb-3" style={{ color: nordColors.blue }}> <h4 className="text-lg font-semibold mb-3" style={{ color: nordColors.blue }}>
@@ -576,12 +577,12 @@ const Portfolio = () => {
</h4> </h4>
<div className="flex flex-wrap gap-2"> <div className="flex flex-wrap gap-2">
{['Computer Hardware', 'Web Development', 'Finance', 'Economics', 'Literature'].map((interest) => ( {['Computer Hardware', 'Web Development', 'Finance', 'Economics', 'Literature'].map((interest) => (
<span <span
key={interest} key={interest}
className="px-3 py-1 rounded text-sm" className="px-3 py-1 rounded text-sm"
style={{ style={{
backgroundColor: nordColors.bgLighter, backgroundColor: nordColors.bgLighter,
color: nordColors.text color: nordColors.text
}} }}
> >
{interest} {interest}
@@ -603,10 +604,10 @@ const Portfolio = () => {
<p className="text-lg mb-12 max-w-2xl mx-auto" style={{ color: nordColors.textMuted }}> <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. I'm always interested in discussing new opportunities, collaborations, or just having a chat about technology and economics.
</p> </p>
<div className="grid md:grid-cols-3 gap-8 mb-12"> <div className="grid md:grid-cols-3 gap-8 mb-12">
<a <a
href="mailto:0pietroquintavalle0@gmail.com" href="mailto:0pietroquintavalle0@gmail.com"
className="p-6 rounded-lg transition-colors hover:opacity-80 group" className="p-6 rounded-lg transition-colors hover:opacity-80 group"
style={{ backgroundColor: nordColors.bgLight }} style={{ backgroundColor: nordColors.bgLight }}
> >
@@ -614,9 +615,9 @@ const Portfolio = () => {
<h3 className="text-lg font-semibold mb-2" style={{ color: nordColors.text }}>Email</h3> <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> <p className="text-sm" style={{ color: nordColors.textMuted }}>Drop me a line</p>
</a> </a>
<a <a
href="https://www.linkedin.com/in/pietro-quintavalle-996b96267/" href="https://www.linkedin.com/in/pietro-quintavalle-996b96267/"
className="p-6 rounded-lg transition-colors hover:opacity-80 group" className="p-6 rounded-lg transition-colors hover:opacity-80 group"
style={{ backgroundColor: nordColors.bgLight }} style={{ backgroundColor: nordColors.bgLight }}
> >
@@ -624,9 +625,9 @@ const Portfolio = () => {
<h3 className="text-lg font-semibold mb-2" style={{ color: nordColors.text }}>LinkedIn</h3> <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> <p className="text-sm" style={{ color: nordColors.textMuted }}>Let's connect professionally</p>
</a> </a>
<a <a
href="https://github.com/Quinta0" href="https://github.com/Quinta0"
className="p-6 rounded-lg transition-colors hover:opacity-80 group" className="p-6 rounded-lg transition-colors hover:opacity-80 group"
style={{ backgroundColor: nordColors.bgLight }} style={{ backgroundColor: nordColors.bgLight }}
> >
@@ -649,9 +650,9 @@ const Portfolio = () => {
{/* Project Gallery Modal */} {/* Project Gallery Modal */}
{showProjectGallery && ( {showProjectGallery && (
<ProjectGallery <ProjectGallery
project={showProjectGallery} project={showProjectGallery}
onClose={() => setShowProjectGallery(false)} onClose={() => setShowProjectGallery(false)}
/> />
)} )}
</div> </div>