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

Update README.md

Browse source 
readme update
This commit is contained in:
Paweł Orzech 2025-06-28 17:00:20 +02:00
parent 338fd4322b
commit eb14201acf
1 changed files with 25 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
README.md
View file

@ -1,21 +1,32 @@
# orzech.me # 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). - **Bilingual Content:** Supports both Polish (🇵🇱) and English (🇬🇧). The user's language preference is saved in `localStorage`.
- **Multi-language Support:** The website supports both Polish and English, with content dynamically updated based on user selection. - **Dynamic Theme Switching:**
- **Real-time Clock:** Displays the current time with an appropriate emoji (sun, sunset, or moon) based on the time of day. - **Light Mode (☀️):** A gentle, animated gradient background with a glowing, drifting sun.
- **Contact Information:** Provides direct email links for Paulina and Paweł. - **Dark Mode (🌙):** A deep, dark gradient background with twinkling stars, a glowing moon, and occasional shooting stars.
- **Navigation to Personal Pages:** Links to Paweł's blog and a placeholder for Paulina's page. - **System Mode (💻):** Automatically syncs with the user's operating system's color scheme.
- **Responsive Design:** The layout adjusts for optimal viewing on various screen sizes. - 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 `<html>` element and storing the user's preference in `localStorage`. It also listens for system theme changes. - **Styling:** [Tailwind CSS](https://tailwindcss.com/) is used for utility-first styling. All custom styles and animations are included within a `<style>` block in the head of the document.
- **Language Switching:** Translations are stored in a JavaScript object. When a language is selected, JavaScript updates the `lang` attribute of the `<html>` element and iterates through elements with `data-translate-key` attributes to update their content. Language preference is also saved in `localStorage`. - **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.
- **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). - **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`.
- **Favicon:** A dynamic SVG favicon is used to display an emoji (walnut) directly in the browser tab. - **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.