[1]


Expressing Ideas Through Innovative Tools




















Chongqing




redesigned in 1904 by Gaudí
Casa Batllóre designed in 1904 by Gaudí
Basílica de la Sagrada Família Designed by architect Antoni Gaudí


























︎For me, design is not limited to paper or the digital realm. It's everywhere - in the way we experience the world around us︎. This curiosity led me to pursue a degree in graphic design.



























































































︎︎︎From digital to print and now to the 3D and interactive world, this is part of what drives me as a designer. I don't think design is limited to one medium, it's a flexible, evolving process. Whether it's on paper, in print, on screen, or in 3D space, design is everywhere, and it's constantly changing as we explore new tools and methods.










︎︎︎








Thank You︎



























import MagnetLines from './MagnetLines'; import { useRef, useEffect } from "react"; import "./MagnetLines.css"; export default function MagnetLines({ rows = 9, columns = 9, containerSize = "80vmin", lineColor = "#efefef", lineWidth = "1vmin", lineHeight = "6vmin", baseAngle = -10, className = "", style = {} }) { const containerRef = useRef(null); useEffect(() => { const container = containerRef.current; if (!container) return; const items = container.querySelectorAll("span"); const onPointerMove = (pointer) => { items.forEach((item) => { const rect = item.getBoundingClientRect(); const centerX = rect.x + rect.width / 2; const centerY = rect.y + rect.height / 2; const b = pointer.x - centerX; const a = pointer.y - centerY; const c = Math.sqrt(a * a + b * b) || 1; const r = (Math.acos(b / c) * 180) / Math.PI * (pointer.y > centerY ? 1 : -1); item.style.setProperty("--rotate", `${r}deg`); }); }; window.addEventListener("pointermove", onPointerMove); if (items.length) { const middleIndex = Math.floor(items.length / 2); const rect = items[middleIndex].getBoundingClientRect(); onPointerMove({ x: rect.x, y: rect.y }); } // Cleanup return () => { window.removeEventListener("pointermove", onPointerMove); }; }, []); const total = rows * columns; const spans = Array.from({ length: total }, (_, i) => ( )); return (
{spans}
); }