index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="theme-color" content="#0c0c0f">
    <meta name="description" content="About L-RiXx — a developer, independent thinker, and digital explorer interested in software, systems, and creative experimentation.">

    <title>About — L-RiXx</title>

    <style>
        :root {
            color-scheme: dark;
            --bg: #0c0c0f;
            --surface: #131318;
            --text: #f0f0f5;
            --muted: #858590;
            --accent: #b8ff65;
            --border: #282830;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            min-height: 100vh;
            background: var(--bg);
            color: var(--text);
            font-family: system-ui, -apple-system, sans-serif;
            line-height: 1.7;
        }

        a {
            color: inherit;
            text-decoration: none;
        }

        .container {
            width: min(100% - 40px, 1000px);
            margin-inline: auto;
        }

        header {
            min-height: 80px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
            border-bottom: 1px solid var(--border);
        }

        .logo {
            font-size: 1.15rem;
            font-weight: 800;
            letter-spacing: -1px;
        }

        .logo span {
            color: var(--accent);
        }

        nav {
            display: flex;
            align-items: center;
            gap: 22px;
            font-size: 0.85rem;
            color: var(--muted);
        }

        nav a {
            transition: color 180ms ease;
        }

        nav a:hover,
        nav a[aria-current="page"] {
            color: var(--accent);
        }

        main {
            padding-block: 100px 90px;
        }

        .eyebrow {
            margin-bottom: 24px;
            color: var(--accent);
            font: 0.85rem monospace;
        }

        h1 {
            max-width: 850px;
            font-size: clamp(3.2rem, 10vw, 7rem);
            line-height: 0.98;
            letter-spacing: -0.075em;
        }

        h1 span {
            color: var(--accent);
        }

        .intro {
            max-width: 600px;
            margin-top: 32px;
            color: var(--muted);
            font-size: 1.1rem;
        }

        .section {
            margin-top: 100px;
        }

        .section-label {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 24px;
            font-size: 1rem;
            font-weight: 600;
        }

        .section-label span {
            color: var(--accent);
            font: 0.8rem monospace;
        }

        .about-copy {
            max-width: 720px;
        }

        .about-copy p {
            margin-top: 16px;
            color: var(--muted);
        }

        .about-copy p:first-child {
            margin-top: 0;
        }

        .about-copy strong {
            color: var(--text);
            font-weight: 600;
        }

        .grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 14px;
        }

        .card {
            padding: 24px;
            border: 1px solid var(--border);
            border-radius: 10px;
            background: var(--surface);
            transition: border-color 180ms ease, transform 180ms ease;
        }

        .card:hover {
            transform: translateY(-3px);
            border-color: #b8ff6570;
        }

        .number {
            color: var(--accent);
            font: 0.8rem monospace;
        }

        .card h3 {
            margin-top: 20px;
            font-size: 1.15rem;
        }

        .card p {
            margin-top: 8px;
            color: var(--muted);
            font-size: 0.9rem;
        }

        .interests {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }

        .tag {
            padding: 8px 13px;
            border: 1px solid var(--border);
            border-radius: 6px;
            background: var(--surface);
            color: var(--muted);
            font: 0.85rem monospace;
        }

        .note {
            margin-top: 100px;
            padding: 22px;
            border-left: 2px solid var(--accent);
            background: linear-gradient(90deg, #b8ff650a, transparent);
            color: var(--muted);
            font: 0.9rem monospace;
        }

        .note strong {
            color: var(--text);
        }

        .contact {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 24px;
            flex-wrap: wrap;
            padding: 28px;
            border: 1px solid var(--border);
            border-radius: 10px;
            background: var(--surface);
        }

        .contact h3 {
            font-size: 1.25rem;
        }

        .contact p {
            margin-top: 6px;
            color: var(--muted);
            font-size: 0.9rem;
        }

        .button {
            display: inline-block;
            padding: 11px 17px;
            border: 1px solid var(--accent);
            border-radius: 7px;
            background: var(--accent);
            color: var(--bg);
            font-size: 0.9rem;
            font-weight: 700;
            transition: transform 180ms ease;
        }

        .button:hover {
            transform: translateY(-3px);
        }

        footer {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 15px;
            padding: 25px 0;
            border-top: 1px solid var(--border);
            color: var(--muted);
            font-size: 0.8rem;
        }

        footer span {
            color: var(--accent);
        }

        @media (max-width: 650px) {
            header {
                min-height: 72px;
            }

            nav {
                gap: 12px;
                font-size: 0.78rem;
            }

            main {
                padding-top: 75px;
            }

            .grid {
                grid-template-columns: 1fr;
            }

            .section {
                margin-top: 75px;
            }

            .note {
                margin-top: 75px;
            }
        }

        @media (max-width: 380px) {
            .container {
                width: min(100% - 28px, 1000px);
            }

            nav {
                gap: 9px;
                font-size: 0.72rem;
            }

            .contact {
                padding: 20px;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            html {
                scroll-behavior: auto;
            }

            *,
            *::before,
            *::after {
                transition: none !important;
            }
        }
    </style>
</head>

<body>
    <div class="container">
        <header>
            <a class="logo" href="/" aria-label="L-RiXx home">
                L<span>-</span>RiXx
            </a>

            <nav aria-label="Main navigation">
                <a href="/">Home</a>
                <a href="/portfolio/">Portfolio</a>
                <a href="/about/" aria-current="page">About</a>
                <a href="/projects/">Projects</a>
            </nav>
        </header>

        <main>
            <section>
                <p class="eyebrow">// a little about me</p>

                <h1>
                    The person<br>
                    behind the <span>projects.</span>
                </h1>

                <p class="intro">
                    I'm L-RiXx — an independent-minded developer and
                    digital explorer interested in understanding how
                    things work, building useful tools, and turning
                    ideas into working projects.
                </p>
            </section>

            <section class="section">
                <h2 class="section-label">
                    <span>01 /</span> Who I am
                </h2>

                <div class="about-copy">
                    <p>
                        I'm drawn to the intersection of
                        <strong>software, systems, and experimentation.</strong>
                        I enjoy going beyond using technology to exploring
                        how it works and what can be built with it.
                    </p>

                    <p>
                        My interests range from application development
                        and programming languages to Linux environments,
                        and game development.
                        Each area offers a different way to solve problems
                        and understand the digital world.
                    </p>

                    <p>
                        I don't see every project as something that must
                        immediately become a finished product. Sometimes
                        the goal is to learn a concept, test an idea, or
                        discover a better way to approach a problem.
                    </p>
                </div>
            </section>

            <section class="section">
                <h2 class="section-label">
                    <span>02 /</span> What I enjoy building
                </h2>

                <div class="grid">
                    <article class="card">
                        <span class="number">01 — SOFTWARE</span>
                        <h3>Tools & applications</h3>
                        <p>
                            Designing software around practical needs,
                            exploring application architecture, and
                            building tools that make workflows better.
                        </p>
                    </article>

                    <article class="card">
                        <span class="number">02 — SYSTEMS</span>
                        <h3>Exploring the stack</h3>
                        <p>
                            Experimenting with Linux, command-line tools,
                            development environments, and the relationship
                            between software and the systems it runs on.
                        </p>
                    </article>

                    <article class="card">
                        <span class="number">03 — EXPERIMENTS</span>
                        <h3>Ideas into prototypes</h3>
                        <p>
                            Testing concepts, writing small experiments,
                            investigating unfamiliar technologies, and
                            learning through implementation.
                        </p>
                    </article>

                    <article class="card">
                        <span class="number">04 — CREATIVE CODE</span>
                        <h3>Game development</h3>
                        <p>
                            Exploring game mechanics, interactive
                            experiences, and the creative possibilities
                            of code.
                        </p>
                    </article>
                </div>
            </section>

            <section class="section">
                <h2 class="section-label">
                    <span>03 /</span> Current interests
                </h2>

                <div class="interests">
                    <span class="tag">Software development</span>
                    <span class="tag">Kotlin</span>
                    <span class="tag">Android</span>
                    <span class="tag">Linux & Termux</span>
                    <span class="tag">Programming languages</span>
                    <span class="tag">Game development</span>
                    <span class="tag">Developer tools</span>
                    <span class="tag">System experimentation</span>
                </div>
            </section>

            <section class="section">
                <h2 class="section-label">
                    <span>04 /</span> How I approach things
                </h2>

                <div class="about-copy">
                    <p>
                        <strong>Understand, experiment, build, improve.</strong>
                    </p>

                    <p>
                        I prefer learning by doing: breaking a problem
                        into smaller parts, investigating how those parts
                        work, testing possible solutions, and refining
                        the result.
                    </p>

                    <p>
                        Progress doesn't always mean writing more code.
                        Sometimes it means finding a simpler design,
                        understanding a limitation, or deciding that an
                        idea needs a different approach.
                    </p>
                </div>
            </section>

            <section class="section">
                <h2 class="section-label">
                    <span>05 /</span> Find me online
                </h2>

                <div class="contact">
                    <div>
                        <h3>Interested in what I'm building?</h3>
                        <p>
                            Explore my repositories, experiments,
                            and ongoing work on GitHub.
                        </p>
                    </div>

                    <a
                        class="button"
                        href="https://github.com/L-RiXx"
                        target="_blank"
                        rel="noopener noreferrer"
                    >
                        Explore GitHub ↗
                    </a>
                </div>
            </section>

            <div class="note">
                <strong>&gt; Current mindset:</strong>
                <span>learn something, build something, repeat_</span>
            </div>
        </main>

        <footer>
            <p>© <span id="year"></span> L-RiXx</p>
            <p>Designed with intention. <span>Built with curiosity.</span></p>
        </footer>
    </div>

    <script>
        document.getElementById("year").textContent =
            new Date().getFullYear();
    </script>
</body>
</html>