3D Interactive Portfolio Book | HTML, CSS & JavaScript

<div class="page cover">
        <div class="front">
            <h1>PORTFOLIO</h1>
            <p>Interactive Designer</p>
        </div>
        <div class="back"></div>
    </div>

<div class="page">
        <div class="front">
            <h2>Hello! 👋</h2>
            <p>I'm a UI/UX designer and Front-end developer specializing in modern, interactive user experiences that drive engagement.</p>
            <a href="#" class="btn">Download Resume</a>
        </div>
        <div class="back"></div>
    </div>

<div class="page">
        <div class="front">
            <h3>Technical Skills</h3>
            <div class="skill-box">
                <span class="title">HTML & CSS</span>
                <div class="skill-bar"><div class="skill-per" style="width: 95%;"></div></div>
            </div>
            <div class="skill-box">
                <span class="title">JavaScript & React</span>
                <div class="skill-bar"><div class="skill-per" style="width: 80%;"></div></div>
            </div>
            <div class="skill-box">
                <span class="title">UI/UX Design (Figma)</span>
                <div class="skill-bar"><div class="skill-per" style="width: 90%;"></div></div>
            </div>
            <div class="skill-box">
                <span class="title">3D Animation</span>
                <div class="skill-bar"><div class="skill-per" style="width: 65%;"></div></div>
            </div>
        </div>
        <div class="back"></div>
    </div>

<div class="page">
        <div class="front">
            <h3>What I Do</h3>
            <div class="service-card">
                <h4>Web Development</h4>
                <p>Building responsive, fast, and accessible websites using modern frameworks.</p>
            </div>
            <div class="service-card">
                <h4>Interface Design</h4>
                <p>Crafting intuitive layouts and visually stunning interfaces for web and mobile.</p>
            </div>
        </div>
        <div class="back"></div>
    </div>

<div class="page">
        <div class="front">
            <h3>Get In Touch</h3>
            <form class="contact-form" onsubmit="event.preventDefault();">
                <input type="text" placeholder="Your Name" required>
                <input type="email" placeholder="Your Email" required>
                <input placeholder="Your Message..." required>
                <button type="submit">Send Message</button>
            </form>
        </div>
        <div class="back"></div>
    </div>

</div>

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');

/*========================
  BASE STYLES
=========================*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #0f172a;
    overflow: hidden;
    perspective: 2500px;
}

/*========================
  BOOK CONTAINER
=========================*/
.book {
    position: relative;
    width: 700px;
    height: 500px; /* Slightly taller for more UI room */
    transform-style: preserve-3d;
    transition: transform 1s;
}

.book:hover {
    transform: rotateX(2deg) rotateY(-2deg) translateY(-5px);
}

/*========================
  STATIC BACK COVERS & SPINE
=========================*/
.back-cover {
    position: absolute;
    top: 0;
    width: 350px;
    height: 500px;
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    transform: translateZ(-2px);
}

.back-cover.left { left: 0; border-radius: 12px 0 0 12px; }
.back-cover.right { left: 350px; border-radius: 0 12px 12px 0; }

.spine {
    position: absolute;
    left: 343px;
    width: 14px;
    height: 500px;
    background: #3730a3;
    transform: rotateY(90deg) translateZ(-2px);
}

/*========================
  FLIPPABLE PAGES
=========================*/
.page {
    position: absolute;
    left: 350px;
    top: 0;
    width: 350px;
    height: 500px;
    transform-origin: left center;
    transition: transform 0.8s cubic-bezier(0.645, 0.045, 0.355, 1);
    transform-style: preserve-3d;
    cursor: pointer;
}

.page.flipped { transform: rotateY(-180deg); }

/* Front and Back of each paper */

.front, .back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 0 12px 12px 0;
    padding: 40px 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: inset 4px 0 10px rgba(0,0,0,0.02); 
}

.back {
    transform: rotateY(180deg);
    border-radius: 12px 0 0 12px;
    background: #f8fafc; 
    border-right: 1px solid #e2e8f0;
    box-shadow: inset -4px 0 10px rgba(0,0,0,0.02);
}

.page .front { background: #ffffff; border-left: 1px solid #e2e8f0; }
.page:nth-child(even) .front { background: #f8fafc; }

/*========================
  COVER STYLES
=========================*/
.cover .front {
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    align-items: center;
    color: #fff;
    border-left: none;
}

.cover .front::before {
    content: "";
    position: absolute;
    inset: 15px;
    border: 2px dashed rgba(255, 255, 255, 0.4);
    border-radius: 8px;
}

.cover h1 { font-size: 46px; font-weight: 700; color: #7c3aed; letter-spacing: 2px; margin-bottom: 5px; z-index: 1;}
.cover p { font-size: 18px; font-weight: 300; opacity: 0.9; z-index: 1;}

/*========================
  TYPOGRAPHY & BUTTONS
=========================*/
h2 { font-size: 32px; margin-bottom: 15px; color: #4f46e5; font-weight: 700; }
h3 { font-size: 24px; margin-bottom: 20px; color: #1e293b; font-weight: 600; border-bottom: 2px solid #e2e8f0; padding-bottom: 5px;}
p { line-height: 1.6; color: #475569; margin-bottom: 20px; font-size: 14px; }

.btn {
    display: inline-block;
    padding: 12px 24px;
    background: #4f46e5;
    color: white;
    text-decoration: none;
    border-radius: 8px;
    transition: 0.3s ease;
    font-weight: 600;
    font-size: 14px;
    box-shadow: 0 4px 15px rgba(79, 70, 229, 0.3);
}

.btn:hover { background: #3730a3; transform: translateY(-3px); box-shadow: 0 6px 20px rgba(79, 70, 229, 0.4); }

/*========================
  INTERACTIVE UI: SKILLS
=========================*/
.skill-box { margin-bottom: 15px; }
.skill-box .title { display: block; font-size: 13px; font-weight: 600; color: #334155; margin-bottom: 5px; }
.skill-bar { width: 100%; height: 8px; background: #e2e8f0; border-radius: 10px; overflow: hidden; }
.skill-per { height: 100%; background: linear-gradient(90deg, #4f46e5, #ec4899); border-radius: 10px; transition: 1s ease-in-out; }

/*========================
  INTERACTIVE UI: CARDS
=========================*/
.service-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 15px;
    transition: 0.3s;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}
.service-card:hover { transform: translateX(5px); border-color: #4f46e5; box-shadow: 0 5px 15px rgba(79, 70, 229, 0.1); }
.service-card h4 { font-size: 15px; color: #4f46e5; margin-bottom: 5px;}
.service-card p { margin-bottom: 0; font-size: 12px; }

/*========================
  INTERACTIVE UI: FORM
=========================*/
.contact-form { display: flex; flex-direction: column; gap: 12px; }
.contact-form input, .contact-form textarea {
    width: 100%;
    padding: 10px 15px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 13px;
    outline: none;
    transition: 0.3s;
    background: #f8fafc;
}
.contact-form textarea { resize: none; height: 80px; }
.contact-form input:focus, .contact-form textarea:focus { border-color: #4f46e5; background: #ffffff; box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1); }
.contact-form button {
    padding: 10px; border: none; background: #4f46e5; color: #fff;
    border-radius: 6px; font-weight: 600; cursor: pointer; transition: 0.3s;
}
.contact-form button:hover { background: #3730a3; }

/*========================
  RESPONSIVE
=========================*/
@media(max-width: 850px){ .book { transform: scale(0.65); } .book:hover { transform: scale(0.65) translateY(-5px); } }

- 3D Interactive Portfolio Book

Live Preview