<!DOCTYPE html>

<head>

<title>Rae Helms - Printmaker</title>

<style>

body {

font-family: 'Inter', sans-serif;

background-color: #FDFDFD;

color: #333333;

}

.font-serif {

font-family: 'Playfair Display', serif;

}

.gallery-item {

transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;

}

.gallery-item:hover {

transform: scale(1.03);

box-shadow: 0 10px 20px rgba(0,0,0,0.1), 0 6px 6px rgba(0,0,0,0.1);

}

.fade-in {

opacity: 0;

transform: translateY(20px);

transition: opacity 0.6s ease-out, transform 0.6s ease-out;

}

.fade-in.visible {

opacity: 1;

transform: translateY(0);

}

.modal {

transition: opacity 0.25s ease;

}

.modal-content {

transition: transform 0.25s ease;

}

</style>

</head>

<a href="#" class="font-serif text-2xl font-bold tracking-wider">Rae Helms</a>

<a href="#portfolio" class="text-gray-600 hover:text-black transition duration-300">Portfolio</a>

<a href="#about" class="text-gray-600 hover:text-black transition duration-300">About</a>

<a href="#contact" class="text-gray-600 hover:text-black transition duration-300">Contact</a>

</div>

</nav>

<h1 class="font-serif text-5xl md:text-7xl font-bold leading-tight">Art in Relief</h1>

<p class="mt-6 text-lg md:text-xl text-gray-600 max-w-2xl mx-auto">Exploring form, texture, and narrative through the timeless craft of printmaking.</p>

</div>

</header>

<h2 class="font-serif text-4xl font-bold">Portfolio</h2>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</main>

</div>

<h2 class="font-serif text-4xl font-bold">About the Artist</h2>

<p class="mt-6 text-lg text-gray-600">My name is Rae Helms and I am a printmaker living and working in Philadelphia, PA. I received my BFA from the Maryland Institute College of Art in 2017.</p>

<p class="mt-4 text-lg text-gray-600">My work explores the intersections of nature, mythology, and personal history. I am drawn to the meditative, deliberate process of printmaking—the carving of the block, the layering of ink, the reveal of the final print. Each piece is a story told through lines and texture.</p>

<a href="#contact" class="mt-8 inline-block bg-gray-800 text-white font-bold py-3 px-8 rounded-lg hover:bg-black transition duration-300">Get In Touch</a>

</div>

</section>

<h2 class="font-serif text-4xl font-bold">Contact</h2>

<p class="mt-6 text-lg md:text-xl text-gray-600 max-w-2xl mx-auto">For inquiries, commissions, or just to say hello, please feel free to reach out.</p>

raehelms.art@gmail.com

</a>

</a>

</div>

</section>

</div>

</footer>

</div>

</div>

// Set current year in footer

document.getElementById('year').textContent = new Date().getFullYear();

// Fade-in animation on scroll

const faders = document.querySelectorAll('.fade-in');

const appearOptions = {

threshold: 0.2,

rootMargin: "0px 0px -50px 0px"

};

const appearOnScroll = new IntersectionObserver(function(entries, appearOnScroll) {

entries.forEach(entry => {

if (!entry.isIntersecting) {

return;

} else {

entry.target.classList.add('visible');

appearOnScroll.unobserve(entry.target);

}

});

}, appearOptions);

faders.forEach(fader => {

appearOnScroll.observe(fader);

});

// Modal logic

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

const modalImage = document.getElementById('modalImage');

const modalTitle = document.getElementById('modalTitle');

const modalDescription = document.getElementById('modalDescription');

function openModal(imgSrc, title, description) {

modalImage.src = imgSrc;

modalTitle.textContent = title;

modalDescription.textContent = description;

modal.classList.remove('opacity-0', 'pointer-events-none');

document.body.style.overflow = 'hidden'; // Prevent background scrolling

setTimeout(() => {

modal.querySelector('.modal-content').classList.remove('scale-95');

}, 10);

}

function closeModal() {

modal.querySelector('.modal-content').classList.add('scale-95');

modal.classList.add('opacity-0');

setTimeout(() => {

modal.classList.add('pointer-events-none');

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

}, 250);

}

// Close modal on escape key

document.addEventListener('keydown', (event) => {

if (event.key === 'Escape') {

closeModal();

}

});

</script>

</body>

</html>