diff --git a/app/globals.css b/app/globals.css index 3331c23..15b0230 100644 --- a/app/globals.css +++ b/app/globals.css @@ -2,34 +2,40 @@ @tailwind components; @tailwind utilities; -/* Nord theme custom styles */ +/* Import modern fonts */ +@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap'); + +/* Modern theme custom styles */ :root { - --nord-bg: #2E3440; - --nord-bg-light: #3B4252; - --nord-bg-lighter: #434C5E; - --nord-text: #D8DEE9; - --nord-text-muted: rgba(216, 222, 233, 0.6); - --nord-accent: #88C0D0; - --nord-blue: #81A1C1; - --nord-dark-blue: #5E81AC; + --modern-bg: #0A0E27; + --modern-bg-light: #1A1F3A; + --modern-bg-card: #151932; + --modern-bg-hover: #1F2544; + --modern-text: #E4E9F7; + --modern-text-muted: #9CA3C3; + --modern-primary: #6C5CE7; + --modern-secondary: #00D4FF; + --modern-accent: #FF6B9D; + --modern-success: #00E676; + --modern-warning: #FFB800; } -/* Custom scrollbar for Nord theme */ +/* Custom scrollbar for modern theme */ ::-webkit-scrollbar { - width: 8px; + width: 10px; } ::-webkit-scrollbar-track { - background: var(--nord-bg); + background: var(--modern-bg); } ::-webkit-scrollbar-thumb { - background: var(--nord-bg-lighter); - border-radius: 4px; + background: linear-gradient(135deg, #6C5CE7 0%, #00D4FF 100%); + border-radius: 5px; } ::-webkit-scrollbar-thumb:hover { - background: var(--nord-dark-blue); + background: linear-gradient(135deg, #5B4BD6 0%, #00B8E6 100%); } /* Smooth scrolling */ @@ -45,12 +51,23 @@ html { } body { - background-color: var(--nord-bg); - color: var(--nord-text); - font-family: system-ui, -apple-system, sans-serif; + background-color: var(--modern-bg); + color: var(--modern-text); + font-family: 'Inter', system-ui, -apple-system, sans-serif; line-height: 1.6; } +/* Typography */ +h1, h2, h3, h4, h5, h6 { + font-family: 'Space Grotesk', sans-serif; + font-weight: 700; + letter-spacing: -0.02em; +} + +code, pre { + font-family: 'JetBrains Mono', monospace; +} + /* Custom animations */ @keyframes fadeInUp { from { @@ -63,25 +80,70 @@ body { } } +@keyframes gradientShift { + 0% { + background-position: 0% 50%; + } + 50% { + background-position: 100% 50%; + } + 100% { + background-position: 0% 50%; + } +} + +@keyframes glow { + 0%, 100% { + box-shadow: 0 0 20px rgba(108, 92, 231, 0.3); + } + 50% { + box-shadow: 0 0 40px rgba(108, 92, 231, 0.6); + } +} + .animate-fadeInUp { animation: fadeInUp 0.6s ease-out; } -/* Utility classes for Nord theme */ -.nord-bg { - background-color: var(--nord-bg); +.animate-gradient { + background-size: 200% 200%; + animation: gradientShift 3s ease infinite; } -.nord-bg-light { - background-color: var(--nord-bg-light); +.animate-glow { + animation: glow 2s ease-in-out infinite; } -.nord-text { - color: var(--nord-text); +/* Utility classes for modern theme */ +.modern-bg { + background-color: var(--modern-bg); } -.nord-accent { - color: var(--nord-accent); +.modern-bg-light { + background-color: var(--modern-bg-light); +} + +.modern-text { + color: var(--modern-text); +} + +.modern-accent { + color: var(--modern-primary); +} + +/* Gradient text effect */ +.gradient-text { + background: linear-gradient(135deg, #6C5CE7 0%, #00D4FF 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +/* Glassmorphism effect */ +.glass { + background: rgba(26, 31, 58, 0.6); + backdrop-filter: blur(10px); + border: 1px solid rgba(228, 233, 247, 0.1); } diff --git a/app/layout.tsx b/app/layout.tsx index 82f00bb..328bfe8 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -27,6 +27,10 @@ export default function RootLayout({ }) { return ( + + + + {children} ) diff --git a/app/page.tsx b/app/page.tsx index 6e3f335..c23b3bf 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,41 +1,71 @@ "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 } from 'lucide-react'; -import { - Timeline, - TimelineContent, - TimelineDate, - TimelineHeader, - TimelineIndicator, - TimelineItem, - TimelineSeparator, - TimelineTitle, -} from "@/components/ui/timeline" +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(null); + const [isDarkMode, setIsDarkMode] = useState(true); - // 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' + // 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); @@ -173,11 +203,11 @@ const Portfolio = () => { const education = [ { id: 1, - 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.' + 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, @@ -189,11 +219,11 @@ const Portfolio = () => { }, { id: 3, - 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.' + 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.' } ]; @@ -215,39 +245,43 @@ const Portfolio = () => { const ProjectGallery: React.FC = ({ project, onClose }) => (
e.stopPropagation()} > -
+
-

