-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
160 lines (145 loc) · 14.3 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
<!DOCTYPE html>
<html>
<title>Henry White</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="icon" href="Fox-Knight.png">
<style>
body, h1,h2,h3,h4,h5,h6 {font-family: "Montserrat", sans-serif}
.w3-row-padding img {margin-bottom: 12px}
/* Set the width of the sidebar to 120px */
.w3-sidebar {width: 120px;background: #222;}
/* Add a left margin to the "page content" that matches the width of the sidebar (120px) */
#main {margin-left: 120px}
/* Remove margins from "page content" on small screens */
@media only screen and (max-width: 600px) {#main {margin-left: 0}}
</style>
<body class="w3-black">
<!-- Icon Bar (Sidebar - hidden on small screens) -->
<nav class="w3-sidebar w3-bar-block w3-small w3-hide-small w3-center">
<!-- Avatar image in top left corner -->
<img src="Fox-Knight.png" style="width:100%">
<a href="#" class="w3-bar-item w3-button w3-padding-large w3-black">
<i class="fa fa-home w3-xxlarge"></i>
<p>HOME</p>
</a>
<a href="#about" class="w3-bar-item w3-button w3-padding-large w3-hover-deep-orange">
<i class="fa fa-user w3-xxlarge"></i>
<p>ABOUT</p>
</a>
<a href="#photos" class="w3-bar-item w3-button w3-padding-large w3-hover-deep-orange">
<i class="fa fa-rocket w3-xxlarge"></i>
<p>EXPERIENCE</p>
</a>
<a href="#contact" class="w3-bar-item w3-button w3-padding-large w3-hover-deep-orange">
<i class="fa fa-envelope w3-xxlarge"></i>
<p>CONTACT</p>
</a>
</nav>
<!-- Navbar on small screens (Hidden on medium and large screens) -->
<div class="w3-top w3-hide-large w3-hide-medium" id="myNavbar">
<div class="w3-bar w3-black w3-opacity w3-hover-opacity-off w3-center w3-small">
<a href="#" class="w3-bar-item w3-button" style="width:25% !important">HOME</a>
<a href="#about" class="w3-bar-item w3-button" style="width:25% !important">ABOUT</a>
<a href="#photos" class="w3-bar-item w3-button" style="width:25% !important">EXPERIENCE</a>
<a href="#contact" class="w3-bar-item w3-button" style="width:25% !important">CONTACT</a>
</div>
</div>
<!-- Page Content -->
<div class="w3-padding-large" id="main">
<!-- Header/Home -->
<header class="w3-container w3-padding-32 w3-center w3-black" id="home">
<h1 class="w3-jumbo"><span class="w3-hide-small"></span> Henry White</h1>
<p>Developer.</p>
<img src="MeTyping.gif" alt="boy" class="w3-image" width="500" height="500">
</header>
<!-- About Section -->
<div class="w3-content w3-justify w3-text-white w3-padding-64" id="about">
<h2 class="w3-text-white">Who Am I?</h2>
<hr style="width:200px" class="w3-opacity">
<p>Hello! <br><br> My name is Henry White and I just graduated from the University of California, Merced with a degree in Computer Science and Engineering! <br><br> I am ready to start my career as a Software Engineer, Solutions Engineer, or Game Developer. I am just kicking off my job search as we roll into 2021, and I am interested in full-time opportunities. <br><br>In the meantime, here are some things that I am currently working on, or have recently finished:
</p>
<button class="w3-button w3-deep-purple w3-padding-large w3-section">
<a href="https://github.com/HoneyBeebus"><i class="fa fa-github"></i> GitHub Portfolio </a>
</button>
<button class="w3-button w3-grey w3-padding-large w3-section">
<a download href="Henry_White_Resume_2021.pdf"><i class="fa fa-download"></i> Download Resume </a>
</button>
<button class="w3-button w3-green w3-padding-large w3-section">
<a href="https://hucci-server.github.io/index.html"><i class="fa fa-gamepad"></i> Check out another website I made! </a>
</button>
</div>
<!-- Portfolio Section -->
<div class="w3-padding-64 w3-content" id="photos">
<h2 class="w3-text-light-grey">Experience</h2>
<hr style="width:200px" class="w3-opacity">
<h3 class="w3-padding-16 w3-text-light-grey">Communications Lead and Software Engineer, Innovate to Grow at UC Merced</h3>
<img src="oportun_logo_circle.png" class="w3-image" width="80%" height="80%">
<p><br><br><br><br>In my final semester as a student at UC Merced I enrolled in our captsone course, Software Engineering. The class goals where to develop our skills as a software engineer in both front and back end capacities as well as gain experience working with an industry partner.
Over the course of 4 months, students were grouped with 3 other peers and tasked with delivering a minimum viable product for an assigned industy partner.<br><br>
My group was assigned to the loan company <a href="https://oportun.com/">Oportun</a>. Our team was responsible for overhauling an outdated system Oportun used to assess risk on cybersecurity centric loss scenarios. To conduct such analysis, Oportun employed
a framework called FAIR (Factor of Analysis for Information Risk) that was implemented in an Excel Notebook. Users would input values for specific variables into a decision tree like data structure. The values input at the bottom would influence the outcome of relevant values at
top of the tree. Naturally, Excel had some limitations for scalability and ideally, the tool we were tasked with creating would store outcomes to be later referenced by executives when making decisions about investment oportunites.<br><br>
The following is an example of the previously mentioned structre:<br><br>
<hr style="width:200px" class="w3-opacity">
<img src="originaloportun.png" width="80%" height="80%">
<hr style="width:200px" class="w3-opacity">
<br><br>As a team we agreed that the best approach would be to create a React webapp to build the tool from the ground up. Over the course of the semester, we developed just that. As a team member I took the intiative to build robust front end components such as an navbar, a dynamic
visual representation of the analysis, and the backend algorithm that drove the analysis. Additionally, my team recognized my strong communication skills and made my the primary point of contant and communications lead between our team and the industry partner. By the end of the
semester we had delivered the minimum viable product and were able to present it at a schoolwide competition called <a href="https://innovatetogrow.ucmerced.edu/">Innovate to Grow</a>. During implementation, we were able to find ways to improve upon the graphical representaiton of analysis outcome to make it more
readable for executives or others that may not be experts in the actual analysis, but are very interested in the outcome. Personally, I proposed the idea of changing the representation from a decision tree to a simple grid with components size and location directly relevant to
their importance. The following is a screenshot of that: <br><br>
<hr style="width:200px" class="w3-opacity">
<img src="myversion.png" width="1300" height="650">
<hr style="width:200px" class="w3-opacity">
<br><br>
Ultimatley this project allowed me to bolster my overall engineering acumen in addition to gaining real world experience working in a professional context. I enjoyed leveraging my engineering skills with my communication skills to not only elevate my work, but the work of my team as well.</p>
<hr>
<h3 class="w3-padding-16 w3-text-light-grey">Virtual Experience Designer, X the moonshot factory</h3>
<img src="xlogo.png" class="w3-image" width="850" height="850">
<p><br><br>In the uncertain times of COVID-19 the need for additional interaction between employees in a work from home environment created a unique opportunity for me. <br><br> Using previous knowledge and expertise, I helped create a virtual work environment through the use of Minecraft. Growing up, Minecraft was key in my development as a nerd. I have made countless servers for friends and family, so transitioning to build one for the moonshot factory was easy. My responsibilites included, but are limited to: supporting the design of event programming, training administrators for server maintainence, creation of virtual workspace using scale models, and building fully realized worlds. <br><br>This experience has only proven to me, how much I enjoy being a part of the creative process.</p>
<hr>
<h3 class="w3-padding-16 w3-text-light-grey">Lead Game Designer, Confidential Project</h3>
<img src="unity.png" class="w3-image" width="850" height="850">
<p><br><br>Was the Lead Game Designer for a small, confidential company.<br><br>Tasked with creating a game to be used as a bio feedback mechanism. Specifically used for developing mental awareness. <br><br> I developed the game using the Unity game engine. Additionally, I utilized the Adobe Creative Suite to create sprite sheets and other key art assets.<br><br>
This was my first chance to attempt at developing a game in a professional context and the experience was very positive. Based on this success I can't wait to get started on developing another game :).</p>
<hr>
<h3 class="w3-padding-16 w3-text-light-grey">University of California, Merced</h3>
<img src="picture of me.jpg" class="w3-image" width="850" height="850">
<p><br><br>I am a 2020 graduate of the <a href="https://www.ucmerced.edu/">University of California, Merced</a>. <br><br>As a student, I majored in <a href="https://engineering.ucmerced.edu/academics/undergraduate-programs/computer-science-and-engineering-cse">Computer Science and Engineering</a> and participated in several projects including the <a href="hhttps://innovatetogrow.ucmerced.edu/software-capstone">Software Capstone Project</a>, an <a href="https://engineeringservicelearning.ucmerced.edu/uav/2018spring">Engineering Service Learning Team</a>, and the <a href="https://catlife.ucmerced.edu/organization/q">Q-Project</a>. Many of the classes I have taken have had a focus on C and C++ programming.<br><br> In my final semester I focused on Front-End Programming and User Interface Design for my <a href="hhttps://innovatetogrow.ucmerced.edu/software-capstone">Senior Software Capstone</a>. Additionaly, I created the algorithm that was behind the core features of our minimum viable product.</p>
<hr>
<h3 class="w3-padding-16 w3-text-light-grey">Merced Vernal Pools and Grassland Reserve</h3>
<img src="MVPGR.JPG" class="w3-image" width="850" height="850">
<p><br><br>From January 2018 to January 2020, I worked as the Intern for the Merced Vernal Pools and Grassland Reserve (<a href="https://vernalpools.ucmerced.edu/">MVPGR</a>).<br><br> The MVPGR is one of 39 natural reserves in the University of California Natural Reserve System (<a href="https://ucnrs.org/">UCNRS</a>). As the Intern I was tasked with aiding <a href="https://vernalpools.ucmerced.edu/research">PhD candidate research projects</a> and updating/maintaing the <a href="https://vernalpools.ucmerced.edu/">official MVPRG website</a>. Additionally, I was in charge of providing at least 4 tours a semester for faculty and members of the public. Pictured above is me giving a tour to <a href="https://twitter.com/UniHalle/status/1169915789404770305">delegates from Martin Luther University</a> in Halle-Wittenburg Germany in September of 2019. <br><br>This role was a great learning opportunity and allowed me to develop more capabilites with natural sciences. This experience of working in nature gave me unique insights when solving problems and changed my perspective when creating levels and worlds in game design.</p>
<hr>
<h3 class="w3-padding-16 w3-text-light-grey">Laguna Beach Department of Marine Safety</h3>
<img src="Lifeguarding2.jpg" class="w3-image" width="850" height="850">
<p><br><br>From the Summer of 2013 through the Summer of 2016 I worked as an Ocean Lifeguard for the <a href="http://www.lagunabeachcity.net/cityhall/marine/">City of Laguna Beach Department of Marine Safety</a>. <br><br>The Laguna Beach Department of Marine Safety is a high performing 100 person team working from 20 towers to guard 5.5 miles of coastline and 16.5 miles of ocean. Average summers included rescues of over 3,500 individuals and medical attention to over 4,000. I was named First Year Lifeguard of the year in 2014. <br><br>This job exposed me to a physically demanding, mentally arduous, and emotionally stressful work environment that was also incredibly rewarding. This set the bar high for me for what I can contribute and achieve.</p>
<hr>
</div>
<!-- Contact Section -->
<div class="w3-padding-64 w3-content w3-text-grey" id="contact">
<h2 class="w3-text-light-grey">Contact Me</h2>
<hr style="width:200px" class="w3-opacity">
<div class="w3-section">
<p><i class="fa fa-map-marker fa-fw w3-text-white w3-xxlarge w3-margin-right"></i> Laguna Beach, CA</p>
<p><i class="fa fa-phone fa-fw w3-text-white w3-xxlarge w3-margin-right"></i> Phone: (949)419-5966</p>
<p><i class="fa fa-envelope fa-fw w3-text-white w3-xxlarge w3-margin-right"> </i> Email: <a href="mailto:[email protected]">[email protected]</a></p>
</div><br>
<!-- End Contact Section -->
</div>
<!-- Footer -->
<footer class="w3-content w3-padding-64 w3-text-grey w3-xlarge">
<a href="https://www.facebook.com/chenry.white"><i class="fa fa-facebook-official w3-hover-opacity"></i></a>
<a href="https://www.instagram.com/henrywhiteiv/"><i class="fa fa-instagram w3-hover-opacity"></i></a>
<a href="https://www.linkedin.com/in/c-henry-white-3100936/"><i class="fa fa-linkedin w3-hover-opacity"></i></a>
<p class="w3-medium">Powered by <a href="https://www.w3schools.com/w3css/default.asp" target="_blank" class="w3-hover-text-green">w3.css</a>, <a href="https://fontawesome.com/">Font Awesome</a>, and <a href="https://cloud.google.com/gcp/?utm_source=google&utm_medium=cpc&utm_campaign=na-US-all-en-dr-bkws-all-all-trial-e-dr-1008076&utm_content=text-ad-none-any-DEV_c-CRE_119985714127-ADGP_Hybrid+%7C+AW+SEM+%7C+BKWS+%7C+US+%7C+en+%7C+Multi+~+Google+Apis+v2-KWID_43700010775916692-kwd-4130959542&utm_term=KW_google%20apis-ST_google+apis&gclid=CjwKCAiA7t3yBRADEiwA4GFlI9YraEFGFip_RsIAPH7PpJX6VxJuQW21Ocsbx4uh4Ecb9cp0jiRfqBoCCiwQAvD_BwE">Google APIs</p>
<!-- End footer -->
</footer>
<!-- END PAGE CONTENT -->
</div>
</body>
</html>