spectrum-er 1.0.0

data/_config.yml

@@ -0,0 +1,340 @@
+# ===========================================
+# SPECTRUM JEKYLL THEME - MAIN CONFIGURATION
+# ===========================================
+
+# Jekyll Core Settings
+markdown: kramdown
+highlighter: rouge
+permalink: pretty
+timezone: UTC
+
+# Site Identity
+site:
+  title: "Duhyeon Kim"
+  description: "Personal website showcasing tech insights and development journey"
+  url: "https://yoursite.com"
+  baseurl: ""
+  author: "Duhyeon Kim"
+  email: "your@email.com"
+
+# Personal Information
+personal:
+  name: "Duhyeon Kim"
+  tagline: "spectrum jekyll owner"
+  bio: "Developer passionate about technology, design, and continuous learning"
+  location: "Seoul, Korea"
+
+# Social Media Links
+social:
+  enabled: true
+  platforms:
+    email:
+      enabled: true
+      url: "kdhluck@naver.com"
+      label: "Email"
+      icon: "fa-solid fa-envelope"
+    github:
+      enabled: true
+      url: "https://github.com/dudududukim"
+      label: "GitHub"
+      icon: "fa-brands fa-github"
+    linkedin:
+      enabled: true
+      url: "https://www.linkedin.com/in/duhyeon-kim-6623082b1/"
+      label: "LinkedIn"
+      icon: "fa-brands fa-linkedin"
+    twitter:
+      enabled: false
+      url: "https://twitter.com/username"
+      label: "Twitter"
+      icon: "fa-brands fa-twitter"
+    instagram:
+      enabled: false
+      url: "https://instagram.com/username"
+      label: "Instagram"
+      icon: "fa-brands fa-instagram"
+
+# Accessibility Configuration
+accessibility:
+  skip_links: true
+  focus_indicators: true
+  screen_reader_text: "Skip to main content"
+  high_contrast_mode: false
+  reduced_motion: false
+
+# Navigation Configuration
+navigation:
+  home_text: "Home"
+  show_social: true
+  social_position: "right"
+
+# Footer Configuration
+footer:
+  copyright_text: "All rights reserved."
+  show_theme_credit: true
+  theme_name: "Spectrum"
+  theme_url: "https://github.com/dudududukim/spectrum"
+
+# Content Configuration
+content:
+  pages:
+    about:
+      title: "About"
+      welcome_message: "Welcome 🤗"
+      intro_text: "I'm Duhyeon Kim, an Electrical and Electronic Engineering major from Korea University. I have a broad curiosity about all things AI, and I enjoy diving deep into areas where I can focus and grow."
+      main_description: "My hope is that, even if just a little, the path I take will leave something valuable for humanity. My dreams are big, but I'm still figuring out how to make them a reality."
+      sections:
+        - title: "Areas of Study & Work"
+          content: "Here are a few topics I've studied or worked on:\n\n- Computer vision / NLP\n- FPGA & VLSI\n- Computer architecture"
+      closing_text: "🌈 Wishing everyone a wonderful day!"
+    
+    tech_bites:
+      title: "Tech Bites"
+      description: "Daily tech insights and discoveries"
+      list_page:
+        welcome_message: "Welcome to my collection of tech insights!"
+        intro_text: "Here you'll find bite-sized posts covering everything from JavaScript tips to performance optimization techniques, accessibility best practices, and modern web development workflows."
+        description: "Each post is designed to be a quick read while providing practical, actionable information that you can apply to your own projects. Whether you're a seasoned developer or just starting out, there's something here for everyone."
+        categories_title: "Categories"
+        categories:
+          - name: "JavaScript"
+            description: "Modern ES6+ features, frameworks, and best practices"
+          - name: "CSS"
+            description: "Layout techniques, animations, and responsive design"
+          - name: "Performance"
+            description: "Optimization strategies and Core Web Vitals"
+          - name: "Accessibility"
+            description: "Building inclusive web experiences"
+          - name: "Development"
+            description: "Workflows, tools, and productivity tips"
+        closing_text: "Browse through the posts below, or use the category filter to find content that interests you most."
+      card:
+        read_more_text: "Read More"
+        min_read_text: "min read"
+      navigation:
+        previous_text: "← Previous"
+        next_text: "Next →"
+    
+    films:
+      title: "Films"
+      description: "Photography collection showcasing moments captured through the lens"
+  
+  ui:
+    buttons:
+      view_all_tech_bites: "View All Tech Bites"
+      read_more: "Read More"
+    
+    pagination:
+      showing_text: "Showing"
+      of_text: "of"
+      tech_bites_text: "tech bites"
+      page_text: "Page"
+      previous_text: "Previous"
+      next_text: "Next"
+    
+    error:
+      404:
+        title: "Page Not Found"
+        message: "Sorry, the page you're looking for doesn't exist."
+        suggestion: "You might want to go back to the homepage or check out our tech bites."
+        back_home_text: "Back to Home"
+
+# Theme Configuration (consolidated from theme.yml)
+site_theme:
+  colors:
+    primary: "#3498db"
+    secondary: "#2c3e50"
+    accent: "#e74c3c"
+    background: "#ffffff"
+    text: "#2c3e50"
+    light_text: "#7f8c8d"
+    success: "#27ae60"
+    warning: "#f39c12"
+    error: "#e74c3c"
+    info: "#3498db"
+  
+  typography:
+    font_family: "Lato"
+    font_weights:
+      light: 300
+      normal: 400
+      medium: 500
+      bold: 700
+    font_sizes:
+      xs: "0.75rem"
+      sm: "0.875rem"
+      base: "1rem"
+      lg: "1.125rem"
+      xl: "1.25rem"
+      "2xl": "1.5rem"
+      "3xl": "1.875rem"
+      "4xl": "2.25rem"
+  
+  layout:
+    max_width: "1125px"
+    content_width: "875px"
+    breakpoints:
+      mobile: "768px"
+      tablet: "1024px"
+      desktop: "1200px"
+  
+  animations:
+    enabled: true
+    duration: "0.3s"
+    easing: "ease"
+    reduced_motion: false
+  
+  dark_mode:
+    enabled: true
+    auto_detect: true
+    toggle_enabled: true
+  
+  components:
+    cards:
+      border_radius: "0.75rem"
+      shadow: "0 4px 6px rgba(0, 0, 0, 0.1)"
+      hover_shadow: "0 8px 25px rgba(0, 0, 0, 0.15)"
+    buttons:
+      border_radius: "0.5rem"
+      padding: "0.75rem 1.5rem"
+      transition: "all 0.3s ease"
+    navigation:
+      height: "4rem"
+      background: "var(--bg-color)"
+      border_bottom: "1px solid var(--border-light)"
+    footer:
+      padding: "0.75rem 0"
+      background: "var(--bg-color)"
+      border_top: "1px solid var(--border-light)"
+  
+  accessibility:
+    focus_ring: "2px solid var(--primary-color)"
+    focus_offset: "2px"
+    high_contrast: false
+    reduced_motion: false
+    skip_links: true
+
+# Homepage Section Controls
+homepage_sections:
+  tech_bites_preview:
+    enabled: true
+    show_count: 5
+    show_read_more_button: true
+    custom_title: "Recent Tech Bites"  # Optional override
+  
+  films_preview:
+    enabled: true
+    show_count: 6
+    show_view_all_button: true
+    custom_title: "Recent Films"    # Optional override
+    animation_duration: 60
+  
+  # Future extensibility
+  papers_preview:
+    enabled: false
+    show_count: 3
+  
+  gallery_preview:
+    enabled: false
+    show_count: 8
+
+# Design Customization (maintain current defaults)
+design_options:
+  tech_bite_cards:
+    compact_mode: true          # Current ultra-compact design
+    show_excerpts: true
+    show_reading_time: true
+    max_excerpt_length: 150
+  
+  gallery_track:
+    auto_scroll: true
+    scroll_speed: 60           # Current animation duration
+    show_overlay_on_hover: true
+    
+  navigation:
+    fixed_position: true
+    show_breadcrumbs: true
+    social_position: "right"   # Current position
+  
+  footer:
+    show_theme_credit: true    # Current setting
+    compact_layout: true       # Current design
+
+# Section Configuration
+sections:
+  tech_bite:
+    enabled: true
+    main_page_count: 5
+    show_categories: true
+    show_dates: true
+    pagination: 10
+  
+  gallery_track:
+    enabled: true
+    image_count: 6
+    animation_duration: 60
+
+# Collections
+collections:
+  tech-bites:
+    output: true
+    permalink: /tech-bites/:name/
+  papers:
+    output: true
+    permalink: /papers/:name/
+  gallery:
+    output: true
+    permalink: /gallery/:name/
+
+# Default Front Matter
+defaults:
+  - scope:
+      path: ""
+      type: "pages"
+    values:
+      layout: "default"
+  - scope:
+      path: ""
+      type: "tech-bites"
+    values:
+      layout: "tech-bite"
+      show_sidebar: true
+
+# Plugins
+plugins:
+  - jekyll-feed
+  - jekyll-sitemap
+  - jekyll-seo-tag
+
+# Build Settings
+exclude:
+  - Gemfile
+  - Gemfile.lock
+  - node_modules
+  - vendor/bundle/
+  - vendor/cache/
+  - vendor/gems/
+  - vendor/ruby/
+  - README.md
+  - .gitignore
+  - .sass-cache/
+  - .jekyll-cache/
+  - .jekyll-metadata
+
+# Sass Configuration
+sass:
+  style: compressed
+  sass_dir: _sass
+  load_paths:
+    - assets/css
+
+# Kramdown Configuration
+kramdown:
+  input: GFM
+  syntax_highlighter: rouge
+  syntax_highlighter_opts:
+    css_class: 'highlight'
+    span:
+      line_numbers: false
+    block:
+      line_numbers: false

