Portfolio Website With 3D Effect

index.html

    <main>
        <aside>
            <ul class="Links">
                <li onclick="Navigate(0)" class="activeLink"><i class="fa-solid fa-house"></i>
                    <p>Home</p>
                </li>
                <li onclick="Navigate(1)"><i class="fa-solid fa-user" ></i>
                    <p>About Me</p>
                </li>
                <li onclick="Navigate(2)"><i class="fa-solid fa-list"></i>
                    <p>Services</p>
                </li>
                <li onclick="Navigate(3)"><i class="fa-solid fa-images"></i>
                    <p>Gallery</p>
                </li>
                <li onclick="Navigate(4)"><i class="fa-solid fa-comments"></i>
                    <p>Contact Me</p>
                </li>
            </ul>
        </aside>
        <div class="swiper mySwiper">
            <div class="SlideContainer swiper-wrapper">
                <div class="swiper-slide home-slide">
                    <div class="HomeContent">
                        <h1>Hi! I'm <span class="stylized-name">Muzammal</span>,</h1>
                        <h2>A <span class="proffesions">Web Developer</span></h2>
                        <p class="heroline">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad officia iste
                            tenetur dolor quis officiis quidem sapiente illo nostrum mollitia.</p>
                        <div class="buttonGroup"><button>Hire Me</button><button>Contact Me</button></div>
                    </div>
                    <div class="SideImg">
                        <div class="top-right-corner">
                            <hr class="hr1">
                            <hr class="hr2">
                        </div>
                        <img src="https://picsum.photos/id/237/200/200" alt="">
                        <div class="bottom-left-corner">
                            <hr class="hr1">
                            <hr class="hr2">
                        </div>
                    </div>
                    <p class="slide-help">Scroll for next slide <i class="fa-solid fa-chevron-right fa-shake"></i>
                    </p>
                </div>
                <div class="swiper-slide">
                    <div class="about-us">
                    <h1 class="heading">About Me</h1>
                    <h3 class="sub-heading">I'm Muzammal, <span class="proffesions">A Web Developer</span></h3>
                    <p class="aboutme-deatils">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit iure, iste debitis unde maiores earum, ipsam quaerat quo magni sunt nisi at ullam nostrum pariatur soluta mollitia omnis consectetur qui similique doloribus vitae sit est in modi. Officia libero, animi repellendus debitis labore ipsa exercitationem ut ex. Natus ullam officiis qui fuga optio incidunt, ipsum atque ducimus quas ad eveniet nulla sit consectetur velit inventore possimus quae provident, repudiandae eaque sed quos mollitia omnis error. Hic animi porro asperiores ratione voluptatibus commodi, architecto officia nobis ducimus sint, placeat enim? Ab obcaecati ad provident et possimus. Ullam ipsa laborum sint autem!
                    </p>
                    <div class="about-me-divison">
                        <div class="about-me-table">
                            <li><span>Experience:</span> 5+ years</li>
                            <li><span>Country:</span> Pakistan</li>
                            <li><span>Avability:</span> 24/7 </li>
                            <li><span>Satisfied Clients:</span>200+</li>
                            <li><span>Age</span>:20</li>
                            <li><span>Phone</span>:123-456-7890</li>
                            <li><span>Language Used:</span>HTML</li>
                            <li><span>Degree</span>:CS</li>
                            <div class="buttonGroup"><button>Hire Me</button><button>Contact Me</button></div>
                        </div>

                        <div class="skill-bar">
                            <li>
                                <p>HTML</p>
                                <div class="bar">
                                    <div class="active-bar" style="width:99%"></div>
                                </div>
                            </li>
                            <li>
                                <p>CSS</p>
                                <div class="bar">
                                    <div class="active-bar" style="width:80%"></div>
                                </div>
                            </li>
                            <li>
                                <p>JavaScript</p>
                                <div class="bar">
                                    <div class="active-bar" style="width:85%"></div>
                                </div>
                            </li>
                            <li>
                                <p>Python</p>
                                <div class="bar">
                                    <div class="active-bar" style="width:50%"></div>
                                </div>
                            </li>
                            <li>
                                <p>Django</p>
                                <div class="bar">
                                    <div class="active-bar" style="width:60%"></div>
                                </div>
                            </li>
                        </div>
                    </div>
                </div></div>
                <div class="swiper-slide services">

                    <h1 class="heading">Services</h1>
                    <div class="service">
                        <div class="service-icon"><i class="fa-solid fa-pen-ruler"></i></div>
                        <h2>Web Design</h2>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Id, quod.</p>
                    </div>
                    <div class="service">
                        <div class="service-icon"><i class="fa-solid fa-globe"></i></div>
                        <h2>Web Development</h2>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Id, quod.</p>
                    </div>
                    <div class="service">
                        <div class="service-icon"><i class="fa-solid fa-magnifying-glass"></i></div>
                        <h2>SEO</h2>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Id, quod.</p>
                    </div>
                    <div class="service">
                        <div class="service-icon"><i class="fa-solid fa-image"></i></div>
                        <h2>Graphic Designer</h2>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Id, quod.</p>
                    </div>
                    <div class="service">
                        <div class="service-icon"><i class="fa-solid fa-mobile-screen-button"></i></div>
                        <h2>Software Developer</h2>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Id, quod.</p>
                    </div>
                    <div class="service">
                        <div class="service-icon"><i class="fa-solid fa-database"></i></div>
                        <h2>Database Admin</h2>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Id, quod.</p>
                    </div>
                </div>
                <div class="swiper-slide gallery">
                    <h1 class="heading">Gallery</h1>
                    <div class="project"><img src="https://picsum.photos/200/300?random=1" alt=""></div>
                    <div class="project"><img src="https://picsum.photos/200/300?random=2" alt=""></div>
                    <div class="project"><img src="https://picsum.photos/200/300?random=3" alt=""></div>
                    <div class="project"><img src="https://picsum.photos/200/300?random=4" alt=""></div>
                    <div class="project"><img src="https://picsum.photos/200/300?random=5" alt=""></div>
                    <div class="project"><img src="https://picsum.photos/200/300?random=6" alt=""></div>
                </div>
                <div class="swiper-slide contactMe">
                    <h1 class="heading">Contact Me</h1>
                    <div class="contactinfo"><i class="fa-solid fa-phone"></i>
                        <h3>Mobile No</h3>
                        <p>123-456-7890</p>
                    </div>
                    <div class="contactinfo"><i class="fa-solid fa-location-dot"></i>
                        <h3>Location</h3>
                        <p>Somewhere On Earth</p>
                    </div>
                    <div class="contactinfo"><i class="fa-regular fa-envelope"></i>
                        <h3>Email</h3>
                        <p>[email protected]</p>
                    </div>
                    <div class="contactinfo"><i class="fa-solid fa-globe"></i>
                        <h3>Website</h3>
                        <p>www.abc123.com</p>
                    </div>
                    <form>
                        <h2>Send Me A Message <div class="SocialLinks">
                                <i class="fa-brands fa-codepen"></i>
                                <i class="fa-brands fa-instagram"></i>
                                <i class="fa-brands fa-twitter"></i>
                                <i class="fa-brands fa-twitter"></i>
                                <i class="fa-brands fa-facebook"></i>
                            </div>
                        </h2>
                        <input type="text" placeholder="Name">
                        <input type="text" placeholder="email">
                        <textarea rows="10" placeholder="Type your Message Here..."></textarea>
                        <button class="primary">Send</button>

                    </form>
                    <footer>
                        <li>Copyright © 2023 Muzammal.</li>
                    </footer>
                </div>
            </div>
    </main>

