Skip to main content

UNIT 27

Professional Portfolio

Everything you’ve built was for someone else. This one is yours. Build a dark/light mode developer portfolio with a localStorage theme toggle, spring hover animations, and your own projects.

⏱️ 7 Stages
🌿 Intermediate
⏰ 45–60 min per stage
💾 localStorage + CSS Themes

The Big Idea

Everything you have built in this curriculum — the language sites, the restaurant, the pitch — was for someone else. This unit, you build for yourself. A professional portfolio is the most important site a developer can publish, and now you have the skills to build one that is actually good.

The default character is Jordan Bearcub, a Sisseton-Wahpeton Oyate citizen and CS student. Their identity, story, and projects are the starting scaffold. You replace that content with your own — your name, your projects, your community, your goals.

The new technical concept is localStorage: a way to save data in the user’s browser so it persists after the page closes. You use it to remember whether the visitor prefers dark or light mode — so the next time they open your site, it loads in the mode they chose. Combined with a CSS variable theme system, the whole site switches with one class toggle on <body>.

By the end of this unit, you’ll be able to say “I can…”

  • Define CSS custom properties for a complete color palette and use them consistently across all sections
  • Create two complete color themes (dark and light) using :root defaults and a .light-mode class override on body
  • Save and retrieve user preferences with localStorage.setItem and localStorage.getItem so choices persist across page loads and sessions
  • Use classList.toggle and classList.contains to switch between themes and keep the toggle button label in sync
  • Apply cubic-bezier spring-easing curves to hover animations that overshoot and settle, creating a physical, polished feel
  • Build and publish a complete professional portfolio presenting your own projects, skills, bio, and contact information

What You’ll Build

A full professional portfolio site with four core sections: a full-screen hero, an about section with skill tags, a projects gallery, and a contact form.

The site defaults to dark mode. A toggle button in the corner switches it to light mode — and the preference is saved in the browser so it persists the next time the page is opened. Project cards lift with a spring hover animation. Skill tags bounce when touched. Every color in every section uses CSS variables, so both themes work with zero duplicate styling.

About + Skills Gradient avatar, bio, bouncy skill tags
Projects Card gallery, aspect-ratio thumbs, tech tags
Dark / Light Mode CSS var swap, localStorage persistence
Contact Form Two-column grid, focus states, footer

You have built more than a dozen sites to get here. This one has your name on it. Make it yours.

Your learning path

The 7 Stages

STAGE 1 Design System + Hero Dual CSS vars, Space Grotesk, hero STAGE 2 About + Skills Two-column grid, avatar, skill chips STAGE 3 Projects Section Project cards, aspect-ratio, hover lift STAGE 4 Dark Mode CSS Toggle button, .light-mode override STAGE 5 localStorage JS getItem, setItem, classList.contains STAGE 6 Contact + Footer Form grid, focus states, footer STAGE 7 Animation Polish cubic-bezier spring easing, micro-interactions
Let’s Begin

← Back to All Units

Sources

Portfolio design draws from UX research and professional development resources. The representation framing in this unit — Native professionals in tech — draws from Indigenous STEM education scholarship and Tribal college research. Students are encouraged to connect with AISES (American Indian Science and Engineering Society) and their Tribal Nation’s education programs as next steps.

Portfolio Design & Professional Development

Native Professionals in Technology & STEM

Web Development: CSS & JavaScript Patterns

Educational Standards

