diff --git a/README.md b/README.md index 37a5153..19a47bc 100644 --- a/README.md +++ b/README.md @@ -1,21 +1,32 @@ # orzech.me -This is a personal website for Paulina and Paweł Orzech. It serves as a central hub for their online presence, providing contact information and links to their individual projects and social media. +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: +## ✨ Features -- **Dynamic Theme Switching:** Users can switch between light, dark, and system-preferred themes. The site dynamically adjusts its appearance, including background animations (sun for light mode, moon and stars for dark mode). -- **Multi-language Support:** The website supports both Polish and English, with content dynamically updated based on user selection. -- **Real-time Clock:** Displays the current time with an appropriate emoji (sun, sunset, or moon) based on the time of day. -- **Contact Information:** Provides direct email links for Paulina and Paweł. -- **Navigation to Personal Pages:** Links to Paweł's blog and a placeholder for Paulina's page. -- **Responsive Design:** The layout adjusts for optimal viewing on various screen sizes. +- **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. +- **SEO Friendly:** Includes meta tags for description and keywords to improve search engine visibility. +- **Modern Tech Stack:** Built with HTML, Tailwind CSS, and vanilla JavaScript, ensuring a lightweight and fast experience. -## How it Works: +## 🛠️ How It Works -The website is built using plain HTML, CSS (with Tailwind CSS for utility classes), and JavaScript. +The entire site is a single `index.html` file, making it extremely portable and easy to deploy. -- **Theme Management:** JavaScript handles theme switching by toggling CSS classes on the `` element and storing the user's preference in `localStorage`. It also listens for system theme changes. -- **Language Switching:** Translations are stored in a JavaScript object. When a language is selected, JavaScript updates the `lang` attribute of the `` element and iterates through elements with `data-translate-key` attributes to update their content. Language preference is also saved in `localStorage`. -- **Animations:** CSS animations are used for background effects (wind breeze, sun glow/drift, star twinkle, shooting stars, moon glow/drift) and subtle UI interactions (button hovers, content fade-in, GitHub link wiggle). -- **Favicon:** A dynamic SVG favicon is used to display an emoji (walnut) directly in the browser tab. \ No newline at end of file +- **Styling:** [Tailwind CSS](https://tailwindcss.com/) is used for utility-first styling. All custom styles and animations are included within a `