Loading video...

Video Failed to Load

There was a problem loading this video. This could be due to a temporary network issue or the video might be unavailable.

So I've completed my portfolio with React and Three.js!💻🥳 📎 - Code - - Added Gmail service using emailJS - Secured keys in env.local file - Increased the size of the plane🚁 - Created utility hooks for showing/hiding alerts 🧵

Ritika kaurr

3,125 subscribers

11,717 views • 2 years ago •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

11 Comments

Ritika kaur2 years ago

🦊The fox model exhibits dynamic animations such as: No action - standing When typing - walking, Click send- running, each corresponding to different actions or states within the application.

Ritika kaur2 years ago

👩‍💻 Lil Tweaks in the portfolio: - Updated the skills section dynamically - Added cards for services - Created a custom hook for alerting on authentication errors - Made the responsive layouts - Added socials 📲 Check it out live and let me know your thoughts! 🌟

Safari Web Extensions1 year ago

Discover the top Safari web extensions to boost productivity, enhance workflow, and customize your browsing experience on Mac, iOS, and iPadOS.

Madza 👨‍💻⚡2 years ago

Looking really awesome, great job on this Ritika!

Ritika kaur2 years ago

Thanks Madza 😊

Thoufiq UchihaZO 🥷👨‍💻⚡⚔️2 years ago

Wow 🤩 Ritika that's a piece of fabulous work 🔥🔥

Ritika kaur2 years ago

Thankyou for your kind words 😊

Gaurav Bhojwani2 years ago

Great work, glad to see the final outcome😀💫

Ritika kaur2 years ago

Thank you for your feedback Gaurav 😊

Pratik Thorat2 years ago

I want to know how did you make your 3D model mobile responsive! I am creating a 3D portfolio as well

Ritika kaur2 years ago

I used tailwind for that by applying breakpoints, classes, and components strategically so that it can embrace different screen sizes.

Related Videos

Day 4 of building my cozy fishing game with Three.js. Let’s support each other! If you follow and repost, I will feature you in development videos and credit you in the final game with your X URL. Today I added Three.js for their support and Bruno Simon for the inspiration to start using three.js. Also improved the boat model, navigation, added a cargo ship and supporter buoys.

Day 4 of building my cozy fishing game with Three.js. Let’s support each other! If you follow and repost, I will feature you in development videos and credit you in the final game with your X URL. Today I added Three.js for their support and Bruno Simon for the inspiration to start using three.js. Also improved the boat model, navigation, added a cargo ship and supporter buoys.

Leon

17,795 views • 1 year ago

I've been showing the output of my flight reconstruction tool for a while and I wanted to share something like it which wasn't a mess of hand tuned stuff that required X-Plane. So I created a completely new version in javascript that runs in an HTML page so that anyone can use it. The output is a KML file which is a tour that works in Google Earth pro with all the attitude information included. This is a long way from perfect, I messed around with multiple smoothing algorithms and none of them compares well with the python code, but they're readable and understandable for anyone.

I've been showing the output of my flight reconstruction tool for a while and I wanted to share something like it which wasn't a mess of hand tuned stuff that required X-Plane. So I created a completely new version in javascript that runs in an HTML page so that anyone can use it. The output is a KML file which is a tour that works in Google Earth pro with all the attitude information included. This is a long way from perfect, I messed around with multiple smoothing algorithms and none of them compares well with the python code, but they're readable and understandable for anyone.

Scott Manley

19,808 views • 6 months ago

It’s incredible that you can let Opus 5 run for two hours in Claude Code and get a cinematic Three.js movie inside one HTML file. It created the story, scenes, transitions, camera moves, and procedural world. Higgsfield generated the narration, sound effects, and music. I mostly helped with references for more realistic grass, added the skills I use, and asked it to keep verifying its work. It’s all open source, so you can play with the code. HTML Site: GitHub: Grass reference:

It’s incredible that you can let Opus 5 run for two hours in Claude Code and get a cinematic Three.js movie inside one HTML file. It created the story, scenes, transitions, camera moves, and procedural world. Higgsfield generated the narration, sound effects, and music. I mostly helped with references for more realistic grass, added the skills I use, and asked it to keep verifying its work. It’s all open source, so you can play with the code. HTML Site: GitHub: Grass reference:

Meng To

60,729 views • 6 days ago

For me, the most important part of video creation right now is consistency. So I created my own GPT to achieve that. It's called AI Cinematic Consistency—and today, I want to share it with you and test it publicly. Let me explain why this matters 🧵 And here is the video I created using it.

