Circle Mapping with D3.js
A Circle mapping chart built with D3.js's Pack and the Rick & Morty API .
On selecting 'Load more', additional characters are loaded into the circles. The user can scroll in and out using the mouse wheel.
See the Pen Circle Mapping by Conor ( @u_conor ) on CodePen .
Film site - The Movie Database
A film site built with React and The Movie Database. The expanded film section is created with React Modal.
This layout is roughly based off of how Google Movies and Netflix display the previews for media, and is done with CSS Grid.
On scrolling to the end of the list, additional films are loaded into the list.
See the Pen FilmAPI - React hooks by Conor ( @u_conor ) on CodePen .
Pokedex with React (and Vue)
A Pokedex built with React and the PokeApi .
The stats section is a radar chart using this d3.js chart, and react-modal is used for the Move section.
I also have a Vue.js version at CodeSandbox
Wikipedia Search
A search UI with a card-like layout using the Wikipedia API . The animations are done with Pose .
The layout works when the search term brings back articles with images, such as 'palace of' , 'battle of' or common names such as 'john' or 'michael' . Most articles seem to not have images, so this wouldn't be an ideal search pattern for Wikipedia.
Student Dashboard - React Virtualized
A student dashboard built with react-virtualized and d3.js charts, the design is based off of Stephen Few's recommendations for Information Dashboard Design.
The data is generated with faker.js , so there are no meaningful observations to be drawn from the dashboard (high grades do not correlate with high attendace, low behavioural incidents, etc.).
See the Pen React Virtualized by Conor ( @u_conor ) on CodePen .
ios animations - RAWG & Framer Motion
Film site - alternate
An alternate version of the film app based off of this Dribbel , I was mostly interested in creating the non-rectangular headers utilised to display the featured and currently selected film.
The headers are done through SVG as opposed to CSS clip-path property.
See the Pen FilmAPI - Router by Conor ( @u_conor ) on CodePen .