Student at Dwarkadas J. Sanghvi College of Engineering

github

Praveen Lodhi  • Peerlist

A portfolio work page template that showcases projects with clean layout, smooth animations, and satisfying micro-interactions.I built it using Next.js + Tailwind CSS + Motion + GSAP to make it feel smoother, more interactive.Live: <a target="_blank" rel="noopener noreferrer" class="break-all link-break text-gray-500 hover:underline" href="https://project-spotlight-sigma.vercel.app">https://project-spotlight-sigma.vercel.app</a>GitHub<a target="_blank" rel="noreferrer nofollow ugc" class="break-all link-break text-gray-500 hover:underline text-green-500" href="https://github.com/praveenlodhiofficial/elixir-ui-templates/tree/main/project-spotlight">: </a><a target="_blank" rel="noopener noreferrer" class="break-all link-break text-gray-500 hover:underline" href="https://github.com/praveenlodhiofficial/elixir-ui-templates/tree/main/project-spotlight">https://github.com/praveenlodhiofficial/elixir-ui-templates/tree/main/project-spotlight</a>Follow me on X: <a target="_blank" rel="noopener noreferrer" class="break-all link-break text-gray-500 hover:underline" href="https://x.com/praveenlodhi99">https://x.com/praveenlodhi99</a>

Project Spotlight

I created a static webpage that uses shaders to create an elegant water ripple effect, as shown below. 🌊✨

Water Wave Simulation

In this project I utilized the Vite framework alongside Three.js to create an immersive 3D environment featuring an airplane and cloud models, converted from GLTF to JSX components. Throughout this project, I explored various technologies. 🔧 Tech Stack:<ul><li>@react-three/drei for simplified 3D components</li><li>@react-three/fiber for React integration</li><li>GSAP for smooth animations</li><li>Three.js for rendering 3D graphics</li><li>Lumina Library to handle lighting, glow, or similar visual enhancements in Three.js performance.</li></ul>

Mine's Journey

<h3>Checkout my personal portfolio!</h3>A clean and fast dev portfolio built using Next.js, Tailwind CSS, Framer Motion, Three.js and deployed on below link. Open for freelancing opportunity !!!→ Live: <a target="_blank" rel="noopener noreferrer" class="break-all link-break text-gray-500 hover:underline" href="https://www.praveenlodhi.me/">https://www.praveenlodhi.me</a>→ Follow on X: <a target="_blank" rel="noopener noreferrer" class="break-all link-break text-gray-500 hover:underline" href="https://x.com/praveenlodhi99">https://x.com/praveenlodhi99</a>→ Connect on LinkedIn: <a target="_blank" rel="noopener noreferrer" class="break-all link-break text-gray-500 hover:underline" href="https://www.linkedin.com/in/praveenlodhiofficial/">https://www.linkedin.com/in/praveenlodhiofficial</a>Built with: Next.js, Tailwind CSS, Framer Motion, Three.jsWould love to hear your thoughts or feedback 🙌

Personal Portfolio

Elixir UI is a collection of beautifully 3D designed and reusable React components crafted with advanced tools like Three.js, Gsap, Framer-Motion, Shaders, etc. It provides developers with ready-to-use, customizable components that can be directly copied and pasted into projects. Perfect for creating stunning, accessible, and responsive UIs.Elixir UI offers an easy way to enhance your app's design without the constraints of a traditional component library. Currently consists of 4 components.

Elixir UI

I've developed a fully customizable 3D shoe model using React Three Fiber, Valtio, Leva, and React Colorful. 👟✨

Each element can be customized according to individual preferences, making it perfect for an e-commerce application to offer interactive 3D showcases and enhance the user experience! 🛒🖱️

🛠️ The shoe includes configurable components like:

1. Mesh (main body)
2. Laces
3. Band
4. Sole
5. Stripes
6. Laces' Cap
7. Patch
8. Inner Material Color

Check out the project here: https://lnkd.in/ea_Bqj9e

Custom Shoes

🚀 Experimenting with Geometry & Environment in Three.js! 🌐

I’ve been experimenting with different materials and geometries in hashtag#ThreeJS to create some stunning 3D objects! In this project, I used geometry like sphere, torus, and plane and blended them into an HDR environment, resulting in a realistic, interactive 3D environment.

Key highlights of the project:

🌟 Environment Mapping using EquirectangularReflectionMapping and RGBELoader for loading HDR environments.

🎛️ Integrated Lil GUI for user-controlled manipulation of metalness and roughness properties directly on the canvas.

📐 Played with geometries and materials to create visually appealing objects that look great within the loaded environments.

Check out the project here: https://lnkd.in/eD2pHsuH

Check out the screenshot below for a sneak peek of the outcome !!! Users can manipulate reflections, textures & environment dynamically which really adds a layer of immersion and interactivity. 🎮

hashtag#ThreeJS hashtag#WebGL hashtag#3DGraphics hashtag#HDR hashtag#FrontendDevelopment hashtag#InteractiveDesign

Geometry & Environment in Three.js

I’m excited to share my latest project, 'Mine Journey.' It’s a special project because it reflects my personal growth as well as growth in my technical skill over the past few years. 

In this project I utilized the Vite framework alongside Three.js to create an immersive 3D environment featuring an airplane and cloud models, converted from GLTF to JSX components. Throughout this project, I explored various technologies.

🔧 Tech Stack:

@react-three/drei for simplified 3D components
@react-three/fiber for React integration
GSAP for smooth animations
Three.js for rendering 3D graphics
Lumina Library to handle lighting, glow, or similar visual enhancements in Three.js

Check out the project here: https://lnkd.in/ejhEZzsQ

This project has been a significant learning curve, I’ve gained insights into applying physics to the airplane's motion and optimizing the environment for better performance.

Mine Journey

I’m excited to share my latest work with you, delving into the world of 3D graphics using Three.js. I created a 3D model of a hollow truncated cone that can be interactively rotated and explored. To give it a unique touch, I overlaid it with a PNG design exported from Figma.

🔧 Tech Stack:

GSAP
Figma
Three.js
@react-three/drei
@react-three/fiber
@react-three/postprocessing

Check out the project here: https://lnkd.in/eq5y7SBr

The integration of these tools has been a fantastic learning experience, and I’m looking forward to further experimenting with interactive 3D elements!