My Portfolio - Ben Brophy

All React Vue D3 Tailwind CSS WordPress GreenSock Small Projects

Best Practices for Developers Course

A 1.5 hour course on CMS best practices for developers that I created for HubSpot Academy. Covers web accessibility, page speed, and best practices when using the HubSpot CMS. Cross-functional collaboration with other content creators, editors, developer relations professionals, and product managers. Responsible for all of the video scripting, filming, project management, and some video editing in Screenflow.

Robinhood Dashboard Clone: Vue 3, D3, Firebase, & Tailwind CSS

Partial clone of Robinhood’s desktop app. Made with Vue 3 (including Vuex and Vue Router), Firebase Cloud Firestore, Firebase Authentication, and Tailwind CSS. Allows you to search for stocks, view an intraday price chart, and view stock news and company info. You can also add lists (title and emoji), edit lists, delete lists, and add stocks to existing lists.

Stock chart made with D3 and emoji picker made with Emoji Button npm package. Also features dark mode toggle button. Stock data retrieved using a Google Cloud Function and the IEX Cloud API. Shows Robinhood’s stock on dashboard home.

View sample dashboard

Development

Robinhood Homepage Clone: Vue 3 & Tailwind CSS

Fully responsive clone of Robinhood’s homepage, sign up page, login page, and free stock page. Made with Vue 3, Tailwind CSS, and modern JavaScript. Includes responsive navigation, modals, and sliders, including an infinitely looping slider, and enter/leave transitions. Uses the Fetch API and async / await to get stock prices using the IEX Cloud API.

Homepage

Free Stock Page

Development

Education Cannot Wait 2020 Annual Results Report Microsite

Developed using TailwindCSS, JavaScript, CountUp.js, GreenSock, and ScrollTrigger. Features SVG animations, interactive SVG map, single page menus (mobile + desktop). Added to client’s existing WordPress website using page templates.

Development

Screenshot of homepage app made with React

Blogging App: React

Made as part of a Udemy course. Uses React Hooks (useState, useEffect, useContext, useRef), Immer (useImmer, useImmerReducer), and React Router. Features client-side form validation. User can log in, sign out, chat, follow other users, and create and edit posts. Netlify front end and Heroku backend.

Development

Miles Technologies Design Library

Design library featuring multiple page designs. Made with Tailwind CSS, PostCSS, CSS Grid, CSS animations & transitions.

Includes scroll events, use of the Intersection Observer API (for image and video lazy loading, “slide-in” effects on scroll), background videos, and a masonry grid layout generated by Javascript.

Dependencies include CountUp.js, lightSlider, and lightGallery. Built in WordPress; templates developed using HTML, Tailwind CSS, PHP, and the Advanced Custom Fields plugin.

Development

United States Educational Attainment Choropleth Map

US Choropleth Map: D3 & React

A choropleth map depicting educational attainment in US counties. Made with D3 & React. User can hover over individual counties and see the relevant data.

Development

Video Game Sales Treemap

A treemap depicting the top 100 best-selling video games of all time. Built with D3 & React. User can hover over each area and see the total sales for that game.

Development

Monthly Global Land-Surface Temperature Heat Map

Land-Surface Temperature Heat Map: D3 & React

Heat Map made with D3 & React. Depicts the land-surface temperature by month from 1753 – 2015. Makes use of D3’s band scale and color schemes; user can hover over each month and see the associated data.

Development

Doping in Professional Bicycle Racing Scatterplot

Doping Scatterplot: D3 & React

A scatterplot made with D3 & React. Depicts doping in professional cycling. User can hover over each dot and see the rider’s info and more details.

Development

US GDP Bar Chart: D3 & React

Bar chart made with D3 & React depicting the US GDP by quarter from 1947 – 2015. User can hover over each individual bar and see each quarter’s details.

Development

Striven

Lead developer – created over 15 page templates using re-usable components. Custom post types, multiple site searches, and blog layout—set up on WordPress using the blocks editor to allow content creators and other marketing professionals to maintain site content and future design.

Development