website/von.html at main · Pekadii/website · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Von</title>

  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="von.css">

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Playfair+Display:wght@400;600&display=swap" rel="stylesheet">
</head>

<body class="von-page">

  <div class="von-wrap">

    <a class="von-back" href="index.html">← Back Home</a>

    <header class="von-header">
      <div class="von-signature">
        <img src="Von.png" alt="Von Photography signature">
      </div>
    </header>

    <section class="about" id="about">
      <div class="von-about-grid">
        <div class="about-left">
          <h2>About Me</h2>
          <p>I visualize the moment and take action. No matter where the path leads, I am driven to capture the scenes that feel truly meaningful. That is what Photography means to me follow my path on where the world takes me.</p>
        </div>

        <div class="about-right">
          <div class="about-card">
            <h3>My Style</h3>
            <p>Portraits • Street • Landscape</p>
            <a class="btn btn-small" href="#contact">Contact me</a>
          </div>
        </div>
      </div>
    </section>

    <section class="photo-guide">
      <h2>Understanding Exposure</h2>
      <p class="guide-intro">
        Photography is a balance between light, time, and sensitivity. Mastering exposure comes down
        to three core settings.
      </p>

      <div class="guide-grid">
        <div class="guide-card">
          <h3>Aperture</h3>
          <p>Controls depth of field and how much light enters the lens.</p>
          <ul>
            <li><strong>Low f-stop:</strong> brighter, shallow background</li>
            <li><strong>High f-stop:</strong> darker, deeper focus</li>
          </ul>
        </div>

        <div class="guide-card">
          <h3>Shutter Speed</h3>
          <p>Controls motion and exposure time.</p>
          <ul>
            <li><strong>Slow:</strong> motion blur, creative movement</li>
            <li><strong>Fast:</strong> freeze action</li>
          </ul>
        </div>

        <div class="guide-card">
          <h3>ISO</h3>
          <p>Controls sensor sensitivity to light.</p>
          <ul>
            <li><strong>Low:</strong> clean, sharp images</li>
            <li><strong>High:</strong> brighter, more grain</li>
          </ul>
        </div>
      </div>
    </section>


    <section class="gallery" id="gallery">
      <div class="gallery-grid">
        <a class="tile" href="Image (3).png" target="_blank" rel="noopener">
          <img src="Image (3).png" alt="Gallery photo 1" />
        </a>

        <a class="tile tile-tall" href="Image (4).png" target="_blank" rel="noopener">
          <img src="Image (4).png" alt="Gallery photo 2" />
        </a>
      </div>

      <p class="von-quote">
        “The world is full of paths, but only your lens can find the meaning in the journey. Capture what moves you, and you’ll move the world.”
      </p>
    </section>


    <section class="contact-section" id="contact">
      <div class="contact-cta">
        <p class="contact-kicker">Let’s talk</p>
        <h2>Questions, edits, presets, or shoots.</h2>
        <button class="contact-launch" type="button" data-contact-open>Open chat</button>
      </div>

      <div class="contact-modal" id="contactModal" hidden>
        <button class="contact-backdrop" type="button" aria-label="Close contact form" data-contact-close></button>

        <div class="contact-window" role="dialog" aria-modal="true" aria-labelledby="contactTitle">
          <div class="contact-window-head">
            <div>
              <p class="contact-window-kicker">Von</p>
              <h3 id="contactTitle">Send a message</h3>
            </div>
            <button class="contact-close" type="button" aria-label="Close contact form" data-contact-close>&times;</button>
          </div>

          <div class="contact-thread" aria-hidden="true">
            <div class="contact-bubble contact-bubble-reply">If you have any questions, please fill out the form below and I’ll get back to you as soon as I can!</div>
          </div>

          <form class="contact-form" action="https://formspree.io/f/mnndnyar" method="POST">
            <input type="text" name="name" placeholder="Discord or name" required />
            <input type="email" name="email" placeholder="Your email" required />
            <textarea name="message" placeholder="Your message" required></textarea>
            <button type="submit">Send Message</button>
          </form>
        </div>
      </div>
    </section>

    <footer class="von-footer">
      Copyright © 2025 - Pekadi Photography - All rights reserved.
    </footer>
  </div>

  <script>
    (function(){
      const modal = document.getElementById("contactModal");
      if(!modal) return;

      const openers = document.querySelectorAll('[data-contact-open], a[href="#contact"]');
      const closers = modal.querySelectorAll("[data-contact-close]");
      const firstInput = modal.querySelector("input, textarea");

      function openContact(event){
        if(event) event.preventDefault();
        modal.hidden = false;
        document.body.classList.add("contact-open");
        if(firstInput) requestAnimationFrame(() => firstInput.focus());
      }

      function closeContact(){
        modal.hidden = true;
        document.body.classList.remove("contact-open");
      }

      openers.forEach((opener) => {
        opener.addEventListener("click", openContact);
      });

      closers.forEach((closer) => {
        closer.addEventListener("click", closeContact);
      });

      document.addEventListener("keydown", (event) => {
        if(event.key === "Escape" && !modal.hidden){
          closeContact();
        }
      });
    })();
  </script>

</body>
</html>