data/_data/navigation.yml

@@ -0,0 +1,38 @@
+# Navigation Configuration
+# =======================
+
+primary:
+  - title: "Home"
+    url: "/"
+    icon: "fa-solid fa-home"
+  - title: "Tech Bites"
+    url: "/tech-bites/"
+    icon: "fa-solid fa-code"
+  - title: "Films"
+    url: "/films/"
+    icon: "fa-solid fa-camera"
+  - title: "Papers"
+    url: "/papers/"
+    icon: "fa-solid fa-file-text"
+    enabled: false  # Disabled until implemented
+  - title: "About"
+    url: "/about/"
+    icon: "fa-solid fa-user"
+  - title: "Gallery"
+    url: "/gallery/"
+    icon: "fa-solid fa-images"
+    enabled: false  # Disabled until implemented
+
+# Footer navigation
+footer:
+  - title: "Privacy Policy"
+    url: "/privacy/"
+    enabled: false
+  - title: "Terms of Service"
+    url: "/terms/"
+    enabled: false
+  - title: "Contact"
+    url: "/contact/"
+    enabled: false
+
+# Social navigation references main config social settings

data/_includes/content-card.html

@@ -0,0 +1,30 @@
+<!-- Content Card Component -->
+<!-- Usage: {% include content-card.html title="Card Title" meta="Meta info" content="Card content" %} -->
+
+<article class="content-card card">
+  {% if include.title %}
+    <div class="card-header">
+      <h3 class="card-title">
+        {% if include.url %}
+          <a href="{{ include.url }}">{{ include.title }}</a>
+        {% else %}
+          {{ include.title }}
+        {% endif %}
+      </h3>
+    </div>
+  {% endif %}
+
+  {% if include.meta %}
+    <div class="card-meta">{{ include.meta }}</div>
+  {% endif %}
+
+  {% if include.content %}
+    <div class="card-body">
+      <div class="card-content">{{ include.content }}</div>
+    </div>
+  {% endif %}
+
+  {% if include.footer %}
+    <div class="card-footer">{{ include.footer }}</div>
+  {% endif %}
+</article>