+

{project.title}

-
- +
+ {project.period} {project.status} {project.category} @@ -256,8 +290,8 @@ const Portfolio = () => {
@@ -267,7 +301,7 @@ const Portfolio = () => { {project.images && project.images.length > 0 ? (
{project.images.map((image, idx) => ( -
+
{`${project.title} {
) : (
-
+
{project.icon}
-

+

Infrastructure/Hardware Project - No visual interface

@@ -295,27 +329,27 @@ const Portfolio = () => { {/* Description */}
-

+

About This Project

-

+

{project.description}

{/* Features */}
-

+

Key Features

-
+
{project.features.map((feature, idx) => (
- {feature} + {feature}
))}
@@ -323,17 +357,18 @@ const Portfolio = () => { {/* Tech Stack */}
-

+

Technology Stack

{project.tech.map((tech) => ( {tech} @@ -347,20 +382,20 @@ const Portfolio = () => { {project.github && ( - + View Code )} {project.demo && ( - + Live Demo )} @@ -371,131 +406,173 @@ const Portfolio = () => { ); return ( -
+
+ {/* Animated background gradient */} +
+
+
+
+
+ {/* Navigation */} {/* Hero Section */} -
-
-
-

- Pietro - Quintavalle +
+
+
+

+ Pietro +
+ Quintavalle

-
+
IT Systems Engineer • Economics Student • Infrastructure Specialist
-

+

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.

-
- +
{/* About Section */} -
+
-

+

About Me

-

+

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.

-

+

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.

-

+

Currently pursuing Economics at USI while continuing to deliver scalable, secure, and high-availability infrastructure solutions to clients.

🇮🇹 Italian (Native) 🇺🇸 English (Fluent) 🇩🇪 German (Conversational) 📍 Switzerland 🇨🇭 @@ -506,23 +583,25 @@ const Portfolio = () => { {Object.entries(skills).map(([category, skillList]) => (
-

+

{category}

{skillList.map((skill) => ( {skill} @@ -539,7 +618,7 @@ const Portfolio = () => { {/* Experience Section */}
-

+

Professional Experience

@@ -547,56 +626,61 @@ const Portfolio = () => { {experience.map((exp, index) => (
-
+
- +
-

+

{exp.title}

-
- +
+ {exp.company} - + {exp.location}
-
+
{exp.period}
-

+

{exp.description}

-

+

Key Achievements:

-
+
{exp.achievements.map((achievement, idx) => ( -
+
- {achievement} + {achievement}
))}
@@ -608,9 +692,9 @@ const Portfolio = () => {
{/* Projects Section */} -
+
-

+

Featured Projects

@@ -618,33 +702,34 @@ const Portfolio = () => { {projects.map((project, index) => (
setShowProjectGallery(project)} >
{project.icon}
-

+

{project.title}

-

+

{project.period}

{project.category} @@ -653,18 +738,19 @@ const Portfolio = () => {
-

+

{project.description}

-
+
{project.tech.slice(0, 3).map((tech) => ( {tech} @@ -672,10 +758,10 @@ const Portfolio = () => { ))} {project.tech.length > 3 && ( +{project.tech.length - 3} more @@ -685,18 +771,18 @@ const Portfolio = () => {
View Details {project.status} @@ -711,15 +797,15 @@ const Portfolio = () => { {/* Education & Certificates Section */}
-

+

Education & Certifications

{/* Education Timeline */}
-

- +

+ Education Timeline

@@ -727,25 +813,25 @@ const Portfolio = () => { {/* Timeline Line */}
{education.map((edu, index) => ( -
+
{/* Timeline Indicator */}
@@ -753,26 +839,27 @@ const Portfolio = () => { {/* Timeline Content */}
-

+

{edu.degree}

-

+

{edu.institution}

{edu.status} @@ -780,12 +867,12 @@ const Portfolio = () => {
{edu.description && ( -

+

{edu.description}

)} -
+
@@ -800,8 +887,8 @@ const Portfolio = () => { {/* Certificates */}
-

- +

+ Certifications

@@ -809,39 +896,72 @@ const Portfolio = () => { {certificates.map((cert, index) => (
- {cert} + {cert}
))}

-

+

+ 🎨 + Self-Learning & Hobbies +

+
+
+
+
+

+ CAD Design & 3D Printing +

+

+ Learning CAD via Fusion 360 for 3D design and printing projects as a creative hobby +

+
+
+
+
+ +
+

Interests & Specialties

- {['Computer Hardware', 'Economics & Finance', 'Web Development', 'Literature', 'Photography', 'Virtualization', 'Network Security'].map((interest) => ( + {['Computer Hardware', 'Economics & Finance', 'Web Development', 'CAD & 3D Design', '3D Printing', 'Literature', 'Photography', 'Virtualization', 'Network Security'].map((interest) => ( {interest} @@ -857,100 +977,82 @@ const Portfolio = () => {

{/* Contact Section */} -
+
-

+

Let's Connect

-

+

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.

-
{/* Footer */} -