-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
148 lines (132 loc) · 8.87 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
<!DOCTYPE HTML>
<!--
Story by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>Nicholas Gonzalez</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="assets/css/main.css" />
<noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
</head>
<body class="is-preload">
<!-- Wrapper -->
<div id="wrapper" class="divided">
<!-- One -->
<section class="banner style1 orient-left content-align-left image-position-right fullscreen onload-image-fade-in onload-content-fade-right">
<div class="content">
<h1>Nicholas Gonzalez</h1>
<p class="major">A solutions-focused, high-energy fullstack developer with a lifelong passion for Chicago, multimodal transit, and sustainability. Scroll down to view my portfolio organized by newest to oldest projects.</p>
<ul class="actions stacked">
<li><a href="#first" class="button big wide smooth-scroll-middle">Projects</a></li>
</ul>
</div>
<div class="image">
<img src="images/IMG_9468.PNG" alt="Commissioned artwork by Carles Dalmau" />
</div>
</section>
<!-- Two -->
<section class="spotlight style1 orient-right content-align-left image-position-center onscroll-image-fade-in" id="first">
<div class="content">
<h2>Straw Hat Stash</h2>
<p>My first project made primarily using AWS tools, the genesis of this website was borne out of an actual need I found in the trading card community. When I started playing the One Piece TCG, I could not find a comprehensive tool to record the cards that I was acquiring. Having asked around on Reddit, people were just passing around a Google Sheet template. I'm proud to provide a tool to this growing community where they can:
<ul>
<li>Login using their Google account</li>
<li>View the full list of cards organized by Set</li>
<li>Inspect each card to see the full list of alternate arts</li>
<li>Persist their collection data</li>
</ul>
</p><a style="margin-right: 20px;" href="https://strawhatstash.net/" class="button">Website</a><a href="https://github.com/nickgonzalez42/collector" class="button">Documentation</a>
</div>
<div class="image">
<img width="100%" src="images/pic06.png" alt="Screenshot of Work Journal App show user generated skills journals" />
</div>
</section>
<section class="spotlight style1 orient-left content-align-left image-position-center onscroll-image-fade-in">
<div class="content">
<h2>High Speed Rail Ticket Platform</h2>
<p>A proof of concept ticket sales platform for a theoretical U.S. High Speed Rail Network. Starting this project, I had three interests I wanted to explore: Java + the Spring Boot environment, creating a commercial, customer-focused product, and my personal interest in advocating for alternative transportation in the U.S. to automotive reliance. The endpoint of those ideas is this project: a high speed rail ticketing platform. Users will be able to select a date as well as an origin and destination city from the station network and the site will provide a route of stations along the shortest geographic path and train times to select from. From there, users can pick their selection of trains and will be provided tickets with UIDs.</p><a href="https://github.com/nickgonzalez42/HighSpeedRail" class="button">Documentation</a>
</div>
<div class="image">
<img src="images/pic05.png" alt="Screenshot of ticket platform main page." />
</div>
</section>
<section class="spotlight style1 orient-right content-align-left image-position-center onscroll-image-fade-in" id="first">
<div class="content">
<h2>CHI Bike Tracker</h2>
<p>The top two words I would use to describe myself would be "Chicagoan" and "Cyclist". This is a project that I intend to build upon and support for a longtime because it is my life long passion to advocate for bicycle culture in Chicago. The base utility of the app uses the Google Maps API to map recent crashes and the City of Chicago Data Center to provide detailed incident information. Empowering cyclists with data to make informed decisions about their routes is the ultimate goal of this website. A list of upcoming features is listed below:
<ul>
<li>Filter/sort crashes by severity, time, and crash type.</li>
<li>Analytics.</li>
<li>User submission.</li>
</ul>
</p><a style="margin-right: 20px;" href="https://bicycle-map.vercel.app" class="button">Website</a><a href="https://github.com/nickgonzalez42/bicycle-map" class="button">Documentation</a>
</div>
<div class="image">
<img width="100%" src="images/CHIBIKE.png" alt="Screenshot of Work Journal App show user generated skills journals" />
</div>
</section>
<section class="spotlight style1 orient-left content-align-left image-position-center onscroll-image-fade-in">
<div class="content">
<h2>McDonald's Museum Tour</h2>
<p>A React frontend "walking" tour of the first McDonald's restaurant-turned-museum. This location no longer exists and is preserved in these panoramic photos. The tools/libraries used in this project were Tailwind CSS, React Photo Sphere Viewer, and Vercel for hosting.</p><a style="margin-right: 20px;" href="https://tour-phi-gray.vercel.app/" class="button">Visit the Museum</a><a href="https://github.com/nickgonzalez42/tour" class="button">Documentation</a>
</div>
<div class="image">
<img src="images/pic04.png" alt="Picture of the the signage for the first McDonald's restarant." />
</div>
</section>
<section class="spotlight style1 orient-right content-align-left image-position-center onscroll-image-fade-in">
<div class="content">
<h2>WorkJournal</h2>
<p>The inspiration for this project came from wishing I could reference something like a "how I learned to code" guide WITHOUT watching a 32-minute YouTube video. Conceptually, this is a website where users can log what resources they used to learn any given skill, how the felt about it, how long it took them, and any projects they completed along the way.
The frontend enables users to:
<ul>
<li>#, login, and logout. Updating or creating journals is disabled unless logged in.</li>
<li>Search for posts and users.</li>
<li>View profile pages.</li>
<li>Generate journals with the option to upload images.</li>
</ul>
</p>
<ul class="actions stacked">
<li><a style="margin-right: 20px;" href="https://www.youtube.com/watch?v=sDcnkqT_5Wg&t=14s" class="button">Demo</a><a href="https://github.com/nickgonzalez42/work-journal-frontend" class="button">Documentation</a></li>
</ul>
</div>
<div class="image">
<img width="100%" src="images/wj1.png" alt="Screenshot of Work Journal App show user generated skills journals" />
</div>
</section>
<section class="spotlight style1 orient-left content-align-left image-position-center onscroll-image-fade-in">
<div class="content">
<h2>CTA Tracker Terminal App</h2>
<p>This project was intended to test my ability utlizing Ruby gems, working with an XML API, and designing a user-friendly interface in the terminal. Also, I selfishly wanted an easily accessible way to track the Damen bus and Brown line with a few button presses instead of having to visit the CTA website and go through the GUI.</p>
<ul class="actions stacked">
<li><a href="https://github.com/nickgonzalez42/cta-tracker" class="button">Documentation</a></li>
</ul>
</div>
<div class="image">
<img width="500px" src="images/cta2.jpeg" alt="Screenshot of terminal using cta-tracker app" />
</div>
</section>
<!-- Footer -->
<footer class="wrapper style1 align-center">
<div class="inner">
<ul class="icons">
<li><a target="_blank" href="https://www.linkedin.com/in/nicholasjgonzalez/" class="icon brands style2 fa-linkedin-in"><span class="label">LinkedIn</span></a></li>
<li><a href="mailto: nickgonzalez051@gmail.com" class="icon style2 fa-envelope"><span class="label">Email</span></a></li>
</ul>
</div>
</footer>
</div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.scrollex.min.js"></script>
<script src="assets/js/jquery.scrolly.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>