Circle Mapping with D3.js
A Circle mapping chart built with D3.jd 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
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.
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 .
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 .
ios animations - RAWG & Framer Motion
News Aggregation - NewsAPI & React
A news aggregation site built with React, the design is roughly based off this Behance .
One thing that I found the design did not account for were the brand logos used in the left navigation - they differ in aspect ratios and therefore cannot be placed within consistent containers (circles in this case) as they often appear cut-off at their edges. The design is also heavily reliant on large high-quality photography which is not always available from news providers.
The background photographs can often be light in color composition which lowers the readability of the headline - the CSS text-shadow property helps with this but it is not supported by all browsers.