Gist 0e2d25c5a6ad6d6449636f60b210e178

100%

Gist 0e2d25c5a6ad6d6449636f60b210e178

✓ Published0🌍 Public

Last edited Nov 11, 2019

Created on Nov 11, 2019

This interactive resume visualizes Abiy Melaku’s career history and technical skills using a custom React and D3.js interface. The view presents a network-style layout where each professional role and project appears as a distinct node, with connectors linking to relevant technologies and keywords from the resume. Built with React for component state and D3’s force simulation for spatial arrangement, the visualization lets viewers hover over nodes to reveal detailed descriptions of responsibilities and tools. The code directly parses the resume’s structured text data, mapping each bullet point and section into interactive, color-coded elements that update in real time.

AI-generated description

Similar vizzes

Loading thumbnail…

Abiy Melaku's Resume

This interactive resume uses a network graph layout to visualize Abiy Melaku's professional experience and technical skills. The visualization shows how different roles, projects, and technologies interconnect, with nodes representing individual positions and skills linked by proximity or shared context. The rendering relies on a force-directed simulation, likely using d3.forceSimulation, to calculate node positions and collisions. While the code's dependencies are not listed, the layout suggests a custom React component that maps the markdown resume data into a dynamic, explorable graph. The resume data itself is parsed directly from the provided Markdown file, transforming static text into an interactive visual narrative of a developer’s career.

AAbiyMelaku

90% match

Loading thumbnail…

Gist d48666ba0aaed38491ff5ccd5214c9a2

This example is a resume presented as a single-page, data-driven document. It shows the candidate's professional summary, technical skills, project history, and education. The visualization is built with React and leverages the D3.js library to create a custom layout for the resume's content. The code uses `d3.forceSimulation` to position the various sections, likely creating a network or bubble-like arrangement. The data is sourced directly from the resume text, which is parsed and rendered through a React component, demonstrating a non-traditional, interactive approach to displaying structured personal information.

AAbiyMelaku

88% match

Loading thumbnail…

Gist a18bad73d3fd33da75903d11c908bef1

This example presents a static resume styled as a single-page document, using a clean typographic layout to organize professional experience, skills, and education. The visualization is built with React, though the core rendering relies on standard HTML and CSS for text hierarchy and spacing. The code does not employ any data-driven JavaScript libraries like D3.js or canvas APIs; instead, it displays the resume content directly from a local Markdown-like structure. The result is a straightforward, readable presentation of the candidate’s career history, with no interactive or animated elements.

AAbiyMelaku

84% match

Loading thumbnail…

Resume

This interactive resume presents Jane Hazen Willborn’s professional history as a visual document. The page displays project cards for her work, including ShanHai, a clickable world map built with React, Redux, and d3, alongside a Rails backend. Each project entry details its tech stack, such as Ruby, Sinatra, and Twilio APIs for the texting app, and highlights honors and professional experience in China. The layout renders her software engineering background and Mandarin fluency as a single, scrollable infographic, drawing directly from the resume’s structured data.

JJaneHazen

72% match

Loading thumbnail…

Gist e4ad04560d14bf59d0642b48bf3e436b

This example visualizes a job-search and interview-preparation checklist as a network diagram. It shows the relationships between job applications, interview tasks, and study resources using a force-directed layout. The visualization uses D3.js’s `d3.forceSimulation` to position nodes and links, with each node representing a task or company and edges showing dependencies. The code renders custom SVG elements, and hover interactions highlight connected nodes. Data comes from a Markdown checklist, parsed and converted into graph form. The rendering approach emphasizes task progression, with completed items visually distinct, and uses transition tweens for smooth layout updates.

FFrankieFabuloso

69% match

Loading thumbnail…

CV!

A playful, interactive résumé presents the author as a data scientist, game developer, web developer, and deep-learning researcher. Prominent, fixed text cycles through these job titles with a typewriter effect and blinking cursor, while stylized SVG eyes track the mouse cursor, shifting pupil positions left or right based on the viewer's cursor location. The project uses D3 v5 for SVG selection and rendering, plain JavaScript event listeners for mouse tracking and text animation, and CSS keyframes for the caret. Interactive behavior is driven entirely by client-side code, with no external data source.

Mmpgame8

68% match

Loading thumbnail…

Gist 484101

This visualization shows an interactive network of interconnected nodes, with each node representing a person and links showing connections between them. It reveals the structure of social ties, likely from a GitHub collaboration graph, by grouping related clusters. The rendering uses a canvas-based `d3.forceSimulation` with custom collision and link forces to position nodes, while a custom `d3.geoPath`-style projection maps node positions onto a projected sphere. The code also employs Canvas `getImageData` to detect node boundaries for hover interactions, and uses `transition.attrTween` for smooth link animations. The underlying data is loaded from a Gist, and the visualization runs entirely client-side without external data files.

DDylanFM

64% match

Loading thumbnail…

Untitled

This example presents a stylized resume as a single-page web document, displaying a work history, skills, and publications laid out in a clean, print-oriented format. It uses HTML and CSS to structure the content, with styles designed for both screen and print media. The page employs semantic tags like `<address>` and `<time>` for contact details and dates, and uses CSS selectors to add decorative content, such as angle brackets around links, while specific layout rules (e.g., floating elements, clear sections) arrange the information for a polished presentation.

Hhab

64% match