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

fixed nav

Browse Source
This commit is contained in:
Quinta
2026-07-23 18:42:29 +02:00
parent d056462f81
commit 25dfe21097
3 changed files with 48 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/globals.css
+24 -23
View File
@@ -24,6 +24,7 @@
--f-head:'Archivo',sans-serif; --f-head:'Archivo',sans-serif;
--f-body:'Inter',sans-serif; --f-body:'Inter',sans-serif;
--f-mono:'IBM Plex Mono',monospace; --f-mono:'IBM Plex Mono',monospace;
--f-wordmark:'Fraunces','Georgia',serif;
} }
html{scroll-behavior:smooth} html{scroll-behavior:smooth}
body{ body{
@@ -59,24 +60,22 @@ nav.nav-scrolled{
max-width:var(--container);margin:0 auto; max-width:var(--container);margin:0 auto;
padding:0 var(--pad); padding:0 var(--pad);
height:64px; height:64px;
display:flex;align-items:center;justify-content:space-between; display:flex;align-items:center;gap:24px;
} }
.nav-logo-wrap{ .nav-logo-wrap{
display:flex;align-items:center;gap:9px; display:flex;align-items:center;
text-decoration:none;color:var(--navy); text-decoration:none;color:var(--navy);
flex-shrink:0;
height:64px;
} }
.nav-logosvg{width:24px;height:24px} .nav-mark{
.nav-name{ font-family:var(--f-wordmark);
font-family:var(--f-head); font-size:26px;font-weight:600;font-style:italic;
font-size:15px;font-weight:700;
letter-spacing:-.01em; letter-spacing:-.01em;
color:var(--navy);
} }
.nav-name sup{ .nav-mark em{color:var(--navy2);font-style:italic}
font-size:8px;font-weight:500; .nav-links{display:flex;align-items:center;justify-content:center;gap:4px;flex:1}
opacity:.55;vertical-align:super;
letter-spacing:.06em;font-family:var(--f-mono);
}
.nav-links{display:flex;align-items:center;gap:4px}
.nav-links a{ .nav-links a{
display:flex;align-items:center; display:flex;align-items:center;
padding:8px 14px; padding:8px 14px;
@@ -85,20 +84,23 @@ nav.nav-scrolled{
transition:color .15s,background .15s; transition:color .15s,background .15s;
font-weight:500;letter-spacing:.03em; font-weight:500;letter-spacing:.03em;
font-family:var(--f-mono);text-transform:uppercase; font-family:var(--f-mono);text-transform:uppercase;
white-space:nowrap;
} }
.nav-links a:hover{color:var(--navy2);background:var(--stone3)} .nav-links a:hover{color:var(--navy2);background:var(--stone3)}
.nav-socials{display:flex;align-items:center;gap:4px;margin-left:8px;padding-left:14px;border-left:1px solid var(--line)} .nav-right{display:flex;align-items:center;gap:10px;flex-shrink:0}
.nav-socials{display:flex;align-items:center;gap:8px}
.nav-socials a{ .nav-socials a{
display:flex;align-items:center;justify-content:center; display:flex;align-items:center;justify-content:center;
width:32px;height:32px; width:38px;height:38px;
color:var(--mid);text-decoration:none; border:1px solid var(--line);
transition:color .15s,background .15s; color:var(--navy);text-decoration:none;
transition:color .15s,background .15s,border-color .15s;
} }
.nav-socials a:hover{color:var(--navy2);background:var(--stone3)} .nav-socials a:hover{color:var(--navy2);border-color:var(--navy);background:var(--stone3)}
.nav-socials svg{width:15px;height:15px;fill:currentColor} .nav-socials svg{width:18px;height:18px;fill:currentColor}
.nav-burger{ .nav-burger{
display:none;flex-direction:column;justify-content:center;gap:4px; display:none;flex-direction:column;justify-content:center;gap:4px;
width:36px;height:36px;background:transparent;border:1px solid var(--line3); width:38px;height:38px;background:transparent;border:1px solid var(--line3);
cursor:pointer;flex-shrink:0; cursor:pointer;flex-shrink:0;
} }
.nav-burger span{display:block;width:15px;height:1.5px;background:var(--navy);margin:0 auto;transition:transform .2s,opacity .2s} .nav-burger span{display:block;width:15px;height:1.5px;background:var(--navy);margin:0 auto;transition:transform .2s,opacity .2s}
@@ -552,16 +554,15 @@ footer a:hover{color:var(--navy2)}
} }
@media(max-width:820px){ @media(max-width:820px){
.nav-links{ .nav-links{
position:fixed;top:64px;left:0;right:0;bottom:0; position:absolute;top:64px;left:0;right:0;height:calc(100vh - 64px);height:calc(100dvh - 64px);
background:rgba(247,246,241,.98);backdrop-filter:blur(16px); background:rgba(247,246,241,.98);backdrop-filter:blur(16px);
flex-direction:column;align-items:stretch;gap:2px; flex-direction:column;align-items:stretch;justify-content:flex-start;gap:2px;
padding:16px; padding:16px;overflow-y:auto;
transform:translateY(-8px);opacity:0;pointer-events:none; transform:translateY(-8px);opacity:0;pointer-events:none;
transition:opacity .2s ease,transform .2s ease; transition:opacity .2s ease,transform .2s ease;
} }
nav.nav-open .nav-links{opacity:1;transform:translateY(0);pointer-events:auto} nav.nav-open .nav-links{opacity:1;transform:translateY(0);pointer-events:auto}
.nav-links a{padding:14px 16px;font-size:14px} .nav-links a{padding:14px 16px;font-size:14px}
.nav-socials{margin:10px 0 0;padding:14px 16px 0;border-left:none;border-top:1px solid var(--line);justify-content:flex-start}
.nav-burger{display:flex} .nav-burger{display:flex}
.category-row,.detail-row,.repo-row{grid-template-columns:1fr;gap:8px} .category-row,.detail-row,.repo-row{grid-template-columns:1fr;gap:8px}
.repo-meta{justify-content:flex-start} .repo-meta{justify-content:flex-start}
app/layout.tsx
+1 -1
View File
@@ -21,7 +21,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
<meta name="theme-color" content="#FAF9F5" /> <meta name="theme-color" content="#FAF9F5" />
<link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
<link href="https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700&family=IBM+Plex+Mono:wght@400;500&family=Inter:ital,wght@0,400;0,500;1,400&display=swap" rel="stylesheet" /> <link href="https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700&family=IBM+Plex+Mono:wght@400;500&family=Inter:ital,wght@0,400;0,500;1,400&family=Fraunces:ital,wght@1,600&display=swap" rel="stylesheet" />
</head> </head>
<body>{children}</body> <body>{children}</body>
</html> </html>
app/page.tsx
+23 -26
View File
@@ -76,33 +76,30 @@ export default function Home() {
<nav className={mobileOpen ? 'nav-open' : ''}> <nav className={mobileOpen ? 'nav-open' : ''}>
<div className="nav-bar"> <div className="nav-bar">
<a href="#" className="nav-logo-wrap"> <a href="#" className="nav-logo-wrap">
<svg className="nav-logosvg" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg"> <span className="nav-mark">P<em>Q</em></span>
<rect width="22" height="22" rx="4" fill="#111110"/>
<path d="M5 8L11 5.5L17 8V12.8C17 16.5 11 20 11 20C11 20 5 16.5 5 12.8V8Z" stroke="#C1121F" strokeWidth="1.3"/>
<path d="M9 11.8L10.8 13.5L14 9.5" stroke="#C1121F" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
<span className="nav-name">Pietro<sup>DEV</sup></span>
</a> </a>
<button className="nav-burger" aria-label="Toggle menu" aria-expanded={mobileOpen} onClick={() => setMobileOpen(o => !o)}> <div className="nav-links">
<span></span><span></span><span></span> <a href="#skills" onClick={closeMobile}>Skills</a>
</button> <a href="#homelab" onClick={closeMobile}>Homelab</a>
</div> <a href="#desktop" onClick={closeMobile}>Desktop</a>
<div className="nav-links"> <a href="#projects" onClick={closeMobile}>Projects</a>
<a href="#skills" onClick={closeMobile}>Skills</a> <a href="#oss" onClick={closeMobile}>Open Source</a>
<a href="#homelab" onClick={closeMobile}>Homelab</a> <a href="#github" onClick={closeMobile}>GitHub</a>
<a href="#desktop" onClick={closeMobile}>Desktop</a> <a href="#experience" onClick={closeMobile}>Experience</a>
<a href="#projects" onClick={closeMobile}>Projects</a> <a href="#contact" onClick={closeMobile}>Contact</a>
<a href="#oss" onClick={closeMobile}>Open Source</a> </div>
<a href="#github" onClick={closeMobile}>GitHub</a> <div className="nav-right">
<a href="#experience" onClick={closeMobile}>Experience</a> <div className="nav-socials">
<a href="#contact" onClick={closeMobile}>Contact</a> <a href="https://github.com/Quinta0" target="_blank" rel="noopener" title="GitHub">
<div className="nav-socials"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12c0 4.42 2.87 8.17 6.84 9.49.5.09.68-.22.68-.48v-1.69C6.72 19.9 6.14 18 6.14 18c-.46-1.16-1.11-1.47-1.11-1.47-.91-.62.07-.61.07-.61 1 .07 1.53 1.03 1.53 1.03.89 1.52 2.34 1.08 2.91.83.09-.65.35-1.08.63-1.33-2.22-.25-4.56-1.11-4.56-4.95 0-1.09.39-1.98 1.03-2.68-.1-.26-.45-1.27.1-2.64 0 0 .84-.27 2.75 1.02A9.56 9.56 0 0 1 12 7.8c.85.004 1.71.115 2.51.337 1.91-1.29 2.75-1.02 2.75-1.02.55 1.37.2 2.38.1 2.64.64.7 1.03 1.59 1.03 2.68 0 3.85-2.34 4.7-4.57 4.95.36.31.68.92.68 1.85v2.74c0 .27.18.58.69.48A10.01 10.01 0 0 0 22 12c0-5.52-4.48-10-10-10Z"/></svg>
<a href="https://github.com/Quinta0" target="_blank" rel="noopener" title="GitHub"> </a>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12c0 4.42 2.87 8.17 6.84 9.49.5.09.68-.22.68-.48v-1.69C6.72 19.9 6.14 18 6.14 18c-.46-1.16-1.11-1.47-1.11-1.47-.91-.62.07-.61.07-.61 1 .07 1.53 1.03 1.53 1.03.89 1.52 2.34 1.08 2.91.83.09-.65.35-1.08.63-1.33-2.22-.25-4.56-1.11-4.56-4.95 0-1.09.39-1.98 1.03-2.68-.1-.26-.45-1.27.1-2.64 0 0 .84-.27 2.75 1.02A9.56 9.56 0 0 1 12 7.8c.85.004 1.71.115 2.51.337 1.91-1.29 2.75-1.02 2.75-1.02.55 1.37.2 2.38.1 2.64.64.7 1.03 1.59 1.03 2.68 0 3.85-2.34 4.7-4.57 4.95.36.31.68.92.68 1.85v2.74c0 .27.18.58.69.48A10.01 10.01 0 0 0 22 12c0-5.52-4.48-10-10-10Z"/></svg> <a href="https://www.linkedin.com/in/pietro-quintavalle-996b96267/" target="_blank" rel="noopener" title="LinkedIn">
</a> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14m-.5 15.5v-5.3a3.26 3.26 0 0 0-3.26-3.26c-.85 0-1.84.52-2.32 1.3v-1.11h-2.79v8.37h2.79v-4.93c0-.77.62-1.4 1.39-1.4a1.4 1.4 0 0 1 1.4 1.4v4.93h2.79M6.88 8.56a1.68 1.68 0 0 0 1.68-1.68c0-.93-.75-1.69-1.68-1.69a1.69 1.69 0 0 0-1.69 1.69c0 .93.76 1.68 1.69 1.68m1.39 9.94v-8.37H5.5v8.37h2.77Z"/></svg>
<a href="https://www.linkedin.com/in/pietro-quintavalle-996b96267/" target="_blank" rel="noopener" title="LinkedIn"> </a>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14m-.5 15.5v-5.3a3.26 3.26 0 0 0-3.26-3.26c-.85 0-1.84.52-2.32 1.3v-1.11h-2.79v8.37h2.79v-4.93c0-.77.62-1.4 1.39-1.4a1.4 1.4 0 0 1 1.4 1.4v4.93h2.79M6.88 8.56a1.68 1.68 0 0 0 1.68-1.68c0-.93-.75-1.69-1.68-1.69a1.69 1.69 0 0 0-1.69 1.69c0 .93.76 1.68 1.69 1.68m1.39 9.94v-8.37H5.5v8.37h2.77Z"/></svg> </div>
</a> <button className="nav-burger" aria-label="Toggle menu" aria-expanded={mobileOpen} onClick={() => setMobileOpen(o => !o)}>
<span></span><span></span><span></span>
</button>
</div> </div>
</div> </div>
</nav> </nav>