-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathwork-5.html
122 lines (120 loc) · 8.56 KB
/
work-5.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="Visual design that celebrates the pleasure of seeing, looking, understanding" />
<meta name="author" content="José Neira, Carmina Correa, Felipe Cortez" />
<link rel="icon" type="image/png" href="favicon.png" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&family=Spectral:ital@0;1&display=swap" rel="stylesheet" />
<link href="style.css?v=1.1.2" rel="stylesheet" />
<title>José Neira</title>
<link rel="canonical" href="https://joseneira.cl/" />
<meta name="theme-color" content="#fafafa" />
<!-- Twitter -->
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="José Neira" />
<meta name="twitter:description" content="Visual design that celebrates the pleasure of seeing, looking, understanding" />
<!-- Open Graph general (Facebook, Pinterest & Google+) -->
<meta name="og:title" content="José Neira" />
<meta name="og:description" content="Visual design that celebrates the pleasure of seeing, looking, understanding" />
<meta name="og:url" content="https://joseneira.cl" />
<meta name="og:type" content="website" />
</head>
<body>
<div class="container d-flex w-100 flex-column">
<header class="pt-4 pb-5">
<h1 class="mt-3 float-md-start mb-0 align-items-center">
<a href="index.html">José Neira<span>Visual Design</span></a>
</h1>
<nav class="mt-2 nav float-md-end">
<a class="nav-link pasive" href="index.html">Selected work</a>
<a class="nav-link pasive" href="about.html">About</a>
<a class="nav-link pasive" href="contact.html">Contact</a>
</nav>
</header>
</div>
<div class="container">
<main class="pb-5">
<div class="row g-5">
<div class="col-md-12">
<div class="ratio ratio-16x9">
<iframe src="https://player.vimeo.com/video/517839828?title=0&byline=0&portrait=0" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen=""></iframe>
<script src="https://player.vimeo.com/api/player.js"></script>
</div>
</div>
<div class="col-md-6 mb-5">
<h2 class="me-md-5 pe-md-5">Flat Kaleidoscope. A play on the letter ‘a’ and a fascination with moirés and grids. Made with the guidance of professor Carol Bankerd, Purchase College, NY, 1984.</h2>
<h2 class="me-md-5 pe-md-5 d-none" lang="es">Caleidoscopio plano. Un juego sobre la letra ‘a’ y una fascinación por el efecto moiré y las retículas. Trabajo adémico con el apoyo de Carol Bankerd, profesora en Purchase College, NY, 1984.</h2>
</div>
<div class="col-md-6 mb-5">
<p>
Flat kaleidoscope is comprised of four pieces made of chestnut wood, plexiglass and transparent film. The first piece contains four letters ‘a’ (its counterforms) that are placed on three separate layers of film.
Just like with a typical cylindric kaleidoscope you only have so much control of the movement of parts inside of it and since there are four letters, the transformation of one letter affects the others. The
fourth piece contains moiré patterns from screens and textures made of the repetition of tiny ‘aes’, a ‘soup’ of letters, and only vestiges of the initial four letters. So you see the letterforms, grids and
textures overlaping in motion; is very much like creating your own motion graphics with no screen, no digital anything.
</p>
<p>
Playing with letters and sreens on transparent film was the starting point of what became my senior project. The encouragement of professor Carol Bankerd was as important as the help from my friend and fellow
student Peter Kaufmann—furniture designer who studied under Ken Strickland—who kindly helped me with the woodwork in the extraordinary woodshop housed in the Visual Arts building.
</p>
<p>My undergraduate years at Purchase College, NY are the happiest and most fascinating in my life. The ‘soaring’ 80’s and its rich ambience, teachers and campus life that I would relive tomorrow, if I could.</p>
<p>
My design teachers, Carol Bankerd, Larry Bach, (Warren Lehrer, whom I only got to know in my senior year) and many others; Judith Bernstein, painting; Scott Richter, drawing; Murray Zimiles, drawing and
printmaking; Antonio Frasconi, printmaking; Jed Devine, photography, are some of the names I cherish. And Patty Smith, who helped me print a wonderfull poster to promote a new MFA program for 1984 (three colors,
off-set lithography). Every one of these professors left in me a big joy in making, thinking and looking. Visiting art galleries in New York with art history professor Irving Sandler was marvelous. As with Carol
Bankerd, just their sheer passion for art and design was a profound learning experience for me.
</p>
<p class="d-none" lang="es">Traducción pendiente</p>
</div>
</div>
</main>
</div>
<footer class="fixed-bottom">
<div class="container">
<div class="row d-flex align-items-end">
<div class="col text-start">
<div class="btn-group btn-group-sm pb-3" role="group">
<button type="button" class="btn btn-outline-dark initialism py-1 px-2 active" id="english">EN</button>
<button type="button" class="btn btn-outline-dark initialism py-1 px-2" id="espanol">ES</button>
</div>
</div>
<div class="col text-end pb-3">
<a href="#" id="subir" class="btn btn-outline-dark initialism pt-0 pb-1 px-2 d-none">↑</a>
</div>
</div>
</div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
<script>
$(function () {
$("#espanol").click(function () {
$("main h2:lang(en), main p:lang(en)").addClass("d-none");
$("main h2:lang(es), main p:lang(es)").removeClass("d-none");
$("#english").removeClass("active");
$("#espanol").addClass("active");
});
$("#english").click(function () {
$("main h2:lang(en), main p:lang(en)").removeClass("d-none");
$("main h2:lang(es), main p:lang(es)").addClass("d-none");
$("#espanol").removeClass("active");
$("#english").addClass("active");
});
var ventana = $(window).height();
var documento = $(document).height();
var altura = documento - ventana;
console.log(altura);
$(window).scroll(function () {
var scroll = $(window).scrollTop();
if (altura <= (scroll + 420)) {
$("a#subir").removeClass("d-none");
} else {
$("a#subir").addClass("d-none");
}
});
});
</script>
</body>
</html>