midooamine/codecanvas-3d-a-programmer-s-playground
0
1 2@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');3@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&display=swap');4 5* {6 font-family: 'Poppins', sans-serif;7 scroll-behavior: smooth;8}9 10/* Custom Animations */11@keyframes float {12 0%, 100% {13 transform: translateY(0) rotateX(0deg) rotateY(0deg);14 }15 25% {16 transform: translateY(-10px) rotateX(5deg) rotateY(5deg);17 }18 50% {19 transform: translateY(-20px) rotateX(0deg) rotateY(10deg);20 }21 75% {22 transform: translateY(-10px) rotateX(-5deg) rotateY(5deg);23 }24}25 26@keyframes rotate {27 from {28 transform: rotate(0deg) rotateX(0deg) rotateY(0deg);29 }30 to {31 transform: rotate(360deg) rotateX(360deg) rotateY(360deg);32 }33}34 35@keyframes pulse {36 0%, 100% {37 opacity: 1;38 transform: scale(1);39 }40 50% {41 opacity: 0.7;42 transform: scale(1.05);43 }44}45 46@keyframes glow {47 0%, 100% {48 box-shadow: 0 0 20px rgba(139, 92, 246, 0.5);49 }50 50% {51 box-shadow: 0 0 40px rgba(139, 92, 246, 0.8), 0 0 60px rgba(99, 102, 241, 0.6);52 }53}54 55@keyframes typing {56 from {57 width: 0;58 }59 to {60 width: 100%;61 }62}63 64@keyframes blink {65 50% {66 border-color: transparent;67 }68}69 70@keyframes matrix-rain {71 0% {72 transform: translateY(-100vh);73 opacity: 1;74 }75 100% {76 transform: translateY(100vh);77 opacity: 0;78 }79}80 81@keyframes code-particle-float {82 0%, 100% {83 transform: translateY(0) translateX(0) rotate(0deg);84 opacity: 0.7;85 }86 25% {87 transform: translateY(-20px) translateX(10px) rotate(90deg);88 opacity: 1;89 }90 50% {91 transform: translateY(-10px) translateX(-10px) rotate(180deg);92 opacity: 0.8;93 }94 75% {95 transform: translateY(-30px) translateX(5px) rotate(270deg);96 opacity: 0.9;97 }98}99 100@keyframes skill-hover {101 0% {102 transform: translateY(0) rotateX(0deg) rotateY(0deg);103 }104 100% {105 transform: translateY(-10px) rotateX(10deg) rotateY(10deg);106 }107}108/* Enhanced Gradient Text */109.gradient-text {110 background: linear-gradient(90deg, #6366f1, #8b5cf6, #d946ef, #f59e0b);111 -webkit-background-clip: text;112 background-clip: text;113 color: transparent;114 animation: gradient-animation 8s ease infinite, glow 3s ease-in-out infinite;115 background-size: 300% 300%;116 text-shadow: 0 0 30px rgba(139, 92, 246, 0.5);117}118 119@keyframes gradient-animation {120 0% {121 background-position: 0% 50%;122 }123 25% {124 background-position: 100% 50%;125 }126 50% {127 background-position: 100% 100%;128 }129 75% {130 background-position: 0% 100%;131 }132 100% {133 background-position: 0% 50%;134 }135}136/* Buttons */137.btn-primary {138 display: inline-block;139 padding: 0.75rem 1.5rem;140 background: linear-gradient(90deg, #6366f1, #8b5cf6);141 color: white;142 border-radius: 0.5rem;143 font-weight: 500;144 transition: all 0.3s ease;145 box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);146}147 148.btn-primary:hover {149 transform: translateY(-2px);150 box-shadow: 0 6px 12px rgba(99, 102, 241, 0.3);151}152 153.btn-secondary {154 display: inline-block;155 padding: 0.75rem 1.5rem;156 background: transparent;157 color: white;158 border: 2px solid #6366f1;159 border-radius: 0.5rem;160 font-weight: 500;161 transition: all 0.3s ease;162}163 164.btn-secondary:hover {165 background: rgba(99, 102, 241, 0.1);166 transform: translateY(-2px);167}168/* Enhanced Hero 3D Container */169.hero-3d-container {170 position: relative;171 perspective: 1000px;172}173 174.floating-cube {175 position: relative;176 background: rgba(99, 102, 241, 0.1);177 border: 2px solid rgba(139, 92, 246, 0.3);178 border-radius: 1rem;179 transform-style: preserve-3d;180 animation: float 6s ease-in-out infinite, rotate 15s linear infinite, glow 2s ease-in-out infinite;181 box-shadow: 182 0 20px 40px rgba(0, 0, 0, 0.3),183 inset 0 1px 0 rgba(255, 255, 255, 0.1);184 backdrop-filter: blur(10px);185}186 187.floating-cube::before {188 content: '';189 position: absolute;190 top: -2px;191 left: -2px;192 right: -2px;193 bottom: -2px;194 background: linear-gradient(45deg, #6366f1, #8b5cf6, #d946ef, #6366f1);195 background-size: 300% 300%;196 border-radius: inherit;197 z-index: -1;198 animation: gradient-animation 4s ease infinite;199 opacity: 0.7;200}201 202.floating-cube::after {203 content: '</>';204 position: absolute;205 top: 50%;206 left: 50%;207 transform: translate(-50%, -50%);208 font-family: 'Fira Code', monospace;209 font-size: 1.5rem;210 font-weight: 600;211 color: #8b5cf6;212 text-shadow: 0 0 20px rgba(139, 92, 246, 0.8);213}214 215/* Code Particles */216.floating-code-elements {217 position: absolute;218 top: 0;219 left: 0;220 width: 100%;221 height: 100%;222 pointer-events: none;223 z-index: 10;224}225 226.code-particle {227 position: absolute;228 font-family: 'Fira Code', monospace;229 font-size: 1rem;230 font-weight: 600;231 color: rgba(139, 92, 246, 0.6);232 animation: code-particle-float 8s ease-in-out infinite;233}234 235.code-particle:nth-child(1) {236 top: 10%;237 left: 20%;238 animation-delay: 0s;239}240 241.code-particle:nth-child(2) {242 top: 20%;243 right: 15%;244 animation-delay: 1s;245}246 247.code-particle:nth-child(3) {248 top: 60%;249 left: 10%;250 animation-delay: 2s;251}252 253.code-particle:nth-child(4) {254 bottom: 30%;255 right: 20%;256 animation-delay: 3s;257}258 259.code-particle:nth-child(5) {260 bottom: 10%;261 left: 30%;262 animation-delay: 4s;263}264 265.code-particle:nth-child(6) {266 top: 40%;267 left: 60%;268 animation-delay: 5s;269}270 271/* Interactive 3D Scene */272.interactive-3d-scene {273 position: absolute;274 top: 0;275 left: 0;276 width: 100%;277 height: 100%;278 pointer-events: none;279 z-index: -1;280}281/* Enhanced About Section */282.about-3d-container {283 perspective: 1200px;284}285 286.about-image-container {287 position: relative;288 overflow: hidden;289 border-radius: 1rem;290 transform-style: preserve-3d;291 box-shadow: 292 0 20px 40px rgba(0, 0, 0, 0.3),293 0 0 0 1px rgba(139, 92, 246, 0.2);294 animation: float 8s ease-in-out infinite;295}296 297.about-overlay {298 position: absolute;299 top: 0;300 left: 0;301 width: 100%;302 height: 100%;303 background: rgba(99, 102, 241, 0.1);304 backdrop-filter: blur(5px);305 display: flex;306 align-items: center;307 justify-content: center;308 opacity: 0;309 transition: opacity 0.3s ease;310}311 312.about-image-container:hover .about-overlay {313 opacity: 1;314}315 316.floating-image {317 transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);318}319 320.floating-image:hover {321 transform: scale(1.05) rotateY(10deg) rotateX(5deg);322}323 324/* Tech Stack Visualization */325.tech-stack-visualization {326 position: relative;327 width: 200px;328 height: 200px;329}330 331.tech-sphere {332 position: absolute;333 width: 40px;334 height: 40px;335 background: rgba(139, 92, 246, 0.8);336 border-radius: 50%;337 display: flex;338 align-items: center;339 justify-content: center;340 font-size: 0.75rem;341 font-weight: 600;342 color: white;343 animation: float 4s ease-in-out infinite;344 box-shadow: 0 0 20px rgba(139, 92, 246, 0.6);345}346 347.tech-sphere:nth-child(1) {348 top: 20%;349 left: 20%;350 animation-delay: 0s;351}352 353.tech-sphere:nth-child(2) {354 top: 20%;355 right: 20%;356 animation-delay: 0.5s;357}358 359.tech-sphere:nth-child(3) {360 bottom: 20%;361 left: 20%;362 animation-delay: 1s;363}364 365.tech-sphere:nth-child(4) {366 bottom: 20%;367 right: 20%;368 animation-delay: 1.5s;369}370 371/* Code Snippet 3D */372.code-snippet-3d {373 margin: 2rem 0;374 transform-style: preserve-3d;375}376 377.code-window {378 background: rgba(15, 23, 42, 0.9);379 border-radius: 0.75rem;380 overflow: hidden;381 border: 1px solid rgba(139, 92, 246, 0.3);382 box-shadow: 383 0 10px 30px rgba(0, 0, 0, 0.3),384 inset 0 1px 0 rgba(255, 255, 255, 0.1);385 transform: perspective(1000px) rotateX(5deg);386 transition: transform 0.3s ease;387}388 389.code-window:hover {390 transform: perspective(1000px) rotateX(0deg) translateY(-5px);391}392 393.code-header {394 background: rgba(30, 41, 59, 0.8);395 padding: 0.75rem 1rem;396 display: flex;397 align-items: center;398 gap: 1rem;399 border-bottom: 1px solid rgba(139, 92, 246, 0.2);400}401 402.code-dots {403 display: flex;404 gap: 0.5rem;405}406 407.code-dots span {408 width: 12px;409 height: 12px;410 border-radius: 50%;411 background: #ef4444;412}413 414.code-dots span:nth-child(2) {415 background: #f59e0b;416}417 418.code-dots span:nth-child(3) {419 background: #10b981;420}421 422.filename {423 font-family: 'Fira Code', monospace;424 font-size: 0.875rem;425 color: #94a3b8;426}427 428.code-content {429 padding: 1.5rem;430 font-family: 'Fira Code', monospace;431 font-size: 0.875rem;432 line-height: 1.6;433}434 435.code-line {436 margin-bottom: 0.5rem;437}438 439.code-line.indent {440 margin-left: 1.5rem;441}442 443.keyword {444 color: #8b5cf6;445 font-weight: 600;446}447 448.variable {449 color: #06b6d4;450}451 452.property {453 color: #10b981;454}455 456.string {457 color: #f59e0b;458}459 460.array {461 color: #ec4899;462}463 464/* Enhanced Skills Grid */465.skills-grid-3d {466 display: grid;467 grid-template-columns: repeat(2, 1fr);468 gap: 1rem;469 margin-top: 2rem;470 perspective: 800px;471}472 473.skill-item {474 display: flex;475 align-items: center;476 gap: 0.5rem;477 padding: 1rem;478 background: rgba(30, 41, 59, 0.6);479 border-radius: 0.75rem;480 border: 1px solid rgba(139, 92, 246, 0.2);481 transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);482 cursor: pointer;483 position: relative;484 overflow: hidden;485}486 487.skill-item::before {488 content: '';489 position: absolute;490 top: 0;491 left: -100%;492 width: 100%;493 height: 100%;494 background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.1), transparent);495 transition: left 0.5s ease;496}497 498.skill-item:hover::before {499 left: 100%;500}501 502.skill-item:hover {503 background: rgba(99, 102, 241, 0.2);504 transform: translateY(-5px) rotateX(5deg);505 box-shadow: 0 10px 25px rgba(99, 102, 241, 0.3);506 border-color: rgba(139, 92, 246, 0.5);507}508 509.skill-item i {510 width: 24px;511 height: 24px;512 stroke: #8b5cf6;513 transition: all 0.3s ease;514}515 516.skill-item:hover i {517 transform: scale(1.2);518 stroke: #6366f1;519}520 521.skill-item span {522 font-weight: 500;523 transition: color 0.3s ease;524}525 526.skill-item:hover span {527 color: #8b5cf6;528}529/* Enhanced Projects Section */530.projects-3d-scene {531 position: absolute;532 top: 0;533 left: 0;534 width: 100%;535 height: 300px;536 pointer-events: none;537 z-index: -1;538}539 540.project-card-3d {541 background: rgba(30, 41, 59, 0.6);542 border-radius: 1rem;543 overflow: hidden;544 transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);545 transform-style: preserve-3d;546 perspective: 1000px;547 border: 1px solid rgba(139, 92, 246, 0.2);548 position: relative;549}550 551.project-card-3d::before {552 content: '';553 position: absolute;554 top: 0;555 left: 0;556 right: 0;557 bottom: 0;558 background: linear-gradient(45deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.1));559 opacity: 0;560 transition: opacity 0.3s ease;561 z-index: 1;562}563 564.project-card-3d:hover::before {565 opacity: 1;566}567 568.project-card-3d:hover {569 transform: translateY(-15px) rotateX(5deg) scale(1.03);570 box-shadow: 571 0 25px 50px rgba(99, 102, 241, 0.4),572 0 0 0 1px rgba(139, 92, 246, 0.3);573}574 575.project-image {576 height: 200px;577 overflow: hidden;578 position: relative;579}580 581.project-image img {582 width: 100%;583 height: 100%;584 object-fit: cover;585 transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);586}587 588.project-card-3d:hover .project-image img {589 transform: scale(1.15) rotateZ(2deg);590}591 592.project-overlay-3d {593 position: absolute;594 top: 0;595 left: 0;596 width: 100%;597 height: 100%;598 background: rgba(99, 102, 241, 0.1);599 backdrop-filter: blur(5px);600 display: flex;601 align-items: center;602 justify-content: center;603 opacity: 0;604 transition: all 0.3s ease;605}606 607.project-card-3d:hover .project-overlay-3d {608 opacity: 1;609}610 611.project-tech-visualization {612 display: flex;613 gap: 1rem;614}615 616.tech-icon {617 width: 40px;618 height: 40px;619 background: rgba(139, 92, 246, 0.8);620 border-radius: 50%;621 display: flex;622 align-items: center;623 justify-content: center;624 font-weight: 600;625 font-size: 0.75rem;626 color: white;627 animation: pulse 2s ease-in-out infinite;628 box-shadow: 0 0 20px rgba(139, 92, 246, 0.6);629}630 631.project-content {632 padding: 1.5rem;633 position: relative;634 z-index: 2;635}636 637.project-title {638 font-size: 1.25rem;639 font-weight: 600;640 margin-bottom: 0.5rem;641 background: linear-gradient(90deg, #6366f1, #8b5cf6);642 -webkit-background-clip: text;643 background-clip: text;644 color: transparent;645}646 647.project-description {648 color: #94a3b8;649 margin-bottom: 1rem;650 font-size: 0.875rem;651}652 653.project-tags {654 display: flex;655 gap: 0.5rem;656 margin-bottom: 1rem;657 flex-wrap: wrap;658}659 660.project-tags span {661 background: rgba(99, 102, 241, 0.2);662 color: #8b5cf6;663 padding: 0.25rem 0.5rem;664 border-radius: 9999px;665 font-size: 0.75rem;666 border: 1px solid rgba(139, 92, 246, 0.3);667 transition: all 0.3s ease;668}669 670.project-tags span:hover {671 background: rgba(99, 102, 241, 0.3);672 transform: scale(1.05);673}674 675.project-links {676 display: flex;677 gap: 1rem;678}679 680.project-link {681 display: inline-flex;682 align-items: center;683 gap: 0.25rem;684 color: #8b5cf6;685 font-weight: 500;686 font-size: 0.875rem;687 transition: all 0.3s ease;688 padding: 0.5rem 1rem;689 border-radius: 0.5rem;690 border: 1px solid rgba(139, 92, 246, 0.3);691}692 693.project-link:hover {694 color: #6366f1;695 transform: translateX(4px);696 background: rgba(99, 102, 241, 0.1);697 box-shadow: 0 5px 15px rgba(99, 102, 241, 0.2);698}699 700.project-link i {701 width: 16px;702 height: 16px;703}704/* Enhanced Contact Form */705.contact-form {706 background: rgba(30, 41, 59, 0.6);707 padding: 2rem;708 border-radius: 1rem;709 border: 1px solid rgba(139, 92, 246, 0.2);710 backdrop-filter: blur(10px);711 transform-style: preserve-3d;712 transition: transform 0.3s ease;713}714 715.contact-form:hover {716 transform: perspective(1000px) rotateX(2deg);717}718 719.form-input {720 width: 100%;721 padding: 0.75rem 1rem;722 background: rgba(15, 23, 42, 0.7);723 border: 1px solid rgba(255, 255, 255, 0.1);724 border-radius: 0.5rem;725 color: white;726 transition: all 0.3s ease;727 font-family: inherit;728}729 730.form-input:focus {731 outline: none;732 border-color: #8b5cf6;733 box-shadow: 734 0 0 0 3px rgba(139, 92, 246, 0.3),735 0 5px 15px rgba(99, 102, 241, 0.2);736 background: rgba(15, 23, 42, 0.9);737}738 739.form-input::placeholder {740 color: #64748b;741}742 743.social-icon {744 display: inline-flex;745 align-items: center;746 justify-content: center;747 width: 40px;748 height: 40px;749 border-radius: 50%;750 background: rgba(30, 41, 59, 0.6);751 transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);752 border: 1px solid rgba(139, 92, 246, 0.3);753}754 755.social-icon:hover {756 background: linear-gradient(45deg, #6366f1, #8b5cf6);757 transform: translateY(-5px) scale(1.1);758 box-shadow: 0 10px 25px rgba(99, 102, 241, 0.4);759}760 761.social-icon i {762 width: 20px;763 height: 20px;764}765 766/* Enhanced Floating Shapes */767.floating-shapes {768 position: fixed;769 top: 0;770 left: 0;771 width: 100%;772 height: 100%;773 pointer-events: none;774 z-index: -1;775 overflow: hidden;776}777 778.shape-1, .shape-2, .shape-3 {779 position: absolute;780 filter: blur(80px);781 opacity: 0.3;782 animation: float 8s ease-in-out infinite;783}784 785.shape-1 {786 width: 300px;787 height: 300px;788 background: radial-gradient(circle, #6366f1, transparent);789 top: 10%;790 left: 10%;791 animation: float 8s ease-in-out infinite, rotate 20s linear infinite;792}793 794.shape-2 {795 width: 400px;796 height: 400px;797 background: radial-gradient(circle, #8b5cf6, transparent);798 bottom: 10%;799 right: 10%;800 animation: float 10s ease-in-out infinite reverse, rotate 25s linear infinite reverse;801}802 803.shape-3 {804 width: 200px;805 height: 200px;806 background: radial-gradient(circle, #d946ef, transparent);807 top: 50%;808 right: 20%;809 animation: float 12s ease-in-out infinite 2s, rotate 30s linear infinite;810}811 812/* Geometric Elements */813.geometric-elements {814 position: absolute;815 top: 0;816 left: 0;817 width: 100%;818 height: 100%;819}820 821.geometric-shape {822 position: absolute;823 opacity: 0.1;824 animation: float 15s ease-in-out infinite;825}826 827.geometric-shape[data-shape="cube"] {828 width: 60px;829 height: 60px;830 background: linear-gradient(45deg, #6366f1, #8b5cf6);831 top: 20%;832 left: 80%;833 animation-delay: 0s;834}835 836.geometric-shape[data-shape="pyramid"] {837 width: 0;838 height: 0;839 border-left: 30px solid transparent;840 border-right: 30px solid transparent;841 border-bottom: 50px solid #8b5cf6;842 top: 60%;843 left: 10%;844 animation-delay: 3s;845}846 847.geometric-shape[data-shape="torus"] {848 width: 80px;849 height: 80px;850 background: radial-gradient(circle, #d946ef, transparent);851 border-radius: 50%;852 top: 80%;853 left: 70%;854 animation-delay: 6s;855}856 857/* Matrix Rain Effect */858.matrix-rain {859 position: fixed;860 top: 0;861 left: 0;862 width: 100%;863 height: 100%;864 pointer-events: none;865 z-index: -2;866 opacity: 0.1;867}868 869.matrix-column {870 position: absolute;871 top: -100px;872 font-family: 'Fira Code', monospace;873 font-size: 14px;874 color: #8b5cf6;875 animation: matrix-rain 10s linear infinite;876}877 878.matrix-char {879 display: block;880 opacity: 0;881 animation: matrix-char-appear 0.5s ease-in-out infinite alternate;882}883 884@keyframes matrix-char-appear {885 0% {886 opacity: 0;887 }888 100% {889 opacity: 1;890 }891}892/* Enhanced Responsive Design */893@media (max-width: 768px) {894 .skills-grid-3d {895 grid-template-columns: 1fr;896 }897 898 .contact-form {899 padding: 1.5rem;900 }901 902 .floating-cube {903 width: 200px;904 height: 200px;905 }906 907 .hero-3d-container {908 margin-bottom: 2rem;909 }910 911 .projects-3d-scene {912 height: 200px;913 }914 915 .geometric-elements {916 display: none;917 }918 919 .code-particle {920 font-size: 0.75rem;921 }922 923 .floating-code-elements {924 display: none;925 }926}927 928/* Smooth scrolling enhancement */929html {930 scroll-behavior: smooth;931}932 933/* Loading animation */934@keyframes loading-pulse {935 0%, 100% {936 opacity: 1;937 }938 50% {939 opacity: 0.5;940 }941}942 943.loading {944 animation: loading-pulse 1.5s ease-in-out infinite;945}946 947/* Custom scrollbar */948::-webkit-scrollbar {949 width: 8px;950}951 952::-webkit-scrollbar-track {953 background: rgba(15, 23, 42, 0.8);954}955 956::-webkit-scrollbar-thumb {957 background: linear-gradient(180deg, #6366f1, #8b5cf6);958 border-radius: 4px;959}960 961::-webkit-scrollbar-thumb:hover {962 background: linear-gradient(180deg, #8b5cf6, #d946ef);963}964 965/* Performance optimizations */966* {967 will-change: auto;968}969 970.floating-cube,971.project-card-3d,972.skill-item,973.about-image-container {974 will-change: transform;975}976