data/_includes/gallery-track.html

@@ -0,0 +1,97 @@
+<!-- Gallery Track Component -->
+<!-- Horizontal scrolling gallery showing recent films -->
+{% assign animation_duration = site.sections.gallery_track.animation_duration | default: 45 %}
+
+<style>
+    .gallery-track {
+        animation: scroll-left {{ animation_duration }}s linear infinite !important;
+    }
+</style>
+
+<section class="gallery-track-preview">
+    <div class="section-header">
+        <h2 class="section-title">Recent Films</h2>
+        <p class="section-description">Latest photography from my collection</p>
+    </div>
+
+    <div class="section-content">
+        <div class="gallery-track-container">
+            <div class="gallery-track" id="gallery-track">
+                {% assign image_extensions = "jpg,jpeg,png,webp,JPG,JPEG,PNG,WEBP" | split: "," %}
+                {% assign films_images = site.static_files | where_exp: "file", "file.path contains '/assets/images/films/'" %}
+                {% assign image_count = site.sections.gallery_track.image_count | default: 6 %}
+                {% assign recent_films = films_images | limit: image_count %}
+
+                <!-- Generate gallery items with seamless loop duplication -->
+                {% for i in (1..2) %}
+                    {% for file in recent_films %}
+                        {% assign file_ext = file.extname | remove: '.' %}
+                        {% if image_extensions contains file_ext %}
+                            {% assign image_name = file.name | remove: file.extname %}
+                            {% assign image_path = file.path | relative_url %}
+
+                            <div class="gallery-item">
+                                <a href="{{ '/films/' | relative_url }}" class="gallery-link" aria-label="View {{ image_name | replace: '-', ' ' | capitalize }} in gallery">
+                                    <img
+                                        src="{{ image_path }}"
+                                        alt="{{ image_name | replace: '-', ' ' | capitalize }}"
+                                        class="gallery-image"
+                                        loading="lazy"
+                                        decoding="async"
+                                    />
+                                    <div class="gallery-overlay">
+                                        <div class="gallery-info">
+                                            <span class="gallery-title">{{ image_name | replace: '-', ' ' | capitalize }}</span>
+                                        </div>
+                                    </div>
+                                </a>
+                            </div>
+                        {% endif %}
+                    {% endfor %}
+                {% endfor %}
+            </div>
+        </div>
+
+        <div class="section-footer">
+            <a href="{{ '/films/' | relative_url }}" class="section-button">
+                View All Films
+                <span class="btn-icon">→</span>
+            </a>
+        </div>
+    </div>
+</section>
+
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    const galleryTrack = document.getElementById('gallery-track');
+    if (!galleryTrack) return;
+
+    let isPaused = false;
+
+    // Pause animation on hover
+    galleryTrack.addEventListener('mouseenter', function() {
+        isPaused = true;
+        galleryTrack.style.animationPlayState = 'paused';
+    });
+
+    // Resume animation on mouse leave
+    galleryTrack.addEventListener('mouseleave', function() {
+        isPaused = false;
+        galleryTrack.style.animationPlayState = 'running';
+    });
+
+    // Pause animation when any gallery item is hovered
+    const galleryItems = galleryTrack.querySelectorAll('.gallery-item');
+    galleryItems.forEach(item => {
+        item.addEventListener('mouseenter', function() {
+            isPaused = true;
+            galleryTrack.style.animationPlayState = 'paused';
+        });
+
+        item.addEventListener('mouseleave', function() {
+            isPaused = false;
+            galleryTrack.style.animationPlayState = 'running';
+        });
+    });
+});
+</script>

