binding/index.html at main · baes358/binding · 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
<!DOCTYPE html>
<html lang="en">

    <head>
        <title>
            Sophia Bae - Typography & Interaction Project 3
        </title>

        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <style>
            @import 'home.css';
            @import 'reset.css' layer(reset);

        </style>

        <!-- <link href="reset.css" rel="stylesheet"> -->
    </head>

    <body>


        <div class="scroll-progress"></div>

        <!-- TOP BAR -->
        <div class="top-bar">
            <span>Sophia Bae</span>
            <span>Typography & Interaction, Fall 2025</span>
        </div>

        <!-- HERO -->
        <section class="hero">
            <div class="hero-eyebrow">A digital mini-book — three essays</div>
            <h1>
                <em>Rethinking</em><br>
                <span class="outline-text">Graphic</span> Design<br>
                History
            </h1>
            <div class="hero-line"></div>
            <p class="hero-sub">
                Three perspectives that challenge how we talk about design's past — and where it could go.
            </p>
            <div class="hero-deco"></div>
        </section>

        <!-- BOOKSHELF -->
        <section class="bookshelf">
            <div class="shelf-label">Three Readings</div>
            <div class="shelf">

                <a href="./article-1/index.html" class="spine spine-green fade-up">
                    <div class="spine-inner">
                        <div class="spine-top">
                            <span class="spine-num">01</span>
                            <div class="spine-ornament">✦</div>
                        </div>
                        <div class="spine-title-wrap">
                            <span class="spine-title">Knowing Your Design History Is Crucial to Aesthetic Innovation</span>
                        </div>
                        <div class="spine-bottom">
                            <div class="spine-ornament">◆</div>
                            <span class="spine-author">Coogan</span>
                            <span class="spine-tag">Style Cycles</span>
                        </div>
                    </div>
                </a>

                <a href="./article-2/index.html" class="spine spine-teal fade-up">
                    <div class="spine-inner">
                        <div class="spine-top">
                            <span class="spine-num">02</span>
                            <div class="spine-ornament">❖</div>
                        </div>
                        <div class="spine-title-wrap">
                            <span class="spine-title">We Need Graphic Design Histories That Look Beyond the Profession</span>
                        </div>
                        <div class="spine-bottom">
                            <div class="spine-ornament">◈</div>
                            <span class="spine-author">Toppins</span>
                            <span class="spine-tag">People's Design</span>
                        </div>
                    </div>
                </a>

                <a href="./article-3/index.html" class="spine spine-indigo fade-up">
                    <div class="spine-inner">
                        <div class="spine-top">
                            <span class="spine-num">03</span>
                            <div class="spine-ornament">✧</div>
                        </div>
                        <div class="spine-title-wrap">
                            <span class="spine-title">Can We Teach Graphic Design History Without the Cult of Hero Worship?</span>
                        </div>
                        <div class="spine-bottom">
                            <div class="spine-ornament">◇</div>
                            <span class="spine-author">Toppins</span>
                            <span class="spine-tag">De-heroizing</span>
                        </div>
                    </div>
                </a>

            </div>
        </section>

        <!-- ABOUT / INTRO WITH IMAGE -->
        <section class="about-section fade-up">
            <div class="about-left">
                <div class="about-img-frame">
                    <img src="https://baes358.github.io/binding/img/designdefinitions.jpg" alt="What is Design? poster exploring multiple definitions" loading="lazy">
                </div>
                <p class="about-caption">
                    Pacenti, Elena. "Poster exploring multiple definitions of design." Instagram, posted by <a target="_blank" href="https://www.instagram.com/thecharliefund">@thecharliefund</a>.
                </p>
            </div>
            <div class="about-right">
                <h2>
                    A more <span class="word-pop">thoughtful</span> way of understanding where design <span class="word-pop">comes from</span>
                </h2>
                <p class="about-text">
                    These three texts rethink how we should talk about design history. One argues that knowing the past fuels innovation. Another insists that we learn histories that expand beyond the profession. And the third questions if we can teach design without the lens of heroes.
                </p>
                <div class="about-tags">
                    <span class="about-tag">Typography</span>
                    <span class="about-tag">Design History</span>
                    <span class="about-tag">Visual Culture</span>
                    <span class="about-tag">Style Cycles</span>
                    <span class="about-tag">Critical Theory</span>
                </div>
            </div>
        </section>

        <!-- CLOSING -->
        <section class="closing fade-up">
            <div class="closing-inner">
                <div class="closing-label">Colophon</div>

                <p class="closing-text">
                    Three very <span class="c-space">interesting</span> ways to look at <span class="c-stroke">history</span> — in addition to <span class="c-shadow">typography</span> and <span class="c-slant">interaction</span>.
                </p>

                <p class="closing-text">
                    This project was inspired by <span class="c-geronimo">Geronimo Stilton</span> — where words <span class="c-slant2">tilt</span>, <span class="c-shimmer">shimmer</span>, and <span class="c-stroke">break free</span> from the page.
                </p>

                <div class="closing-line"></div>

                <p class="closing-note">
                    Each article lives in its own color world, with expressive text treatments woven throughout.
                </p>
                <div class="closing-colors">
                    <span class="closing-dot dot-green" title="Style Cycles"></span>
                    <span class="closing-dot dot-teal" title="People's Design"></span>
                    <span class="closing-dot dot-indigo" title="De-heroizing"></span>
                </div>
            </div>
        </section>

        <!-- FOOTER -->
        <footer class="footer">
            <span class="footer-copy">Typography & Interaction © Sophia Bae 2025</span>
            <div class="footer-links">
                <a href="./article-1/index.html">Style Cycles</a>
                <a href="./article-2/index.html">People's Design</a>
                <a href="./article-3/index.html">De-heroizing</a>
            </div>
        </footer>

    </body>


</html>