-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathcolo.html
More file actions
309 lines (253 loc) · 15.6 KB
/
Copy pathcolo.html
File metadata and controls
309 lines (253 loc) · 15.6 KB
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
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://unpkg.com/tachyons@4.8.1/css/tachyons.min.css">
<style>
@media (max-width: 480px) {
.hide {
display: none;
}
}
</style>
<title>Colophon</title>
</head>
<body>
<article class="pa4 ph5-ns fl w-100 system-sans-serif" id="app">
<section>
<div class="f3-ns f5 f4-m mw9 bt bw1 pb2 pt1 fl w-70-ns w-40 w-40-m lh-title b "><a href="index.html"
class="link dim black">Rohit
Gupta</a></div>
<div class="f5-ns f6 mw9 bt bw1 pb4 pt1 fl w-10-ns w-20 w-20-m tl lh-title-ns"> <a href="about.html"
class="link dim black">
<!--
<span class="fw1-ns tracked hide">01</span> -->
About </a></div>
<div class="f5-ns f6 mw9 bt bw1 pb4 pt1 fl w-10-ns w-20 tl lh-title-ns w-20-m"><a href="index.html#works"
class="link dim black">
<!-- <span
class="fw1-ns tracked hide">02</span> -->
Projects </a></div>
<div class="f5-ns f6 mw9 bt bw1 pb4 pt1 fl w-10-ns w-20 tl lh-title-ns w-20-m"><a href="http://rohitg.in/"
class="link dim black" target="_blank">
<!-- <span class="fw1-ns tracked hide">03</span> -->
Blog </a></div>
</section>
<div class="center mw6 mw8-ns">
<div class="fl w-100-ns mt5-ns mb3-ns w-100 mb2">
<p class="tracked f5-ns">REFLECTIONS</p>
<h1 class="lh-title f1-ns mt0 mb2">
Colophon
</h1>
<div class="fl w-60-ns w-100 f5-ns pb0-ns pb2 measure lh-copy">
Understanding the meanings of a portfolio and designing one</div>
</div>
<!-- Do not touch anything above this -->
<div class="fl w-100 gray f5-ns f6 lh-copy pv0">
<img src="https://i.imgur.com/HL55WqR.jpg" class="w-100" alt="Photo of outer space">
<span class="i"> Let us shake hands before we part ?</span>   said Venice on Ponte dell'Accademia
</div>
<div class="fl w-100 mt4-ns mt3">
<h1 class="f3-ns f4 lh-title-ns">Containerization of self</h1>
</div>
<div class="fl w-100">
<p class="lh-copy f6 fl pv1-ns w-50-ns w-100 measure-wide mr4-ns mt0 ">
This might sound a bit existential, but what is a presence? Is it providing an agency to become a
part of a discourse or just an observer? To participate in the norms of this place where we are
present? If we are present, say somewhere, is it necessary to make our presence felt? By
interaction, exhibitionism, or finding a place in the hierarchy of that somewhere? Then why should
we be present at so many places ? What is it that we seek from our presence in these many lands?
<br>
These question of a multiple presence has always troubled me. I have been *present* online for
about 8 years now and offline for about three times more. As many, I move to the online presence in
search of things it has made me addicted to. One of those things is "reach". I can engage with many
unknown presences through this containerized self, I present online. This has helped me evolve my
ideas and learn and contribute to new ones. These digital artefacts can travel longer that my
physical self. This may not have been possible otherwise. But as we
control our presence,
we have the opportunity to construct several. I will let you wrap your heads around the idea and
jump quickly to a
specific part I am more
interested in talking about.
</p>
<p class="lh-copy f6 fl pv1-ns w-50-ns w-100 measure-wide pl2-ns mt0">
Where does the true self lies in these containers ? As I unwrap this
thought, I would only like to talk
about two aspects of these containers – expression and conformal nature. I will be rather brief to
respect your time and the warm cup of tea I have.
<br>
The way we express a part of our true self, unfortunately, seems to follow the norms of the
"medium". It seems to be written
for easy consumption (Hemingway lines, story, structure) and greater impact (what people want to
listen, what I want from them). I doubt it is a hearts out expression. Pardon my amateur
philosophy, but it written more to conform rather than create space (if there is). This compulsion
to conform sometimes constrains expression. This worries me the most about writing online (Metrics,
claps, likes, followers)
But that does
not sound as terrible as "New Speak". This shared "aesthetic" is the language everyone understands.
It
is just not the same. So, where do I "heart out" publicly: <br>
Telegram self-chat > concerned friends > Twitter > Blog <br> But not this portfolio. <br>
This is the portfolio representing me. Not my portfolio.
</p>
</div>
<div class="fl w-100 mt4-ns mt3">
<h1 class="f3-ns f4 lh-title-ns"> Portfolio as a transactional being </h1>
</div>
<div class="fl w-100">
<p class="lh-copy f6 fl pv1-ns w-50-ns w-100 measure-wide mr4-ns mt0 ">
Let me state with a brief a few things about my online presence containers. I started a <a
href="http://lastbencher007.blogspot.com/" class="link dim light-purple">blog</a> to share class
notes in
college, then as I was learning new things in electronics I wrote a <a
href="https://indiantinker.wordpress.com/" class="link dim light-purple">blog</a>
to share my findings with the community, then as I discovered the limitations of wordpress and made
<a href="http://rohitg.in/" class="link dim light-purple">my
own blog</a> in
jekyll. I have modified that to make it look like a <a href="http://rohitg.in/projects/"
class="link dim light-purple">portfolio</a>
of sorts. But somehow, it was missing prevalent aesthetics expected from a portfolio. In a world
where the opportunity one
gets are more dependant on one's presented self rather than true self, it is difficult to
communicate beyond a few good friends, without
sitting on this
"vehicle of aesthetics". <br> There are several places I wanted to work but I could not get past
the
gate-keepers as I
was cycling and not ridding this "vehicle of aesthetic". Then there is a "precarity" we face in
this
design world of ours. A "move fast, break things" world, said no design teacher ever.
<br>
</p>
<p class="lh-copy f6 fl pv1-ns w-50-ns w-100 measure-wide pl2-ns mt0">
So, for the last 104 hours, I have been working on this website you are looking at. As a habit, I
did research on what
is the best way to show things. There are several posts on telling you how to make the best
portfolio online. I read a lot of them, uncomfortably, saying that is not me. But then I heard
things like "recruiters have many options, they want it in a "particular" way. Hence, you will see
a welcome message and containers you would expect but
there are some things that are different.
<br> <br>This portfolio is a transactional being. <br>
It
is me sitting on this "vehicle" and saying 👋.
Go to the homepage and notice the title of the tab if you switch to another page. It wants you to
listen to
it.
The page adapts to the country the viewer is in. It tries to greet you in words you may understand
and expects your friendship. <br><br> That is
a brief philosophical colophon, now let us talk about the design one.
</p>
</div>
<div class="fl w-100 mt4-ns mt3">
<h1 class="f3-ns f4 lh-title-ns">Design </h1>
</div>
<div class="fl w-100 mb4">
<p class="lh-copy f6 fl pv1-ns w-50-ns w-100 measure-wide mr4-ns mt0 ">
I wanted the portfolio to respect the use of type and space. It must be very readable (max 65-70
chars per line) as it
presents a lot textual content. Accessibility is on top of my agenda. I tried to follow the things
<a href="https://en.wikipedia.org/wiki/Massimo_Vignelli" class="link dim light-purple">Massimo
Vignelli</a> talks about in his book
– <a href="https://www.goodreads.com/book/show/9180968-the-vignelli-canon"
class="link dim light-purple">
Vignelli Canon</a>. So I started working on a few
mockups in Figma. <br>
Then shared them with friends
to get their feedback. I noticed that they felt it is a portfolio and not a blog. But as I
progressed from feedback to feedback, I realized that the design was getting cleaner and cleaner. My
friends asked me a lot of "whys" and I dropped and changed elements when I could not answer.<br><br>
The
font i choose is a default system font. Nothing special. I try to follow gestalts to establish
relationships and keep the
type-scale consistent. I follow a thumb rule called "123" – 1 font , 2 weights, and 3
sizes. It serves me well on most pages.
</p>
<p class="lh-copy f6 fl pv1-ns w-50-ns w-100 measure-wide pl2-ns mt0">
To develop this portfolio, I used a "utility first" CSS framework called "Tachyons". <a
href="http://tachyons.io/" class="link dim light-purple">Tachyons</a> is
very nice and was well suited for the
webpage I had designed. The type-scale is decent and the framework is easy to get around. The
better
part is it kind of handles the responsive part on its own mostly. Some parts like conditional hiding
had to be implemented
separately. <br> To populate content in the page, I use <a href="https://vuejs.org/"
class="link dim light-purple">Vuejs</a>.
It helps me manage the presentation
and data separately from each other.
I use some HTML5 DOM APIs like page visibility to build the transactional page title.
<br>
<br> I am grateful to friends who gave feedback on this. They were : Salik, Ester, Suyog, Gustav,
and Felipe. Thanks to reddit users: luxuryUX, chandra381 <br> I present the progression in design
through images. <br>
In the end, I hope you like it. If not, please send me feedback.
</p>
</div>
</div>
<div class="mw9 center gray f6 pv2">
<div class="fl w-25-ns w-100 gray center lh-copy f6">
<img src="https://i.imgur.com/wHscCmX.png?1" class="w-100 " alt="Photo of v1"><br>
</div>
<div class="fl w-25-ns w-100 gray center lh-copy f6">
<img src="https://i.imgur.com/H0SyP5w.png?1" class="w-100 " alt="Photo of v1"><br>
</div>
<div class="fl w-25-ns w-100 gray center lh-copy f6">
<img src="https://i.imgur.com/dRRcbbZ.png?1" class="w-100 " alt="Photo of v1"><br>
</div>
<div class="fl w-25-ns w-100 gray center lh-copy f6">
<img src="https://i.imgur.com/UTpsT5u.png?1" class="w-100 " alt="Photo of v1"><br>
</div>
</div>
<div class="mw9 center gray f6 pv3">
<div class="fl w-25-ns w-100 gray center lh-copy f6">
<img src="https://i.imgur.com/1Io2lRa.png?1" class="w-100" alt="Photo of v1">
</div>
<div class="fl w-25-ns w-100 gray center lh-copy f6">
<img src="https://i.imgur.com/mI1g6mt.png?1" class="w-100" alt="Photo of v1">
</div>
<div class="fl w-25-ns w-100 gray center lh-copy f6">
<img src="https://i.imgur.com/NBOf0SM.jpg?1" class="w-100" alt="Photo of v1">
</div>
<div class="fl w-25-ns w-100 gray center lh-copy f6">
<img src="https://i.imgur.com/sYXxQCM.png?1" class="w-100" alt="Photo of v1">
</div>
</div>
<div class="f4-ns f5 fl w-100 pv4-ns pv2 bt bw0-ns bw1">
<div class="mt5-ns pt1 fl w-20-ns w-100 bt-ns bw1 lh-title pt2-ns pb2 fw2 tracked"><a
href="works/connectnext.html" class="link dim black">
CONNECTNeXT</a> </div>
<div class="mt5-ns fl w-20-ns w-100 bt-ns bw1 lh-title pt2-ns pb2 fw2 tracked"><a href="works/fand.html"
class="link dim black">
FAND
</div>
<div class="mt5-ns fl w-20-ns w-100 bt-ns bw1 lh-title pt2-ns pb2 fw2 tracked"><a
href="works/pinchphone.html" class="link dim black">
PINCHPHONE </div>
<div class="mt5-ns fl w-20-ns w-100 bt-ns bw1 lh-title pt2-ns pb2 fw2 tracked"><a href="works/paisa.html"
class="link dim black">
PAISA STICK</div>
<div class="mt5-ns fl w-20-ns w-100 bt-ns bw1 lh-title pt2-ns pb2-ns fw2 tracked"> <a
href="otherProjects.html" class="link dim black">OTHER
PROJECTS </a></div>
<div class="fl w-100 f6 p
mv5-ns mv2 bt bw1 pt2 lh-copy"> Made by Rohit using Tachyons, Vuejs,
and
<span class="i">some
"Pipas con
café". </span>You are reading the Colophon. 🙏
</div>
</div>
</article>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-55965373-5"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'UA-55965373-5');
</script>
</body>
</html>