<!DOCTYPE html>

<head>

<title>Film & Media Portfolio</title>

<style>

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

body {

font-family: 'Helvetica Neue', Arial, sans-serif;

background: #0a0a0a;

color: #fff;

overflow-x: hidden;

}

nav {

position: fixed;

top: 0;

width: 100%;

padding: 2rem 5%;

display: flex;

justify-content: space-between;

align-items: center;

z-index: 1000;

background: rgba(10, 10, 10, 0.8);

backdrop-filter: blur(10px);

}

.logo {

font-size: 1.5rem;

font-weight: 700;

letter-spacing: 2px;

}

.nav-links {

display: flex;

gap: 2rem;

list-style: none;

}

.nav-links a {

color: #fff;

text-decoration: none;

font-size: 0.95rem;

transition: color 0.3s;

letter-spacing: 1px;

}

.nav-links a:hover {

color: #ff6b6b;

}

.hero {

height: 100vh;

display: flex;

align-items: center;

justify-content: center;

text-align: center;

background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 100%);

position: relative;

}

.hero::before {

content: '';

position: absolute;

top: 0;

left: 0;

right: 0;

bottom: 0;

background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 600"><rect fill="%231a1a2e" width="1200" height="600"/><circle cx="200" cy="150" r="100" fill="%23ff6b6b" opacity="0.1"/><circle cx="900" cy="400" r="150" fill="%234ecdc4" opacity="0.1"/></svg>');

opacity: 0.3;

animation: float 20s infinite ease-in-out;

}

@keyframes float {

0%, 100% { transform: translateY(0); }

50% { transform: translateY(-20px); }

}

.hero-content {

position: relative;

z-index: 1;

}

.hero h1 {

font-size: 4.5rem;

margin-bottom: 1rem;

font-weight: 700;

background: linear-gradient(135deg, #fff 0%, #ff6b6b 100%);

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

animation: fadeInUp 1s ease-out;

}

.hero p {

font-size: 1.5rem;

color: #aaa;

margin-bottom: 2rem;

animation: fadeInUp 1s ease-out 0.2s backwards;

}

@keyframes fadeInUp {

from {

opacity: 0;

transform: translateY(30px);

}

to {

opacity: 1;

transform: translateY(0);

}

.cta-btn {

display: inline-block;

padding: 1rem 2.5rem;

background: #ff6b6b;

color: #fff;

text-decoration: none;

border-radius: 50px;

font-weight: 600;

transition: transform 0.3s, box-shadow 0.3s;

animation: fadeInUp 1s ease-out 0.4s backwards;

}

.cta-btn:hover {

transform: translateY(-3px);

box-shadow: 0 10px 30px rgba(255, 107, 107, 0.4);

}

section {

padding: 5rem 5%;

}

h2 {

font-size: 3rem;

margin-bottom: 3rem;

text-align: center;

background: linear-gradient(135deg, #fff 0%, #4ecdc4 100%);

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

}

.work-grid {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));

gap: 2rem;

margin-top: 3rem;

}

.work-item {

position: relative;

height: 400px;

border-radius: 15px;

overflow: hidden;

cursor: pointer;

transition: transform 0.4s;

}

.work-item:hover {

transform: scale(1.03);

}

.work-item img {

width: 100%;

height: 100%;

object-fit: cover;

transition: transform 0.4s;

}

.work-item:hover img {

transform: scale(1.1);

}

.work-overlay {

position: absolute;

bottom: 0;

left: 0;

right: 0;

padding: 2rem;

background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, transparent 100%);

transform: translateY(100%);

transition: transform 0.4s;

}

.work-item:hover .work-overlay {

transform: translateY(0);

}

.work-overlay h3 {

font-size: 1.5rem;

margin-bottom: 0.5rem;

}

.work-overlay p {

color: #aaa;

font-size: 0.95rem;

}

.about-content {

max-width: 800px;

margin: 0 auto;

text-align: center;

line-height: 1.8;

color: #ccc;

font-size: 1.1rem;

}

.contact-form {

max-width: 600px;

margin: 0 auto;

}

