Skip to main content
SimilarExport ZIP
100%

Fork of React & D3 Vibecoding Starter

✓ Published0🌍 Public
YYukikaze
Last edited Feb 14, 2026
Created on Feb 14, 2026

This resume is a single-page HTML document for a frontend engineer, presenting professional experience, skills, and contact information. It uses a decorative SVG background path and an avatar created with gradients and shapes, while a print button triggers `window.print()`. The layout is built with CSS Grid and Flexbox, featuring interactive skill bars and a copy-email button that writes to the clipboard.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of HTML Starter

This example renders a personal resume as a single-page web document, displaying a name, contact information, technical skill tags, work experience, and education history. The page uses inline SVG icons for email and phone, along with styled HTML containers to structure the content. The interface relies on vanilla JavaScript and CSS, with a window.onload handler that sequentially triggers a fade-in animation on each resume section by adjusting its opacity and transition property.

Yyinyiwen3589@gmail.com
82% match
Loading thumbnail…

resume

This resume presents a two-column layout with a dark blue header and a light blue sidebar. It provides a profile summary, a left column of skills with animated progress bars and tag chips, and a right column of work experience and projects with dates and bullet points. Rendered as SVG using React and CSS, the page features hover effects on contact links and a fade-in animation on load, with data sourced from an HTML document and styled with the styles.css file.

FFanghaoMeng
80% match
Loading thumbnail…

Fork of Fork of React & D3 Vibecoding Starter

This example demonstrates a React and D3.js integration that loads a single SVG path from a text file and renders it as a thin, colored line positioned in the upper right of the viewport. Using a `ResizeObserver` hook to track container dimensions, it builds an SVG element via `select` and `join` operations from D3 v7. The path responds to hover with a slightly thicker stroke width, while the overall container maintains a clean, minimalist design with the Inter font.

NNita
76% match
Loading thumbnail…

Fork of React & D3 Vibecoding Starter

This visualization displays an animated SVG path sourced from a single CSV record, rendered on a clean white card with a drop shadow. The path is parsed for coordinates, scaled, and centered within a responsive container. Using D3 transitions, the stroke draws itself smoothly over 2.5 seconds with a glowing shadow effect. Built with React 19 and D3 v7, the code leverages `useDimensions`, `ResizeObserver`, D3 selections, and `transition` APIs for the animation.

NNita
75% match
Loading thumbnail…

Fork of React & D3 Vibecoding Starter

A bar chart displays letter frequencies from CSV data, with clickable bars that highlight selections. Built as a React app using hooks for state management and a ResizeObserver for responsive sizing, the visualization combines D3 v7’s scaleBand and scaleLinear for layout with axisBottom and axisLeft for labeled axes and gridlines. Bars transition colors and opacity on interaction.

Ssayedmhasan110@gmail.com
75% match
Loading thumbnail…

Fork of Fork of Fork of HTML Starter

This example demonstrates a minimal HTML page that combines CSS styling, SVG rendering, and JavaScript interactivity. The code imports D3’s `select` function to append a circle to an SVG element, positioning it at coordinates (100, 100) with a radius of 100. A message displays “Hello HTML!” using large, centered text, while the body margin is reset globally. The visualization uses static SVG shapes without data binding or animations, serving as a clean starter template for exploring React and D3 integration in a VizHub environment.

LLouisa Penrice
75% match
Loading thumbnail…

Fork of React & D3 Vibecoding Starter

This example demonstrates a React and D3 integration pattern where a path drawn from CSV data is rendered as a standalone SVG element. The visualization displays a single continuous line path loaded from an external text file and positioned in the upper right area of the container. The code uses React hooks like useRef and useEffect alongside a ResizeObserver to track container dimensions, while D3's select and join methods handle SVG creation and updates. The path is styled with a teal stroke and subtly increases in width on hover, showcasing how React manages state while D3 handles low-level rendering.

NNita
75% match
Loading thumbnail…

Fork of React & D3 Vibecoding Starter

A static bar chart displays letter frequencies from a CSV file, with bars in teal that highlight and dim upon selection. Built with React and D3 v7, it uses `scaleBand` and `scaleLinear` for axes, `axisBottom` and `axisLeft` for ticks and gridlines, and a `ResizeObserver` to adapt the SVG to container dimensions. Clicking a bar toggles its selected state, which adjusts fill color and opacity.

BBHUMIKA CHUNDU
75% match