eriknuber.whovianville.com
Open in
urlscan Pro
34.174.249.201
Public Scan
URL:
https://eriknuber.whovianville.com/
Submission: On July 21 via automatic, source certstream-suspicious — Scanned from IT
Submission: On July 21 via automatic, source certstream-suspicious — Scanned from IT
Form analysis 1 forms found in the DOM
<form id="contact-form">
<div class="messages">
</div>
<div class="loadingVisible hideLoader">
<div class="spinner">
<div class="dot1"></div>
<div class="dot2"></div>
</div>
<p class="sendText">Sending...</p>
</div>
<div class="controls">
<div class="row">
<div class="col-md-6">
<input type="text" name="name" class="form-control" placeholder="Your firstname *" required="required">
</div>
<div class="nameCheck col-md-6 hidden-md hidden-lg hidden-xl"></div>
<div class="col-md-6">
<input type="text" name="surname" class="form-control" placeholder="Your lastname *" required="required">
</div>
<div class="nameCheck col-md-6 hidden-xs hidden-sm"></div>
<div class="lastNameCheck col-md-6"></div>
</div>
<div class="row">
<div class="col-md-6">
<input type="text" name="email" class="form-control" placeholder="Your email *" required="required">
</div>
<div class="emailCheck col-md-6 hidden-md hidden-lg hidden-xl"></div>
<div class="col-md-6">
<input type="text" name="phone" class="form-control" placeholder="Your phone *" required="required">
</div>
<div class="emailCheck col-md-6 hidden-xs hidden-sm"></div>
<div class="phoneCheck col-md-6"></div>
<div class="col-md-12">
<textarea name="message" class="form-control" placeholder="Message *" rows="4" required="required"></textarea>
</div>
<div class="messageCheck col-md-12"></div>
<div class="col-md-12 text-center">
<input type="submit" class="btn btn-primary btn-lg formSubmit" value="Send message" disabled="disabled">
</div>
</div>
</div>
</form>Text Content
Toggle navigation Erik Nuber * Intro * About * Skills * My work * Contact FRONT END DEVELOPER IF YOU ARE WORKING ON SOMETHING THAT YOU REALLY CARE ABOUT, YOU DON'T HAVE TO BE PUSHED. THE VISION PULLS YOU. - STEVE JOBS ABOUT ME I have worked at SEGA of America for a few years now. In addition to my regular role, I have led daily stand-ups for the past couple of years and, recently been put in charge of creating work back schedules for all web projects. I also work with the Data Protection Officer and, am in charge of making sure all of our sites are GDPR and CCPA compliant. I am always up for any challenge be it code-based, learning how to use a new API or service or, in brain storming ways to go about achieving what needs to be done. I have written the age gate code used across all of our Mature rated websites and, evolved that to the latest iteration as can be seen on the Persona 5 Strikers website. By age-gating specific elements rather than the whole page as we had previously been doing; I was able to help reduce our workload as we were having to make microsites for marketing purposes. I have also integrated Mailchimp into our websites and, left the code thoroughly commented to make reuse easier. I reworked the way language changes were handled on our pages which involved changing the code from PHP, which wasn't consistently working, to using Ajax and JSON as we support five languages and eight countries. I have been coding React applications as well. For each of these, I start by coding with React using component state and props. From there, I then recode them using React with Redux, React with hooks and, React with Context. See My Code On Github: Github Download My Resume: Resume SKILLS -------------------------------------------------------------------------------- Would you like to know more or just discuss something? Contact me 74 WEBSITES 1184 ADS & ARTICLES DESIGNED 22 APPLICATIONS DEVELOPED 324 MAGAZINES & BROCHURES MY WORK Here are some of my latest projects. * All * Web Design * Applications × MADE MAN Salon site with booking capabilities Visit website See The Code Created a website for a salon owner that was going into business for herself. The goal of the site was to allow her clients to quickly and easily book their appointments so she would not constantly be on her phone making the appointments herself. I created the logo and style of the website based on her vision months before the Salon was to open and, was able to have her site live on the day she needed it to be by quickly changing out the pictures and updating the google map. Along with creating the site, I researched and presented several services that provide booking software. The site was created using HTML5 and, a combination of CSS3 along with Bootstrap to style and make the page responsive. jQuery and JavaScript were also used to add in some other functionality. SCHOOL2CAREER Find Colleges matching your criteria See Application See The Code School2Career was our final group project for Learningfuze. I worked on the front end along with one other and, we had two on the back end that dealt with the database. To help simulate a work environment, we also had a senior developer that acted as our product manager. We met with him once a week to discuss our progress and, receive suggestions on how to improve what we were doing. We also met near daily with a mid-level developer to do stand ups as well as make sure we were on track to complete our weekly sprints. The site was designed to help perspective students find colleges based on several filters. The colleges are initially populated by using location and major. From there further filters such as type of school, degrees offered and tuition type could further filter down the schools. The map populates based on bounds and will auto populate as the map is dragged around. Each individual school can also be clicked on to see more in-depth information. The site was built on the front end using React, Redux, and JavaScript with ES6. Though this was not the best choice for this kind of site, we used these frameworks because it was what we were learning and; we were looking to solidify our knowledge. The back end used Apache, PHP and MariaDB. LIKE A DRAGON Yakuza franchise game site Visit website Coded this website based off a design created by James Ferrell, a member of the SEGA creative services team. Most of the game page websites go through different versions of the site, this one had three over the course of it's lifecycle, a splash page at the game announcement, a teaser page and then this final site. Along with this, there are always minor updates that usually involve adding trailers or changing up text from pre launch to post launch. This particular site I wanted to highlight because it shows how I was able to handle the large number of SKUs due to the amount of consoles the game was coming to and, the number of editions for the game. Along with this, because the game itself takes place over the course of two decades, I was tasked with showing a couple of the characters at the two main time frames within the game. This title was a launch title for the Xbox Series X and, will be on the PlayStation 5. Ultimately this meant that there was a lot of learning and going back and forth with Microsoft and Sony to meet their brand guidelines. This information changed many times over the course of a couple of months which meant alot of fixes along the way. I can not directly share the code for the site as it is a title that was done for work and, not my own personal project. However, the site was done using HTML5, CSS3, and JavaScript and JQuery. This is also a global site so languages were handled using both Ajax with JSON file and, JavaScript with some objects. I am also the lead for GDPR and CCPA compliance and use CIVIC cookie to aid in that. Finally, the site is using a combination of Google Tag Manager and Google Analytics. REACT CALCULATOR Basic calculator Component State and Props See Application See The Code Using Redux See Application See The Code Using Hooks See Application See The Code Using Context See Application See The Code This is a basic calculator styled after the iOS calculator. This application was created using React. I created this four different ways so though the application looks the same the code is different. I first created this using component state and passing props. I then rewrote the application using React and Redux, then React with hooks and finally React with Context. Within my git repository, you will see a second version of the code called calculator_old. This version of the code was working as well however, it was rather complicated. So rather than move forward with it, I thought there must be a much less complex way of doing so. I started over and, accomplished my goal by reducing my original 10 pieces of state to just 4. PERSONA 5 STRIKERS Persona franchise game site Visit website Due to the number of games launching each year, my team has been tasked with creating a more templated website structure that can help cut down the development time of websites. The template has been designed by Ben Schilling after many rounds of feedback. So I used that template structure to design the site as well as match the style of the franchise. I am showing off this site because it is the first of what we are trying to shift to with future sites and, the code was written by myself. The age gate was completely revamped for this site. For the past couple of years we had been using an age gate with an input for month, day and year. Here I am using a select field and, for both the day and year bringing in the options dynamically through JavaScript. This is the first Mature rated site where the content of the page is immediately available. Upon clicking a trailer or image, you are then required to enter your age to see more. One of the reasons we chose to do this is that we have had additional requests to make microsites in order to bypass the need of an age gate. So by creating an age gate on just what is required, it allows the information that would otherwise end up on the microsite to be available immediately. The purchase section is able to be easily adjusted based on what consoles a game is coming out for and, whatever editions may be available. I also created a lazy loader to load character images after the page loads to reduce the time it would take for the site to load up. I can not directly share the code for the site as it is a title that was done for work and, not my own personal project. However, the site was done using HTML5, CSS3, and JavaScript and JQuery. This is also a global site so languages were handled using both Ajax with JSON file as some JavaScript with some objects. I am also the lead for GDPR and CCPA compliance and use CIVIC cookie to aid in that. I have integrated Mailchimp into the site to gather user emails. Finally, the site is using a combination of Google Tag Manager and Google Analytics for gathering information on how the page is being viewed and used. GRAB A BEER Find restaurants serving specific beers See Application See The Code Please note, I have left this application up but, currently the Yelp API is failing and, need to get it fixed. This was a group project that was done on a tight schedule of a day and a half. With a group of four, we were tasked to create a site using at least three API’s. The result of that was our Grab A Beer application. The idea is that based on the type of beer a person is interested in having, a map is populated that has all the restaurants around either their given location or an area the user is interested in going to that serves that type of beer. A small list of beer types was created and, we used the choice made to make a call to yelp. The call to yelp takes in the location and beer type and matches it up to places that match. From their, the coordinates and other information such as address and website of those locations are then used to create the markers and info windows on the map. We also made a call to a beer API that gives information back about beers. We used that for food pairings. My contributions surrounded Google Maps. I created the map and populated it with markers and the info windows. I also dealt with geolocation, geocoding and, creating the directions from the current location to the chosen restaurant. MARIO AND SONIC at the olympic games Visit website Mario and Sonic at the Olympic Games is likely the most prolific website I have worked on. More people have visited this site than all the other sites I have worked on combined. It is one thing to get the opportunity to work with SEGA but, to throw in Nintendo as well made this a very special project for me. I designed the site to make the party-game aspect stand out. Each event when hovered on plays a small repeating MP4, I used animated stars in the background and, animated the Nintendo Switch controllers just to add in some fun to the site. Ultimately this was a huge global announcement that tied in to the E3Expo. This project supported far more countries than we had ever handled. I wrote a JavaScript Constructor to route visitors to the correct page as Nintendo was supporting many countries and, I needed to be able to push people to the correct website based on where they were located. In order to achieve this, I wrote the code to first try to get the browser language. If this failed, I called an API that would allow the location of the country to be found. I did it in this order to save the cost of calling an API for every visit. In order to remain GDPR compliant I specifically called for just the country location. With the country location at hand, I was able to then create the URL based off of six different arrays that held country codes. Based on the array this would allow me to know what type of URL had to be built. Another of the big challenges of this site is the overall number of videos. Even though they are small it caused an enormous issue. My end solve for this was to lazy load the videos after the site came up. On a desktop this works well. I can not directly share the code for the site as it is a title that was done for work and, not my own personal project. However, the site was done using HTML5, CSS3, and JavaScript and JQuery. As aforementioned, I used an API for finding out a users country if necessary. This was not my choice but, I had to also create individual pages for every language we supported. Typically we would use a JSON file or JavaScript object and change the text through Ajax or JavaScript. I am also the lead for GDPR and CCPA compliance and use CIVIC cookie to aid in that. Finally, the site is using Google Analytics. BATTLE MATCH One Piece themed memory match game See Application See The Code One Piece Battle Match is a spin off of the classic memory match game. As a player, you still make matches but, you are battling a computer based opponent that can damage you as well. You don’t always have to make all the matches to actually defeat your opponent but, it is the main purpose of the game. The game allows you to chose your hero based on several of the Straw Hat crew member and, each character has their own set of cards depicting their fighting styles with unique actions based on their actual fighting styles. Each turn you flip two cards and, if they match the action on the card occurs. If no match is made, a story unfolds in the middle of the screen. Following your turn, the villain takes his action which is shown within the same story window. Some times damage is dealt, other times, it is just flavor text to add to add to the overall theme. The code is a combination of HTML5, CSS3, jQuery and JavaScript. The health bars and, one of the modals were developed from Bootstrap. The javaScript is written in a procedural format as this was written in our second week of the program and, we were still in the process of learning the basics. CALCULATOR Basic Trigonometric Calculator See Application See The Code Created a calculator with basic functionality and, a hidden panel that animates out to allow some more mathematical functions. The calculator is styled after an older calculator model that is solar powered. The design is just for the aesthetic look. The real challenge to creating this was in accounting for all the ways the buttons could be pressed and not in just expecting normal input. This was done using a basic HTML5 skeleton, CSS3 and a combination of jQuery and JavaScript for the functionality. This was done fairly early within the program and, we were just getting into object-oriented programming at that time. GET WEATHER Weather Data Using React Component State and Props See Application See The Code Using Redux See Application See The Code Using Hooks See Application See The Code Using Context See Application See The Code Created a weather app that gives weather data based on a users input of a zipcode. The weather is displayed to give hourly results as well as daily results. The days can be clicked to give more specific information for the given day. This application was created using React. I created this four different ways so though the application looks the same the code is different. I first created this using component state and passing props down to children. I then rewrote the application using React and Redux, then React with hooks and finally React with Context. To make this a bit more complex, I also called two different APIs. First I use Google Geocoding API to take the zipcode and get the latitude and longitude. If this information comes back successfully, the second API, OpenWeather is called to get the weather information. If the zipcode is bad, a warning message is given instead and doesn't call for the weather. Along with this, I am using react-router-dom and createHashHistory to route the project based on checking a specific days weather. WHOVIANVILLE Informative Dr. Who Fan Site Visit website See The Code Did you know that Doctor Who was originally meant to be an educational show? Or that the Doctor didn’t always have access to his TARDIS and sonic screwdriver? In fact for some time he drove around in a now classic yellow car named Bessie. The history of Doctor Who and, how it evolved to become what it is today is a fascinating journey. Whovianville is a labor of love. It is meant as an informative fan site that covers both classic and new Who. The site covers all of the incarnations of the Doctor through David Capaldi, as well as his companions. This includes each version of the Doctors initial and final appearance, first and last lines as well as what the cause of his regeneration was. As for the companions, there is information covering each of their first and last appearances and how they ended up departing the Doctor. This site was built with HTML5, CSS3 and, Bootstrap 4. There is also a small amount of jQuery and JavaScript. SIMON SAYS Recreation of simon electronic game See Application See The Code A recreation of the Simon electronic game originally released by Milton Bradley in 1978. The game allows for infinite play. The game lights up, flashes when you lose and, the counter was designed to appear to give a little glow along with a digital font. Through use of shadowing, the game buttons appear to have depth and, each has its own unique sound. The game was created using HTML5 and CSS3. The functionality was done with jQuery and JavaScript. The audio used JavaScripts built in oscillator, gain and frequency to create the pitches for the sound. REACT SOCIAL CARD List of Social Cards Component State and Props See Application See The Code Using Redux See Application See The Code Using Hooks See Application See The Code Using Context See Application See The Code This is more of a component rather than an application. Variaitons of this type of user interface can be found all over including places like Twitter, Facebook, Pinterest, Redfin etc. I took a social card, broke it down into pieces and, created a list from a random amount of incoming data. When the application loads, a call is made to faker.js in order to get a random amount of data. Before the call is made, a randomly generated number is used to determine how much data should be retrieved. The card itself is broken down into the header area and then the main content area found underneath. The main content is further broken down to the colored background area and, the descriptive area underneath. By doing so, I have made smaller components that could easily be reused, adjusted and maintained. The color in the background is also random and, comes from faker.js. Because this gave a wide spectrum of colors, I created a check to make sure light colors that wouldn't allow the white text to be legible to be caught and changed. TIC TAC TOE Match up to 5 in a row See Application See The Code This was a group project, during my time at Learningfuze. This was a hackathon where we were given 24 hours to finish the project. With a group of three, we were tasked to create a tic-tac-toe application that could be adjustable up to a five by five grid. At that particular time, we had just learned about creating objects and constructors; so this is what was used to create the game. My contribution included figuring out how to create the game board and, also checking for the win/lose/draw conditions. OMNISPORT FITNESS Local Gym Website Visit website See The Code Created a website for a local gym owner. The goal of the site was to share pertinent information and, reducing the number of ways that the original site had to have clients connect with them. One of the suggestions I had was to showcase their online training due to Covid-19. So a carousel section was created which was meant to show off videos of classes but, ended up being used for images. The original website was built using Wix. Some of what was being requested wasn't possible in the Wix platform so I started from scratch in building the website. I integrated the previous design but updated it to better be responsive and, to do things that Wix would not allow. I used HTML5, CSS3, JavaScript and jQuery, PHP and the Google Maps API. PHP was used with the contact form and deal with making sure that anything entered into the form would be safe. CONTACT ME Sending... © 2024 Erik Nuber. All rights reserved.