-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
186 lines (160 loc) · 6.82 KB
/
index.html
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
182
183
184
185
186
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Yiğit Toprak </title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="icon" href="assets/icons/duckRubber.png" type="image/gif" sizes="16x16">
<script src="libraries/p5.min.js"></script>
<script src="libraries/p5.sound.min.js"></script>
<script src="https://code.jquery.com/jquery-3.7.0.min.js"
integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
<script defer src="interactions.js"></script>
<script defer src="brush.js"></script>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-ZY26QKJ89J"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'G-ZY26QKJ89J');
</script>
</head>
<body>
<div class="mobile">
<div class="mobile-content">
For the best experience, please view this website on a desktop browser.
</div>
<div class="mobile-progress">
If you still wish to continue... <br><br>
<button class="continue"> continue </button>
</div>
</div>
<div class="container">
<div id="sketch-holder"></div>
<div class="interaction-box">
<div class="boost selectedWork"> selectedWork() </div>
<div class="boost info"> i() </div>
<!-- <div class="boost archives"> archives() </div> -->
<div class="boost thisSite"> thisWebsite() </div>
<div class="boost">
<a href="https://www.are.na/yigit-toprak-ceo0kj3p55g" target="_blank">
are.na()</a>
</div>
<div class="boost">
email()</a>
</div>
<div class="boost manifesto"> manifesto(✽) </div>
<div class="boost questionInteraction"> ?() </div>
</div>
<div class="info-detail">
<button class="close-info"> close </button>
<h1>
Info
</h1>
<p>
<span> Yiğit Toprak</span> is a Turkish graphic designer based in Toronto, Canada. He is interested in the
intersection of design and technology, and how they can be used
to communicate ideas and create experiences. He is also interested in generative art, web development, typeface
design, calligraphy, user interface design and visual identity systems. Outside art and design, he enjoys
tools, archives, philosophy, music and general semantics.
</p>
</div>
<div class="site-detail" id="site-detail">
<button class="close-site"> close </button>
<h1>
This Website
</h1>
<p>
Being frustrated by my previous website I decided to create a new portfolio website for myself. In the past, I
prioritized crafting a site that would appeal to potential employers, often at the expense of my own creative
voice. However, this time, I am focusing on expressing my perspective as a designer. I want to infuse
playfulness into the design of my portfolio, embracing a style that differs from the conventional graphic
designer's portfolio, treating this online space as a playground.
<br><br>
<span style="background-color: black; color: yellow;"> This site is constantly under construction.</span> It is
not only a place to display my latest work, but
also a test
site — that is why I have decided to use the yellow and black colour palette. I will be constantly adding,
removing, re-styling, changing and playing around with all the features on the website, as a tangible digital
reminder of my ever evolving and changing design process and perspective.
</p>
</div>
<div class="manifesto-detail" id="manifesto-detail">
<button class="close-manifesto"> close </button>
<h1 style="text-align: center;">
✽ <br>
REINVENTING THE WHEEL <br>
THE INEFFICIENT DESIGNER'S MANIFESTO
</h1>
<ol>
<li>
Ask questions, and explore through play, rather than constantly seeking solutions — embrace the curiosity of a
mad scientist.
</li>
<li>
Engage with unconventional tools and spaces for creation.
</li>
<li>
Value the process as much , if not more than, the final outcome.
</li>
<li>
Commit to open source principles: share your work and foster a community.
</li>
<li>
Adopt an interdisciplinary approach and take inspiration outside of conventional graphic design practices.
</li>
<li>
Reinvent the wheel — seek a unique process for your creative practice rather than trying to fit into the
existing 'optimized' methodologies
</li>
</ol>
</div>
<div class="question-detail" id="question-detail">
<button class="close-question"> close </button>
<div id="sketch-container"></div>
</div>
<div class="projects">
<button class="close"> close </button>
<div class="forMore"> ↓ </div>
<h1 style="margin-top: -20px">
Selected Work
</h1>
<ul>
<li class="work duckinator"> — Duckinator Typeface <span class="new"> new </span> </li>
<li class="work manicule"> — Manicule of Resistance <span class="newTwo"> new </span> </li>
<li class="work interact-reward"> — Notification Printer </li>
<li class="work body"> — Images of Body and Story </li>
<li class="work interview"> — Interview Publication </li>
<li class="work obliterate"> — 1984 (Obliteration) </li>
<li class="work emperor"> — Emperor Display </li>
</li>
<li class="work wood"> — Wood Type </li>
<a href="https://ygt-design.github.io/nullSpeak/" target="_blank">
<li class="work null"> — Ø Speak </li>
</a>
<li class="work type"> — Type and Material</li>
<li class="work machine"> — Dialogue With The Machine </li>
<a href="https://ygt-design.github.io/emperorWeb/" target="_blank">
<li class="work emperorWeb"> — Emperor (WEB) </li>
</a>
<li class="work escape"> — Escape Route </li>
<li class="work factory"> — Factory Reset </li>
<a href="https://ygt-design.github.io/tvoMicrosite/" target="_blank">
<li class="work cyber"> — TVO Cyberbullying Index</li>
</a>
<a href="https://ygt-design.github.io/inSpiteOfFear/" target="_blank">
<li class="work steve"> — Love, Fear and Everything
In—Between</li>
</a>
</ul>
</div>
</div>
<div class="works-container">
<div class="display-image"></div>
<div class="display-info"></div>
</div>
<script src="sketch.js"></script>
</body>
</html>