For me, the most important part of video creation right now is consistency. So I created my own GPT to achieve that. It's called AI Cinematic Consistency—and today, I want to share it with you and test it publicly. Let me explain why this matters 🧵 And here is the video I created using it.

Jesus Plaza

395,268 views • 1 year ago

Wire bonding and lead impedance calculation in Blender FastHenry! I've improved how the simulation results are visualised, the entire objects now gets overlaid with a colour rather than using bound boxes. Red is for showing the self-inductance of a selected objected, yellow for mutually coupled objects and blue for conductive plane objects. Very impressed how easy it is nowadays to code anything with Python and Blender #b3d #electronics #engineering #science #pcbdesign #hadware #geometrynodes #3dmodeling #educational #simulation #fasthenry #altium #pythonlearning #electromagnetics #kicad

Wire bonding and lead impedance calculation in Blender FastHenry! I've improved how the simulation results are visualised, the entire objects now gets overlaid with a colour rather than using bound boxes. Red is for showing the self-inductance of a selected objected, yellow for mutually coupled objects and blue for conductive plane objects. Very impressed how easy it is nowadays to code anything with Python and Blender #b3d #electronics #engineering #science #pcbdesign #hadware #geometrynodes #3dmodeling #educational #simulation #fasthenry #altium #pythonlearning #electromagnetics #kicad

Sam M

29,801 views • 1 year ago

My altcoin portfolio is up $20,000. It's still down 50% from the entry; however, it's way less painful than being down 75%. In this video, I'll break down everything relevant for you as an investor in the markets. What's most crucial for the markets to turn upwards for altcoins? - The Copper/Gold ratio has flipped upwards for the first time in more than four years. Resonates perfectly with the bear market's length on #Altcoins. - I've decided to add another $10,000 in the altcoin portfolio, in which I've bought Renzo, NEAR, and remain in cash with the other amount on the 1st of May. - I've decided to sell $1,000 in Renzo and added $2,000 into Wormhole one week later, as Renzo moved upwards substantially. I do think that we're not far from another rally upwards, and that's why I've fully explained in the update on the #Altcoin portfolio.

My altcoin portfolio is up $20,000. It's still down 50% from the entry; however, it's way less painful than being down 75%. In this video, I'll break down everything relevant for you as an investor in the markets. What's most crucial for the markets to turn upwards for altcoins? - The Copper/Gold ratio has flipped upwards for the first time in more than four years. Resonates perfectly with the bear market's length on #Altcoins. - I've decided to add another $10,000 in the altcoin portfolio, in which I've bought Renzo, NEAR, and remain in cash with the other amount on the 1st of May. - I've decided to sell $1,000 in Renzo and added $2,000 into Wormhole one week later, as Renzo moved upwards substantially. I do think that we're not far from another rally upwards, and that's why I've fully explained in the update on the #Altcoin portfolio.

Michaël van de Poppe

26,725 views • 2 months ago

I’m in lovely Portugal for the week, and of course I’ve bright my 24K CBD Oil from Supreme CBD - UK’s #1 CBD OIL with me- the stuff is gold and has helped me so much with my sleep, especially on the plane, grab yourself some products with my code Aldo40 at 👍🏻 Have a great rest of the week everyone

I’m in lovely Portugal for the week, and of course I’ve bright my 24K CBD Oil from Supreme CBD - UK’s #1 CBD OIL with me- the stuff is gold and has helped me so much with my sleep, especially on the plane, grab yourself some products with my code Aldo40 at 👍🏻 Have a great rest of the week everyone

John Aldridge

34,480 views • 8 months ago

Controlling a 3D particle animation with hand gestures / voice 🎇🤖 "Jarvis, change to a sphere" > voice commands trigger a transformation into different shape types > hand gestures control the rotation speed and zoom created with Three.js, mediapipe computer vision, and web speech API. Runs in real-time in the browser, using a regular webcam / mic 🔗 demo + code in the comments let me know of any requests for future demos / tutorials!

Controlling a 3D particle animation with hand gestures / voice 🎇🤖 "Jarvis, change to a sphere" > voice commands trigger a transformation into different shape types > hand gestures control the rotation speed and zoom created with Three.js, mediapipe computer vision, and web speech API. Runs in real-time in the browser, using a regular webcam / mic 🔗 demo + code in the comments let me know of any requests for future demos / tutorials!

AA

24,376 views • 1 year ago

