About Me
Naturally a creative thinker, I spent 6 years as a technical marketer and web designer. Working side-by-side with many developers, I envied their ability to engineer ideas into experiences and knew I had more to contribute. In October of 2021, I committed to reinventing myself into the developer I knew I could become. After spending a year learning every technology I could get my hands on, I am now proud to be a Full-Stack Developer at Nomura Holdings, Inc. (NMR).
6
Years as a Technical Marketer
2
Years as a Full-Stack Developer
3
.
5
Projects Deployed
1032
GitHub Contributions
31
Technologies (who's counting??)
Skills
Looking for a well-rounded full-stack developer? Click here to contact me! 👋
.svg){kind=logo}
Projects
CodeMark
CodeMark
React.js, Redux, MongoDB, Express, Mongoose, Node.js, Webpack, HTML5, CSS3
Smart notes for code
CodeMark is a tool built for developers that allows you to save, view, and discover code snippets. Based on the code provided, CodeMark will extract the keywords and provide you a list of options to receive resources for. These resources are saved with your note and can be referenced anytime, or edited along with the note in the future. Feeling lonely? Gain insights from other users in the discover section, where you can view, like, and comment on other user’s public notes.
View live site
- Led a team of 3 engineers utilizing the feature branch workflow minimizing potential merge conflicts
- Held daily standup meetings to review progress on assigned tasks, update the project wiki with our progress, and adjust our MVP features based on new findings and experience
- Designed a responsive design system in Figma that allowed developers to efficiently implement with CSS grid and flex layouts, and to resulted in a pleasant UI/UX on any screen
- Implemented Clipboard API to enable users to easily comment on code snippets and leveraged the CodeMirror API to deliver a familiar note taking experience for developers
5000px
5000px
Ruby on Rails, PostgreSQL, React.js, Redux, JavaScript ES6, Webpack, HTML5, CSS3
A Full-Stack Clone of 500px
Users can upload photos, like and comment on photos, and follow their favorite photographers. User's can build their profile with a cover photo, avatar image, and profile details. Each photo can be added to a category, and each category has their own collection gallery page.
View live site
- Utilized AWS S3 and Rails Active Record associations to enable users to upload photos, avatars and profile covers leading to reduced server load, allowing for scalability of image services
- Employed the DataTransfer API to allow users to drag and drop files to upload images
- Rolled a custom lazy loader to dynamically build galleries and only fetch the next 10 images by leveraging a throttled scroll event listener with a Promise based callback that updates state after all requests have resolved
- Engineered RESTful CRUD cycles for creating new users, profiles, photos, comments, follows, and likes
- Bootstrapped the current user and profile to the window to ensure the user stays logged when the page is refreshed or internet connection is lost.
- Incorporated authenticated and protected routes using Rails Router to require new users to create an account before interacting with the main site
Animation Academy
Animation Academy
Vanilla JavaScript ES6, HTML5, SASS, Webpack, Node.js
Learn CSS Transitions and Animations
Learn how to make a webpage interactive using the transition and animation CSS properties. By the time you get to level 10, you'll be able to write transitions, apply animations, and even write your own @keyframes animations!
- Leveraged Vanilla JavaScript to engineer game levels and manipulate the DOM based on the current level Dynamically updated the prompt and IDE based on the current level with boiler plate code and hints for the user
- Constructed a RegEx solution matcher that compares user input to the solution without being too strict
- Incorporated a level-specific overlay that is triggered on submission that notifies the user if they were successfully and if so, adds the CSS Animations to the DOM for the user to interact with
React Widgets
React Widgets
React.js, CSS3, Webpack, Node.js
Clock, Weather, Autocomplete & Tabs
Simple, dynamic widgets built with React.js and utilizing the Geolocation API and Open Weather API
View live siteReact.js- Frontend JavaScript libraryWebpack- Module bundler@babel/core- JavaScript coverter for backwards compatibilityGeolocation API- Request user's current location andOpen Weather API- Fetch free weather data for the user's location- A short description of the current weather conditions along with a relevant icon
- Current location being used for weather data
- Actual temperatures + 'feels like' temperature (all in fahrenheit)
- max and min - highest and lowest temperatures for the current date
- Directional arrow icon that is rotated based on the current direction of wind
- Two letter abbreviations for the compass direction of the current wind
- Speed of current wind (imperial miles/hr)
- Gusts (imperial miles/hr), only if there are high wind gusts in the forecast
Technologies Used
Widgets
Clock
The Clock component displays the current date and time, updating every second.
Weather
The Weather component provides local weather data in an organized and digestible fashion. Weather data includes:
AutoComplete
The AutoComplete component filters a list of names based on the user's input. Matches are detected by comparing the user's input to the list of names, each sliced to the length of input and checked for equality. When a user clicks on the recommended name, the field autocompletes the name and displays the company's data below the search bar.
Tabs
The Tabs widget is an interactive container that dynamically displays content based on the label selected by the user.
