Spaces:

rowild
/

visionary-frames-by-siegfried-ortner

Running

App Files Files Community

rowild commited on Oct 25, 2025

Commit

127cd6c

verified ·

1 Parent(s): 1d10032

A "Blog" page is missing, but don't call it "Blog", find a more creative name, maybe one that starts with "D"

Browse files

Files changed (4) hide show

components/footer.js +2 -1
components/navbar.js +8 -3
discourse.html +98 -0
script.js +8 -0

components/footer.js CHANGED Viewed

@@ -75,7 +75,8 @@ class CustomFooter extends HTMLElement {
                         <a href="#reviews" class="footer-link">Reviews</a>
                         <a href="#contact" class="footer-link">Contact</a>
                         <a href="#" class="footer-link">Privacy</a>
-                    </div>
                     <p class="copyright">© ${new Date().getFullYear()} Siegfried Ortner. All rights reserved.</p>
                 </div>
             </footer>

                         <a href="#reviews" class="footer-link">Reviews</a>
                         <a href="#contact" class="footer-link">Contact</a>
                         <a href="#" class="footer-link">Privacy</a>
+                        <a href="discourse.html" class="footer-link">Discourse</a>
+</div>
                     <p class="copyright">© ${new Date().getFullYear()} Siegfried Ortner. All rights reserved.</p>
                 </div>
             </footer>

components/navbar.js CHANGED Viewed

@@ -90,7 +90,12 @@ class CustomNavbar extends HTMLElement {
                     <div class="nav-line"></div>
                     <span class="nav-text">Contact</span>
                 </div>
-            </div>
         `;
         // Add GSAP animations for text reveal
@@ -150,8 +155,8 @@ class CustomNavbar extends HTMLElement {
             // Add click handler to scroll to section
             item.addEventListener('click', () => {
-                const sections = ['about', 'work', 'reviews', 'contact'];
-                if (index < sections.length) {
                     document.getElementById(sections[index]).scrollIntoView({
                         behavior: 'smooth'
                     });

                     <div class="nav-line"></div>
                     <span class="nav-text">Contact</span>
                 </div>
+                <div class="nav-item">
+                    <div class="nav-circle"></div>
+                    <div class="nav-line"></div>
+                    <span class="nav-text">Discourse</span>
+                </div>
+</div>
         `;
         // Add GSAP animations for text reveal
             // Add click handler to scroll to section
             item.addEventListener('click', () => {
+                const sections = ['about', 'work', 'reviews', 'contact', 'discourse.html'];
+if (index < sections.length) {
                     document.getElementById(sections[index]).scrollIntoView({
                         behavior: 'smooth'
                     });

discourse.html ADDED Viewed

	@@ -0,0 +1,98 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Discourse | Siegfried Ortner</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+</head>
+<body class="bg-stone-950 text-zinc-100 font-sans antialiased overflow-x-hidden">
+    <!-- Navigation -->
+    <custom-navbar></custom-navbar>
+    <!-- Hero Section -->
+    <div class="relative py-32 px-6 text-center">
+        <h1 class="text-6xl font-medium mb-4">Discourse</h1>
+        <p class="text-xl font-light text-zinc-300 tracking-wider">THOUGHTS ON VISUAL NARRATIVES</p>
+    </div>
+    <!-- Blog Posts -->
+    <section class="py-12 px-6 max-w-5xl mx-auto">
+        <div class="grid md:grid-cols-2 gap-12">
+            <!-- Post 1 -->
+            <article class="group">
+                <div class="overflow-hidden rounded-lg mb-4">
+                    <img src="http://static.photos/monochrome/640x360/47" alt="Photography Essay" class="w-full h-64 object-cover group-hover:scale-105 transition-transform duration-500">
+                </div>
+                <span class="text-zinc-400 text-sm">October 12, 2023</span>
+                <h2 class="text-2xl font-medium mt-2 mb-3 group-hover:text-zinc-300 transition-colors">The Language of Shadows</h2>
+                <p class="text-zinc-400 mb-4">Exploring how darkness shapes our visual perception in black and white photography.</p>
+                <a href="#" class="inline-flex items-center text-zinc-300 hover:text-white transition-colors">
+                    Read Essay
+                    <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
+                </a>
+            </article>
+            <!-- Post 2 -->
+            <article class="group">
+                <div class="overflow-hidden rounded-lg mb-4">
+                    <img src="http://static.photos/monochrome/640x360/48" alt="Film Analysis" class="w-full h-64 object-cover group-hover:scale-105 transition-transform duration-500">
+                </div>
+                <span class="text-zinc-400 text-sm">September 28, 2023</span>
+                <h2 class="text-2xl font-medium mt-2 mb-3 group-hover:text-zinc-300 transition-colors">Cinematic Stillness</h2>
+                <p class="text-zinc-400 mb-4">How motion pictures can evoke profound emotion through the absence of movement.</p>
+                <a href="#" class="inline-flex items-center text-zinc-300 hover:text-white transition-colors">
+                    Read Analysis
+                    <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
+                </a>
+            </article>
+            <!-- Post 3 -->
+            <article class="group">
+                <div class="overflow-hidden rounded-lg mb-4">
+                    <img src="http://static.photos/monochrome/640x360/49" alt="Behind the Scenes" class="w-full h-64 object-cover group-hover:scale-105 transition-transform duration-500">
+                </div>
+                <span class="text-zinc-400 text-sm">August 15, 2023</span>
+                <h2 class="text-2xl font-medium mt-2 mb-3 group-hover:text-zinc-300 transition-colors">Creating 'Urban Echoes'</h2>
+                <p class="text-zinc-400 mb-4">A behind-the-scenes look at the making of my latest short film.</p>
+                <a href="#" class="inline-flex items-center text-zinc-300 hover:text-white transition-colors">
+                    Read Article
+                    <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
+                </a>
+            </article>
+            <!-- Post 4 -->
+            <article class="group">
+                <div class="overflow-hidden rounded-lg mb-4">
+                    <img src="http://static.photos/monochrome/640x360/50" alt="Equipment Review" class="w-full h-64 object-cover group-hover:scale-105 transition-transform duration-500">
+                </div>
+                <span class="text-zinc-400 text-sm">July 3, 2023</span>
+                <h2 class="text-2xl font-medium mt-2 mb-3 group-hover:text-zinc-300 transition-colors">Tools of the Trade</h2>
+                <p class="text-zinc-400 mb-4">My current camera setup and why I prefer minimal equipment.</p>
+                <a href="#" class="inline-flex items-center text-zinc-300 hover:text-white transition-colors">
+                    Read Review
+                    <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
+                </a>
+            </article>
+        </div>
+        <div class="mt-16 text-center">
+            <button class="border border-zinc-600 hover:border-zinc-300 text-zinc-300 hover:text-white px-6 py-3 rounded-lg transition-colors duration-300">
+                Load More Articles
+            </button>
+        </div>
+    </section>
+    <custom-footer></custom-footer>
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+    <script src="script.js"></script>
+    <script>
+        feather.replace();
+    </script>
+</body>
+</html>

script.js CHANGED Viewed

@@ -1,3 +1,11 @@
 // Initialize GSAP animations for navbar items
 document.addEventListener('DOMContentLoaded', () => {
     // Animate the logo on hover

+// Smooth scroll to top when navigating to discourse page
+document.querySelectorAll('a[href="discourse.html"]').forEach(link => {
+    link.addEventListener('click', () => {
+        window.scrollTo({ top: 0, behavior: 'smooth' });
+    });
+});
 // Initialize GSAP animations for navbar items
 document.addEventListener('DOMContentLoaded', () => {
     // Animate the logo on hover