My Portfolio: Tailwind CSS

All React Vue D3 Tailwind CSS DevEd WordPress GreenSock Small Projects

Education Cannot Wait 2021 Annual Results Report

Developed using TailwindCSS, JavaScript, CountUp.js, GreenSock, and ScrollTrigger. Features SVG animations & single page menus (mobile + desktop).

Design credit: büro svenja

Development

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

Meditation Timer 2.0

An update to the original meditation timer that I made a few years back. This one features a few improvements, including a light/dark mode toggle, improved time inputs, and the ability to add multiple interval bells. I also converted the app to a PWA using next-pwa.

Made with Next.js, React, TypeScript, and Tailwind CSS. Deployed on Vercel.

Development / Design

Educatiion Cannot Wait 2020 Annual Report Homepage screenshot

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).

Design credit: büro svenja

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

Cornelis Networks

Developed in WordPress: ACF Pro, Tailwind CSS, lightSlider, PHP, HTML, custom post types. Overlapping boxes achieved with CSS Transforms, Flexbox, and Grid. Fully editable by the client using the WordPress Block Editor and the ACF Pro plugin.

Development

Miles Technologies

Lead developer on this 100+ page WordPress site. Created a component/template library using Advanced Custom Fields Blocks and Tailwind CSS, which allows anybody on the team to create pages using the block editor in WordPress. Previously responsible for regular maintenance and updates.

Development

Alumi-Guard

Lead developer on this 50+ page WordPress site. Created reusable ACF Blocks for the customer’s product pages, added multiple slider styles (Slick Slider), resources page, and gallery (lightGallery), all of which are fully editable and configurable by the client, who is a non-developer.

Development

Kappa Products

Built out this WordPress theme and the home page and subpage templates. Given the reusable nature of the Blocks in the Blocks editor, the site was able to be completed by others on the team, who were able to build the remaining pages fully in the WordPress Block editor.

Development