Claude Code Head invented a word for what most config files aren't doing: tokenmaxxing. 90% of it lives in one place: ~/.claude/settings.json. 125 keys in v2.1.105. official docs cover 40. 4 of mine aren't anywhere in the docs. i audited the whole file - 18 settings actually decide what your month costs. > enabledPlugins - mine had 14 on, 4 actually used. each idle plugin loads hooks and SKILL.md at session start. > mcpServers.enabled - false instead of delete. 9 unused servers cost ~30K tokens of schema every session. > cache_control breakpoint at the static/dynamic boundary moved my Opus month from $340 to $87. tokenmaxxing isn't a vibe. it's a file with 125 keys most people never open. watch this tonight instead of the new Rick and Morty drop.

Claude Code Head invented a word for what most config files aren't doing: tokenmaxxing. 90% of it lives in one place: ~/.claude/settings.json. 125 keys in v2.1.105. official docs cover 40. 4 of mine aren't anywhere in the docs. i audited the whole file - 18 settings actually decide what your month costs. > enabledPlugins - mine had 14 on, 4 actually used. each idle plugin loads hooks and SKILL.md at session start. > mcpServers.enabled - false instead of delete. 9 unused servers cost ~30K tokens of schema every session. > cache_control breakpoint at the static/dynamic boundary moved my Opus month from $340 to $87. tokenmaxxing isn't a vibe. it's a file with 125 keys most people never open. watch this tonight instead of the new Rick and Morty drop.

Mnimiy

83,403 views • 2 months ago

I got tired of my best work rotting in folders. So I built my own playground. Not a portfolio. A place to actually show the stuff. And the page itself is an interaction study. Built entirely with Claude Code. WIP. Still slightly buggy. Desktop only for now.

I got tired of my best work rotting in folders. So I built my own playground. Not a portfolio. A place to actually show the stuff. And the page itself is an interaction study. Built entirely with Claude Code. WIP. Still slightly buggy. Desktop only for now.

Tyrone C.

26,860 views • 1 month ago

Okay, I got Claude Code to actually fly my plane now It controls the keys via Chrome by running it with `claude --chrome` There is some issue with the lift vs gravity formula though so it takes a lot of speed to take off, but it's really cool to see it control and fly the plane This means it can code the game and then play it to check in a loop to theoretically improve it without my help (haven't gotten there though) I run it like this btw: `IS_SANDBOX=1 claude --dangerously-skip-permissions --chrome` (Run at your own risk)

Okay, I got Claude Code to actually fly my plane now It controls the keys via Chrome by running it with `claude --chrome` There is some issue with the lift vs gravity formula though so it takes a lot of speed to take off, but it's really cool to see it control and fly the plane This means it can code the game and then play it to check in a loop to theoretically improve it without my help (haven't gotten there though) I run it like this btw: `IS_SANDBOX=1 claude --dangerously-skip-permissions --chrome` (Run at your own risk)

@levelsio

143,316 views • 6 months ago