portfolio-website-with-3d-effect.markdown

Portfolio Website With 3D Effect

Codepen can you please provide feedback and ratings for my CodePen project? It would be incredibly helpful to me.

A Pen by Asal Etaati on CodePen.

License.

script.js

var swiper = new Swiper(".swiper", {
    effect: "cube",
    allowTouchMove: false,
    grabCursor: false,
    cubeEffect: {
        shadow: true,
        slideShadows: true,
        shadowOffset: 20,
        shadowScale: 0.94,
    },
    mousewheel: true
});
swiper.on('slideChange', function () {
    for (let i of document.querySelectorAll(".Links li")) i.classList.remove("activeLink")
    Array.from(document.querySelectorAll(".Links li"))[swiper.activeIndex].classList.add("activeLink")

});
function Navigate(indx) {
    for (let i of document.querySelectorAll(".Links li")) i.classList.remove("activeLink")
    Array.from(document.querySelectorAll(".Links li"))[indx].classList.add("activeLink")
    swiper.slideTo(indx, 1000, true)
}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.min.js"></script>

style.css

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bonbon&display=swap');

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    height: 100vh;
}

main {
    display: flex;
    height: 100%;
    width: 100%;
    font-family: Poppins;
}

aside {
    width: 280px;
    display: flex;
    flex-direction: column;
    height: 100%;
    font-size: 1.1rem;
    background-color: #212529;
    backdrop-filter: blur(20px);
}

