3D-Dev-Portfolio Tailwind Templates

3d Dev Portfolio

3D Dev Portfolio with React 19, Tailwind CSS v4, R3F, GSAP & EmailJS. Custom Ready Player Me avatar + Mixamo animations—no Blender needed! 🚀

#threejs #portfolio #react-three-drei #react-three-fiber
Download

Project Banner


react.js greensock tailwindcss Three.js Badge

3D Developer Portfolio

Your portfolio is still boring let make some awesome 🚀

📋 Table of Contents

  1. 🤖 Introduction
  2. ⚙️ Tech Stack
  3. 🔋 Features
  4. 🤸 Quick Start
  5. 🕸️ Snippets (Code to Copy)
  6. 🔗 Assets
  7. 🌐 Community

Introduction

3D Developer Portfolio built to help you stand out with stunning visuals and interactive 3D elements. Perfect for frontend devs, designers, and creative coders.

Tech Stack

  • ⚛️ React 19
  • 🌀 Tailwind CSS v4
  • 🎮 Three.js + React Three Fiber
  • 🎞️ GSAP
  • 📩 Email.js
  • ✅ React Hook Form + Zod

Features

  • 🎥 Hero section with motion-triggered 3D avatar
  • 👨‍💻 About section with interactive 3D model
  • 📁 Projects showcase with Custom animated Slider
  • 🔄 Marquee Animation🚀 and hover shiny✨ animated tech stack
  • 👦 Tailwind smooth animated hover effect for Testimonials
  • 📨 Contact form with validation – no backend needed

Quick Start

# 1. Clone the repo
git clone https://github.com/yourusername/3d-dev-portfolio.git

# 2. Install dependencies
npm install
# or
yarn

# 3. Start the dev server
npm run dev
# or
yarn dev

Snippets (Code to Copy)

📋 CSS 
// Example JavaScript snippet
@import "tailwindcss";

