kennethreitz.org/templates/index.html

{% extends "base.html" %}

{% block title %}{{ title }}{% endblock %}

{% block head %}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.css" />
<style>
    /* Only styles needed beyond what Tailwind provides */
    .home-hero::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: radial-gradient(circle at center, rgba(90, 138, 114, 0.1) 0%, rgba(252, 250, 245, 0) 70%);
        z-index: 0;
    }
    
    /* Quote quote marks */
    .quote-text::before,
    .quote-text::after {
        font-family: Georgia, serif;
        position: absolute;
        color: #5a8a72;
        opacity: 0.3;
    }
    
    .quote-text::before {
        content: '"';
        left: -2rem;
        top: -1rem;
    }
    
    .quote-text::after {
        content: '"';
        right: -2rem;
        bottom: -2rem;
    }
    
    @media (max-width: 768px) {
        .quote-text::before { left: -1rem; }
        .quote-text::after { right: -1rem; }
    }
    
    /* Image hover effect */
    .image-item img {
        transition: transform 0.5s ease;
    }
    
    .image-item:hover img {
        transform: scale(1.08);
    }
</style>
{% endblock %}

{% block content %}
{% if breadcrumbs %}
<div class="flex items-center flex-wrap text-sm mb-6 bg-primary-light/50 dark:bg-primary-dark/20 p-3 rounded-lg">
    <a href="/" class="text-link no-underline px-2 py-1 rounded transition-colors hover:bg-white/30 dark:hover:bg-white/10 hover:text-primary-dark">kennethreitz.org</a>
    {% for crumb in breadcrumbs %}
    <span class="mx-1 text-primary-dark/50 dark:text-primary-light/50">/</span>
    <a href="{{ crumb.url }}" class="text-link no-underline px-2 py-1 rounded transition-colors hover:bg-white/30 dark:hover:bg-white/10 hover:text-primary-dark">{{ crumb.title or crumb.name }}</a>
    {% endfor %}
</div>
{% endif %}

{% if content and not breadcrumbs %}
<section class="home-hero text-center py-20 mb-16 relative bg-primary-light/50 dark:bg-primary-dark/20 rounded-lg overflow-hidden">
    <div class="hero-content relative z-10">
        <h1 class="text-5xl sm:text-6xl mb-4 mt-0 text-text dark:text-text-light relative inline-block after:content-[''] after:absolute after:bottom-[-10px] after:left-1/2 after:-translate-x-1/2 after:w-20 after:h-1 after:bg-gradient-to-r after:from-primary after:to-primary-light/50">Kenneth Reitz</h1>
        <p class="text-xl max-w-xl mx-auto my-8 text-text/80 dark:text-text-light/80">Software engineer, photographer, writer, and creative explorer.</p>
        <div class="flex flex-col sm:flex-row gap-4 justify-center mt-8">
            <a href="/software" class="inline-block px-6 py-3 bg-primary text-white rounded-lg hover:bg-primary-dark transition-colors shadow-sm hover:shadow">Explore My Work</a>
            <a href="/mindmap" class="inline-block px-6 py-3 bg-accent text-white rounded-lg hover:bg-accent-dark transition-colors shadow-sm hover:shadow">View Mind Map</a>
            <a href="/contact" class="inline-block px-6 py-3 bg-transparent text-primary border-2 border-primary rounded-lg hover:bg-primary-light transition-colors">Get in Touch</a>
        </div>
    </div>
</section>

<section class="my-16 text-center py-12 px-8 bg-primary-light/50 dark:bg-primary-dark/20 rounded-lg relative">
    <p class="quote-text text-2xl md:text-3xl leading-relaxed text-text dark:text-text-light italic max-w-4xl mx-auto relative">Attention is the only currency we have in life. Thanks for gifting me yours.</p>
    <p class="mt-6 text-lg text-primary-dark dark:text-primary-light">— Kenneth Reitz</p>
