My Movie Resume

:root { --color-bg-light: #f5f6fa; --color-bg-dark: #181a1b; --color-text-light: #222; --color-text-dark: #f5f6fa; --color-accent: #ff9800; --color-card-light: #fff; --color-card-dark: #23272f; --transition: 0.3s; --font: 'Vazirmatn', 'Segoe UI', 'Tahoma', 'Geneva', 'Arial', sans-serif; } @font-face { font-family: 'Vazirmatn'; src: url('https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/fonts/webfonts/Vazirmatn-Regular.woff2') format('woff2'); font-weight: normal; font-style: normal; } html, body { height: 100%; margin: 0; padding: 0; font-family: var(--font); background: var(--color-bg-light); color: var(--color-text-light); transition: background var(--transition), color var(--transition); direction: ltr; } body.dark { background: var(--color-bg-dark); color: var(--color-text-dark); } #app { max-width: 900px; margin: 32px auto; background: var(--color-card-light); border-radius: 18px; box-shadow: 0 4px 32px rgba(0,0,0,0.08); padding: 32px 24px 16px 24px; transition: background var(--transition), color var(--transition); } body.dark #app { background: var(--color-card-dark); } header { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid var(--color-accent); padding-bottom: 18px; margin-bottom: 24px; } .profile { display: flex; align-items: center; gap: 18px; } .profile-img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 3px solid var(--color-accent); background: #eee; } .controls { display: flex; gap: 10px; } .controls button { background: none; border: none; font-size: 1.2em; cursor: pointer; color: var(--color-accent); padding: 6px 12px; border-radius: 6px; transition: background 0.2s; } .controls button:hover { background: var(--color-accent); color: #fff; } main { display: flex; flex-direction: column; gap: 32px; } section { margin-bottom: 8px; } h1, h2 { margin: 0 0 8px 0; font-weight: 700; } .about p, .resume ul, .movies-list { margin: 0; } .resume ul { list-style: none; padding: 0; } .resume li { margin-bottom: 10px; padding: 10px 0; border-bottom: 1px solid #eee; } body.dark .resume li { border-bottom: 1px solid #333; } .movies-list { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 8px; } .movie-card { background: var(--color-bg-light); color: var(--color-text-light); border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.07); width: 200px; padding: 14px; transition: background var(--transition), color var(--transition), box-shadow 0.2s; display: flex; flex-direction: column; align-items: center; text-align: center; cursor: pointer; border: 2px solid transparent; } .movie-card:hover { box-shadow: 0 4px 16px rgba(255,152,0,0.15); border-color: var(--color-accent); } .movie-card img { width: 100%; height: 120px; object-fit: cover; border-radius: 8px; margin-bottom: 10px; background: #ddd; } body.dark .movie-card { background: var(--color-card-dark); color: var(--color-text-dark); } footer { text-align: center; margin-top: 32px; color: #888; font-size: 0.95em; padding-bottom: 8px; } /* RTL support */ body.rtl, body.rtl #app { direction: rtl; font-family: 'Vazirmatn', sans-serif; } body.rtl .profile { flex-direction: row-reverse; } body.rtl .movies-list { flex-direction: row-reverse; } @media (max-width: 600px) { #app { padding: 10px 2vw; } .movies-list { flex-direction: column; align-items: center; } .movie-card { width: 90vw; max-width: 320px; } header { flex-direction: column; gap: 16px; align-items: flex-start; } } // --- Data (EN/FA) --- const data = { en: { name: "Arash Khosravi", title: "Filmmaker & Editor", aboutTitle: "About Me", about: "I'm a passionate filmmaker and editor with a love for storytelling through moving images. My work spans short films, documentaries, and commercial projects. I thrive on creative collaboration and always seek new challenges.", resumeTitle: "Resume", resume: [ { role: "Director & Editor", company: "Freelance", years: "2018 - Present", desc: "Directed and edited various short films, music videos, and commercials." }, { role: "Film Editor", company: "CineArt Studio", years: "2016 - 2018", desc: "Edited award-winning documentaries and narrative films." } ], moviesTitle: "My Movies", movies: [ { title: "The Last Frame", year: "2023", desc: "A short film about memory and loss.", img: "https://images.unsplash.com/photo-1464983953574-0892a716854b?auto=format&fit=crop&w=400&q=80" }, { title: "Echoes of Silence", year: "2022", desc: "A documentary exploring urban loneliness.", img: "https://images.unsplash.com/photo-1504384308090-c894fdcc538d?auto=format&fit=crop&w=400&q=80" }, { title: "Light & Shadow", year: "2021", desc: "Experimental film on the interplay of light.", img: "https://images.unsplash.com/photo-1465101046530-73398c7f28ca?auto=format&fit=crop&w=400&q=80" } ], footer: "© 2024 Arash Khosravi. All rights reserved.", langBtn: "FA", themeBtn: "🌙" }, fa: { name: "آرش خسروی", title: "فیلمساز و تدوین‌گر", aboutTitle: "درباره من", about: "من یک فیلمساز و تدوین‌گر پرشور هستم که عاشق روایت داستان از طریق تصاویر متحرک‌ام. کارهای من شامل فیلم‌های کوتاه، مستند و پروژه‌های تجاری است. همکاری خلاقانه را دوست دارم و همیشه به دنبال چالش‌های جدید هستم.", resumeTitle: "رزومه", resume: [ { role: "کارگردان و تدوین‌گر", company: "آزاد", years: "۱۳۹۷ تا کنون", desc: "کارگردانی و تدوین فیلم‌های کوتاه، موزیک ویدیو و تبلیغاتی مختلف." }, { role: "تدوین‌گر فیلم", company: "استودیو سین‌آرت", years: "۱۳۹۵ - ۱۳۹۷", desc: "تدوین مستندها و فیلم‌های داستانی برنده جایزه." } ], moviesTitle: "فیلم‌های من", movies: [ { title: "آخرین قاب", year: "۱۴۰۲", desc: "فیلم کوتاهی درباره خاطره و فقدان.", img: "https://images.unsplash.com/photo-1464983953574-0892a716854b?auto=format&fit=crop&w=400&q=80" }, { title: "پژواک سکوت", year: "۱۴۰۱", desc: "مستندی درباره تنهایی شهری.", img: "https://images.unsplash.com/photo-1504384308090-c894fdcc538d?auto=format&fit=crop&w=400&q=80" }, { title: "نور و سایه", year: "۱۴۰۰", desc: "فیلم تجربی درباره بازی نور.", img: "https://images.unsplash.com/photo-1465101046530-73398c7f28ca?auto=format&fit=crop&w=400&q=80" } ], footer: "© ۱۴۰۳ آرش خسروی. همه حقوق محفوظ است.", langBtn: "EN", themeBtn: "☀️" } }; // --- State --- let lang = localStorage.getItem('lang') || 'en'; let dark = localStorage.getItem('theme') === 'dark'; // --- Elements --- const $ = sel => document.querySelector(sel); const nameEl = $('#name'); const titleEl = $('#title'); const aboutTitleEl = $('#about-title'); const aboutTextEl = $('#about-text'); const resumeTitleEl = $('#resume-title'); const resumeListEl = $('#resume-list'); const moviesTitleEl = $('#movies-title'); const moviesListEl = $('#movies-list'); const footerTextEl = $('#footer-text'); const langToggle = $('#lang-toggle'); const themeToggle = $('#theme-toggle'); // --- Render --- function render() { const d = data[lang]; // Direction if (lang === 'fa') { document.body.classList.add('rtl'); document.body.setAttribute('dir', 'rtl'); } else { document.body.classList.remove('rtl'); document.body.setAttribute('dir', 'ltr'); } // Theme if (dark) { document.body.classList.add('dark'); } else { document.body.classList.remove('dark'); } // Profile nameEl.textContent = d.name; titleEl.textContent = d.title; // About aboutTitleEl.textContent = d.aboutTitle; aboutTextEl.textContent = d.about; // Resume resumeTitleEl.textContent = d.resumeTitle; resumeListEl.innerHTML = ''; d.resume.forEach(item => { const li = document.createElement('li'); li.innerHTML = `${item.role} - ${item.company} ${item.years}
${item.desc}`; resumeListEl.appendChild(li); }); // Movies moviesTitleEl.textContent = d.moviesTitle; moviesListEl.innerHTML = ''; d.movies.forEach(movie => { const card = document.createElement('div'); card.className = 'movie-card'; card.innerHTML = `

${movie.title} (${movie.year})

${movie.desc}

`; moviesListEl.appendChild(card); }); // Footer footerTextEl.textContent = d.footer; // Controls langToggle.textContent = d.langBtn; themeToggle.textContent = d.themeBtn; } // --- Events --- langToggle.addEventListener('click', () => { lang = lang === 'en' ? 'fa' : 'en'; localStorage.setItem('lang', lang); render(); }); themeToggle.addEventListener('click', () => { dark = !dark; localStorage.setItem('theme', dark ? 'dark' : 'light'); render(); }); // --- Initial Render --- render();