@layer base {
@font-face {
  font-family: "aeonik";
  src: url("/fonts/Aeonik-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: "aeonik";
  src: url("/fonts/Aeonik-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "aeonik";
  src: url("/fonts/Aeonik-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "aeonik";
  src: url("/fonts/Aeonik-Black.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}
}

@theme {
--font-sans: "aeonik";
--color-blue-50: #598eff;
--color-blue-300: #1c34ff;
--color-white-50: #fdfdfd;
--color-black-100: #0b0620;
--color-black-300: #17151f;
--color-pink-100: #ff28d5;
}

html,
body {
width: 100dvw;
overflow-x: hidden;
background-color: #0b0620;
color: #a7a7a7;
scroll-behavior: smooth;
}

section {
width: 100dvw;
min-height: 100dvh;
}

@layer utilities {
.flex-center {
  @apply flex items-center justify-center;
}
}

@layer components {
.gradient-title {
  background: linear-gradient(
    180deg,
    #fdfdfd 43.1%,
    rgba(253, 253, 253, 0) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.gradient-border {
  border-radius: 20px;
  position: relative;
  overflow: hidden;
}
.gradient-border::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1.5px; /* Border width */
  border-radius: 20px;
  background: linear-gradient(
    20deg,
    #fdfdfd 0%,
    rgba(253, 253, 253, 0) 100%
  ); /* Gradient colors */
  -webkit-mask: linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
}
.gradient-box {
  background: rgb(11, 6, 32);
  background: linear-gradient(
    0deg,
    rgba(11, 6, 32, 1) 0%,
    rgba(16, 11, 51, 0.7217480742296919) 23%,
    rgba(16, 11, 51, 0) 100%
  );
}
.gradient-sphere {
  position: absolute;
  width: 700px;
  height: 700px;
  border-radius: 50%;
  filter: blur(200px);
}
.sphere-1 {
  background: radial-gradient(circle, #ff28d5, #ff28d5);
  top: -100px;
  left: 300px;
  animation: wander-left 10s ease-in-out infinite;
}
.sphere-2 {
  background: radial-gradient(circle, #1c34ff, #1c34ff);
  top: 100px;
  right: 300px;
  animation: wander-right 12s ease-in-out infinite;
}
/* tech stack */
.about-gradient-sphere {
  position: absolute;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  filter: blur(200px);
}
.about-sphere-1 {
  background: radial-gradient(circle, #ff28d5, #ff28d5);
  bottom: 300px;
  right: 150px;
  animation: wander-left 10s ease-in-out infinite;
}
.about-sphere-2 {
  background: radial-gradient(circle, #1c34ff, #1c34ff);
  bottom: 100px;
  right: 50px;
}
.tech-stack-gradient-left-box {
  background: rgb(11, 6, 32);
  background: linear-gradient(
    90deg,
    rgba(11, 6, 32, 1) 0%,
    rgba(11, 6, 32, 0.6601234243697479) 53%,
    rgba(16, 11, 51, 0) 100%
  );
}
.tech-stack-gradient-right-box {
  background: rgb(11, 6, 32);
  background: linear-gradient(
    -90deg,
    rgba(11, 6, 32, 1) 0%,
    rgba(11, 6, 32, 0.6601234243697479) 53%,
    rgba(16, 11, 51, 0) 100%
  );
}
/* marquee */
.marquee {
  width: 100dvw;
  overflow: hidden;
  position: relative;
}
.marquee-box {
  display: flex;
  align-items: center;
  width: 200%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  animation: marquee 60s linear infinite;
}
.marquee-item {
  float: left;
}
.marquee-item:after {
  content: "";
  position: absolute;
  top: 100%;
  right: -100%;
  bottom: -100%;
  left: -100%;
  background: linear-gradient(
    to bottom,
    rgba(229, 172, 142, 0),
    rgba(255, 255, 255, 0.5) 50%,
    rgba(229, 172, 142, 0)
  );
}
/*This activates the shine once the button has been hovered*/
.marquee-item:hover::after,
button:focus::after {
  animation: shine 1s forwards;
}
/* projects */
.projects-gradient-sphere {
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  filter: blur(150px);
}
.projects-sphere-1 {
  background: radial-gradient(circle, #ff28d5, #ff28d5);
  top: 300px;
  left: 50px;
}
.projects-sphere-2 {
  background: radial-gradient(circle, #1c34ff, #1c34ff);
  top: 400px;
  left: 150px;
}
/* carousel */
.carousel-gradient-left-box {
  background: rgb(11, 6, 32);
  background: linear-gradient(
    90deg,
    rgba(11, 6, 32, 1) 0%,
    rgba(11, 6, 32, 0) 100%,
    rgba(11, 6, 32, 0) 100%
  );
}

.carousel-gradient-right-box {
  background: rgb(11, 6, 32);
  background: linear-gradient(
    -90deg,
    rgba(11, 6, 32, 1) 0%,
    rgba(11, 6, 32, 0) 100%,
    rgba(11, 6, 32, 0) 100%
  );
}
/* testimonial */
.testimonial-gradient-sphere {
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  filter: blur(150px);
}
.testimonial-sphere-1 {
  background: radial-gradient(circle, #ff28d5, #ff28d5);
  bottom: 300px;
  right: 100px;
}
.testimonial-sphere-2 {
  background: radial-gradient(circle, #1c34ff, #1c34ff);
  bottom: 100px;
  right: 0px;
  animation: wander-right 16s ease-in-out infinite;
}
/* nav-side-bar */
.side-bar-bg {
  border-bottom: 1px solid rgba(255, 255, 255, 0.01);
  background: rgba(23, 21, 31, 0.7);
  backdrop-filter: blur(10px);
}
}

@keyframes wander-left {
0% {
  transform: translateX(0);
}
50% {
  transform: translateX(-20vw) translateY(50vh);
}
100% {
  transform: translateX(0);
}
}

@keyframes wander-right {
0% {
  transform: translateX(0);
}
50% {
  transform: translateX(30vw) translateY(-50vh);
}
100% {
  transform: translateX(0);
}
}
@keyframes rotate {
from {
  transform: rotate(0deg);
}
to {
  transform: rotate(360deg);
}
}

@keyframes shine {
100% {
  transform: rotateZ(60deg) translate(1em, -15em);
}
}

@keyframes marquee {
0% {
  left: 0;
}
100% {
  left: -100%;
}
}

/* tablet */
@media screen and (min-width: 1024px) {
.testimonial-card:nth-of-type(even) {
  transform: translateY(70px);
}
}
💌 Mail 
<div
  style="font-family: system-ui, sans-serif, Arial; font-size: 14px; max-width: 600px; margin: 0 auto; border: 1px solid #e0e0e0; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);"
>
  <!-- Envelope Header -->
  <div
    style="background-color: #f8f9fa; padding: 20px; text-align: center; border-bottom: 1px dashed #cccccc;"
  >
    <div style="font-size: 18px; color: #2c3e50; font-weight: bold;">
      📨 You've Got Mail!
    </div>
    <div style="font-size: 14px; color: #7f8c8d; margin-top: 5px;">
      A message from {{name}} has arrived.
    </div>
  </div>

  <!-- Message Body -->
  <div style="padding: 20px;">
    <div style="display: flex; align-items: flex-start;">
      <!-- Avatar -->
      <div
        style="padding: 10px; margin-right: 15px; background-color: #e3f2fd; border-radius: 50%; font-size: 24px;"
      >
        &#x1F464;
      </div>
      <!-- Sender Details -->
      <div>
        <div style="font-size: 16px; color: #2c3e50; font-weight: bold;">
          {{name}}
        </div>
        <div style="font-size: 12px; color: #95a5a6; margin-bottom: 10px;">
          {{time}}
        </div>
        <div style="font-size: 14px; color: #34495e; line-height: 1.5;">
          {{message}}
        </div>
      </div>
    </div>
  </div>

  <!-- Title & Email Section -->
  <div
    style="background-color: #f8f9fa; padding: 20px; border-top: 1px dashed #cccccc;"
  >
    <div style="font-size: 14px; color: #2c3e50; margin-bottom: 10px;">
      <strong>📌 Title:</strong> {{title}}
    </div>
    <div style="font-size: 14px; color: #2c3e50;">
      <strong>📧 Email:</strong> {{email}}
    </div>
  </div>

  <!-- Footer -->
  <div
    style="background-color: #2c3e50; padding: 15px; text-align: center; color: #ffffff; font-size: 12px;"
  >
    Please respond at your earliest convenience.
  </div>
</div>

Assets

Community

Join the community and connect with other developers!

Top categories

tailwind daisyui resume portfolio email blog dashboard landing-page admin ecommerce
Loading Svelte Themes