</section>
{% endif %}

{% if files %} 
    {% set image_files = files | selectattr("is_image", "equalto", true) | list %} 
    {% set non_image_files = files | selectattr("is_image", "equalto", false) | list %} 
    
    {% if image_files %}
    <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4 my-10">
        {% for file in image_files %}
        <div class="image-item rounded-lg overflow-hidden aspect-square relative shadow-md hover:shadow-xl hover:-translate-y-1 hover:scale-[1.02] transition-all duration-300">
            <a href="{{ file.url }}" data-fancybox="gallery" data-caption="{{ file.title or file.name }}" class="block h-full w-full">
                <img src="{{ file.url }}" alt="{{ file.title or file.name }}" loading="lazy" class="w-full h-full object-cover" />
            </a>
            
            {% if file.exif_data %}
            <div class="absolute bottom-0 left-0 right-0 text-xs text-text/80 dark:text-text-light/80 mt-1 bg-white/90 dark:bg-gray-900/90 p-2 rounded opacity-80 hover:opacity-100 transition-opacity">
                {% for key, value in file.exif_data.items() %} 
                    {% if value and value != "Unknown" %}
                    <p class="m-0 leading-snug">{{ key }}: {{ value }}</p>
                    {% endif %} 
                {% endfor %}
            </div>
            {% endif %}
        </div>
        {% endfor %}
    </div>
    {% endif %} 
    
    {% if non_image_files %}
    <div class="list-none p-0 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 my-6">
        {% for file in non_image_files %}
        <div class="directory-item {% if file.is_dir %}folder{% else %}file{% endif %} mb-2 transition-all duration-300 rounded-lg border border-border dark:border-border-dark bg-white dark:bg-gray-900 shadow hover:shadow-md overflow-hidden hover:-translate-y-1 relative before:absolute before:top-0 before:left-0 before:w-1 before:h-full before:bg-primary before:opacity-0 hover:before:opacity-100 before:transition-opacity">
            <a href="{{ file.url }}" class="flex items-center p-4 no-underline text-text dark:text-text-light h-full transition-colors hover:text-primary before:mr-3 before:text-xl before:min-w-[1.8rem] before:transition-transform hover:before:scale-125">{{ file.title or file.name }}</a>
        </div>
        {% endfor %}
    </div>
    {% endif %} 
{% endif %}

{% if content %}
<section class="my-8">
    {{ content | safe }}
</section>

{% if not breadcrumbs %}
<section class="mb-20">
    <h2 class="text-3xl mb-8 text-text dark:text-text-light relative inline-block after:content-[''] after:absolute after:bottom-[-5px] after:left-0 after:w-[50px] after:h-[3px] after:bg-primary border-b-0 pb-0">Featured Projects</h2>
    <p class="mb-8 text-lg leading-relaxed text-text/80 dark:text-text-light/80 max-w-prose">Here are some of my most notable open-source projects and contributions to the Python ecosystem.</p>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div class="bg-white dark:bg-gray-900 rounded-lg shadow-md hover:shadow-lg transition-all border border-border dark:border-border-dark flex flex-col h-full relative hover:-translate-y-1.5">
            <div class="p-6 flex-grow flex flex-col">
                <h3 class="text-xl font-semibold mb-2 text-text dark:text-text-light">Requests</h3>
                <div class="flex-grow">
                    <p class="text-text/80 dark:text-text-light/80">HTTP for Humans. Python's most popular HTTP client library, designed with simplicity and elegance in mind.</p>
                </div>
                <a href="/software/requests" class="inline-flex items-center mt-4 font-medium text-primary hover:underline">Learn more <span class="ml-1 transition-transform group-hover:translate-x-1">→</span></a>
            </div>
        </div>
        
        <div class="bg-white dark:bg-gray-900 rounded-lg shadow-md hover:shadow-lg transition-all border border-border dark:border-border-dark flex flex-col h-full relative hover:-translate-y-1.5">
            <div class="p-6 flex-grow flex flex-col">
                <h3 class="text-xl font-semibold mb-2 text-text dark:text-text-light">Pipenv</h3>
                <div class="flex-grow">
                    <p class="text-text/80 dark:text-text-light/80">Python Development Workflow for Humans. Modern dependency management that brings together pip, Pipfile, and virtualenv.</p>
                </div>
                <a href="/software/pipenv" class="inline-flex items-center mt-4 font-medium text-primary hover:underline">Learn more <span class="ml-1 transition-transform group-hover:translate-x-1">→</span></a>
            </div>
        </div>
        
        <div class="bg-white dark:bg-gray-900 rounded-lg shadow-md hover:shadow-lg transition-all border border-border dark:border-border-dark flex flex-col h-full relative hover:-translate-y-1.5">
            <div class="p-6 flex-grow flex flex-col">
                <h3 class="text-xl font-semibold mb-2 text-text dark:text-text-light">AI Explorations</h3>
                <div class="flex-grow">
                    <p class="text-text/80 dark:text-text-light/80">Thoughts and experiments on artificial intelligence, consciousness, and the intersection of technology with philosophy.</p>
                </div>
                <a href="/artificial-intelligence" class="inline-flex items-center mt-4 font-medium text-primary hover:underline">Explore <span class="ml-1 transition-transform group-hover:translate-x-1">→</span></a>
            </div>
        </div>
    </div>
