vndangkhoa/kv-port
Watch
1
0
Fork
You've already forked kv-port
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
Creative portfolio website with interactive design showcase, dark/light mode, and dynamic WordPress API content
32 commits 1 branch 0 tags 5.2 MiB
  • JavaScript 92.2%
  • CSS 6.7%
  • HTML 1.1%
Find a file
Exact
Repository files (latest commit first)
Filename Latest commit message Latest commit date
vndangkhoa f79fccf72e Merge remote branch origin/main, keeping local layout and responsive refactoring
2026-06-12 21:25:28 +07:00
public Complete tetris grid layout with animations and mobile support 2026-04-29 15:17:07 +07:00
src Refactor layout for seamless Tetris blocks, full-screen stretched responsiveness, single CV video, and staggered mobile breathing color pulsing 2026-06-12 21:24:50 +07:00
.gitignore feat: makingsoftware.com pixel-perfect portal transformation 2026-04-19 10:16:32 +07:00
eslint.config.js feat: makingsoftware.com pixel-perfect portal transformation 2026-04-19 10:16:32 +07:00
index.html Complete tetris grid layout with animations and mobile support 2026-04-29 15:17:07 +07:00
package-lock.json Complete tetris grid layout with animations and mobile support 2026-04-29 15:17:07 +07:00
package.json Complete tetris grid layout with animations and mobile support 2026-04-29 15:17:07 +07:00
postcss.config.js feat: makingsoftware.com pixel-perfect portal transformation 2026-04-19 10:16:32 +07:00
README.md Refactor layout for seamless Tetris blocks, full-screen stretched responsiveness, single CV video, and staggered mobile breathing color pulsing 2026-06-12 21:24:50 +07:00
SECURITY.md feat: makingsoftware.com pixel-perfect portal transformation 2026-04-19 10:16:32 +07:00
tailwind.config.js Complete tetris grid layout with animations and mobile support 2026-04-29 15:17:07 +07:00
vite.config.js Complete tetris grid layout with animations and mobile support 2026-04-29 15:17:07 +07:00

README.md

Khoa.vo Portal

A personal link portal with tetris-style grid layout.

Overview

A responsive web portal that displays links in a tetris-inspired grid layout. Each block represents a different service or project, with animations that drop blocks from top to bottom on page load.

Features

  • Pixel-Perfect Seamless Blocks: Tetromino blocks are rendered as single, continuous HTML elements clipped using SVG clipPath and extended using CSS calc(). This creates a solid block appearance with no internal borders or gaps, while maintaining perfectly even gaps between different blocks.
  • Single CV Video Media: The CV block displays a single looping video resume seamlessly clipped by the Tetris shape (no duplicate tiles).
  • Global Height-Stretched Layout: The grid maximizes vertical viewport space globally on both desktop and mobile by dynamically stretching to fill the remaining space between the header and footer with no scrollbars.
  • Mobile Responsive Grid: Swaps between an 8×6 grid layout (4:3 aspect ratio) on desktop and a portrait-oriented 6×8 grid layout (3:4 aspect ratio) on mobile.
  • Staggered Blinking on Mobile: On mobile viewports, blocks pulse gently in their signature vibrant colors with deterministic staggered delays, while CV and Portfolio stay static.
  • Dark/Light Theme: Toggle between dark and light modes.
  • Refresh Layout: Shuffle button to regenerate the grid layout.

Links

  • portfolio - Portfolio website
  • cv - Video resume
  • netflix, youtube, spotify, tiktok - Media platforms
  • tools, save, free, jpg, pdf - Utility links
  • rm8pfix - Custom project

Stack

  • React + Vite
  • CSS (no external CSS framework)

Run locally

npm install
npm run dev

Build

npm run build

© 2026 Khoa.vo