Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Sentot Web Profile is an interactive, 3D-enhanced personal portfolio built using modern web technologies like React, Vite, Tailwind CSS, and @react-three/fiber with physics powered by Rapier and stunning visuals via drei and meshline.

Notifications You must be signed in to change notification settings

sentotAB/sentot-web-profile

Repository files navigation

PERSONAL WEB PROFILE

This Web Profile is an interactive, 3D-enhanced personal portfolio built using modern web technologies like

React, Vite, Tailwind CSS, and @react-three/fiber with physics powered by Rapier and stunning visuals via drei and meshline.

image

FEATURES

🎨 Modern UI : Styled with Tailwind CSS for responsive, clean design.

🎭 Interactive Lanyard : A draggable 3D card suspended by a simulated rope.

💫 Physics Engine : Uses Rapier for realistic rope behavior and card dynamics.

🔁 Reusable Components : Modular structure for scalability.

⚡️ Fast Refresh with Vite : Hot module reload and instant startup.

TECH STACK

  • UI Framework + Build Tool : React + Vite.
  • Utility-first CSS styling : Tailwind CSS .
  • @react-three/fiber for React renderer for Three.js.
  • @react-three/drei for Helpers for Three.js.
  • @react-three/rapier for Physics engine integration.
  • meshline for the animated rope band.
  • react-icons Icon library for UI.
  • GLTF / Texture Assets for Realistic 3D rendering.
  • RESULT

    preview by vercel

    sentot web profile2

    https://vercel.com/sentotabs-projects/sentot-web-profile

    INSTALLATION AND DEVELOPMENT

    bash

    Clone the repo

    git clone https://github.com/yourusername/sentot-web-profile.git

    cd sentot-web-profile

    Install dependencies

    npm install

    Run locally

    npm run dev

    NOTES

    Place your GLB and PNG assets in /public/images/lanyard/

    Make sure you’re using /images/lanyard/card.glb — not /public/... in your code

    You may need to polyfill for mobile support or customize lighting for realism

    ABOUT THE AUTHOR

    Crafted by @sentotAB with passion for Web Client Development's assignment

    lectured by Mr. Rony Setyawan S.T, M.Kom in Cakrawala University

    About

    Sentot Web Profile is an interactive, 3D-enhanced personal portfolio built using modern web technologies like React, Vite, Tailwind CSS, and @react-three/fiber with physics powered by Rapier and stunning visuals via drei and meshline.

    Resources

    Stars

    Watchers

    Forks

    Releases

    No releases published

    Packages

    No packages published