Hey! In this blog, we will learn how to make 3D personal portfolio website using HTML, CSS & Javascript.
Hey coders, folks of the internet! If you’re into the latest trends in web design and personal branding, you’ve probably heard of 3D personal portfolio websites. These aren’t your typical websites, they’re like the cool kids on the block. So, let’s break it down: what’s the deal with 3D personal portfolio websites, why are they so lit, and how can you use them to spice up your online presence?
What’s the Scoop on 3D Portfolio Website?
Imagine your regular website, but on steroids. A 3D Personal Portfolio Website is like a digital playground where you can show off your skills and achievements. Instead of boring flat pages, it’s like stepping into a 3D world where you can explore and interact. Here’s what you’ll usually find:
1. 3D Space
It’s all about depth! You’re not just scrolling, you’re moving around in a 3D environment, like navigating a virtual room.
2. Interactive Fun
These websites aren’t static. You can click on stuff, drag things around, and make cool things happen with just a touch. It’s like a digital adventure.
3. Mind Blowing Visuals
Get ready for a visual feast! 3D graphics and animations make your portfolio come alive. Think of it as a fireworks show for your eyes.
4. Moving Around
No more boring scrolling up and down. You can explore by moving your mouse or swiping on your screen. It’s like taking a virtual tour of your own awesomeness.
5. Content Galore
Just like regular portfolios, you can show off your work, share descriptions, and link to other cool stuff like articles, videos, and your social media profiles.
Why 3D Personal Portfolio Website Are All the Rage
- Super Visual: These portfolios are like eye candy. They grab your attention with their mind blowing visuals and keep you hooked.
- Unforgettable Experience: Instead of just looking at stuff, you get to interact with it. It’s like a mini adventure that visitors won’t forget.
- Epic Storytelling: With 3D, you can tell your story in a whole new way. It’s like guiding visitors through a virtual journey that shows off your skills, personality, and what makes you awesome.
- Stand Out: In a sea of regular websites, having a 3D personal portfolio sets you apart. It shows you’re up to date with the latest tech trends and willing to go the extra mile.
- Creative Expression: If you’re in a creative field, 3D portfolios are like a playground for your imagination. You can let your creativity run wild and give visitors a taste of your unique style.
- Tech Cred: These portfolios are especially appealing to tech savvy peeps and those in tech related fields. It’s like saying, “Hey, I’m not just good at what I do, I’m also tech savvy!”
Creating Your Own 3D Personal Portfolio Website
Ready to jump on the 3D portfolio train? Here’s a simplified guide:
- Set Your Goals: First, figure out what you want to achieve with your portfolio. Who’s your target audience, and what’s the vibe you’re going for? Knowing this will guide your content and design.
- Pick a 3D Tool: Choose a 3D framework or platform that suits your skills and project needs. There are options like Three.js, Babylon.js, A Frame or pure HTML CSS JavaScript.
- Design Your 3D Space: Create the 3D environment for your portfolio. Plan the layout, decide what objects to include, and think about interactive elements that will make your space pop.
- Add Your Content: Populate your 3D space with your work, projects, and achievements. Make sure everything is organized and looks stunning.
- Speed Up the Performance: 3D graphics can be heavy, so optimize your site for speed. You want it to load smoothly for visitors on all devices.
- Test It Out: Before you hit “publish,” thoroughly test your 3D personal portfolio on different devices and browsers. Ask for feedback and make improvements as needed.
- Launch and Share: Once you’re satisfied, it’s time to show it off. Share your 3D portfolio on social media, in your email signature, and with anyone who needs to see your awesomeness.
You Might Also Like This:
- Responsive Personal Portfolio Website using HTML CSS & Javascript
- Build a Complete Responsive Personal Portfolio Website using HTML CSS Javascript
- Create A Personal Portfolio Website Using HTML and CSS Only
Video Tutorial:
3D Portfolio Website using HTML CSS & Javascript.
Source Files – Starting Points (3D Portfolio Website)
HTML Code – Starting Point (3D Portfolio Website):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D Portfolio Website HTML CSS and Javascript | Codehal</title>
<link rel="stylesheet" href="style.css">
<!-- box icons -->
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>
<!-- profile page -->
<!-- page 1 & 2 -->
<!-- page 1 (work experience) -->
<!-- page 2 (education) -->
<!-- page 3 & 4 -->
<!-- page 3 (my services) -->
<!-- page 4 (my skills) -->
<!-- page 5 & 6 -->
<!-- page 5 (latest project or my portfolio) -->
<!-- page 6 (contact me) -->
<script src="script.js"></script>
</body>
</html>CSS Code – Starting Point (3D Portfolio Website):
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
border: none;
outline: none;
font-family: "Poppins", sans-serif;
}
:root {
--bg-color: #081b29;
--main-color: #00abf0;
--text-color: #333;
--second-text-color: #555;
--white-color: #fff;
--cover-color: linear-gradient(45deg, #00abf0, #006e9a);
--pages-color: linear-gradient(90deg, #fff, #ddd);
--border: .125rem solid #00abf0;
--box-shadow: 0 0 .6rem rgba(0, 0, 0, .2);
}JavaScript Code – Starting Point (3D Portfolio Website):
//turn pages when click next or prev button
//contact me button when click
//create reverse index function
//back profile button when click
//opening animation
//opening animation (cover right animation)
//opening animation (page left or profile page animation)
//opening animation (all page right animation)Conclusion
In Conclusion, a 3D personal portfolio website is like taking your online presence to a whole new level. It’s an immersive, interactive, and unforgettable way to showcase your skills and creativity. So, if you’re ready to make a splash online, consider diving into the world of 3D personal portfolio websites and let your uniqueness shine in an entirely new dimension.
Buy This Project Complete Source Code From Here:
Buy This Project Complete Source Code From Here (By Paypal):