pawelorzech/orzech.me
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
No description
32 commits 3 branches 0 tags 80 KiB
HTML 100%
Find a file
Claude c6f8488ffe
Transform site into retro 90s terminal with CRT effects 
Complete redesign featuring:
- Terminal window UI with titlebar, ASCII separators, command prompt
- 4 color themes: Green Phosphor, Amber Monitor, Hacker (Matrix rain), 90s Web
- CRT effects: scanlines, vignette, flicker, chromatic aberration, glow
- Boot sequence animation on first visit (skipped on reload)
- Matrix rain canvas for hacker theme
- Typewriter effect, blinking cursor, random glitch effect
- Retro elements: visitor counter, under construction bar, marquee text
- Easter eggs: Konami code, clickable nut ASCII art
- Full mobile responsiveness (full-bleed terminal on small screens)
- Accessibility: prefers-reduced-motion support, ARIA labels, keyboard nav
- Bilingual PL/EN preserved with terminal-styled translations
- Mastodon feed with terminal quote styling

https://claude.ai/code/session_01EER32WuQoBiDvQCKqaw2XT
2026-03-10 22:02:15 +00:00
.DS_Store Create .DS_Store 2025-06-28 23:52:46 +02:00
.gitattributes Initial commit 2025-06-28 01:25:42 +02:00
index.html Transform site into retro 90s terminal with CRT effects 2026-03-10 22:02:15 +00:00
LICENSE Initial commit 2025-06-28 01:25:42 +02:00
PLAN.md Add retro terminal 90s redesign plan for orzech.me 2026-03-10 21:52:02 +00:00
README.md Improve website accessibility, SEO, and performance 2025-08-20 16:14:51 +02:00
robots.txt seo 2025-06-28 02:48:16 +02:00
sitemap.xml Improve website accessibility, SEO, and performance 2025-08-20 16:14:51 +02:00

README.md

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.