This unit aligns with computer science, language arts, social studies, and Indigenous education standards across MN, ND, and SD. Click a panel to expand.

  • Define a complete CSS variable palette with meaningful names and apply it consistently across all elements so theme changes propagate automatically
  • Create two complete color themes using :root defaults and a .light-mode class override on body, with no duplicate element-level color declarations
  • Read and write user preferences with localStorage.getItem and localStorage.setItem so the chosen theme persists across browser sessions
  • Use classList.toggle and classList.contains to switch themes and keep the toggle button label synchronized with the current state
  • Apply cubic-bezier(0.34, 1.56, 0.64, 1) spring-easing to hover animations that overshoot and settle for a physical, polished interaction feel
  • Publish a professional portfolio that accurately presents your own projects, skills, bio, and contact information to a real audience
  • OSEU.SS.C.2, Native Professional Identity (All Grades): Students understand that Indigenous people are present in all professional fields, including technology. (The default portfolio character — Jordan Bearcub, a Sisseton-Wahpeton Oyate CS student — models Native professional identity in tech explicitly. The unit asks students to build their own portfolio with their own Indigenous identity and story as a professional asset. This is not something to minimize or omit; it is part of the case they make for themselves.)
  • OSEU.ELA.W.1, Writing for Professional Audiences (All Grades): Students produce purposeful writing for a specific audience with clear communication goals. (The portfolio bio, project descriptions, and contact page are written for potential employers, collaborators, and educators. The writing task requires students to make deliberate choices about voice, tone, and content based on what a professional audience will find credible and compelling.)
  • CSTA 2-AP-19 (Grades 6–8): Document programs in order to make them easier to follow, test, and debug. (The CSS variable system is a form of documentation: meaningful names like --bg, --surface, and --accent make the theme system self-explanatory and maintainable. Stage 4 teaches this practice explicitly as a professional habit.)
  • CSTA 3B-AP-10 (Grades 9–12): Use and adapt classic algorithms and data structures to address new challenges. (The localStorage theme persistence adapts the classic “save user state” pattern — foundational in web development — implemented in plain JavaScript without a library or framework.)
  • ISTE 1c, Empowered Learner: Students use technology to seek feedback that informs and improves their practice, and demonstrate learning in a variety of ways. (The portfolio IS the demonstration: students publish their work in a format that can be shared with employers, educators, and community members as evidence of what they have learned and built.)
  • ISTE 6a, Creative Communicator: Students choose appropriate platforms and tools for meeting the desired objectives of their creation. (Students make intentional design decisions about typography, color system, layout, and interaction that serve their goal of presenting themselves professionally to a specific audience.)
  • MN ELA 8.3.3.1 (Grade 8): Use technology to produce and publish writing and present the relationships between information and ideas. (Students produce a multi-section portfolio with prose biography, project descriptions, and contact writing, all organized as a publishable professional web document accessible to real audiences.)
  • MN CS K-12 Standard 9-12.1.1 (Grades 9–12): Decompose complex real-world problems into manageable sub-problems. (The portfolio is decomposed across 7 stages: design system → about → projects → theme CSS → localStorage JS → contact → animation. Students address one sub-problem per stage before combining them into a complete site.)
  • MN Media Arts 9-12.2.3.1 (Grades 9–12): Create and share media artworks that reflect personal identity and communicate ideas to an audience. (The portfolio is the student’s primary media artifact: it presents their identity, values, and technical work to a professional audience in a designed, interactive digital format.)
  • ND CS 6.E.1 / 7.E.1 / 8.E.1 (Grades 6–8): Create artifacts by applying existing knowledge of computing concepts and practices. (Students synthesize all skills from prior units — CSS variables, hover transitions, form design, and DOM manipulation — into a single publishable artifact: their professional portfolio.)
  • ND CS 9-12.E.3 (Grades 9–12): Design and iteratively develop computational artifacts for practical intent, personal expression, or to address a societal need. (The portfolio serves all three purposes: practically useful for job and internship applications, personally expressive as a representation of the student’s identity and values, and socially meaningful as a demonstration of Native representation in technology.)
  • SD CS 6-8.AP.M.1 (Grades 6–8): Decompose problems into parts to facilitate design, implementation, and review. (The 7-stage portfolio build decomposes the project systematically: CSS variables → about section → projects → dark mode CSS → localStorage JS → contact → animation polish. Each stage is testable before the next begins.)
  • SD ELA 6.W.4 (Grade 6): Produce clear and coherent writing appropriate to task, purpose, and audience. (Students write a professional bio, project descriptions, and contact page for a specific professional audience. The writing task is purposeful and audience-aware throughout, not generic.)
  • OSEU Standard 5.1 (All Grades): Recognize the contributions of Indigenous people to the modern world. (The portfolio unit explicitly frames Native professionals in technology as contributors to a field often assumed to be homogeneous. Students publish their own presence in that field — with their Tribal affiliation, community work, and values — as an act of visible representation.)