boyuedu.github.io/gallery_landscape.html at main · Boyuedu/boyuedu.github.io · 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
177
178
179
180
181
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Landscape Gallery | Boyue Du</title>
  <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@500&display=swap" rel="stylesheet">
  <style>
    body {
      font-family: 'Orbitron', sans-serif;
      background: linear-gradient(180deg, #0f172a, #1e293b);
      color: white;
      margin: 0;
      padding: 2em;
      text-align: center;
    }

    h1 {
      font-size: 2.5em;
      margin-bottom: 1em;
    }

    .description {
      font-family: 'Inter', sans-serif;
      font-size: 1.1em;
      max-width: 800px;
      margin: 0 auto 1em auto;
      color: #cbd5e1;
      line-height: 1.8;
    }

    .instruction {
      font-family: 'Inter', sans-serif;
      font-size: 0.95em;
      color: #94a3b8;
      margin-bottom: 2.5em;
    }

    .grid {
      display: flex;
      flex-wrap: wrap;
      gap: 2em;
      justify-content: center;
    }

    .grid img {
      width: 300px;
      height: 200px;
      object-fit: cover;
      border-radius: 12px;
      border: 2px solid #334155;
      transition: transform 0.3s ease;
      cursor: pointer;
    }

    .grid img:hover {
      transform: scale(1.05);
      box-shadow: 0 0 12px #38bdf8;
    }

    .modal {
      display: none;
      position: fixed;
      z-index: 999;
      padding-top: 5%;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.9);
    }

    .modal-content {
      margin: auto;
      display: block;
      max-width: 90%;
      max-height: 85vh;
      border-radius: 10px;
      box-shadow: 0 0 30px #38bdf8;
      transition: 0.3s;
      cursor: zoom-out;
    }
  </style>
</head>
<body>


  <h1>Landscape Photography</h1>

  <div class="description">
    The photographs displayed here were all captured by me during road trips around the world.
    Through the lens of my camera, I seek to visualize the extraordinary beauty and surreal charm of our planet,
    and moments that moved me and places that shaped my journey. This collection is not just a record of where I’ve been,
    but a way to share how I see the world.
  </div>

  <!-- Interactive Map Section -->
  <div style="margin-bottom: 3em;">
    <h2 style="font-size: 2em; color: #38bdf8;">Explore by Region</h2>
    <iframe src="us-map.html" width="100%" height="500" frameborder="0" style="border-radius: 12px; border: 2px solid #334155;"></iframe>
  </div>

  <div style="margin-bottom: 3em;">
    <h2 style="font-size: 2em; color: #38bdf8;">Explore by Photo</h2>
  </div>

  <div class="instruction">Double click each image to zoom in</div>

  <div class="grid">
    <img src="landscape_photos/landscape1.jpg">
    <img src="landscape_photos/landscape2.jpg">
    <img src="landscape_photos/landscape3.jpg">
    <img src="landscape_photos/landscape4.jpg">
    <img src="landscape_photos/landscape5.jpg">
    <img src="landscape_photos/landscape6.jpg">
    <img src="landscape_photos/landscape7.jpg">
    <img src="landscape_photos/landscape8.jpg">
    <img src="landscape_photos/landscape9.jpg">
    <img src="landscape_photos/landscape10.jpg">
    <img src="landscape_photos/landscape11.jpg">
    <img src="landscape_photos/landscape12.jpg">
    <img src="landscape_photos/landscape13.jpg">
    <img src="landscape_photos/landscape14.jpg">
    <img src="landscape_photos/landscape15.jpg">
    <img src="landscape_photos/landscape16.jpg">
    <img src="landscape_photos/landscape17.jpg">
    <img src="landscape_photos/landscape18.jpg">
    <img src="landscape_photos/landscape19.jpg">
    <img src="landscape_photos/landscape20.jpg">
    <img src="landscape_photos/landscape21.jpg">
    <img src="landscape_photos/landscape22.jpg">
    <img src="landscape_photos/landscape23.jpg">
    <img src="landscape_photos/landscape24.jpg">
    <img src="landscape_photos/landscape25.jpg">
    <img src="landscape_photos/landscape26.jpg">
    <img src="landscape_photos/landscape27.jpg">
    <img src="landscape_photos/landscape28.jpg">
    <img src="landscape_photos/landscape29.jpg">
    <img src="landscape_photos/landscape30.jpg">
    <img src="landscape_photos/landscape31.jpg">
    <img src="landscape_photos/landscape32.jpg">
    <img src="landscape_photos/landscape33.jpg">
    <img src="landscape_photos/landscape34.jpg">
    <img src="landscape_photos/landscape35.jpg">
    <img src="landscape_photos/landscape36.jpg">
    <img src="landscape_photos/landscape37.jpg">
    <img src="landscape_photos/landscape38.jpg">
    <img src="landscape_photos/landscape39.jpg">
    <img src="landscape_photos/landscape40.jpg">
    <img src="landscape_photos/landscape41.jpg">
    <img src="landscape_photos/landscape42.jpg">
    <img src="landscape_photos/landscape43.jpg">
    <img src="landscape_photos/landscape44.jpg">
    <img src="landscape_photos/landscape45.jpg">
    <img src="landscape_photos/landscape46.jpg">
    <img src="landscape_photos/landscape47.jpg">
    <img src="landscape_photos/landscape48.jpg">
    <img src="landscape_photos/landscape49.jpg">
  </div>

  <!-- Modal -->
  <div id="modal" class="modal" onclick="closeModal()">
    <img id="modal-img" class="modal-content" alt="Zoomed Photo">
  </div>

  <script>
    const modal = document.getElementById("modal");
    const modalImg = document.getElementById("modal-img");

    document.querySelectorAll('.grid img').forEach(img => {
      img.ondblclick = () => {
        modal.style.display = "block";
        modalImg.src = img.src;
      };
    });

    function closeModal() {
      modal.style.display = "none";
    }
  </script>
</body>
</html>