-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
162 lines (158 loc) · 9.45 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
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>nasif.co</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.min.js" defer></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/addons/p5.dom.min.js"></script> -->
<!-- <script type="text/javascript" src="https://rawgit.com/patriciogonzalezvivo/glslCanvas/master/dist/GlslCanvas.js"></script> -->
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Recursive:wght,CRSV,[email protected],0,0..1&family=Noto+Color+Emoji&display=block" rel="stylesheet">
<meta name="description" content="Hola. Me llamo Nasif, soy diseñador de interacción y vivo en Bogotá. Me gusta hacer interfaces, objetos, páginas web, circuitos y código con HTML, CSS, PHP, Javascript, Arduino y Processing.">
<meta name=”robots” content=”index, follow”>
<link rel="icon" type="image/png" href="favicon.png">
<meta name="theme-color" content="#ffffff">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8" />
</head>
<body>
<div class="page-container">
<header class="homepage-header">
<p class="welcome">Hola</p>
<div class="main-subtitle">My name is <h1 class="home-title">Nasif</h1>. I'm a designer working with code and technology as a creative medium. Please explore a selection of my work below.</div>
</header>
<a id="projects"></a>
<main class="grid-container">
<article class="project-thumbnail thumbnail-type-4">
<a href="projects/pavilion/">
<div translate="no" class="tag web-tag">Web: Design & Dev</div>
<div class="grid-project-gallery">
<img src="projects/pavilion/assets/thumb-1.png" width="480" height="300" alt="">
<img src="projects/pavilion/assets/thumb-2.gif" loading="lazy" width="480" height="300" alt="">
<img src="projects/pavilion/assets/thumb-4.gif" loading="lazy" width="375" height="667" alt="">
</div>
<h2 class="grid-title">Pavilion Website & Branding</h2>
<p class="grid-subtitle">Website & branding for an academic conference directed at creatives from all around the globe.</p>
</a>
</article>
<article class="project-thumbnail thumbnail-type-1">
<a href="projects/faculty-website/">
<div translate="no" class="tag web-tag">Web: Design & Dev</div>
<div class="grid-project-gallery">
<img src="projects/faculty-website/assets/arqdis-thumb-1.png" width="480" height="480" alt="">
<img src="projects/faculty-website/assets/arqdis-thumb-2.jpg" width="480" height="300" alt="">
<img src="projects/faculty-website/assets/arqdis-thumb-3.png" width="375" height="667" alt="">
</div>
<h2 class="grid-title">School of Architecture and Design Website</h2>
<p class="grid-subtitle">Design & development of the official website for the School of Architecture and Design at Uniandes.</p>
</a>
</article>
<article class="project-thumbnail thumbnail-type-2">
<a href="projects/times-to-listen/">
<div translate="no" class="tag physical-computing-tag">Physical Computing</div>
<div class="grid-project-gallery">
<img src="projects/times-to-listen/assets/rln-thumbnail-1.png" width="375" height="667" alt="">
<img src="projects/times-to-listen/assets/rln-thumbnail-2.png" width="375" height="667" alt="">
<img src="projects/times-to-listen/assets/rln-thumbnail-3.jpg" width="480" height="300" alt="">
</div>
<h2 class="grid-title">Times to listen</h2>
<p class="grid-subtitle">An exhibition of interactive textiles that narrate the testimonies of the women that sewed them.</p>
</a>
</article>
<article class="project-thumbnail thumbnail-type-1">
<a href="projects/asterism/">
<div translate="no" class="tag physical-computing-tag">Physical Computing</div>
<div class="grid-project-gallery">
<img src="projects/asterism/assets/asterism-thumb-1.png" width="480" height="480" alt="">
<img src="projects/asterism/assets/asterism-thumb-3.gif" loading="lazy" width="480" height="300" alt="">
<img src="projects/asterism/assets/asterism-thumb-2.png" width="375" height="667" alt="">
</div>
<h2 class="grid-title">Asterism</h2>
<p class="grid-subtitle">An interactive lighting interface designed to encourage sharing.</p>
</a>
</article>
<article class="project-thumbnail thumbnail-type-4">
<a href="projects/web-literacy/">
<div translate="no" class="tag teaching-tag">Teaching</div>
<div class="grid-project-gallery">
<img src="projects/web-literacy/assets/weblit-thumbnail-1.jpg" width="480" height="300" alt="">
<img src="projects/web-literacy/assets/weblit-thumbnail-2.png" width="480" height="300" alt="">
<img src="projects/web-literacy/assets/weblit-thumbnail-3.png" width="375" height="667" alt="">
</div>
<h2 class="grid-title">Web Literacy Course & borrow.js</h2>
<p class="grid-subtitle">Undergraduate design course that introduces HTML, CSS, JS and explores designing for online media. Accompanied by an open source javascript library.</p>
</a>
</article>
<article class="project-thumbnail thumbnail-type-4">
<a href="projects/van26/">
<div translate="no" class="tag visual-computing-tag">Visual Computing</div>
<div class="grid-project-gallery">
<img src="projects/van26/assets/van-thumb-2.gif" loading="lazy" width="480" height="300" alt="">
<img src="projects/van26/assets/van-thumb-1.png" width="480" height="300" alt="">
<img src="projects/van26/assets/van-thumb-3.gif" loading="lazy" width="375" height="667" alt="">
</div>
<h2 class="grid-title">VAN 26 días</h2>
<p class="grid-subtitle">Interactive type design exercises during the <em>36 days of type</em> challenge.</p>
</a>
</article>
<article class="project-thumbnail thumbnail-type-3">
<a href="projects/how-far-is-outer-space/">
<div translate="no" class="tag visual-computing-tag">Visual Computing</div>
<div class="grid-project-gallery">
<img src="projects/how-far-is-outer-space/assets/meteoritos-thumb-1.png" width="480" height="480" alt="">
<img src="projects/how-far-is-outer-space/assets/meteoritos-thumb-2.jpg" width="480" height="300" alt="">
<img src="projects/how-far-is-outer-space/assets/meteoritos-thumb-3.png" width="480" height="300" alt="">
</div>
<h2 class="grid-title">How far is outer space?</h2>
<p class="grid-subtitle">An interactive data visualization that displays more than 44k meteorites that have fallen on earth.</p>
</a>
</article>
<article class="project-thumbnail thumbnail-type-1">
<a href="projects/proa/">
<div translate="no" class="tag physical-computing-tag">Physical Computing</div>
<div class="grid-project-gallery">
<img src="projects/proa/assets/proa-thumb-1.png" width="480" height="480" alt="">
<img src="projects/proa/assets/proa-thumb-2.png" width="480" height="300" alt="">
<img src="projects/proa/assets/proa-thumb-3.png" width="375" height="667" alt="">
</div>
<h2 class="grid-title">Communicating photography in PROA</h2>
<p class="grid-subtitle">Interactive exhibition piece aimed at communicating academic research findings to a broader audience.</p>
</a>
</article>
<article class="project-thumbnail thumbnail-type-1">
<a href="projects/terrenos/">
<div translate="no" class="tag visual-computing-tag">Visual Computing</div>
<div class="grid-project-gallery">
<img src="projects/terrenos/assets/terrenos-thumb-1.png" width="480" height="480" alt="">
<img src="projects/terrenos/assets/terrenos-thumb-2.jpg" width="480" height="300" alt="">
<img src="projects/terrenos/assets/terrenos-thumb-3.png" width="375" height="667" alt="">
</div>
<h2 class="grid-title">Terrenos<span style="opacity: 0.6; font-weight: 600; font-size: 0.6em;"> (Working Title)</span></h2>
<p class="grid-subtitle">A tool for creating speculative terrain maps using data logged during hikes. Ongoing project.</p>
</a>
</article>
</main>
</div>
<footer>
<div class="footer-wrapper">
<address>
<span class="address-city">Brooklyn, NY</span>
<a class="address-home" href="/"><span>nasif.co</span></a>
<a href="https://www.instagram.com/nasif.co/" target="_blank" class="address-contact"><span>Instagram</span></a>
</address>
<button onclick="window.scrollTo({ top: 0, behavior:'smooth'});" class="nav-button back-to-top"><span>Go back up</span><span class="up-arrow-container"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20.86 127.2">
<g>
<line class="up-arrow" x1="10.41" y1="230.47" x2="10.41" y2="105.27"/>
<polyline class="up-arrow" points=".7 114.99 10.42 105.27 20.14 114.99"/>
</g>
</svg></span></button>
</div>
<p class="footer-attributions"><small>This website's code can be found on <a href="https://github.com/nasif-co/nasif.co" target="_blank" rel="noopener noreferrer">GitHub</a>. The font used is <a href="https://www.recursive.design/" target="_blank" rel="noopener noreferrer">Recursive</a> by <a target="_blank" rel="noopener noreferrer" href="https://www.arrowtype.com/">ArrowType</a></small></p>
</footer>
<script src="js/pixelBG.js"></script>
<script src="js/scrollObserver.js"></script>
<!-- <canvas class="glslCanvas" id="glslbg"></canvas>
<script src="js/circlesShader.js"></script> -->
</body>
</html>