init project files
This commit is contained in:
!verity
43
components/layout/Footer.module.scss
Normal file
43
components/layout/Footer.module.scss
Normal file
@@ -0,0 +1,43 @@
|
||||
.footer {
|
||||
border-top: 1px solid var(--border);
|
||||
background: var(--bg-2);
|
||||
}
|
||||
|
||||
.container {
|
||||
@include container;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-block: 1.25rem;
|
||||
}
|
||||
|
||||
.copy {
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-3);
|
||||
}
|
||||
|
||||
.links {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.footerLink {
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-3);
|
||||
transition: color var(--transition);
|
||||
|
||||
&:hover {
|
||||
color: var(--accent);
|
||||
}
|
||||
}
|
||||
|
||||
.back {
|
||||
font-size: 1.25rem;
|
||||
color: var(--text-2);
|
||||
transition: color var(--transition);
|
||||
|
||||
&:hover {
|
||||
color: var(--accent);
|
||||
}
|
||||
}
|
||||
23
components/layout/Footer.tsx
Normal file
23
components/layout/Footer.tsx
Normal file
@@ -0,0 +1,23 @@
|
||||
import { personal } from '@/content/personal';
|
||||
import styles from './Footer.module.scss';
|
||||
|
||||
export default function Footer() {
|
||||
return (
|
||||
<footer className={styles.footer}>
|
||||
<div className={styles.container}>
|
||||
<p className={styles.copy}>
|
||||
© {new Date().getFullYear()} {personal.name}
|
||||
</p>
|
||||
<div className={styles.links}>
|
||||
<a href={personal.social.github} target="_blank" rel="noopener noreferrer" className={styles.footerLink} aria-label="GitHub">
|
||||
GitHub
|
||||
</a>
|
||||
<a href={`mailto:${personal.email}`} className={styles.footerLink}>
|
||||
Contact
|
||||
</a>
|
||||
<a href="#home" className={styles.back} aria-label="Back to top">↑</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
144
components/layout/Header.module.scss
Normal file
144
components/layout/Header.module.scss
Normal file
@@ -0,0 +1,144 @@
|
||||
.header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 100;
|
||||
background: var(--bg);
|
||||
border-bottom: 1px solid var(--border);
|
||||
transition: box-shadow var(--transition);
|
||||
}
|
||||
|
||||
.scrolled {
|
||||
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.container {
|
||||
@include container;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-family: $font-display;
|
||||
font-weight: 700;
|
||||
font-size: 1.125rem;
|
||||
letter-spacing: 0.02em;
|
||||
color: var(--accent);
|
||||
transition: opacity var(--transition);
|
||||
|
||||
&:hover {
|
||||
opacity: 0.85;
|
||||
}
|
||||
}
|
||||
|
||||
.nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2rem;
|
||||
|
||||
@include respond(md) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.navLink {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
color: var(--text-2);
|
||||
position: relative;
|
||||
padding-bottom: 2px;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: var(--accent);
|
||||
transform: scaleX(0);
|
||||
transform-origin: right;
|
||||
transition: transform 0.25s ease;
|
||||
border-radius: 1px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--text);
|
||||
|
||||
&::after {
|
||||
transform: scaleX(1);
|
||||
transform-origin: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hamburger {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 5px;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
background: none;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
color: var(--text);
|
||||
|
||||
@include respond(md) {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--bg-2);
|
||||
}
|
||||
|
||||
span {
|
||||
display: block;
|
||||
width: 20px;
|
||||
height: 2px;
|
||||
background: currentColor;
|
||||
border-radius: 2px;
|
||||
transition: transform 0.25s ease, opacity 0.25s ease;
|
||||
}
|
||||
}
|
||||
|
||||
.open span:nth-child(1) {
|
||||
transform: translateY(7px) rotate(45deg);
|
||||
}
|
||||
|
||||
.open span:nth-child(2) {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.open span:nth-child(3) {
|
||||
transform: translateY(-7px) rotate(-45deg);
|
||||
}
|
||||
|
||||
.mobileMenu {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 0.5rem 0 1rem;
|
||||
background: var(--bg);
|
||||
border-bottom: 1px solid var(--border);
|
||||
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.mobileLink {
|
||||
display: block;
|
||||
padding: 0.75rem clamp(1.25rem, 5vw, 2.5rem);
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
color: var(--text-2);
|
||||
transition: color var(--transition), background var(--transition);
|
||||
|
||||
&:hover {
|
||||
color: var(--accent);
|
||||
background: var(--bg-2);
|
||||
}
|
||||
}
|
||||
71
components/layout/Header.tsx
Normal file
71
components/layout/Header.tsx
Normal file
@@ -0,0 +1,71 @@
|
||||
'use client';
|
||||
import { useEffect, useState } from 'react';
|
||||
import Link from 'next/link';
|
||||
import { personal } from '@/content/personal';
|
||||
import styles from './Header.module.scss';
|
||||
|
||||
const navLinks = [
|
||||
{ label: 'Home', href: '#home' },
|
||||
{ label: 'Tech', href: '#tech' },
|
||||
{ label: 'Projects', href: '#projects' },
|
||||
{ label: 'About', href: '#about' },
|
||||
{ label: 'Experience', href: '#experience' },
|
||||
{ label: 'Contact', href: '#contact' },
|
||||
];
|
||||
|
||||
export default function Header() {
|
||||
const [scrolled, setScrolled] = useState(false);
|
||||
const [menuOpen, setMenuOpen] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const fn = () => setScrolled(window.scrollY > 80);
|
||||
window.addEventListener('scroll', fn);
|
||||
return () => window.removeEventListener('scroll', fn);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<header className={`${styles.header} ${scrolled ? styles.scrolled : ''}`}>
|
||||
<div className={styles.container}>
|
||||
<Link href="#home" className={styles.logo}>
|
||||
Ole Sch.
|
||||
</Link>
|
||||
|
||||
{/* Desktop Nav */}
|
||||
<nav className={styles.nav} aria-label="Main navigation">
|
||||
{navLinks.map(link => (
|
||||
<a key={link.label} href={link.href} className={styles.navLink}>
|
||||
{link.label}
|
||||
</a>
|
||||
))}
|
||||
</nav>
|
||||
|
||||
{/* Hamburger */}
|
||||
<button
|
||||
className={`${styles.hamburger} ${menuOpen ? styles.open : ''}`}
|
||||
onClick={() => setMenuOpen(v => !v)}
|
||||
aria-label="Toggle menu"
|
||||
aria-expanded={menuOpen}
|
||||
>
|
||||
<span /><span /><span />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Mobile Menu */}
|
||||
{menuOpen && (
|
||||
<nav className={styles.mobileMenu} aria-label="Mobile navigation">
|
||||
{navLinks.map((link, i) => (
|
||||
<a
|
||||
key={link.label}
|
||||
href={link.href}
|
||||
className={styles.mobileLink}
|
||||
onClick={() => setMenuOpen(false)}
|
||||
style={{ animationDelay: `${i * 0.05}s` }}
|
||||
>
|
||||
{link.label}
|
||||
</a>
|
||||
))}
|
||||
</nav>
|
||||
)}
|
||||
</header>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user