.form-group {

margin-bottom: 1.5rem;

}

.form-group input,

.form-group textarea {

width: 100%;

padding: 1rem;

background: rgba(255, 255, 255, 0.05);

border: 1px solid rgba(255, 255, 255, 0.1);

border-radius: 10px;

color: #fff;

font-family: inherit;

font-size: 1rem;

transition: border-color 0.3s;

}

.form-group input:focus,

.form-group textarea:focus {

outline: none;

border-color: #ff6b6b;

}

.form-group textarea {

min-height: 150px;

resize: vertical;

}

.submit-btn {

width: 100%;

padding: 1rem;

background: linear-gradient(135deg, #ff6b6b 0%, #4ecdc4 100%);

border: none;

border-radius: 10px;

color: #fff;

font-size: 1.1rem;

font-weight: 600;

cursor: pointer;

transition: transform 0.3s, box-shadow 0.3s;

}

.submit-btn:hover {

transform: translateY(-2px);

box-shadow: 0 10px 30px rgba(255, 107, 107, 0.3);

}

footer {

text-align: center;

padding: 2rem;

background: #000;

color: #666;

}

.modal {

display: none;

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: rgba(0, 0, 0, 0.95);

z-index: 2000;

align-items: center;

justify-content: center;

padding: 2rem;

}

.modal.active {

display: flex;

}

.modal-content {

background: #1a1a2e;

border-radius: 20px;

max-width: 900px;

width: 100%;

max-height: 90vh;

overflow-y: auto;

position: relative;

padding: 3rem;

animation: modalSlideIn 0.4s ease-out;

}

@keyframes modalSlideIn {

from {

opacity: 0;

transform: translateY(50px);

}

to {

opacity: 1;

transform: translateY(0);

}

.close-modal {

position: absolute;

top: 1.5rem;

right: 1.5rem;

width: 40px;

height: 40px;

background: rgba(255, 255, 255, 0.1);

border: none;

border-radius: 50%;

color: #fff;

font-size: 1.5rem;

cursor: pointer;

transition: background 0.3s, transform 0.3s;

}

.close-modal:hover {

background: #ff6b6b;

transform: rotate(90deg);

}

.modal-content h3 {

font-size: 2.5rem;

margin-bottom: 1rem;

color: #fff;

}

.modal-meta {

color: #4ecdc4;

margin-bottom: 2rem;

font-size: 1.1rem;

}

.modal-description {

color: #ccc;

line-height: 1.8;

font-size: 1.1rem;

margin-bottom: 2rem;

}

.video-container {

position: relative;

padding-bottom: 56.25%;

height: 0;

overflow: hidden;

border-radius: 10px;

margin-bottom: 2rem;

}

.video-container iframe {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

}

@media (max-width: 768px) {

.hero h1 {

font-size: 2.5rem;

}

.hero p {

font-size: 1.2rem;

}

.nav-links {

gap: 1rem;

}

h2 {

font-size: 2rem;

}

.work-grid {

grid-template-columns: 1fr;

}

.modal-content {

padding: 2rem;

}

.modal-content h3 {

font-size: 1.8rem;

}

</style>

</head>

<body>

<nav>

<li><a href="#about">About</a></li>

<li><a href="#contact">Contact</a></li>

</ul>

</nav>

<h1>Film & Media Creator</h1>

<p>Telling stories through visual motion</p>

</div>

<h2>Featured Projects</h2>

<h3>Short Film Title</h3>

<p>Drama • 2024 • 15 min</p>

</div>

<h3>Documentary</h3>

<p>Non-Fiction • 2024 • 30 min</p>

</div>

<h3>Commercial Work</h3>

<p>Advertisement • 2024 • 1 min</p>

</div>

<h3>Music Video</h3>

<p>Music • 2024 • 4 min</p>

</div>

<h3>Web Series</h3>

<p>Comedy • 2024 • 8 episodes</p>

</div>

<h3>Experimental Film</h3>

<p>Avant-garde • 2024 • 10 min</p>

</div>

</section>

<h2>About Me</h2>

<p>I'm a filmmaker and media creator passionate about visual storytelling. With a background in cinematography and editing, I bring stories to life through compelling imagery and thoughtful narrative structure. My work spans multiple genres including documentary, narrative fiction, and commercial content.</p>

<br>

<p>I believe in the power of film to connect, inspire, and transform perspectives. Every project is an opportunity to explore new techniques and push creative boundaries.</p>

</div>

</section>

<h2>Get In Touch</h2>

</div>

</div>

</div>

<button type="submit" class="submit-btn">Send Message</button>

</form>

</section>

</footer>

</div>

const projects = [

{

title: "Short Film Title",

meta: "Drama • 2024 • 15 min",

youtubeId: "dQw4w9WgXcQ", // Replace with your YouTube video ID

description: "This is a powerful drama exploring themes of identity and belonging. Shot over three weeks in urban locations, this film showcases intimate character moments and stunning cinematography. The story follows a protagonist navigating complex relationships and personal growth."

{

title: "Documentary",

meta: "Non-Fiction • 2024 • 30 min",

youtubeId: "", // Leave empty for text-only projects

description: "An in-depth exploration of contemporary issues affecting our community. Through interviews and observational footage, this documentary sheds light on untold stories. The project involved extensive research and collaboration with local organizations to bring authentic voices to the screen."

{

title: "Commercial Work",

meta: "Advertisement • 2024 • 1 min",

youtubeId: "dQw4w9WgXcQ", // Replace with your YouTube video ID

description: "A sleek commercial campaign designed to capture attention and drive engagement. This project demonstrates my ability to work within brand guidelines while bringing creative vision to life. Fast-paced editing and dynamic visuals create memorable impact."

{

title: "Music Video",

meta: "Music • 2024 • 4 min",

youtubeId: "",

description: "A visually striking music video that enhances the artist's vision through innovative cinematography and editing techniques. The concept blends practical effects with creative lighting to create a dreamlike atmosphere that complements the music's emotional journey."

{

title: "Web Series",

meta: "Comedy • 2024 • 8 episodes",

youtubeId: "dQw4w9WgXcQ", // Replace with your YouTube video ID

description: "A comedic web series that gained significant following online. Each episode is crafted with sharp writing and dynamic performances. The series showcases my ability to maintain consistency across multiple episodes while keeping the content fresh and engaging."

{

title: "Experimental Film",

meta: "Avant-garde • 2024 • 10 min",

youtubeId: "",

description: "An experimental piece pushing the boundaries of traditional narrative filmmaking. This project explores abstract concepts through visual metaphors and unconventional editing techniques. It represents my commitment to artistic innovation and creative risk-taking."

}

];

function openModal(index) {

const project = projects[index];

const modal = document.getElementById('projectModal');

document.getElementById('modalTitle').textContent = project.title;

document.getElementById('modalMeta').textContent = project.meta;

document.getElementById('modalDescription').textContent = project.description;

const videoContainer = document.getElementById('modalVideo');

if (project.youtubeId) {

videoContainer.innerHTML = `

<iframe

src="https://www.youtube.com/embed/${project.youtubeId}"

frameborder="0"

allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"

allowfullscreen>

</iframe>

</div>

} else {

videoContainer.innerHTML = '';

}

modal.classList.add('active');

document.body.style.overflow = 'hidden';

}

function closeModal() {

const modal = document.getElementById('projectModal');

modal.classList.remove('active');

document.body.style.overflow = 'auto';

// Stop video playback

document.getElementById('modalVideo').innerHTML = '';

}

function closeModalOnOutside(event) {

if (event.target.id === 'projectModal') {

closeModal();

}

function handleSubmit(e) {

e.preventDefault();

alert('Thank you for your message! I\'ll get back to you soon.');

e.target.reset();

}

document.querySelectorAll('a[href^="#"]').forEach(anchor => {

anchor.addEventListener('click', function (e) {

e.preventDefault();

const target = document.querySelector(this.getAttribute('href'));

target.scrollIntoView({ behavior: 'smooth' });

});

</script>

</body>

</html>