/
index.html
161 lines (138 loc) · 8.97 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
<!DOCTYPE HTML>
<!--
Urban by TEMPLATED
templated.co @templatedco
Released for free under the Creative Commons Attribution 3.0 license (templated.co/license)
-->
<html>
<head>
<title>Ezra Sandzer-Bell</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="assets/css/main.css" />
</head>
<body>
<!-- Header -->
<header id="header" class="alt">
<div class="logo"><a href="index.html">Portfolio <span> | Ezra Sandzer-Bell </span></a></div>
<a href="#menu">Menu</a>
</header>
<!-- Nav -->
<nav id="menu">
<ul class="links">
<li><a href="index.html">Portfolio</a></li>
<li><a href="https://docs.google.com/document/d/1ZKGvhjeOH3o8pkJKX8NXfwKA13z0VOeLaAH9i5az1Mw/edit?usp=sharing">Resume</a></li>
<li><a href="mailto:equilibriumarts@gmail.com">Contact</a></li>
</ul>
</nav>
<!-- Banner -->
<section id="banner">
<div class="inner">
<header>
<h1>Ezra Sandzer-Bell</h1>
<p>Web Developer and Content Writer</p>
</header>
<ul class="icons icon-style">
<li><a href="https://www.linkedin.com/in/ezra-sandzer-bell" class="icon fa-linkedin"><span class="label"
target="_blank">LinkedIn</span></a></li>
<li><a href="https://www.github.com/ezrasandzerbell" class="icon fa-github"><span class="label"
target="_blank">GitHub</span></a></li>
<li><a href="https://docs.google.com/document/d/1ZKGvhjeOH3o8pkJKX8NXfwKA13z0VOeLaAH9i5az1Mw/edit?usp=sharing" class="icon fa-list-alt"
target="_blank"><span class="label">GitHub</span></a></li>
</ul>
<a href="#main" class="button big scrolly">Continue</a>
</div>
</section>
<!-- Main -->
<div id="main">
<section class="wrapper style1">
<div class="inner">
<header class="align-center">
<h2>Featured Works</h2>
</header>
<div class="flex flex-3">
<div class="col align-center">
<div class="image round fit">
<img src="images/hands.png" alt="" />
</div>
<p><b>Music Cryptography BASIC (Ruby)</b></p>
<p>Type in a word and receive a musical melody with audio playback. The app also lets you play your computer keyboard like a piano.</p>
<a href="http://www.songwriterskey.com" class="button" target="_blank">Visit Site</a>
</div>
<div class="col align-center">
<div class="image round fit">
<img src="images/records.png" alt="" /></a>
</div>
<p><b>Capstone: Songwriter's Key (Rails)</b></p>
<p>A Rails application that converts words into melodies. Built to inspire musicians and help them to organize riffs, songs, and albums.</p>
<a href="http://songwriters-key.herokuapp.com" target="_blank" class="button">Visit Site</a>
</div>
<div class="col align-center">
<div class="image round fit">
<img src="images/sun.jpg" alt="" href="http://www.audiomancy.net"/>
</div>
<p><b>Music Cryptography Portfolio</b></p>
<p>Ezra is the founder of AudioCipher Technologies LLC. This is his coding portfolio from 2017.</p>
<a href="http://www.audiocipher.com" class="button" target="_blank">Visit Site</a>
</div>
</div>
</div>
</section>
<!-- Section -->
<section class="wrapper style2">
<div class="inner">
<!-- 2 Columns -->
<div class="flex flex-2">
<div class="col col1">
<div class="image round fit">
<a href="http://www.github.com/ezrasandzerbell" class="link"><img src="images/ezra.png" alt="" /></a>
</div>
</div>
<div class="col col2">
<h3>Javascript Framework Application Repos</h3>
<p>Ezra has experience working with ReactJs, AngularJS, and Ember. Of the three, his favorite is React due to the well organized content structure and quick loading virtual DOM. </p>
<p><b>1) <a href="https://github.com/ezrasandzerbell/Research-Aid" target="_blank">ReSearcher</a></b> is a <i>React-Redux</i> application designed to help individuals organize their research materials. Registered users can create new project categories, each of which can hold many posts. These posts consist of text and embedded multimedia content (video and images). The application highlights Ezra's ability to create working routes and host content on <i>Firebase</i>, with all the core functionality of creating, reading, updating and destroying content.</p>
<p><b>2)<a href="https://github.com/ezrasandzerbell/ANGULAR2-action-and-connection" target="_blank"> Action and Connection</a></b> is an <i>Angular</i> application that connects people with opportunities for local community activism. Ezra built this app with three students from the design track. He was solely responsible for building out the back end. The application features <i>user authentication</i> for administrators and regular users, with <i>Firebase</i> data and API integration. Administrators have their own backend UI, where they can <i>draft and post new content</i> for public users. </p>
<p><b><a href="https://github.com/ezrasandzerbell/ANGULAR2-Taproom" target="_blank">3) Tap Room</a></b> is an <i>AngularJS</i> application that allows a store owner to monitor their inventory. This project features a search filter (pipes), functions that modify front end <i>components</i> (pour pints of beer, show quantity remaining), conditionals that effect css styling (text becomes red when product is running low), and input forms to create and display new products. </p>
</div>
</div>
</div>
</section>
<!-- Section -->
<section class="wrapper style1">
<div class="inner">
<div class="flex flex-2">
<div class="col col2">
<h3>Ruby on Rails Repos</h3>
<p>Ezra has written over a dozen applications in Ruby and Rails. Here are a few of his more creative projects. You can view the complete collection on <a href="https://github.com/ezrasandzerbell" target="_blank">Github</a>. </p>
<p><b>1) <a href="https://github.com/ezrasandzerbell/CAPSTONE-SWK" target="_blank">Songwriter's Key</a></b> is a <i>Ruby on Rails</i> application that demonstrates melodic cryptography techniques. Ezra has a background in music composition. This organizational tool helps songwriters to keep track of their encrypted melodic ideas, with <i>user authentication</i> and <i>Postgres database</i> relationships established between melodies, songs, and full albums.</p>
<p>What is the musical cryptogram? In this application, it is a <i>substitution hash</i> that converts alphabet letters into musical notes with a one-to-one correspondence, so that words can be hidden within melodies.</p>
<p>The <b>Songwriter's Key</b> automates this translation and displays the notes in color-coded, clickable divs with audio playback. Furthermore, they allow users to attach an image, audio file, sheet music, and written notes to keep track of associated ideas and imagery.</p>
<p><b>2) <a href="https://github.com/ezrasandzerbell/RUBY-Music-Cryptogram" target="_blank">Music Cryptography BASIC</a></b> is a stripped down <i>Ruby</i> application that showcases the core features of <i>Songwriter's Key</i>. This includes automated encryption of words into melodies(<i>hash substitution</i>) and musical typing. The melodies and keyboard are displayed as color-coded divs with playback available at the push of a button. A must see! </p>
<p><b>3) <a href="https://github.com/ezrasandzerbell/RUBY-Music-Theory-Backend" target="_blank">Music Theory Logic</a></b> stands alone among this portfolio as it consists entirely of backend logic. Ezra drew from his knowledge of music theory to create algorithms that map all the fundamental scales, modes, chords, and arpeggios of the Western system. This is achieved by running Nth-element each loops on a two-octave chromatic array of notes, push a target collections of notes into their corresponding, pre-named arrays. </p>
</div>
<div class="col col1 first">
<div class="image round fit">
<a href="generic.html" class="link"><img src="images/ruby.png" alt="" /></a>
</div>
</div>
</div>
</div>
</section>
<!-- Section -->
</div>
<!-- Footer -->
<footer id="footer">
<div class="copyright">
<p>© Ezra Sandzer-Bell Portfolio. All rights reserved. (<a href="https://templated.co">t</a> / <a href="https://unsplash.com">i</a>)</p>
</div>
</footer>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.scrolly.min.js"></script>
<script src="assets/js/jquery.scrollex.min.js"></script>
<script src="assets/js/skel.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>