-
Notifications
You must be signed in to change notification settings - Fork 0
/
breadwinner.html
95 lines (83 loc) · 5.04 KB
/
breadwinner.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
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<title>Breadwinner</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="manifest" href="site.webmanifest">
<link rel="apple-touch-icon" href="icon.png">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<link rel="icon" href="minimum_vector_art_nl.ico">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Fjalla+One&family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Open+Sans&display=swap" rel="stylesheet">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<!-- AOS -->
<link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">
<!-- Icons-->
<script
src="https://use.fontawesome.com/releases/v5.15.4/js/all.js"
data-auto-a11y="true"></script>
<meta name="theme-color" content="#fafafa">
</head>
<body>
<!--[if IE]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
<![endif]-->
<nav class="navbar navbar-expand-lg navbar-light shift sticky">
<div class="container">
<a class="navbar-brand" href="index.html">Natalie Lacroix</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse cl-effect-12" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="index.html#about">ABOUT</a>
</li>
<li class="nav-item">
<a class="nav-link" href="index.html#experience">EXPERIENCE</a>
</li>
<li class="nav-item">
<a class="nav-link" href="index.html#portfolio">PORTFOLIO</a>
</li>
<li class="nav-item">
<a class="nav-link" href="index.html#news">NEWS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="index.html#contact">CONTACT</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="content container">
<a href="javascript:history.back()"><h3>← Back</h3></a>
<img class="img__page" src="img/financial-game.png" alt="breadwinner website"/>
<h1>Breadwinner</h1>
<h2>web/mobile application | developer</h2>
<div>
<p style="padding-top:10px">The Breadwinner Game introduces players to financial independence and shows how choices affect lifestyle. Tabulations happen behind the scenes of each choice as the player moves through the game, from occupation, to housing, transportation, and insurance. Subsequent levels introduce communications costs (phone, television, and internet), then spending for food, clothing, and hobbies.</p>
<p>Following a design from a UX Designer, I co-developed The Breadwinner Game using Nuxt.js for the framework, vanilla JavaScript for the calculations, Supabase for the database, and Chart.js for displaying the results. Phase II is in development to include more variety for interactions and random chance cards.</p>
<a class="btn" href="https://today.uconn.edu/2023/04/new-game-makes-financial-education-fun/" target="_blank">PRESS RELEASE</a>
<a class="btn" href="https://breadwinner.netlify.app/" target="_blank">PLAY GAME</a>
</div>
</div>
<script src="js/vendor/modernizr-3.8.0.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-3.4.1.min.js"><\/script>')</script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
<!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
<script>
window.ga = function () { ga.q.push(arguments) }; ga.q = []; ga.l = +new Date;
ga('create', 'UA-XXXXX-Y', 'auto'); ga('set','transport','beacon'); ga('send', 'pageview')
</script>
<script src="https://www.google-analytics.com/analytics.js" async></script>
</body>
</html>