MSK Institute • Shikohabad
Loading Page Content...
Preparing courses, live labs, and learning resources.सामग्री लोड हो रही है, कृपया प्रतीक्षा करें...
Connecting serverPlease wait...
💻 Practical Labs🚀 Free Demo📜 Verified Certificates
Preparing courses, live labs, and learning resources.सामग्री लोड हो रही है, कृपया प्रतीक्षा करें...
Welcome to Capstone Project 2! In the hyper-competitive tech landscape, a developer's portfolio website is their primary calling card. A generic, static template signals beginner status. But an engineer whose portfolio features seamless zero-flicker dark/light mode switching, fluid mathematical typography, and hardware-accelerated 3D flipping project cards commands immediate attention and respect.
In this project, you will build a developer portfolio that showcases true advanced CSS mastery: 3D perspective transforms, backface-visibility: hidden, semantic token architecture, and WCAG contrast compliance.
The highlight of this portfolio is the interactive 3D Project Card. When a visitor hovers over or clicks a project, the card smoothly pirouettes around its Y-axis in true 3D space, revealing the architectural stack and GitHub links on the back:
+-------------------------------------------------------------------------+
| THE 3D FLIP CARD STAGING ENVIRONMENT |
+-------------------------------------------------------------------------+
1. Perspective Chamber:
.card-scene { perspective: 1000px; }
2. 3D Rotating Pivot:
.card-inner {
transform-style: preserve-3d;
transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.card-scene:hover .card-inner {
transform: rotateY(180deg);
}
3. Dual Opposing Faces (backface-visibility: hidden):
[ FRONT FACE: translateZ(0) ]
[ BACK FACE: rotateY(180deg) ]localStorage with OS sync.perspective: 1000px, transform-style: preserve-3d, and backface-visibility: hidden.clamp().| Practice | Do | Don't |
|---|---|---|
| Card Flipping | Declare backface-visibility: hidden on both front and back faces. | Forget backface-visibility, causing mirrored backward text to bleed through. |
| Perspective Placement | Place perspective: 1000px on the outer card wrapper. | Place perspective on the flipping element itself, distorting rotation physics. |
| Keyboard Accessibility | Include :focus-within so keyboard-only users pressing Tab can flip cards. | Depend exclusively on :hover, locking out keyboard and mobile users. |
| Color Contrast | Verify 4.5:1 text contrast on both dark and light theme surfaces. | Use light gray text on white cards or dark gray text on black cards. |
+-------------------------------------------------------------------------+
| PROJECT 2 ARCHITECTURE CHEAT SHEET |
+-------------------------------------------------------------------------+
1. Card Flip Recipe:
.scene { perspective: 1000px; }
.inner { transform-style: preserve-3d; transition: transform 0.7s; }
.scene:hover .inner, .scene:focus-within .inner { transform: rotateY(180deg); }
.face { backface-visibility: hidden; position: absolute; inset: 0; }
.face--back { transform: rotateY(180deg); }
2. Theme System:
:root[data-theme="dark"] { --bg-canvas: #0f172a; --text-main: #f8fafc; }backface-visibility: hidden from a 3D rotating card?A. The card cannot rotate more than 45 degrees B. When the card rotates to 180 degrees, the front face remains visible as a mirrored, backward reflection rather than showing the back face C. The browser crashes with a WebGL memory leak D. The element is automatically deleted from the DOM
backface-visibility: hidden ensures that when a face turns away from the viewer, it becomes completely transparent.perspective: 1000px be declared to create a realistic 3D flipping card?A. On the root <html> tag only B. On the static parent wrapper container (the scene), looking at the rotating child element C. On the text inside the button D. Directly on the image file
perspective belongs on the parent scene wrapper. It sets the virtual camera distance from which the child element's 3D rotation is viewed.:focus-within be combined with :hover when triggering 3D card flips?A. It speeds up CSS rendering on the GPU B. It allows keyboard users navigating with the Tab key to flip and inspect the project cards without needing a mouse C. It enables automatic text translation D. It prevents the page from caching
:focus-within triggers whenever any element inside the card (such as a link or button) receives keyboard focus, making interactive 3D components 100% accessible to keyboard-only and assistive technology users.transform-style: preserve-3d; on the card's inner pivot container?A. It compresses the images inside the card B. It instructs the browser to place child elements in true shared 3D coordinates rather than flattening them into a 2D surface C. It allows CSS to connect to a 3D printer D. It enables audio playback
transform-style: preserve-3d;, child layers are flattened into a 2D plane before rotation, destroying the spatial relationship between the front and back card faces.localStorage?A. Because CSS files cannot be downloaded without localStorage B. To preserve the user's selected dark or light mode preference across page reloads and future visits C. To prevent search engines from crawling the site D. To encrypt the user's browser history
localStorage provides persistent client-side key-value storage so the user's chosen theme remains active whenever they navigate between pages or return to the site.Explore this complete, standalone production portfolio. Test the theme toggle switch in the header, hover or click the 3D project cards, and inspect the fluid typography and responsive grid!
Continue learning with hands-on practice, examples, and exercises in the upcoming topic.
Test your understanding of this lesson with 5 questions. Each question has one correct answer.