.Links {
    display: flex;
    flex-direction: column;
    margin: auto;
}

aside li {
    list-style-type: none;
    display: flex;
    padding: 20px;
    gap: 10px;
    color: white;
    align-items: center;
    cursor: pointer;
    position: relative;
    transition-duration: 0.2s;
}

aside li:hover {
    color: #80ed99;
}

aside li::after {
    position: absolute;
    width: 100%;
    left: 0px;
    height: 1px;
    background: linear-gradient(to left, transparent, #ffffff24, transparent);
    content: '';
    bottom: 0px;
}

aside li i {
    font-size: 1.3rem;
}
.activeLink{
    color:#80ed99
}
.mySwiper {

    flex: 1;
    height: 100%;
}

.home-slide {
    color: white;
    display: flex;
    background-color: #343a40;
}

.HomeContent {
    margin: auto 0px;
    flex: 1;
    height: auto;
    
    padding: 100px;
    user-select: none;
}

.SideImg {
    width: 30%;


    margin: auto 10px;
    margin-right: 100px;
    position: relative;
}

.SideImg img {
    width: 100%;
    border-radius: 10px;
}

.SideImg .top-right-corner,
.bottom-left-corner {
    position: absolute;
}

.bottom-left-corner {
    left: -50px;
    bottom: -50px;
    rotate: -90deg;
}

.top-right-corner {
    right: -50px;
    top: -50px;
    rotate: 90deg;
}

.hr1 {
    width: 150px;
    height: 10px;
    border: none;
    background: #80ed99;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}

.hr2 {
    width: 10px;
    height: 120px;
    border-bottom-left-radius: 3px;

    background: #80ed99;
    border: none;
    border-bottom-right-radius: 3px;
}

.HomeContent h1 {
    font-size: 3em;
    font-weight: 700;
    margin-bottom: 10px;
}

.HomeContent h2 {
    font-size: 2.3em;
    margin-bottom: 10px;
    font-weight: 600;

}

.HomeContent h1 .stylized-name {
    font-weight: 700;
    color: #80ed99;
}

.proffesions {
    color: #85f69f;
}

.HomeContent .heroline {
    font-size: 1.5rem;
    font-weight: 300;
    padding-right:50px;
}

.buttonGroup {
    display: flex;
    padding: 10px 0px;
    margin-top: 10px;
}

.buttonGroup button ,.primary{
    padding: 10px 20px;
    border: none;
    outline: none;
    font-size: 1.2rem;
    font-weight: 500;
    margin: 5px;
    cursor: pointer;
    background-color: #1d8637;
    color: white;
    border-radius: 5px;
}

.slide-help {
    position: absolute;
    bottom: 10px;
    width: 100%;
    text-align: center;
    font-weight: 400;
    z-index: 100;
    left: 0%;
    width: 100%;
    box-sizing: border-box;
    font-size: 1.2rem;
}



.mySwiper {
    width: 80vw;
    height: 100vh;
    overflow: hidden;
    background-color: #343a40;
}

.swiper-slide {
    width: 100%;

    background-color: #343a40;
    height: 100%;
}

.about-us {
    width:100%;
    height:100%;

    padding: 100px;
    color: white;
}

.heading {
    padding: 20px 10px;
    font-size: 2.5rem;
    color: #80ed99;
}

.about-us h3 {
    padding: 10px;

}

.aboutme-deatils {
    padding: 20px;
    font-weight: 300;
}

.about-me-divison {
    display: flex;
}

.about-me-table {
    width: 60%;
    display: grid;
    grid-template-columns: repeat(2, 50%);
}

.about-me-table li {
    padding: 20px;
    position: relative;
}

.about-me-table li::after {
    position: absolute;
    width: 100%;
    left: 0px;
    height: 1px;
    background: linear-gradient(to left, transparent, #ffffff77, transparent);
    content: '';
    bottom: 0px;
}

.about-me-table span {
    color: #80ed99;
    font-weight: bold;
    margin-right: 5px;
}

.about-me-table .buttonGroup {
    grid-column: 1/span 2;
    justify-content: center;
    padding: 50px;
    flex: 1;
}

.skill-bar {
    width: calc(40% - 20px);
}

.skill-bar li {
    width: 100%;
    padding: 10px;
}

.skill-bar p {
    color: #80ed99;
    font-weight: bold;
    margin: 10px;
}

.skill-bar .bar {
    width: 100%;
    height: 15px;
    background-color: #272c30;
    border-radius: 20px;

}

.active-bar {
    background-color: #80ed99;
    height: 100%;
    width: auto;
    border-radius: 20px;
}

.services {
    color: white;
    display: grid;
    grid-template-columns: repeat(3, calc(34% - 10px));
    grid-template-rows: 100px calc(50% - 50px) calc(50% - 50px);
    padding: 100px ;
    box-sizing: border-box;
}

.services .heading {
    grid-column: 1/span 3;
}

.services .service {
    display: flex;
    text-align: center;
    justify-content: center;
    padding: 15px;
    background-color: rgba(0, 0, 0, 0.437);
    border-radius: 5px;
    margin: 20px;
    backdrop-filter: blur(10px);
    flex-direction: column;

    transition-duration: 0.25s;
}

.services .service i {
    font-size: 3rem;
    color:#80ed99
}

.services .service .service-icon {
    padding: 0px 50px;
    border-radius: 5px;
    margin: 20px auto;
}
.service h2{
    color:#80ed99
}
.service:hover {
    background-color: #80ed99;
    color: #176d2d
}
.service:hover h2,.service:hover i{
    color: #176d2d
}

.gallery {
    display: grid;
    grid-template-columns: repeat(3, 33%);
    padding:100px;
    grid-template-rows: 100px calc(50% - 50px) calc(50% - 50px);
}

.gallery h1,
.gallery h2 {
    grid-column: 1/span 3;
}

.gallery h2 {
    color: white;
    font-weight: 600;
    font-size: 1.5rem;
    padding: 20px 10px;
}

.gallery .project {
    margin: 25px 20px;
    margin-top: 0px;
    background: #212529;
    padding: 5px;
    border-radius: 20px;
}

.gallery .project img {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    object-fit: cover;
    border:none;
}

.contactMe {
    display: grid;
    grid-template-columns: 20% 80%;
    grid-template-rows: 80px calc(25% - 20px) calc(25% - 20px) calc(25% - 20px) calc(25% - 20px);
    position: relative;
    padding:100px;
}

.contactMe h1 {
    grid-column: 1/span 3;
    font-size:2.5rem;
    padding:30px;
}

.contactMe form {
    grid-area: 2/2/ span 5/span 2;
}

.contactinfo {
    display: flex;
    flex-direction: column;
    padding: 10px;
    color: white;
    justify-content: center;
    text-align: center;
    align-items: center;
}

.contactinfo i {
    padding: 10px;
    font-size: 2.5rem;
    color: #80ed99;
    margin: 20px auto;
}

.contactinfo h3 {
    color: #80ed99;
}

.contactMe form {
    display: grid;
    grid-template-columns: 50% 50%;
    width: 100%;
    padding: 20px;
    height: fit-content;
    color: white;
}

.contactMe form h2 {
    grid-column: 1/span 2;
    padding: 20px;
    display: flex;
}

.contactMe form input {
    padding: 15px;
    border-radius: 10px;
    margin: 20px;
    font-size: 1.1rem;
    border: none;
    color: white;
    background-color: #212529;

}

.contactMe form input:focus {
    border: 1px solid #85f69f;
    outline: none;

}

.contactMe form textarea {
    width: calc(100% - 40px);

    grid-column: 1/span 2;
    margin: 20px;
    padding: 20px;
    font-size: 1.1rem;
    border-radius: 10px;
    resize: none;
    border:none;
    border: none;
    color:white;
    background-color: #212529;
}

.contactMe form textarea:focus {
    border: 1px solid #85f69f !important;
}
.contactMe button{
    grid-column: 1/span 2;
    margin:20px auto ;

}
footer{
    position:absolute;
    bottom:0px;
    right:0px;
    text-align: center;
    color:white;
    width:100%;
    font-weight: 200;
    font-size: 0.8rem;
}
footer li{
    padding:10px;
}
form h2 .SocialLinks{
    padding:5px;
    width:fit-content;
    margin-left:auto;
    margin-right:10px;
    background-color: #212529;
    border-radius: 30px;
}
form h2 .SocialLinks i{
    padding:10px;
    border-radius: 50%;
    transition-duration: 0.25s;
}
form h2 .SocialLinks i:hover{
    background-color: #176d2d;
}
.about-us{
    overflow: auto;
}

styles

<link href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" rel="stylesheet" />