data/_includes/photo-card.html

@@ -0,0 +1,23 @@
+{% assign image = include.image %}
+{% assign image_name = image.name | remove: image.extname %}
+{% assign image_path = image.path | relative_url %}
+
+<article class="photo-card card" data-image="{{ image_name }}">
+    <div class="photo-container">
+        <a href="{{ image_path }}" class="photo-link" data-lightbox="films" data-title="{{ image_name | replace: '-', ' ' | capitalize }}">
+            <img
+                src="{{ image_path }}"
+                alt="{{ image_name | replace: '-', ' ' | capitalize }}"
+                class="photo-image"
+                loading="lazy"
+                decoding="async"
+            />
+            <div class="photo-overlay">
+                <div class="photo-info">
+                    <h3 class="photo-title">{{ image_name | replace: '-', ' ' | capitalize }}</h3>
+                    <span class="photo-meta">{{ image.extname | remove: '.' | upcase }}</span>
+                </div>
+            </div>
+        </a>
+    </div>
+</article>

data/_includes/section-header.html

@@ -0,0 +1,12 @@
+<!-- Section Header Component -->
+<!-- Usage: {% include section-header.html title="Section Title" description="Section description" %} -->
+
+<div class="section-header">
+  {% if include.title %}
+    <h2 class="section-title">{{ include.title }}</h2>
+  {% endif %}
+
+  {% if include.description %}
+    <p class="section-description">{{ include.description }}</p>
+  {% endif %}
+</div>

data/_includes/site-navigation.html

