Skip to content

Frontend improvements: desktop toggles, accessibility, SEO enhancements, and Japanese font support #35

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
yutojubako merged 4 commits into from
Dec 2, 2025
Merged

Frontend improvements: desktop toggles, accessibility, SEO enhancements, and Japanese font support #35

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
6d96ca4
Initial plan
Copilot Dec 1, 2025
2f572e6
Add desktop toggle buttons, improved accessibility, and enhanced SEO
Copilot Dec 1, 2025
7f127e9
Fix code review issues: remove will-change, fix preconnect, remove un…
Copilot Dec 1, 2025
6566715
Add Japanese font support with Noto Sans JP and system fallbacks
Copilot Dec 1, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
110 changes: 110 additions & 0 deletions _includes/head.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,110 @@
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- SEO Meta Tags -->
{%- seo -%}

<!-- Additional Meta Tags for Better SEO -->
<meta name="author" content="{{ site.author }}">
<meta name="robots" content="index, follow">
<meta name="language" content="English, Japanese">

<!-- Open Graph Meta Tags for Social Sharing -->
<meta property="og:type" content="website">
<meta property="og:site_name" content="{{ site.title }}">
<meta property="og:locale" content="en_US">
<meta property="og:locale:alternate" content="ja_JP">
{% if page.title %}
<meta property="og:title" content="{{ page.title }} | {{ site.title }}">
{% else %}
<meta property="og:title" content="{{ site.title }}">
{% endif %}
{% if page.description %}
<meta property="og:description" content="{{ page.description }}">
{% elsif site.description %}
<meta property="og:description" content="{{ site.description }}">
{% endif %}
{% if site.icon %}
<meta property="og:image" content="{{ site.icon | absolute_url }}">
{% endif %}
<meta property="og:url" content="{{ page.url | absolute_url }}">

<!-- Twitter Card Meta Tags -->
<meta name="twitter:card" content="summary">
{% if page.title %}
<meta name="twitter:title" content="{{ page.title }} | {{ site.title }}">
{% else %}
<meta name="twitter:title" content="{{ site.title }}">
{% endif %}
{% if page.description %}
<meta name="twitter:description" content="{{ page.description }}">
{% elsif site.description %}
<meta name="twitter:description" content="{{ site.description }}">
{% endif %}
{% if site.icon %}
<meta name="twitter:image" content="{{ site.icon | absolute_url }}">
{% endif %}
{% if site.twitter_username %}
<meta name="twitter:site" content="@{{ site.twitter_username }}">
{% endif %}

<!-- Theme Color for Mobile Browsers -->
<meta name="theme-color" content="#2563eb" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#1e3a8a" media="(prefers-color-scheme: dark)">

<!-- Favicon -->
<link rel="icon" type="image/x-icon" href="{{ '/static/favicon.ico' | relative_url }}">
<link rel="icon" type="image/svg+xml" href="{{ '/static/logo.svg' | relative_url }}">
<link rel="apple-touch-icon" href="{{ site.icon | relative_url }}">

<!-- RSS Feed -->
{%- feed_meta -%}

<!-- Preconnect to External Domains for Better Performance -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="dns-prefetch" href="https://fonts.googleapis.com">

<!-- Google Fonts for better Japanese font support -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Noto+Sans+JP:wght@400;500;700&display=swap" rel="stylesheet">

<!-- Stylesheets -->
<link rel="stylesheet" href="{{ '/assets/main.css' | relative_url }}">

<!-- Canonical URL -->
<link rel="canonical" href="{{ page.url | absolute_url }}">

<!-- Additional Metadata -->
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

<!-- Structured Data for Rich Snippets -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Person",
"name": "{{ site.title }}",
"url": "{{ site.url }}{{ site.baseurl }}",
"email": "{{ site.email }}",
"jobTitle": "{{ site.description }}",
"worksFor": {
"@type": "Organization",
"name": "{{ site.institution }}"
},
{% if site.icon %}
"image": "{{ site.icon | absolute_url }}",
{% endif %}
"sameAs": [
{% if site.github_username %}
"https://github.com/{{ site.github_username }}"{% if site.twitter_username %},{% endif %}
{% endif %}
{% if site.twitter_username %}
"https://twitter.com/{{ site.twitter_username }}"
{% endif %}
]
}
</script>
</head>
22 changes: 20 additions & 2 deletions _includes/header.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
<header class="site-header" role="banner">

<!-- Skip to main content link for accessibility -->
<a href="#main-content" class="skip-to-main">Skip to main content</a>

<div class="wrapper">
{%- assign default_paths = site.pages | map: "path" -%}
{%- assign page_paths = site.header_pages | default: default_paths -%}
Expand Down Expand Up @@ -41,15 +44,30 @@
{%- endif -%}
{%- endfor -%}

<!-- Desktop toggle buttons (visible on desktop, hidden on mobile) -->
<div class="desktop-toggles">
<!-- Dark Mode Toggle -->
<button id="dark-mode-toggle-desktop" class="dark-mode-toggle" aria-label="Toggle dark mode" title="Toggle dark mode">
<span class="dark-mode-icon">🌙</span>
</button>

<!-- Language Switcher -->
<button id="language-toggle-desktop" class="language-toggle" aria-label="Switch language" title="Switch between English and Japanese">
<span class="lang-current">EN</span>
<span class="lang-separator">|</span>
<span class="lang-other">JA</span>
</button>
</div>

