DTSC630_Assignment1

100%

DTSC630_Assignment1

✓ Published0🌍 Public

Last edited Mar 13, 2026

Created on Feb 13, 2026

This interactive portfolio website showcases the professional profile, experience, projects, and skills of Bao Mai, a data scientist and analyst. The Vue.js-based site features a hero section with a typewriter effect cycling through job titles, floating sticker images with drop-shadow effects, and a rotating animation for an audio control. The interface includes sticky navigation with a mobile hamburger menu, scroll-triggered reveal animations using IntersectionObserver, and a responsive grid layout for skills. The design utilizes CSS custom properties for theming, Playfair Display and Space Grotesk fonts, and JavaScript for interactive elements.

AI-generated description

MIT Licensed

Similar vizzes

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

66% match

Loading thumbnail…

Profile Page VH

This profile page design shows a user's public data-visualization portfolio using a responsive CSS grid layout. The hero section prominently displays the user's avatar, name, and follow statistics, while tabbed navigation organizes visualizations, likes, collections, and activity into distinct sections. The gallery presents visualization cards with thumbnails, engagement metrics, and timestamps, supplemented by an activity timeline for recent actions. Built with HTML5 semantic markup, CSS3 variables, flexbox, and grid, the design relies on Font Awesome for icons and media queries for mobile, tablet, and desktop adaptation, though it lacks JavaScript for interactive tab switching.

NNita

65% match

Loading thumbnail…

Resume

This résumé portfolio uses a scroll-triggered fade-in animation to reveal personal and professional information. The page layout is structured with a two-column grid, featuring cards for work experience, education, and skills. A blue decorative SVG icon is fixed in the top corner. The implementation relies on the IntersectionObserver API within JavaScript to add a 'visible' class, which triggers a CSS transition that animates opacity and vertical translation for each fading element.

DDaniel Z

65% match

Loading thumbnail…

Fork of React & D3 Vibecoding Starter

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.

YYukikaze

64% match

Loading thumbnail…

Resume

This resume presents a professional summary for a data analyst, formatted as a standard HTML page styled with a custom CSS stylesheet. Content is organized into distinct sections for skills, projects, experience, and education, with key headings highlighted in blue. The interactive element involves hovering over hobby icons displayed as large text glyphs, which triggers a scale transformation for visual feedback. The page relies on core HTML and CSS for layout and interactivity, with JavaScript utility functions for display messaging but no external libraries or data sources.

AAwrng

64% match

Loading thumbnail…

Assignment#1 Resume

This example renders a professional resume as a web page using standard HTML, CSS, and JavaScript, with embedded SVG graphics for section headers. The page displays a data analyst’s summary, technical skills, projects, and work experience, using styled text and colored rectangles to organize content. JavaScript functions `showText` and `clearText` manage a dynamic message area that responds to mouse hover events over icons. The layout relies on CSS for typography and positioning, while inline SVG elements create the visual accents. The code demonstrates a straightforward, non-interactive document-style visualization using only core web technologies.

AAwrng

64% match

Loading thumbnail…

Fork of HTML Starter

This example presents a single-page data engineering portfolio template with a dark header and white content sections. The page uses semantic HTML5 elements, including a navigation menu with anchor links to sections about education, skills, projects, and experience. CSS styling via style.css applies a clean layout with responsive media queries for mobile. The code is a static HTML/CSS starter, containing no JavaScript or data visualization libraries, and displays placeholder text rather than actual project data.

UUthkarsh Reddy Junuthula

64% match

Loading thumbnail…

portfolio

This example presents a personal portfolio page for a graduate student in computer science, organizing academic and professional details into sections like work experience, skills, projects, and education. The HTML document defines the content structure, while the CSS file in styles.css provides the visual styling, such as a yellow header and card-based layout. Navigation links allow visitors to jump between sections, and images are referenced for a profile photo and social media icons. The design uses standard HTML elements and CSS rules for layout and typography, without relying on external charting or data visualization libraries.

NNithish Kumar

63% match