base.html

← Back to explorer
templates/base.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link rel="icon" href="{{ url_for('static', filename='images/icon.ico') }}" type="image/x-icon">
    <title>{% block title %}Kishaloy Roy{% endblock %}</title>

    {# ── Open Graph / Twitter Card ── #}
    {# Override the og_meta block in child templates for page-specific tags. #}
    {% block og_meta %}
    {# Default: portfolio home tags #}
    <meta property="og:type"        content="website">
    <meta property="og:site_name"   content="Kishaloy Roy">
    <meta property="og:title"       content="Kishaloy Roy — Developer · Homelabber · Student">
    <meta property="og:description" content="Backend developer from India specialising in servers, APIs &amp; databases. Homelabber, open-source tinkerer, and occasional photographer.">
    <meta property="og:url"         content="{{ request.url }}">
    <meta property="og:image"       content="{{ request.url_root }}static/images/profile.png">
    <meta property="og:image:alt"   content="Kishaloy Roy">
    <meta property="og:locale"      content="en_IN">

    <meta name="twitter:card"        content="summary_large_image">
    <meta name="twitter:title"       content="Kishaloy Roy — Developer · Homelabber · Student">
    <meta name="twitter:description" content="Backend developer from India specialising in servers, APIs &amp; databases. Homelabber, open-source tinkerer, and occasional photographer.">
    <meta name="twitter:image"       content="{{ request.url_root }}static/images/profile.png">
    <meta name="twitter:image:alt"   content="Kishaloy Roy">

    {# General description for Google / other crawlers #}
    <meta name="description" content="Backend developer from India specialising in servers, APIs &amp; databases. Homelabber, open-source tinkerer, and occasional photographer.">
    {% endblock %}

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">

    <script>
        (function () {
            try {
                var t = localStorage.getItem("kr_theme");
                if (t === "dark") document.documentElement.setAttribute("data-theme", "dark");
                document.documentElement.classList.add("no-theme-transition");
            } catch (e) {
                document.documentElement.classList.add("no-theme-transition");
            }
        })();
    </script>


    <link rel="stylesheet" href="{{ url_for('static', filename='css/theme.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/layout.css') }}">
    {% block head %}{% endblock %}
</head>

<body>
<button class="theme-toggle" id="themeToggle" type="button" aria-label="Toggle theme" title="Toggle theme">
    <span class="theme-toggle-track" aria-hidden="true">
      <span class="theme-toggle-thumb">
        <span class="tt-icon tt-sun" aria-hidden="true">☀️</span>
        <span class="tt-icon tt-moon" aria-hidden="true">🌙</span>
      </span>
    </span>
</button>

<div class="app">
    <aside class="sidebar">
        <div class="sidebar-card">
            <div class="avatar-wrap">
                <img class="avatar" src="{{ url_for('static', filename='images/profile.png') }}" alt="Profile photo">
            </div>

            <div class="name">Kishaloy Roy</div>
            <div class="tagline">Developer · Homelabber · Student</div>

            {# Social links removed #}
            <div class="now-playing" aria-label="Now playing">
                <div class="np-label">
                    <img
                            src="{{ url_for('static', filename='images/assets/player.webp') }}"
                            alt=""
                            class="np-label-gif">
                    <span>Now playing</span>
                </div>

                <div class="np-marquee">
                    <div class="np-track">
                        <a class="np-content"
                           href="https://www.youtube.com/watch?v=GT8ornYrDEs"
                           target="_blank"
                           rel="noopener">
                            <span class="np-text">Hurry Up Tomorrow — The Weeknd</span>
                        </a>
                          <img
                            src="{{ url_for('static', filename='images/assets/separator.gif') }}"
                            alt=""
                            class="np-separator"
                            aria-hidden="true">

                        <a class="np-content"
                           href="https://www.youtube.com/watch?v=GT8ornYrDEs"
                           target="_blank"
                           rel="noopener"
                           aria-hidden="true">
                            <span class="np-text">Hurry Up Tomorrow — The Weeknd</span>
                        </a>
                            <img
                            src="{{ url_for('static', filename='images/assets/separator.gif') }}"
                            alt=""
                            class="np-separator"
                            aria-hidden="true">
                    </div>
                </div>
            </div>

        </div>

        <nav class="nav" aria-label="Main">
            <a class="nav-link {% if request.path in ['/', '/home'] %}active{% endif %}" href="/">Home</a>
            <a class="nav-link {% if request.path == '/activity' %}active{% endif %}" href="/activity">Activity</a>
            <a class="nav-link {% if request.path == '/projects' %}active{% endif %}" href="/projects">Projects</a>
            <a class="nav-link {% if request.path.startswith('/blog') %}active{% endif %}" href="/blog">Blog</a>
            <a class="nav-link {% if request.path == '/photos' %}active{% endif %}" href="/photos">Photos</a>
            <a class="nav-link {% if request.path == '/contacts' %}active{% endif %}" href="/contacts">Contacts</a>
        </nav>
    </aside>

    <main class="main">
        <div class="page">
            {% block content %}{% endblock %}
        </div>
    </main>
</div>

<script src="{{ url_for('static', filename='js/theme_toggle.js') }}"></script>
</body>
</html>