pawelorzech/orzech.me
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
orzech.me/README.md
Paweł Orzech 3ffd1a2c3b Improve website accessibility, SEO, and performance 
- 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>
2025-08-20 16:14:51 +02:00

3.2 KiB
Raw Permalink Blame History

orzech.me

This is the personal landing page for Paulina and Paweł Orzech. It's a simple, elegant, and feature-rich single-page application designed to serve as a digital business card.

✨ Features

  • Bilingual Content: Supports both Polish (🇵🇱) and English (🇬🇧). The user's language preference is saved in localStorage.
  • Dynamic Theme Switching:
    • Light Mode (☀️): A gentle, animated gradient background with a glowing, drifting sun.
    • Dark Mode (🌙): A deep, dark gradient background with twinkling stars, a glowing moon, and occasional shooting stars.
    • System Mode (💻): Automatically syncs with the user's operating system's color scheme.
    • Theme preference is saved in localStorage.
  • Real-time Clock: Displays the current time, dynamically updating every minute. It also shows a relevant emoji (☀️, 🌇, or 🌙) based on the time of day.
  • Interactive Elements:
    • Subtle animations on buttons and links.
    • 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.
  • 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

The entire site is a single index.html file, making it extremely portable and easy to deploy.

  • Styling: Tailwind CSS is used for utility-first styling. All custom styles and animations are included within a <style> block in the head of the document.
  • Theme Management: A JavaScript function, applyTheme(), handles the logic for switching themes. It adds or removes the dark class from the <html> element, which is then used by Tailwind's dark: variants to apply the correct styles. The theme choice is persisted in localStorage. The (prefers-color-scheme: dark) media query is used to detect the system theme.
  • Language Switching: Translations are stored in a JavaScript object. A setLanguage() function updates the text content of elements based on data-translate-key attributes. The chosen language is also persisted in localStorage.
  • Dynamic Animations:
    • The background animations (sun, moon, stars) are created and managed with JavaScript. Elements are dynamically added or removed from the DOM based on the current theme and time of day.
    • CSS keyframe animations are used for the twinkling stars, shooting stars, sun/moon glow and drift, and other interactive effects.
  • On-Load Initialization: A window.addEventListener('load', ...) function initializes the theme, language, and all event listeners for the interactive elements once the page has fully loaded.