</section>

<section class="mb-20">
    <h2 class="text-3xl mb-8 text-text dark:text-text-light relative inline-block after:content-[''] after:absolute after:bottom-[-5px] after:left-0 after:w-[50px] after:h-[3px] after:bg-primary border-b-0 pb-0">Connect</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mt-8">
        <div class="bg-white dark:bg-gray-900 rounded-lg shadow-md p-8 text-center border border-border dark:border-border-dark transition-all hover:-translate-y-1.5 hover:shadow-lg">
            <div class="text-4xl mb-4 text-primary">✉️</div>
            <h3 class="text-xl font-semibold mb-4 text-text dark:text-text-light">Work With Me</h3>
            <p class="mb-6 text-text/80 dark:text-text-light/80">Interested in working together? I'm available for consulting and other opportunities.</p>
            <a href="mailto:me@kennethreitz.org" class="inline-block px-6 py-3 bg-primary text-white rounded-lg hover:bg-primary-dark transition-colors shadow-sm hover:shadow">Contact Me</a>
        </div>
        
        <div class="bg-white dark:bg-gray-900 rounded-lg shadow-md p-8 text-center border border-border dark:border-border-dark transition-all hover:-translate-y-1.5 hover:shadow-lg">
            <div class="text-4xl mb-4 text-primary">📝</div>
            <h3 class="text-xl font-semibold mb-4 text-text dark:text-text-light">Explore My Writing</h3>
            <p class="mb-6 text-text/80 dark:text-text-light/80">Essays on technology, philosophy, software development, and other topics of interest.</p>
            <a href="/essays" class="inline-block px-6 py-3 bg-transparent text-primary border-2 border-primary rounded-lg hover:bg-primary-light transition-colors">Read Essays</a>
        </div>
    </div>
</section>
{% endif %}
{% endif %}

<script type="text/javascript">
    var _gauges = _gauges || [];
    (function () {
        var t = document.createElement("script");
        t.type = "text/javascript";
        t.async = true;
        t.id = "gauges-tracker";
        t.setAttribute("data-site-id", "65529a9abd1a3b3101979d52");
        t.setAttribute("data-track-path", "https://track.gaug.es/track.gif");
        t.src = "https://d2fuc4clr7gvcn.cloudfront.net/track.js";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(t, s);
    })();
</script>
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.umd.js"></script>
<script>
    Fancybox.bind("[data-fancybox]", {
        // Custom options
    });
</script>
{% endblock %}