-
Notifications
You must be signed in to change notification settings - Fork 0
/
my-work.html
121 lines (117 loc) · 10 KB
/
my-work.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
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet" type='text/css'>
<link href="https://fonts.googleapis.com/css2?family=Lora&family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,900;1,400;1,500;1,600;1,700;1,800;1,900&family=Source+Code+Pro:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,900&display=swap"
rel="stylesheet">
<title>
My WOrk - Elizabeth Pérez
</title>
</head>
<body id="about">
<div id="app">
<nav class="nav">
<ul class="nav__list">
<!-- home -->
<li class="nav__item"><a class="nav__link" href="index.html">home</a></li>
<!-- about -->
<li class="nav__item"><a class="nav__link" href="about.html">about</a></li>
<!-- my work -->
<li class="nav__item"><a class="nav__link" href="my-work.html">my work</a></li>
<!-- contact -->
<li class="nav__item"><a class="nav__link" href="mailto:bruja.dev@gmail.com">contact</a></li>
<!-- twitter
<li class="nav__item"><a class="nav__link" href="https://twitter.com/bruja_dev"><i class="fa fa-twitter"></i></a></li> -->
</ul>
</nav>
</div>
<div class="description">
</div>
<div class="grid-container">
<div class="three-fourth" id="content">
<h1 class="highlight">selected works</h1>
<br>
<h2 class="workTitle">A "WHAT TO EXPECT?" FOR BIRTH DOULAS IN NYC</h2>
<br>
<a href="https://nyc-ld-hospitals-experiences.glitch.me/"><img class="work" src="https://github.com/brujadev/assignment-4/raw/master/images/webappgif.gif" width=560 height=315></a>
<p><strong>Brief:</strong> A full stack web application for NY Metro Doula Facebook group birth doulas to inform one another about what is available at certain NYC Hospitals.</p>
<p><strong>Concept:</strong> While doulas often work on their own and social media provides a place to share information, there isn't a designated place to do so. This web application provides an easy and streamlined process to keep each other
"in the know." </p>
<p><strong>Role:</strong> UX/UI, web development and design</p>
<p><strong>Tools:</strong> VS Code, Node.js, Express.js, Mongo DB Atlas, Postman, Command-line, Github, Glitch</p>
<iframe class="fs-video" width="560" height="315" src="https://www.youtube.com/embed/hBtl36URvp4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<p class="desc">Please note this video is best viewed full screen.</p>
<br>
<br>
<h2 class="workTitle">SAY HER NAME</h2>
<p class="desc">This piece was a collaborative effort between Nailah Davis, Simone Salvo and Elizabeth Pérez</p>
</a>
<div id="say-her-name"><img class="say-her-name" src="https://images.squarespace-cdn.com/content/v1/5bf44b01af2096b4115d6520/1576791879865-9PM58AMCFXHCJ2072TJP/ke17ZwdGBToddI8pDm48kLIj3bb_uLOihttx7hjsPSV7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z4YTzHvnKhyp6Da-NYroOW3ZGjoBKy3azqku80C789l0lqfkVpRp1g_2L-WsTQRP4IUeQvxhQLxDj0GQzUQT21mzi2feheXFTkax-QWHoTYtA/doc4.jpg?format=1500w"
width=280 height=350><img class="say-her-name" src="https://images.squarespace-cdn.com/content/v1/5bf44b01af2096b4115d6520/1576791907162-E3DDZ8K33492656A6VGY/ke17ZwdGBToddI8pDm48kL0xsO_zo2P7L8S-aIeZ7eJ7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QHyNOqBUUEtDDsRWrJLTmzZHn3PYdZUow1T0ZeZQrhU2_YWqR63yoqHFkDhYR_8wxaL5K2ToNu8bgm4pYRWQp/doc3.jpg?format=1500w"
width=280 height=350></div>
<p><strong>Brief:</strong> A narrative-shifting and socially engaged art installation.</p>
<p><strong>Concept:</strong> Conceived by Nailah Davis’ artistic exploration of Black life and identity,this piece invites you to say Sandra Bland’s name aloud, keeping her story at the front of our collective consciousness. This project is a
form of restorative justice. </p>
<p><strong>Role:</strong> Concept development, UX/UI, physical computing, installation and programming.</p>
<p><strong>Tools: </strong> Arduino Genuino Uno, p5.js, Neopixels, ultrasonic sensor, thermal printer, acrylic sheet, fish wire, repurposed shadow box </p>
<iframe class="fs-video" src="https://player.vimeo.com/video/381680511" width="560" height="315" frameborder="0" allowfullscreen></iframe>
<br>
<br>
<br>
<h2 class="workTitle">WRITING SAMPLES</h2>
<br>
<a href="http://sfpc.io/code-societies/"><img class="work1" src="https://sfpc.io/static/img/codesocieties/fade.gif" width=560 height=515></a>
<p><strong>Brief:</strong> Blogs written for School of Poetic Computation's Code Societies, Winter 2020 session.</p>
<p><strong>Role:</strong> As one of 3 stewards for this session, I was tasked to write blog posts for 5 classes taught by Melanie Hoff, Neta Bomani, Allison Parrish, Ruha Benjamin and Harlo Holmes.</p>
<ul>
<li><a href="http://sfpc.io/code-societies/blog/2020-code-societies-orientation.html">Code Societies Orientation</a></li>
<li><a href="http://sfpc.io/code-societies/blog/2020-p2p-folder-poetry-an-introduction-to-re-introducing-yourself-to-computers.html">P2P Folder Poetry: An introduction to Re-introducing Yourself to Computers</a></li>
<li><a href="http://sfpc.io/code-societies/blog/2020-computational-exploration-of-magical-and-divinatory-language-part-1.html">Computational Exploration of Magical and Divinatory Language, Part One</a></li>
<li><a href="http://sfpc.io/code-societies/blog/2020-black-mirrors-reimagining-race-technology-and-justice.html">Black Mirrors: Reimagining Race, Technology, and Justice</a></li>
<li><a href="http://sfpc.io/code-societies/blog/2020-between-me-and-you-encryptions-proxies-vpns-and-privacy.html">Between Me and You: Encryption, Proxies, VPNs and Privacy with Harlo Holmes</a></li>
</ul>
<br>
<h2 class="workTitle">GRAPHIC DESIGN</h2>
<br>
<img src="https://brujatech.files.wordpress.com/2019/10/wintershowfront.jpg" width=320 height=><img src="https://brujatech.files.wordpress.com/2019/10/wintershowback.jpg" width=320>
<p><strong>Brief:</strong> Flyer submission for NYU ITP's 2019 Winter Show</p>
<p><strong>Concept:</strong> How can printed materials engage event attendees? I wanted to create a flyer that reminded people of coming together and using the most basic of materials for discovery and fun. I thought a fortune cookie would be
perfect for this.</p>
<p><strong>Role:</strong> Ideation, graphic design</p>
<p><strong>Tools:</strong> Adobe Illustrator, Adobe Photoshop</p>
<br>
<br>
<h2 class="workTitle">CREATIVE CODE in p5.js</h2>
<br>
<h3>Digital with the spiritual: ML & Chakra (a musical composition)</h3>
<p class="desc">This piece was made in collaboration with Elena Glaskova.</p>
<a href="https://editor.p5js.org/blatinegra/sketches/EbaaXDVah"><img class="work" src="https://brujatech.files.wordpress.com/2019/11/screen-shot-2019-11-19-at-8.20.12-pm.png" width=560 height=350></a>
<p><strong>Brief:</strong> An exploration of chakras using machine learning.</p>
<p><strong>Concept:</strong> Is it possible to train a model to teach us about ourselves? This interaction allows users to learn about the 7 chakras as well as the frequencies associated with them.</p>
<p><strong>Role:</strong> Ideation, UX/UI and programming.</p>
<p><strong>Tools:</strong> poseNet</p>
<br>
<h3>Me Gritaron Negra!</h3>
<a href="https://editor.p5js.org/blatinegra/sketches/Bxee6b39e"><img class="work" src="https://brujatech.files.wordpress.com/2019/12/doc3-2.png?w=2048" width=560 height=300></a>
<p><strong>Brief:</strong> Commerating the great Victoria Santa Cruz through code.</p>
<p><strong>Concept:</strong> The <a href="https://www.youtube.com/watch?v=cHr8DTNRZdg">famous performance piece</a> led by Chilean national, Victoria Santa Cruz, illustrates the pride in being a Black woman. This piece attempts to capture and
simultaneously draw the power in her voice as the audio plays in the background.</p>
<p><strong>Role:</strong> Ideation, UX/UI and programming.</p>
<p><strong>Tools:</strong> Speech recognition built in p5.js</p>
<br>
<h3>Exploration of Dynamic Oscillators </h3>
<a href="https://editor.p5js.org/blatinegra/sketches/Y6Jb5JbA"><img class="work" src="assets/images/oscillators.png" width=560 height=300></a>
<p><strong>Brief:</strong> Pendulums using trignometry to simulate complex forces in an enviroment.</p>
<p><strong>Concept:</strong> How can code allow us to imagine forces in nature in a digital space? Remember SohCahToa? In this piece, the oscillation creates a hypnotic experience through color and movement.</p>
<p><strong>Role:</strong> Ideation and programming.</p>
</div>
</div>
<div class="footer-wrapper ">
<div class="divider "></div>
<p class="footer">hand-coded with love 💁🏽♀️ · 2020 · <a href="https://github.com/brujadev">github</a> · <a href="https://twitter.com/bruja_dev"><i class="fa fa-twitter"></i></a>.</p>
</div>
<script src="main.js "></script>
</body>
</html>