ashleyoon.com/project3.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>Helvetica Type Specimen - 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>Helvetica Type Specimen</h1>
              <p class="project-subtitle">This project explores Neue Helvetica's history, characteristics, and its transformative role in the NYC subway system, where it brought clarity to wayfinding in the 1970s.</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">September 2025</span>
                  </div>
                  <div class="meta-item">
                      <span class="meta-label">Tools</span>
                      <span class="meta-value">Adobe InDesign</span>
                  </div>
              </div>
          </div>

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

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

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

          <div class="project-images-grid">
              <img src="./images/nyc.png" alt="Detail 1">
              <img src="./images/nyc1.png" alt="Detail 2">
              <img src="./images/nyc2.png" alt="Detail 3">
              <img src="./images/nyc3.png" alt="Detail 4">
              <img src="./images/nyc4.png" alt="Detail 5">
              <img src="./images/nyc5.png" 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>