-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathmandala.html
156 lines (144 loc) · 8.37 KB
/
mandala.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
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Mandala</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/font-awesome/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Lobster|Open+Sans+Condensed:300" rel="stylesheet">
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>
<header>
<div class="wrapper">
<a class="hidden" href="">Skip to Main Content</a>
<nav>
<li><a href="/">Home</a></li>
<li><a href="about">About</a></li>
<li><a href="contact">Contact</a></li>
</nav>
<a class='h1-link' href="/"><h1>Abby Starnes</h1></a>
<p class="tagline">front-end developer</p>
<ul class="links">
<li><a class="" href="https://jsfiddle.net/user/ordette/fiddles"><i class="fa fa-jsfiddle "></i> JSFiddle</a></li>
<li><a class="" href="https://github.com/abbystarnes"><i class="fa fa-github "></i> GitHub</a></li>
<li><a href="https://medium.com/@abbymstarnes/" class=""><i class="fa fa-medium "></i> Blog Posts</a></li>
<li><a href="https://www.linkedin.com/in/abbystarnes" class=""><i class="fa fa-linkedin "></i> LinkedIn</a></li>
</ul>
</div>
</header>
<main>
<div class="wrapper wrapper-max-width">
<h2>Mandala</h2>
<p class="subtitle">A meditative coloring web application for all ages.</a>
</p>
<article class="project">
<!-- <img class="logo" src="" alt="IBM Analytics Platform Style Guide"> -->
<h3>Technologies</h3>
<ul class='tech-list'>
<li><img class='tech' src="img/technologies/html.png" alt="">
<p>HTML5</p>
</li>
<li><img class='tech' src="img/technologies/css.svg" alt="">
<p>CSS3</p>
</li>
<li><img class='tech' src="img/technologies/sass.png" alt="">
<p>SASS</p>
</li>
<li><img class='tech' src="img/technologies/javascript.png" alt="">
<p>Javascript ES6</p>
</li>
<li><img class='tech' src="img/technologies/angularjs.png" alt="">
<p>AngularJS</p>
</li>
<li><img class='tech' src="img/technologies/nodejs.png" alt="">
<p>Node.js</p>
</li>
<li><img class='tech' src="img/technologies/express.svg" alt="">
<p>Express</p>
</li>
<li><img class='tech' src="img/technologies/postgresql.png" alt="">
<p>PostgreSQL</p>
</li>
<li><img class='tech' src="img/technologies/heroku.png" alt="">
<p>Heroku</p>
</li>
<li><img class='tech' src="img/technologies/mocha.svg" alt="">
<p>Mocha</p>
</li>
</ul>
</article>
<article class="project">
<h3>Overview</h3>
<p>Mandala is a responsive web application that allows users to color mandalas. It is built with AngularJS, Node.js, Express, and PostgreSQL, and hosted on Heroku. This is a 2-week long individual project for my final capstone project at
Galvanize's 24-week web development immersion course.</p>
<a class='code-link' target="_blank" href="https://github.com/abbystarnes/Mandala">View Code <i class="fa fa-external-link" aria-hidden="true"></i></a>
</article>
<article class="project">
<h3>Demo</h3>
<iframe width="560" height="315" src="https://www.youtube.com/embed/xDV-Dj5zRjQ" frameborder="0" allowfullscreen></iframe>
</article>
<article class="project">
<h3>Wireframes</h3>
<p>I created the wireframes for this project in Adobe XD Beta. It was a helpful way visualize the project, plan routes, and choose which views would be necessary for the MVP (minimum viable product).</p>
<div class="wireframe">
<img src="img/mandala_wireframes.png" alt="wireframes for Mandala application">
</div>
</article>
<h3>SVG Manipulation & Data Storage</h3>
<p>I chose to work with SVGs for this project because they are XML-based, and therefore easily manipulatable with code. SVGs have path elements which are similar to div elements in HTML. To color the SVG paths, I added click events to each path.
I stored the colors for the SVGs as an array of HEX or RGB values in my database. Each time the user clicks on a path, it makes a PATCH request to the database to update the SVG's color array. A GET request immediately follows to update
the view with the most current color array.</p>
<script src="https://gist.github.com/abbystarnes/0ed922cd1d98c41a316a35fb740e07e4.js"></script>
<p>Updating SVG color on user click.</p>
</article>
<h3>TDD (Test Driven Development) with Mocha</h3>
<p>I used Mocha to write route tests for my database. It was a helpful way to test the routes before building out the front end.</p>
<script src="https://gist.github.com/abbystarnes/a1df6a2e156b0ec4edf5cc988ec6bfab.js"></script>
<p>Mocha test for 'GET /users/:id' route.</p>
</article>
<h3>Progressive Enhancement</h3>
<p>Because I worked on this project with a limited amount of time (2 weeks), it was important to me that I develop progressively, so that I could at least complete a MVP (minimum viable product) if I ran low on time. For this reason, I started
out by building out the main view, where the user can select mandalas from a slide out menu and color a mandala. It wasn't until after I accomplished this milestone that I built the database using TDD (test driven development) and built
the login pages. Given more time, I would fully style the application (right now it is best viewed on mobile). I would also give the user the option to collaborate with another user in real time using web sockets, and allow the user to
share their colored mandalas on social media.</p>
<div class="wireframe">
<img src="img/progressive_enhancement.gif" alt="wireframes for Mandala application">
</div>
<p>Image taken from <a href="https://www.shopify.com/partners/blog/what-is-progressive-enhancement-and-why-should-you-care">Shopify</a>
</p>
</article>
</div>
</main>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
(function(b, o, i, l, e, r) {
b.GoogleAnalyticsObject = l;
b[l] || (b[l] =
function() {
(b[l].q = b[l].q || []).push(arguments)
});
b[l].l = +new Date;
e = o.createElement(i);
r = o.getElementsByTagName(i)[0];
e.src = 'https://www.google-analytics.com/analytics.js';
r.parentNode.insertBefore(e, r)
}(window, document, 'script', 'ga'));
ga('create', 'UA-XXXXX-X', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>