ashleyoon.com/project2.html at main · ashleyoon/ashleyoon.com · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Editorial Spreads - Ashley Yoon</title>
    <link rel="icon" type="image/png" href="images/AY_FavIcon.png" sizes="96x96" />
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="custom-cursor"></div>

    <div class="about-page">
      <div class="about-page-inner">
          <!-- Back Button -->
          <a href="/work.html" class="back-button"></a>

          <!-- Project Header -->
          <div class="project-detail-header">
              <h1>Editorial Spreads</h1>
              <p class="project-subtitle">Taking one Stephen Curry article and designing it six different ways. Each editorial spread explores how typography, layout, and visual style can completely transform the same content into unique reading experiences.</p>

              <div class="project-meta">
                  <div class="meta-item">
                      <span class="meta-label">Role</span>
                      <span class="meta-value">Designer</span>
                  </div>
                  <div class="meta-item">
                      <span class="meta-label">Timeline</span>
                      <span class="meta-value">October 2025</span>
                  </div>
                  <div class="meta-item">
                      <span class="meta-label">Tools</span>
                      <span class="meta-value">Adobe InDesign, Adobe Photoshop</span>
                  </div>
              </div>
          </div>

          <!-- Hero Images -->
          <div class="project-hero-image">
              <img src="./images/curryyyy.jpg" alt="Postcard mockup">
          </div>

          <div class="project-hero-image">
              <img src="./images/stephcurry5.jpg" alt="Postcard mockup 1">
          </div>

          <div class="project-hero-image">
              <img src="./images/curryy2.jpg" alt="Postcard mockup 2">
          </div>

          <div class="project-images-grid">
              <img src="./images/stephcurry.jpg" alt="Detail 1">
              <img src="./images/stephcurry3.jpg" alt="Detail 2">
              <img src="./images/curry8.jpg" alt="Detail 3">
              <img src="./images/curry20.jpg" alt="Detail 4">
              <img src="./images/curry30.jpg" alt="Detail 5">
              <img src="./images/curry40.jpg" alt="Detail 6">
          </div>

      </div>
    </div>

    <!-- Lightbox -->
    <div class="lightbox" id="lightbox">
        <span class="lightbox-close">&times;</span>
        <img class="lightbox-content" id="lightbox-img" alt="Enlarged view">
    </div>

    <script>
        // Live clock
        function updateTime() {
            const el = document.getElementById('liveTime');
            if (el) el.textContent = new Date().toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', second: '2-digit' });
        }
        updateTime();
        setInterval(updateTime, 1000);

        // Custom cursor
        const cursor = document.querySelector('.custom-cursor');

        document.addEventListener('mousemove', (e) => {
            cursor.style.left = e.clientX + 'px';
            cursor.style.top = e.clientY + 'px';
        });

        document.querySelectorAll('a, button, .lightbox-close, .project-images-grid img, .project-hero-image img').forEach(element => {
            element.addEventListener('mouseenter', () => cursor.classList.add('hover'));
            element.addEventListener('mouseleave', () => cursor.classList.remove('hover'));
        });

        // Lightbox functionality
        const lightbox = document.getElementById('lightbox');
        const lightboxImg = document.getElementById('lightbox-img');
        const lightboxClose = document.querySelector('.lightbox-close');

        document.querySelectorAll('.project-images-grid img, .project-hero-image img').forEach(img => {
            img.addEventListener('click', () => {
                lightbox.style.display = 'flex';
                lightboxImg.src = img.src;
            });
        });

        lightboxClose.addEventListener('click', () => {
            lightbox.style.display = 'none';
        });

        lightbox.addEventListener('click', (e) => {
            if (e.target === lightbox) {
                lightbox.style.display = 'none';
            }
        });

        document.addEventListener('keydown', (e) => {
            if (e.key === 'Escape' && lightbox.style.display === 'flex') {
                lightbox.style.display = 'none';
            }
        });
    </script>
</body>
</html>