I've been building a music player with Next.js for fun. Here's a quick demo of how it works (it's open source!) • Demo: • Code: If you want to learn more about how it's built, here's more details ↓ I'm using Postgres (with Drizzle) to store information about the songs and playlists. Audio and image files are stored in Vercel Blob (object storage), and the URLs are then referenced in the database. For the UI, I'm using shadcn/ui (so Tailwind CSS and Radix). This made it easy to copy/paste in some nice components, like the dropdown menus. I built the entire first version of the UI in v0 and then iterated from there, feeding it my Drizzle schema as a source in the project and having it scaffold some of the boilerplate for me: I added support for keyboard navigation (using arrow keys) or vim motions (j/k to go up/down, and h/l to go between playlists and tracks). Also, space to toggle the now playing song, and / to focus the search input. The search function has a nice utility to highlight the currently searched text on the page in yellow. Then, I was exploring how to pass metadata from my application to macOS or iOS. Turns out there's an API for that – MediaSession. Web apps can share metadata about what media is playing (title, artist, album artwork) and sync play/pause/seek with system media controls. Works across modern browsers — even integrates with iOS dynamic island and shows up on lock screens: I set up my app like a PWA – it has a manifest.json file, so it can be installed to my iOS home screen or added to my dock on macOS. On iOS, it then uses the full screen height `100dvh` (dynamic viewport) and has padding on the bottom for the safe area with the `env()` CSS function. Finally, I was able to use the Vercel AI SDK in a script to clean up the metadata on audio files I downloaded from YouTube. Bonus: I even was able to dogfood the React Compiler, which helped me fix a performance bug! That's all! It's fun to make personal software:

I've been building a music player with Next.js for fun. Here's a quick demo of how it works (it's open source!) • Demo: • Code: If you want to learn more about how it's built, here's more details ↓ I'm using Postgres (with Drizzle) to store information about the songs and playlists. Audio and image files are stored in Vercel Blob (object storage), and the URLs are then referenced in the database. For the UI, I'm using shadcn/ui (so Tailwind CSS and Radix). This made it easy to copy/paste in some nice components, like the dropdown menus. I built the entire first version of the UI in v0 and then iterated from there, feeding it my Drizzle schema as a source in the project and having it scaffold some of the boilerplate for me: I added support for keyboard navigation (using arrow keys) or vim motions (j/k to go up/down, and h/l to go between playlists and tracks). Also, space to toggle the now playing song, and / to focus the search input. The search function has a nice utility to highlight the currently searched text on the page in yellow. Then, I was exploring how to pass metadata from my application to macOS or iOS. Turns out there's an API for that – MediaSession. Web apps can share metadata about what media is playing (title, artist, album artwork) and sync play/pause/seek with system media controls. Works across modern browsers — even integrates with iOS dynamic island and shows up on lock screens: I set up my app like a PWA – it has a manifest.json file, so it can be installed to my iOS home screen or added to my dock on macOS. On iOS, it then uses the full screen height `100dvh` (dynamic viewport) and has padding on the bottom for the safe area with the `env()` CSS function. Finally, I was able to use the Vercel AI SDK in a script to clean up the metadata on audio files I downloaded from YouTube. Bonus: I even was able to dogfood the React Compiler, which helped me fix a performance bug! That's all! It's fun to make personal software:

Lee Robinson

118,242 views • 1 year ago

🤬 Russian pilots were promised $1 million for hijacking a MiG-31, then recruiters increased the amount to $3 million if the plane was delivered with the "Kinzhal" missile. The curator offered citizenship of one of the Western countries and also tried to "seduce" them with a video showing huge stacks of money. When the pilot reported that he did not have the skills to land the plane, the curator suggested he learn online from a Ukrainian Air Force pilot. According to Kiev's plan, he was supposed to neutralize the crew commander in the air using a poison sedative. The hijacking was planned over the Black Sea — Kiev proposed to simulate a plane crash to provide cover. - ZN

🤬 Russian pilots were promised $1 million for hijacking a MiG-31, then recruiters increased the amount to $3 million if the plane was delivered with the "Kinzhal" missile. The curator offered citizenship of one of the Western countries and also tried to "seduce" them with a video showing huge stacks of money. When the pilot reported that he did not have the skills to land the plane, the curator suggested he learn online from a Ukrainian Air Force pilot. According to Kiev's plan, he was supposed to neutralize the crew commander in the air using a poison sedative. The hijacking was planned over the Black Sea — Kiev proposed to simulate a plane crash to provide cover. - ZN

Zlatti71

195,911 views • 9 months ago

Casually vibe coded Trevor Noah's latest website "Books" page using Fable 5 😍 I really loved the effects and animations on the website and immediately wanted to see if I could recreate them with AI. Pretty close in just a couple of prompts, isn't it? Everything is built in Three.js with no 3D assets for the books. Claude built the whole thing using pure math and animated it nicely with GSAP. Feels so realistic and close to real book. Pretty fun to see how close you can get to the kind of work agencies charge thousands of dollars for, just by describing what you want :D Live: Code:

Casually vibe coded Trevor Noah's latest website "Books" page using Fable 5 😍 I really loved the effects and animations on the website and immediately wanted to see if I could recreate them with AI. Pretty close in just a couple of prompts, isn't it? Everything is built in Three.js with no 3D assets for the books. Claude built the whole thing using pure math and animated it nicely with GSAP. Feels so realistic and close to real book. Pretty fun to see how close you can get to the kind of work agencies charge thousands of dollars for, just by describing what you want :D Live: Code:

The Bugged Dev

218,330 views • 15 days ago

Think of it as the Shopify of Claude Code, but for agents, commands, and MCPs 🚀 Pick what you need, “add to cart,” and… it’s 100% FREE. Just copy the command, paste it in your terminal, and instantly get the perfect Claude Code stack for your project. Built as an open-source project so the community can spin up, share, and install Claude Code stacks in seconds, no setup headaches, no paywalls. Here’s the video showing how I built this post… and yes, if you share the command, anyone can clone the exact same stack you’re using. Enjoy, share, and help others build faster with Claude Code ✨

Think of it as the Shopify of Claude Code, but for agents, commands, and MCPs 🚀 Pick what you need, “add to cart,” and… it’s 100% FREE. Just copy the command, paste it in your terminal, and instantly get the perfect Claude Code stack for your project. Built as an open-source project so the community can spin up, share, and install Claude Code stacks in seconds, no setup headaches, no paywalls. Here’s the video showing how I built this post… and yes, if you share the command, anyone can clone the exact same stack you’re using. Enjoy, share, and help others build faster with Claude Code ✨

Daniel San

124,913 views • 1 year ago

The most insane thing i built with AI agents: A full hedge fund in a single file. 7 independent strategies. 2,000 lines of code. 5 symbols. One Expert Advisor. Each strategy has its own trade engine, its own risk parameters, its own magic numbers. They never touch each other. Why one file? Because that's how you control what actually matters: max drawdown across all strategies, overlap prevention so two algos don't stack the same directional bet, and anti-hedging logic for prop firm compliance. Nobody does this. Sharpe ratio above 2. Eight years of data. $100k starting balance. Claude Code launched MetaTrader, configured the parameters, ran the backtest, and switched to the equity curve. I didn't touch anything. Fully autonomous. I shared the exact logic and code structure inside the Discord. This is one of the most ambitious projects i've built so far:not just a strategy, a portfolio engine.

The most insane thing i built with AI agents: A full hedge fund in a single file. 7 independent strategies. 2,000 lines of code. 5 symbols. One Expert Advisor. Each strategy has its own trade engine, its own risk parameters, its own magic numbers. They never touch each other. Why one file? Because that's how you control what actually matters: max drawdown across all strategies, overlap prevention so two algos don't stack the same directional bet, and anti-hedging logic for prop firm compliance. Nobody does this. Sharpe ratio above 2. Eight years of data. $100k starting balance. Claude Code launched MetaTrader, configured the parameters, ran the backtest, and switched to the equity curve. I didn't touch anything. Fully autonomous. I shared the exact logic and code structure inside the Discord. This is one of the most ambitious projects i've built so far:not just a strategy, a portfolio engine.

ZenomTrader

37,856 views • 5 months ago

It was a big day for me. For the FIRST TIME in a long time, I bought more $XRP with the intention of holding it and adding to my long term bag. It’s been tough to want to buy above $2, because I got in so early at $0.17 - $0.50 and packed my bags. The only time i’ve bought more in the past couple years was for the purpose of using it to trade memecoins on the XRPL. Why haven’t I bought more? Because I was stacking my bags with other tokens and expanding my portfolio!

It was a big day for me. For the FIRST TIME in a long time, I bought more $XRP with the intention of holding it and adding to my long term bag. It’s been tough to want to buy above $2, because I got in so early at $0.17 - $0.50 and packed my bags. The only time i’ve bought more in the past couple years was for the purpose of using it to trade memecoins on the XRPL. Why haven’t I bought more? Because I was stacking my bags with other tokens and expanding my portfolio!

MASON VERSLUIS

65,617 views • 6 months ago

Follow this video to learn how to build a simple AI agent without writing any code. I'm using Langflow. In my opinion, it's the best tool I've found for building agents. It's open-source, comes with a huge list of reusable components, and provides an awesome experience for builders.

Follow this video to learn how to build a simple AI agent without writing any code. I'm using Langflow. In my opinion, it's the best tool I've found for building agents. It's open-source, comes with a huge list of reusable components, and provides an awesome experience for builders.

Santiago

73,897 views • 1 year ago

This is one of the coolest open-source AI agent projects I've seen in a while: 'Understand Anything' It's a plugin for Claude Code, Codex, OpenCode etc. that analyzes your codebase and turns it into a knowledge base that you can interact with. It explains the codebase to you, rather than showing you the structure. It seems like it's designed for code but I opened my Obsidian vault of podcast highlights in Claude Code, then ran /understand. The result is a knowledge graph that I can search of highlights from 888 podcast episodes and 144K lines of markdown text.

This is one of the coolest open-source AI agent projects I've seen in a while: 'Understand Anything' It's a plugin for Claude Code, Codex, OpenCode etc. that analyzes your codebase and turns it into a knowledge base that you can interact with. It explains the codebase to you, rather than showing you the structure. It seems like it's designed for code but I opened my Obsidian vault of podcast highlights in Claude Code, then ran /understand. The result is a knowledge graph that I can search of highlights from 888 podcast episodes and 144K lines of markdown text.

Dan McAteer

174,045 views • 1 month ago