HTMLCSSJavaScript
Book Portfolio Website
A unique and visually engaging portfolio website inspired by a digital book interface, built using HTML, CSS, and JavaScript. The project features realistic page flip animations, smooth transitions, responsive layouts, and modern interactive effects that create an immersive reading experience. Advanced CSS animations and JavaScript interactions enhance navigation and user engagement, making this project ideal for creative portfolios, personal branding, and innovative web design inspiration.
Source Code
index.html
<!DOCTYPE html>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><html color:#fbbf24">langcolor:#94a3b8">="en">
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><head>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><meta color:#fbbf24">charsetcolor:#94a3b8">="UTF-8" />
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><meta color:#fbbf24">namecolor:#94a3b8">="viewport" color:#fbbf24">contentcolor:#94a3b8">="width=device-width, "color:#fbbf24">initial-scale"color:#94a3b8">=1.0" />
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><title>3D-Portfolio Book | EduCrushcolor:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></title>
<!-- BoxIcon -->
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><link
color:#fbbf24">hrefcolor:#94a3b8">="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css"
color:#fbbf24">relcolor:#94a3b8">="stylesheet"
/>
<!-- style -->
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><link color:#fbbf24">relcolor:#94a3b8">="stylesheet" color:#fbbf24">hrefcolor:#94a3b8">="style.css" />
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></head>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><body>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><div color:#fbbf24">classcolor:#94a3b8">="wrapper">
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><div color:#fbbf24">classcolor:#94a3b8">="cover cover-left">color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></div>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><div color:#fbbf24">classcolor:#94a3b8">="cover cover-right">color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></div>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><div color:#fbbf24">classcolor:#94a3b8">="book">
<!-- profile page -->
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><div color:#fbbf24">classcolor:#94a3b8">="book-page page-left">
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><div color:#fbbf24">classcolor:#94a3b8">="profile-page">
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><img color:#fbbf24">srccolor:#94a3b8">="./Logo.png" color:#fbbf24">altcolor:#94a3b8">="" />
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><h1>Prince Singhcolor:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></h1>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><h3>Web Developer | AI Engineer
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></h3>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><div color:#fbbf24">classcolor:#94a3b8">="social-media">
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><a color:#fbbf24">hrefcolor:#94a3b8">="#">color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><i color:#fbbf24">classcolor:#94a3b8">="bx bxl-facebook">color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></i>color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></a>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><a color:#fbbf24">hrefcolor:#94a3b8">="#">color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><i color:#fbbf24">classcolor:#94a3b8">="bx bxl-twitter">color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></i>color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></a>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><a color:#fbbf24">hrefcolor:#94a3b8">="#">color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><i color:#fbbf24">classcolor:#94a3b8">="bx bxl-instagram">color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></i>color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></a>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><a color:#fbbf24">hrefcolor:#94a3b8">="#">color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><i color:#fbbf24">classcolor:#94a3b8">="bx bxl-linkedin-square">color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></i>color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></a>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></div>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><p>
Hi, I'm a web Developer. Lorem ipsum dolor sit amet
consectetur adipisicing elit. Neque commodi numquam dolor a
deserunt incidunt esse molestias voluptatum porro ullam.
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></p>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><div color:#fbbf24">classcolor:#94a3b8">="btn-box">
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><a color:#fbbf24">hrefcolor:#94a3b8">="#" color:#fbbf24">classcolor:#94a3b8">="btn">Download CVcolor:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></a>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><a color:#fbbf24">hrefcolor:#94a3b8">="#" color:#fbbf24">classcolor:#94a3b8">="btn contact-me">Contact Me!color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></a>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></div>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></div>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></div>
<!-- page 1 & 2 -->
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><div color:#fbbf24">classcolor:#94a3b8">="book-page page-right turn" color:#fbbf24">idcolor:#94a3b8">="turn-1">
<!-- page 1 (work experience) -->
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><div color:#fbbf24">classcolor:#94a3b8">="page-front">
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><h1 color:#fbbf24">classcolor:#94a3b8">="title">Work Experiencecolor:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></h1>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><div color:#fbbf24">classcolor:#94a3b8">="workeduc-box">
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><div color:#fbbf24">classcolor:#94a3b8">="workeduc-content">
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><span color:#fbbf24">classcolor:#94a3b8">="year"
>color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><i color:#fbbf24">classcolor:#94a3b8">="bx bxs-calendar">color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></i>2024 - 2025color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></span
>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><h3>Web Developer - AI Engineercolor:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></h3>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Molestiae minus eius nemo. Optio cupiditate nostrum commodi
repellendus nemo quod in?
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></p>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></div>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><div color:#fbbf24">classcolor:#94a3b8">="workeduc-content">
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><span color:#fbbf24">classcolor:#94a3b8">="year"
>color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><i color:#fbbf24">classcolor:#94a3b8">="bx bxs-calendar">color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></i>2025 - 2026color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></span
>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><h3>Web Designer - AI Engineercolor:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></h3>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Molestiae minus eius nemo. Optio cupiditate nostrum commodi
repellendus nemo quod in?
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></p>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></div>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><div color:#fbbf24">classcolor:#94a3b8">="workeduc-content">
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><span color:#fbbf24">classcolor:#94a3b8">="year"
>color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><i color:#fbbf24">classcolor:#94a3b8">="bx bxs-calendar">color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></i>upcomingcolor:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></span
>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><h3>Graphic Designer - AI Engineercolor:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></h3>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Molestiae minus eius nemo. Optio cupiditate nostrum commodi
repellendus nemo quod in?
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></p>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></div>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></div>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><span color:#fbbf24">classcolor:#94a3b8">="number-page">1color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></span>
<!-- next button -->
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><span color:#fbbf24">classcolor:#94a3b8">="nextprev-btn" color:#fbbf24">data-pagecolor:#94a3b8">="turn-1">
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><i color:#fbbf24">classcolor:#94a3b8">="bx bx-chevron-right">color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></i>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></span>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></div>
<!-- page 2 (education) -->
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><div color:#fbbf24">classcolor:#94a3b8">="page-back">
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><h1 color:#fbbf24">classcolor:#94a3b8">="title">Educationcolor:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></h1>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><div color:#fbbf24">classcolor:#94a3b8">="workeduc-box">
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><div color:#fbbf24">classcolor:#94a3b8">="workeduc-content">
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><span color:#fbbf24">classcolor:#94a3b8">="year"
>color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><i color:#fbbf24">classcolor:#94a3b8">="bx bxs-calendar">color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></i>2024 - 2028color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></span
>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><h3>Collegecolor:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></h3>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Molestiae minus eius nemo. Optio cupiditate nostrum commodi
repellendus nemo quod in?
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></p>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></div>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><div color:#fbbf24">classcolor:#94a3b8">="workeduc-content">
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><span color:#fbbf24">classcolor:#94a3b8">="year"
>color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><i color:#fbbf24">classcolor:#94a3b8">="bx bxs-calendar">color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></i>2022 - 2024color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></span
>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><h3>Intermediatecolor:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></h3>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Molestiae minus eius nemo. Optio cupiditate nostrum commodi
repellendus nemo quod in?
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></p>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></div>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><div color:#fbbf24">classcolor:#94a3b8">="workeduc-content">
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><span color:#fbbf24">classcolor:#94a3b8">="year"
>color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><i color:#fbbf24">classcolor:#94a3b8">="bx bxs-calendar">color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></i>2024 - 2028color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></span
>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><h3>Btech (AI & ML)color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></h3>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Molestiae minus eius nemo. Optio cupiditate nostrum commodi
repellendus nemo quod in?
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></p>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></div>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></div>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><span color:#fbbf24">classcolor:#94a3b8">="number-page">2color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></span>
<!-- prev button -->
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><span color:#fbbf24">classcolor:#94a3b8">="nextprev-btn back" color:#fbbf24">data-pagecolor:#94a3b8">="turn-1">
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><i color:#fbbf24">classcolor:#94a3b8">="bx bx-chevron-left">color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></i>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></span>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></div>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></div>
<!-- page 3 & 4 -->
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><div color:#fbbf24">classcolor:#94a3b8">="book-page page-right turn" color:#fbbf24">idcolor:#94a3b8">="turn-2">
<!-- page 3 (my services) -->
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><div color:#fbbf24">classcolor:#94a3b8">="page-front">
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><h1 color:#fbbf24">classcolor:#94a3b8">="title">My Servicescolor:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></h1>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><div color:#fbbf24">classcolor:#94a3b8">="services-box">
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><div color:#fbbf24">classcolor:#94a3b8">="services-content">
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><i color:#fbbf24">classcolor:#94a3b8">="bx bx-code-alt">color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></i>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><h3>Web Developmentcolor:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></h3>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nisi
quae accusamus aliquam.
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></p>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><a color:#fbbf24">hrefcolor:#94a3b8">="#" color:#fbbf24">classcolor:#94a3b8">="btn">Read Morecolor:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></a>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></div>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><div color:#fbbf24">classcolor:#94a3b8">="services-content">
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><i color:#fbbf24">classcolor:#94a3b8">="bx bxs-paint">color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></i>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><h3>Creative Designcolor:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></h3>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nisi
quae accusamus aliquam.
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></p>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><a color:#fbbf24">hrefcolor:#94a3b8">="#" color:#fbbf24">classcolor:#94a3b8">="btn">Read Morecolor:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></a>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></div>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><div color:#fbbf24">classcolor:#94a3b8">="services-content">
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><i color:#fbbf24">classcolor:#94a3b8">="bx bx-bar-chart-alt">color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></i>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><h3>Digital Marketingcolor:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></h3>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nisi
quae accusamus aliquam.
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></p>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><a color:#fbbf24">hrefcolor:#94a3b8">="#" color:#fbbf24">classcolor:#94a3b8">="btn">Read Morecolor:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></a>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></div>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><div color:#fbbf24">classcolor:#94a3b8">="services-content">
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><i color:#fbbf24">classcolor:#94a3b8">="bx bx-search">color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></i>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><h3>SEOcolor:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></h3>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nisi
quae accusamus aliquam.
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></p>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><a color:#fbbf24">hrefcolor:#94a3b8">="#" color:#fbbf24">classcolor:#94a3b8">="btn">Read Morecolor:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></a>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></div>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></div>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><span color:#fbbf24">classcolor:#94a3b8">="number-page">3color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></span>
<!-- next button -->
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><span color:#fbbf24">classcolor:#94a3b8">="nextprev-btn" color:#fbbf24">data-pagecolor:#94a3b8">="turn-2">
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><i color:#fbbf24">classcolor:#94a3b8">="bx bx-chevron-right">color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></i>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></span>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></div>
<!-- page 4 (my skills) -->
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><div color:#fbbf24">classcolor:#94a3b8">="page-back">
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><h1 color:#fbbf24">classcolor:#94a3b8">="title">My Skillscolor:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></h1>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><div color:#fbbf24">classcolor:#94a3b8">="skills-box">
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><div color:#fbbf24">classcolor:#94a3b8">="skills-content">
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><h3>Front-Endcolor:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></h3>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><div color:#fbbf24">classcolor:#94a3b8">="content">
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><span>color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><i color:#fbbf24">classcolor:#94a3b8">="bx bxl-html5">color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></i> HTMLcolor:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></span>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><span>color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><i color:#fbbf24">classcolor:#94a3b8">="bx bxl-css3">color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></i>CSScolor:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></span>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><span>color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><i color:#fbbf24">classcolor:#94a3b8">="bx bxl-javascript">color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></i>JScolor:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></span>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><span>color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><i color:#fbbf24">classcolor:#94a3b8">="bx bxl-angular">color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></i>Angularcolor:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></span>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><span>color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><i color:#fbbf24">classcolor:#94a3b8">="bx bxl-react">color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></i>React Jscolor:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></span>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><span>color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><i color:#fbbf24">classcolor:#94a3b8">="bx bxl-bootstrap">color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></i>BootStrapcolor:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></span>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><span>color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><i color:#fbbf24">classcolor:#94a3b8">="bx bxl-jquery">color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></i>Jquerycolor:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></span>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></div>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></div>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><div color:#fbbf24">classcolor:#94a3b8">="skills-content">
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><h3>Back-Endcolor:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></h3>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><div color:#fbbf24">classcolor:#94a3b8">="content">
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><span>color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><i color:#fbbf24">classcolor:#94a3b8">="bx bxl-python">color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></i>Pythoncolor:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></span>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><span>color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><i color:#fbbf24">classcolor:#94a3b8">="bx bxl-java">color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></i>Javacolor:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></span>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><span>color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><i color:#fbbf24">classcolor:#94a3b8">="bx bxl-nodejs">color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></i>Node JScolor:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></span>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><span>color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><i color:#fbbf24">classcolor:#94a3b8">="bx bxl-php">color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></i>PHPcolor:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></span>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></div>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></div>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><div color:#fbbf24">classcolor:#94a3b8">="skills-content">
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><h3>UI/UX Designcolor:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></h3>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><div color:#fbbf24">classcolor:#94a3b8">="content">
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><span>color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><i color:#fbbf24">classcolor:#94a3b8">="bx bxl-figma">color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></i>Figmacolor:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></span>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></div>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></div>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></div>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><span color:#fbbf24">classcolor:#94a3b8">="number-page">4color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></span>
<!-- next button -->
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><span color:#fbbf24">classcolor:#94a3b8">="nextprev-btn back" color:#fbbf24">data-pagecolor:#94a3b8">="turn-2">
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><i color:#fbbf24">classcolor:#94a3b8">="bx bx-chevron-left">color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></i>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></span>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></div>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></div>
<!-- page 5 & 6 -->
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><div color:#fbbf24">classcolor:#94a3b8">="book-page page-right turn" color:#fbbf24">idcolor:#94a3b8">="turn-3">
<!-- page 5 (latest project or many portfolio) -->
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><div color:#fbbf24">classcolor:#94a3b8">="page-front">
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><h1 color:#fbbf24">classcolor:#94a3b8">="title">Latest Projectcolor:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></h1>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><div color:#fbbf24">classcolor:#94a3b8">="portfolio-box">
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><div color:#fbbf24">classcolor:#94a3b8">="img-box">
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><img color:#fbbf24">srccolor:#94a3b8">="website 3.png" color:#fbbf24">altcolor:#94a3b8">="">
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></div>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><div color:#fbbf24">classcolor:#94a3b8">="info-box">
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><div color:#fbbf24">classcolor:#94a3b8">="info-title">
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><h3>Project Namecolor:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></h3>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><a color:#fbbf24">hrefcolor:#94a3b8">="#">Live Preview color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><i color:#fbbf24">classcolor:#94a3b8">="bx bx-link-external">color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></i>color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></a>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></div>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><p>Tech Used:color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></p>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio, vel ipsum quis possimus quaerat voluptatem temporibus saepe veniam?color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></p>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></div>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><div color:#fbbf24">classcolor:#94a3b8">="btn-box">
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><a color:#fbbf24">hrefcolor:#94a3b8">="#" color:#fbbf24">classcolor:#94a3b8">="btn">Source Codecolor:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></a>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><a color:#fbbf24">hrefcolor:#94a3b8">="#" color:#fbbf24">classcolor:#94a3b8">="btn">More Projectscolor:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></a>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></div>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></div>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><span color:#fbbf24">classcolor:#94a3b8">="number-page">5color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></span>
<!-- next button -->
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><span color:#fbbf24">classcolor:#94a3b8">="nextprev-btn" color:#fbbf24">data-pagecolor:#94a3b8">="turn-3">
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><i color:#fbbf24">classcolor:#94a3b8">="bx bx-chevron-right">color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></i>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></span>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></div>
<!-- page 6 (contact me!) -->
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><div color:#fbbf24">classcolor:#94a3b8">="page-back">
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><h1 color:#fbbf24">classcolor:#94a3b8">="title">Contact Me!color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></h1>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><div color:#fbbf24">classcolor:#94a3b8">="contact-box">
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><form color:#fbbf24">actioncolor:#94a3b8">="">
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><input color:#fbbf24">typecolor:#94a3b8">="text" color:#fbbf24">classcolor:#94a3b8">="field" color:#fbbf24">placeholdercolor:#94a3b8">="Full Name" required>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><input color:#fbbf24">typecolor:#94a3b8">="email" color:#fbbf24">classcolor:#94a3b8">="field" color:#fbbf24">placeholdercolor:#94a3b8">="Email Address" required>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><textarea color:#fbbf24">namecolor:#94a3b8">="" color:#fbbf24">idcolor:#94a3b8">="" color:#fbbf24">colscolor:#94a3b8">="30" color:#fbbf24">rowscolor:#94a3b8">="10" color:#fbbf24">classcolor:#94a3b8">="field" color:#fbbf24">placeholdercolor:#94a3b8">="Your Message">color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></textarea>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><input color:#fbbf24">typecolor:#94a3b8">="submit" color:#fbbf24">valuecolor:#94a3b8">="Send Message" color:#fbbf24">classcolor:#94a3b8">="btn">
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></form>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></div>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><span color:#fbbf24">classcolor:#94a3b8">="number-page">6color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></span>
<!-- next button -->
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><span color:#fbbf24">classcolor:#94a3b8">="nextprev-btn back" color:#fbbf24">data-pagecolor:#94a3b8">="turn-3">
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><i color:#fbbf24">classcolor:#94a3b8">="bx bx-chevron-left">color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></i>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></span>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><a color:#fbbf24">hrefcolor:#94a3b8">="#" color:#fbbf24">classcolor:#94a3b8">="back-profile">
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><p>Profilecolor:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></p>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><i color:#fbbf24">classcolor:#94a3b8">="bx bxs-user">color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></i>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></a>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></div>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></div>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></div>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></div>
<!-- script -->
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><script color:#fbbf24">srccolor:#94a3b8">="script.js">color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></script>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></body>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></html>