30 lines
2.2 KiB
JavaScript
30 lines
2.2 KiB
JavaScript
import Link from "next/link";
|
||
export const metadata = {title: "About"};
|
||
const timeline = [
|
||
{year: "2018", title: "The first spark", text: "I discovered programming through Scratch, turning small ideas into simple, playable games.", skills: ["Scratch", "Game logic"]},
|
||
{year: "2022", title: "Into the web", text: "I began building websites and learned the foundations of HTML, CSS, and accessible interface design.", skills: ["HTML", "CSS", "JavaScript"]},
|
||
{year: "2022", title: "From screen to hardware", text: "A Raspberry Pi opened the door to Python scripting, Linux, and the fun of connecting software with real hardware.", skills: ["Python", "Linux", "Raspberry Pi"]},
|
||
{year: "2024", title: "Full stack & beyond", text: "I expanded into databases, backend systems, Java, and larger projects—while continuing to sharpen my eye for frontend craft.", skills: ["SQL", "Python", "Java", "JavaScript"]},
|
||
];
|
||
export default function About() {
|
||
return (<>
|
||
<header className="page-head"><div className="shell page-head-row">
|
||
<div><p className="eyebrow">About me</p><h1 className="page-title">Always<br/>learning.</h1></div>
|
||
<p className="page-intro">I’m a developer driven by curiosity, thoughtful details, and the satisfying moment when a complex problem finally clicks.</p>
|
||
</div></header>
|
||
<div className="shell about-grid">
|
||
<aside className="about-sticky">
|
||
<p className="eyebrow">My path so far</p><h2>From playful experiments to complete products.</h2>
|
||
<p>Every project has added a new tool, a sharper instinct, or a better question to ask.</p>
|
||
<Link href="/projects" className="button">View projects</Link>
|
||
</aside>
|
||
<div className="timeline">{timeline.map(item => (
|
||
<article className="timeline-item" key={`${item.year}-${item.title}`}>
|
||
<div className="timeline-year">{item.year}</div>
|
||
<div><h3>{item.title}</h3><p>{item.text}</p><div className="skills">{item.skills.map(skill => <span className="skill" key={skill}>{skill}</span>)}</div></div>
|
||
</article>
|
||
))}</div>
|
||
</div>
|
||
</>);
|
||
}
|