Chloe Nott Personal Website (WIP)
Primary goal: organic, calming, and unique experience.
Credit
About Page
Background
Network graph shows relevant topics organized by profession. Communication of this information is secondary to the primary goal, and hidden by default. Instead want to abstractly acknowledge that each life is unique. Through the graphs shape and behavior, and its representation of unique topics to an individual, I think this abstract connection can exist. Each person could have a graph; each graph is a reflection of life; this is my graph; and each graph is a representation of unique life. The graph should reflect life to hold the anology. To do so: repeation of transitions, breathing, subtle continuous movements, and elasticity.
Features
D3.js used to create network graph. It handles force simulations out of the box. The transitions, data, etc., simply needed to be added.
Features:
- Mobile and desktop devices. The shape of the graph adjusts accordingly. Consideration for URL bar hide/show in size of graph. Scroll bar, margins, etc., are hidden. Tap to zoom/pan enabled to allow text to be read and/or full graph to be seen on mobile.
- Dark and light modes are determined by system settings.
- Penguin node (the node intended to transition to the next page) is an interaction point, and when hovered over, the visual energy of the graph is sapped into the penguin node.
- Animation pattern: outer nodes lighten, which feed into the inner nodes, which feeds into central node. Central node breathes in, reaches a critical point, then feeds its life into the path towards the penguin node, which in turn grows a new bud. As the breathing begins to exhale, the penguin node bud pops, the penguin path fades, the lights shut off, and the cycle begins again.
Virtual Page
Soontm.