Build EASILY Mind-blowing 3D Portfolio Website: Tutorial (Spline + Tilda)
HTML-код
- Опубликовано: 13 июн 2024
- Join me in this comprehensive tutorial where I’ll guide you through the seamless process of building a mind-blowing interactive 3D portfolio website using the powerful combination of Spline and Tilda. Uncover the secrets to effortlessly showcase your work in a captivating and dynamic digital space that will leave your audience amazed and engaged. Get ready to take your online portfolio to the next level!
#webdesigner #webdesign #freelancewebdesigner
Use Spline for free at spline.design
Try Tilda website builder tilda.cc/
For more tutorials: @splinetool , @TildaPublishing
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
MY SOCIALS 👋 LET'S CONNECT
My Instagram: / victoria.creativelab
Tiktok: / victoria.creativelab
LinkedIn: / victoriaazarova
Buy me a coffee?☕️ : buymeacoffee.com/azarovavictoria
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
00:00 Examples of 3D portfolio websites
00:24 Intro
01:14 Start of the tutorial
05:48 Exporting of created 3D to website
07:09 Creating Tilda website
07:52 Adding 3D content to the website
08:12 3D website ideas
08:34 Outro
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Websites from the video:
1 - www.joshuas.world/
2 - www.david-hckh.com/
3 - danny-garcia.com/
4 - jesse-zhou.com/
5 - azarovavictoria.tilda.ws/
6 - wanderjaunt.thoughtlab.com/
7 - bruno-simon.com/
A big shoutout and heartfelt thanks to the generous Sketchfab creator who has shared these amazing 3D models with us for free:
ig: @etf_daniel - Хобби
Wow, such a big and creative tutorial. This is the first tutorial that shows how to mix tildaand 3D 🥰
I’m so happy you find it interesting ☺️✨
omg this is amazing!! I always wanted to build a 3D portfolio but I was so scared of three.js and those kind of complex libraries. Thanks for the tutorial 🙌
Me too 😄 but then I tried Spline and I couldn’t help but tell how it can be easy 😄😄😄
I’m glad you find it helpful 😊
the 3d model creation was so cool. thank you so much for showing that
Glad you enjoyed it :)) Yes, I love to create 3D with such tools/software and services, if you want to find alternatives, you can watch my other video about 3D software, which is very cool and easy to use or learn. ruclips.net/video/zebkO6pkeuw/видео.htmlsi=UdjB08pjwz0riwWD
Amazing tutorial thanks for sharing creative ideas ❤ your work!
Such comments rise my motivation 🙏🏻🫰
Wow amazing I would love to create a 3d portfolio using this
I’m so glad you inspired by this video 😃👏 I’d love to see what you will create ☺️
Thanks for tutorial!
I’m glad to share what I know 😊 and Thank you so much for support 🙏🏻🫶
wow, amazing 🤩
Hi 👋 thank you ☺️ I’m so glad you enjoyed it
Great content! 👏👏
Thank you so much ☺
Hello! That's a great tutorial and you did a great job! :) Only thing that I want to say, that in the start of your video you're using (as examples) portfolio web-sites that builds with Three.js library. In my opinion it would be much fair if you'll use examples of Spline + Tilde portfolios (just to not confuse some of watchers). But again, great work on video!
Hello :) thank you 🙏🏻
It’s a great point 😊👍 thanks that you notice this, because when I was searching for examples and inspiration for such kind of websites I tried to select that could be made in Spline or at least very close to it :) this is more like inspiration, I should said about it 🤓
great! We can even import 3d models in Framer, so which one of is the fast when it comes to loading...:)
Thank you for the comment:) I'm glad you like it. For faster loading pay attention to the size/weight of the 2D/3D model and difficult animation + plus the size/weight of the textures, and try to compress them for "KB" 👍
I have learnt from this tutorial👍.
I'm so glad to hear this) this is amazing! 😃👍
nice info will start building my own portfolio
Hi ☺️ I’m so glad it was helpful for you ✨ thanks for mentioning it
THanks victoria
Hi ) I’m glad it was useful ☺️
Wow love it! Would be great if you could share the link of the desk you used ! Need this type of desk for my project! Thx
Thank you so much :))
Yes, sure :) sketchfab.com/3d-models/office-a63e33a7448a49b8bb770cd5d4f2b6b1 - this is a file, but please check the license, if you're going to use for commercial use.
Thanks dear❤
You’re welcome ☺️
guauuuu...wonderful
Thank you :) I hope it was helphul for you ☺
thank you
I’m glad it was helpful 😊
Hello! I am building my portfolio currently and this is literally perfect for what I want to do! Amazing tutorial. Is there anyway you could add a computer chair that can swivel with someone sat in it? oh and a lava lamp as well hahaha!! Great video!!! Please keep them coming!
Hi) Thank you for watching and kind words ☺ yeah! sure, you can do it, just play with states and events - these options are for creating animations and any movements) as for characters - you can create them in Spline (look at their tutorials, they have how to create a character) and lamp too - because in Spline, you can make transparent material. and set movements of blobs in the lamp
omg ty for replying!!!@@azarovavictoria
Of course ☺ @@tfdesign4072 I'm glad to help )
Wow! Appreciate the efforts on this video but I really like the city scape in the starting. do u have a tutorial on that?
I'm glad, I'm here for you to share what I know :) and thanks for letting me know you like it about the city: for now, I don't have because this tutorial is about the first steps, and if I added a more complex subject to create it could be frustrating for the first time and tiring. But agree, It'd be interesting to create a city, I'll think about it and maybe record such a tutorial)
@@azarovavictoria u did an amazing work trust me. Yeah and I totally get ur point as well as long form content has its own battle with the views. I loved ur tutorial n hence thought it wud be great to learn from u. Bdw i am exploring this new tools wud love to get some inputs from u, hence i have sent a request on LinkedIn to connect, if we can.
Once again great work.
@@inzi786 thank you so much ☺️ such words motivate creators to keep going and create value even more 💫 okay, I’ll check it out 😊👍
Good, I love you ❤
Thank you ✨🙏🏻
can you bring full course from this?
Thank you for your comment:) Yeah, I'll consider creating a longer and more detailed video in the future. For now, I have this video, the whole process of creating a 3D website, that maybe can be useful for you: ruclips.net/video/CZ38DRyuzm0/видео.htmlsi=z_DtvgU7Q4XhyCoL
can I setup this model on React or NextJs
I think yes, in spline there are several options for export 3D model :)
😍🤩❤👍
Thank you ☺️✨
like it
Thank you 😊 I’m glad it was helpful
Add html option isn't there how am i gonna add then
Hi :) In what website builder are you trying to add 3D model from Spline?
Can I host the website in my own hosting?
Hi:) thanks for watching) This can be embedded as HTML snippet into any website, so hosting shouldn’t be matter 😉
Please teach meeee ❤
hi, thanks for watching😊 to teach what?)
hey can you send me the source code of the 3d model pls?
Hi) thanks for watching) if you mean to see this file that i use in the video as an example so here it is (but remember that you should consider license of 3D objects) - app.spline.design/file/dc12a3aa-ea79-4bca-b178-b83dbf7dea86
These websites you are showing are not created by spline
Hi) Yes, and I'm not saying that, these are just examples of websites where 3D components were used, and for inspiration 👍 then you turn on your imagination and using Spline create your version of a 3D portfolio website 😉
Sorry, but I have difficulty to understand your English
Hi) Yes, I'm not a native English speaker, and it's not perfect, But the process is so simple, so you can learn at least something just by watching the process, of find another video 🤗
@@azarovavictoria I try my best 😇👌🏼
@@YorickPenninks if you will get any questions during the process you can ask, I'll try to help 👍