pawelorzech/orzech.me
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improve website accessibility, SEO, and performance

Browse source 
- Add comprehensive ARIA labels and semantic HTML structure
- Enhance SEO with Open Graph, Twitter Cards, and canonical URL
- Optimize performance by removing unused CSS code
- Improve multilingual error handling for Mastodon feed
- Update sitemap with current date
- Update README with new features

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Paweł Orzech 2025-08-20 16:14:51 +02:00
parent 71a850d85b
commit 3ffd1a2c3b
3 changed files with 34 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
README.md
View file

@ -16,7 +16,9 @@ This is the personal landing page for Paulina and Paweł Orzech. It's a simple,
- A "wiggle" animation on the GitHub link in the footer on hover.
- The nut emoji (🌰) in the footer grows and rotates on hover.
- **Responsive Design:** The layout is fully responsive and adapts to different screen sizes, from mobile phones to desktops.
- **SEO Friendly:** Includes meta tags for description and keywords to improve search engine visibility.
- **Accessibility Features:** Full ARIA label support, semantic HTML structure, and keyboard navigation friendly.
- **SEO Optimized:** Comprehensive meta tags including Open Graph, Twitter Cards, canonical URLs, and structured data for improved search engine visibility and social media sharing.
- **Performance Optimized:** Clean, efficient code with optimized animations and minimal resource usage.
- **Modern Tech Stack:** Built with HTML, Tailwind CSS, and vanilla JavaScript, ensuring a lightweight and fast experience.
## 🛠️ How It Works

48
index.html
View file

@ -8,6 +8,15 @@
<title>Paulina i Paweł Orzech</title>
<meta name="description" content="Oficjalna strona Pauliny i Pawła Orzech. Znajdź informacje kontaktowe, linki do bloga Pawła i innych projektów.">
<meta name="keywords" content="Paulina Orzech, Paweł Orzech, orzech.me, blog, strona osobista, kontakt, programowanie, fotografia">
<meta property="og:title" content="Paulina i Paweł Orzech">
<meta property="og:description" content="Oficjalna strona Pauliny i Pawła Orzech. Znajdź informacje kontaktowe, linki do bloga Pawła i innych projektów.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://orzech.me">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Paulina i Paweł Orzech">
<meta name="twitter:description" content="Oficjalna strona Pauliny i Pawła Orzech. Znajdź informacje kontaktowe, linki do bloga Pawła i innych projektów.">
<meta name="author" content="Paweł Orzech">
<link rel="canonical" href="https://orzech.me">
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🌰</text></svg>">
<script src="https://cdn.tailwindcss.com"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
@ -160,11 +169,6 @@
}
/* Sun animation for light mode */
@keyframes sun-glow {
0%, 100% { box-shadow: 0 0 20px 8px rgba(255, 255, 200, 0.4); }
@ -236,18 +240,18 @@
<div id="sun-container" class="absolute top-0 left-0 w-full h-1/2 overflow-hidden pointer-events-none"></div>
<div id="moon-container" class="absolute top-0 left-0 w-full h-1/2 overflow-hidden pointer-events-none"></div>
<div id="theme-switcher" class="switcher absolute top-4 left-4 flex space-x-3">
<button id="theme-light" class="text-2xl">☀️</button>
<button id="theme-dark" class="text-2xl">🌙</button>
<button id="theme-system" class="text-2xl">💻</button>
<div id="theme-switcher" class="switcher absolute top-4 left-4 flex space-x-3" role="group" aria-label="Theme selector">
<button id="theme-light" class="text-2xl" aria-label="Light theme" title="Light theme">☀️</button>
<button id="theme-dark" class="text-2xl" aria-label="Dark theme" title="Dark theme">🌙</button>
<button id="theme-system" class="text-2xl" aria-label="System theme" title="System theme">💻</button>
</div>
<div class="switcher absolute top-4 right-4 flex space-x-3">
<button id="lang-pl" class="text-2xl">🇵🇱</button>
<button id="lang-en" class="text-2xl">🇬🇧</button>
<div class="switcher absolute top-4 right-4 flex space-x-3" role="group" aria-label="Language selector">
<button id="lang-pl" class="text-2xl" aria-label="Polski" title="Polski">🇵🇱</button>
<button id="lang-en" class="text-2xl" aria-label="English" title="English">🇬🇧</button>
</div>
<main id="content" class="animate-on-load text-center p-8 space-y-10">
<main id="content" class="animate-on-load text-center p-8 space-y-10" role="main">
<h1 data-translate-key="title" class="text-5xl md:text-7xl font-bold tracking-tight text-blue-900 dark:text-blue-200">
Paulina i Paweł Orzech
@ -273,11 +277,11 @@
</div>
</div>
<div id="mastodon-feed" class="text-sm text-gray-600 dark:text-gray-400 pt-6"></div>
<section id="mastodon-feed" class="text-sm text-gray-600 dark:text-gray-400 pt-6" aria-label="Latest Mastodon post"></section>
</main>
<footer id="footer" class="animate-on-load absolute bottom-4 text-center w-full px-8 text-sm text-gray-500 dark:text-gray-400">
<footer id="footer" class="animate-on-load absolute bottom-4 text-center w-full px-8 text-sm text-gray-500 dark:text-gray-400" role="contentinfo">
<p class="flex flex-col md:flex-row items-center justify-center">
<span data-translate-key="copyright">&copy; 2025 Paulina i Paweł Orzech. Wszelkie prawa zastrzeżone.</span>
<span class="hidden md:inline md:mx-2">|</span>
@ -628,11 +632,15 @@
const description = latestPost.querySelector("description").textContent;
const link = latestPost.querySelector("link").textContent;
const currentLang = document.documentElement.lang;
const title = currentLang === 'pl' ? 'Ostatni wpis z Mastodona:' : 'Latest Mastodon post:';
const linkText = currentLang === 'pl' ? 'Zobacz na Mastodonie' : 'View on Mastodon';
feedContainer.innerHTML = `
<p class="font-semibold mb-2 text-left">Ostatni wpis z Mastodona:</p>
<p class="font-semibold mb-2 text-left">${title}</p>
<div class="p-4 border rounded-lg shadow-md bg-white dark:bg-gray-700 text-left">
${description}
<a href="${link}" target="_blank" rel="noopener noreferrer" class="text-blue-500 dark:text-blue-400 hover:underline block mt-2">Zobacz na Mastodonie</a>
<a href="${link}" target="_blank" rel="noopener noreferrer" class="text-blue-500 dark:text-blue-400 hover:underline block mt-2">${linkText}</a>
</div>
`;
} else {
@ -641,7 +649,11 @@
})
.catch(error => {
console.error('Error fetching Mastodon feed:', error);
feedContainer.innerHTML = '<p>Nie można załadować wpisu z Mastodona.</p>';
const currentLang = document.documentElement.lang;
const errorMsg = currentLang === 'pl'
? '<p>Nie można załadować wpisu z Mastodona.</p>'
: '<p>Unable to load Mastodon post.</p>';
feedContainer.innerHTML = errorMsg;
});
};
</script>

2
sitemap.xml
View file

@ -2,7 +2,7 @@
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>https://orzech.me/</loc>
<lastmod>2025-06-28</lastmod>
<lastmod>2025-08-20</lastmod>
<changefreq>monthly</changefreq>
<priority>1.0</priority>
</url>