This project is an interactive portfolio website designed like a 3D book that users can flip page by page. It presents personal details, education, projects, skills, services, and contact information in a visually engaging way. Smooth page-turn animations create the feeling of reading a real book. The layout combines modern UI design with creative transitions to stand out from traditional portfolios. Overall, the project demonstrates strong frontend skills using HTML, CSS, and JavaScript together.
HTML
<div class="book-page page-right turn" id="turn-1"></div>\The HTML structures the portfolio as a book with multiple pages layered side by side. A wrapper element contains covers and inner pages, giving the illusion of a physical book. Each page is divided into front and back sections so it can flip realistically in 3D space. The left page acts as the static profile cover, while right pages rotate dynamically. Content is logically grouped into sections such as education, projects, services, skills, and contact information.
Navigation arrows are embedded directly into the page layout to trigger page turns. Data attributes link buttons to specific pages for interaction. Social icons and buttons enhance interactivity and accessibility. The HTML remains semantic while supporting complex animations. Overall, it provides a clean structural foundation for the flipping-book experience.
CSS
.book-page.page-right.turn {
transform: rotateY(-180deg);
}The CSS is responsible for the book-like appearance and smooth 3D animations. Perspective is applied to the wrapper and book elements to create realistic depth. Each page is positioned absolutely and rotates around its edge to simulate flipping. Gradient backgrounds differentiate covers from inner pages, enhancing realism. Transition timing functions make page turns feel smooth and natural. Shadows and borders add depth and separation between pages.
CSS variables are used for consistent colors, borders, and spacing across the site. Responsive layouts ensure content remains readable on different screen sizes. Hover effects improve visual feedback on buttons and icons. Overall, CSS transforms a standard layout into an immersive interactive book.
JavaScript
pageTurn.classList.add("turn");The JavaScript controls all interactive behavior of the portfolio. It listens for clicks on next and previous buttons to trigger page flips. Pages are shown or hidden by adding and removing the turn class dynamically. Z-index values are updated during animations to maintain correct page stacking order. A special “Contact Me” button automatically flips through all pages in sequence.
The back-profile button reverses the page-turning animation to return to the cover. Timers are used to synchronize JavaScript actions with CSS transitions. Initial animations automatically open the book when the site loads. This creates a polished first impression for visitors. Overall, JavaScript acts as the logic layer that connects user actions to visual animations.