@@ -0,0 +1,33 @@
+<nav class="site-navigation" role="navigation" aria-label="Site navigation">
+  <div class="nav-container">
+    <div class="nav-path">
+      <a href="{{ '/' | relative_url }}" class="nav-home">{{ site.navigation.home_text | default: "Home" }}</a>
+      {% unless page.url == "/" %}
+        <span class="nav-separator">/</span>
+        {% if page.layout == 'tech-bite-list' %}
+          <span class="nav-current">{{ site.content.pages.tech_bites.title | default: "Tech Bites" }}</span>
+        {% elsif page.layout == 'tech-bite' %}
+          <a href="{{ '/tech-bites/' | relative_url }}" class="nav-link">{{ site.content.pages.tech_bites.title | default: "Tech Bites" }}</a>
+          <span class="nav-separator">/</span>
+          <span class="nav-current">{{ page.title }}</span>
+        {% elsif page.layout == 'about' %}
+          <span class="nav-current">{{ site.content.pages.about.title | default: "About" }}</span>
+        {% else %}
+          <span class="nav-current">{{ page.title | default: 'Page' }}</span>
+        {% endif %}
+      {% endunless %}
+    </div>
+
+    {% if site.navigation.show_social and site.social.enabled %}
+    <div class="nav-social">
+      {% for platform in site.social.platforms %}
+        {% if platform[1].enabled and platform[1].url %}
+        <a href="{{ platform[1].url }}" target="_blank" rel="noopener noreferrer" class="nav-social-link" title="{{ platform[1].label }}">
+          <i class="{{ platform[1].icon }}"></i>
+        </a>
+        {% endif %}
+      {% endfor %}
+    </div>
+    {% endif %}
+  </div>
+</nav>

data/_includes/structured-data.html

@@ -0,0 +1,22 @@
+<!-- Structured Data for SEO -->
+<script type="application/ld+json">
+{
+  "@context": "https://schema.org",
+  "@type": "Person",
+  "name": "{{ site.personal.name | default: site.title }}",
+  "url": "{{ site.url }}{{ site.baseurl }}",
+  "description": "{{ site.description }}",
+  {% if site.personal.social_links %}
+  "sameAs": [
+    {% if site.personal.social_links.github %}"https://github.com/{{ site.personal.social_links.github }}"{% unless forloop.last %},{% endunless %}{% endif %}
+    {% if site.personal.social_links.linkedin %}"https://linkedin.com/in/{{ site.personal.social_links.linkedin }}"{% unless forloop.last %},{% endunless %}{% endif %}
+    {% if site.personal.social_links.twitter %}"https://twitter.com/{{ site.personal.social_links.twitter }}"{% unless forloop.last %},{% endunless %}{% endif %}
+  ],
+  {% endif %}
+  "jobTitle": "{{ site.personal.title | default: 'Developer' }}",
+  "worksFor": {
+    "@type": "Organization",
+    "name": "{{ site.personal.company | default: 'Freelance' }}"
+  }
+}
+</script>

data/_includes/tech-bite-card.html

@@ -0,0 +1,52 @@
+{% assign tech_bite = include.tech_bite %}
+<article class="tech-bite-card"
+         data-date="{{ tech_bite.date | date: '%Y-%m-%d' }}">
+    <div class="card-content">
+        <header class="card-header">
+            <h3 class="card-title">
+                <a href="{{ tech_bite.url | relative_url }}" class="card-link">
+                    {{ tech_bite.title }}
+                </a>
+            </h3>
+
+            <div class="card-meta">
+                {% if site.sections.tech_bite.show_dates and tech_bite.date %}
+                    <time class="card-date" datetime="{{ tech_bite.date | date_to_xmlschema }}">
+                        {{ tech_bite.date | date: "%b %d, %Y" }}
+                    </time>
+                {% endif %}
+
+                {% if site.sections.tech_bite.show_categories and tech_bite.categories %}
+                    <div class="card-categories">
+                        {% for category in tech_bite.categories limit: 2 %}
+                            <span class="category-tag">{{ category }}</span>
+                        {% endfor %}
+                        {% if tech_bite.categories.size > 2 %}
+                            <span class="category-more">+{{ tech_bite.categories.size | minus: 2 }}</span>
+                        {% endif %}
+                    </div>
+                {% endif %}
+            </div>
+        </header>
+
+        <div class="card-body">
+            {% if tech_bite.excerpt %}
+                <p class="card-excerpt">{{ tech_bite.excerpt | strip_html | truncate: 150 }}</p>
+            {% elsif tech_bite.description %}
+                <p class="card-excerpt">{{ tech_bite.description | strip_html | truncate: 150 }}</p>
+            {% endif %}
+
+        </div>
+
+        <footer class="card-footer">
+            <a href="{{ tech_bite.url | relative_url }}" class="read-more">
+                {{ site.content.pages.tech_bites.card.read_more_text | default: "Read More" }}
+                <span class="read-more-icon">→</span>
+            </a>
+
+            {% if tech_bite.reading_time %}
+                <span class="reading-time">{{ tech_bite.reading_time }} {{ site.content.pages.tech_bites.card.min_read_text | default: "min read" }}</span>
+            {% endif %}
+        </footer>
+    </div>
+</article>