<!-- Mobile toggle buttons container -->
<div class="mobile-toggles">
<!-- Dark Mode Toggle -->
<button id="dark-mode-toggle" class="dark-mode-toggle" aria-label="Toggle dark mode">
<button id="dark-mode-toggle" class="dark-mode-toggle" aria-label="Toggle dark mode" title="Toggle dark mode">
<span class="dark-mode-icon">🌙</span>
</button>

<!-- Language Switcher -->
<button id="language-toggle" class="language-toggle" aria-label="Switch language">
<button id="language-toggle" class="language-toggle" aria-label="Switch language" title="Switch between English and Japanese">
<span class="lang-current">EN</span>
<span class="lang-separator">|</span>
<span class="lang-other">JA</span>
Expand Down
2 changes: 1 addition & 1 deletion _layouts/default.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@

{%- include header.html -%}

<main class="page-content" aria-label="Content">
<main class="page-content" aria-label="Content" id="main-content">
<div class="wrapper">
{{ content }}
</div>
Expand Down
2 changes: 1 addition & 1 deletion _layouts/modern-home.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
<div class="hero-content">
{%- if site.icon -%}
<div style="text-align: center; margin-bottom: 2rem;">
<img src="{{ site.icon | relative_url }}" alt="{{ site.title }}" class="hero-icon" style="height: 120px; width: 120px; border-radius: 50%; object-fit: cover; box-shadow: 0 4px 12px rgba(0,0,0,0.15);">
<img src="{{ site.icon | relative_url }}" alt="{{ site.title }}" class="hero-icon" style="height: 120px; width: 120px; border-radius: 50%; object-fit: cover; box-shadow: 0 4px 12px rgba(0,0,0,0.15);" loading="eager" fetchpriority="high">
</div>
{%- endif -%}
<h1 class="section-title" style="margin-bottom: 1rem; font-size: 3rem;">
Expand Down
88 changes: 87 additions & 1 deletion static/css/modern-portfolio.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,18 @@
--gradient-hero: linear-gradient(135deg, var(--primary-50), var(--gray-50));
}

/* Smooth scrolling for the entire page */
html {
scroll-behavior: smooth;
}

/* Improved scroll behavior for reduced motion users */
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}

/* Dark mode support */
[data-theme="dark"] {
--gray-50: #f9fafb;
Expand Down Expand Up @@ -112,6 +124,14 @@ html[data-theme="dark"] body {
display: none; /* Hidden on desktop */
}

.desktop-toggles {
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin-left: 1rem;
vertical-align: middle;
}

.dark-mode-toggle {
background: white;
border: 1px solid var(--gray-300);
Expand Down Expand Up @@ -250,6 +270,27 @@ html[data-theme="dark"] body {
outline-offset: 2px;
}

/* Use :focus-visible for better keyboard navigation */
.dark-mode-toggle:focus-visible,
.language-toggle:focus-visible,
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.contact-item:focus-visible,
.page-link:focus-visible,
a:focus-visible {
outline: 3px solid var(--primary-400);
outline-offset: 2px;
border-radius: 4px;
}

/* Remove focus outline on mouse click */
.dark-mode-toggle:focus:not(:focus-visible),
.language-toggle:focus:not(:focus-visible),
.btn-primary:focus:not(:focus-visible),
.btn-secondary:focus:not(:focus-visible) {
outline: none;
}

[data-theme="dark"] .dark-mode-toggle:focus,
[data-theme="dark"] .language-toggle:focus,
[data-theme="dark"] .btn-primary:focus,
Expand All @@ -258,6 +299,16 @@ html[data-theme="dark"] body {
outline-color: var(--primary-300);
}

[data-theme="dark"] .dark-mode-toggle:focus-visible,
[data-theme="dark"] .language-toggle:focus-visible,
[data-theme="dark"] .btn-primary:focus-visible,
[data-theme="dark"] .btn-secondary:focus-visible,
[data-theme="dark"] .contact-item:focus-visible,
[data-theme="dark"] .page-link:focus-visible,
[data-theme="dark"] a:focus-visible {
outline-color: var(--primary-300);
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
.scroll-to-top,
Expand All @@ -281,7 +332,7 @@ html[data-theme="dark"] body {

/* Base Styles */
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-family: 'Inter', 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Meiryo', sans-serif;
line-height: 1.6;
color: var(--gray-700);
background: var(--gray-50);
Expand Down Expand Up @@ -1066,8 +1117,43 @@ body {
border: 0;
}

/* Skip to main content link for accessibility */
.skip-to-main {
position: absolute;
top: -100px;
left: 10px;
z-index: 10000;
padding: 0.75rem 1.5rem;
background: var(--primary-600);
color: white;
text-decoration: none;
font-weight: 600;
border-radius: 0.5rem;
box-shadow: var(--shadow-lg);
transition: top 0.3s ease;
}

.skip-to-main:focus {
top: 10px;
outline: 3px solid var(--primary-300);
outline-offset: 2px;
}

[data-theme="dark"] .skip-to-main {
background: var(--primary-500);
}

[data-theme="dark"] .skip-to-main:focus {
outline-color: var(--primary-200);
}

/* Mobile Navigation Improvements */
@media (max-width: 768px) {
/* Hide desktop toggles on mobile */
.desktop-toggles {
display: none !important;
}

/* Improve mobile header layout */
.site-header .wrapper {
display: flex;
Expand Down
Loading