Hybrid Designer Site Development with Bootstrap 5. Tool selection, design system construction, rubric application, and technical problem-solving.
This case study documents the process, design decisions, technical challenges, and outcomes of building a hybrid-designer portfolio site for the DDSGN 215 Advanced UX Design course. It covers the tool selection decision (Adobe Dreamweaver versus Framer), application of Bootstrap 5 rubric components, the authoring of a custom design system, and the resolution of upload-blocking issues that prevented the site from going live on the first attempt. The portfolio is now live and meets the course's Bootstrap component requirements.
I am a hybrid designer with ten-plus years of physical-space and interior design experience, transitioning into UX/UI through Pierce College's AAS Digital Design and UX/UI Certificate.
Professor Pak's formal feedback to me has been the foundation of this build:
"Critical thinking is your strongest skill. Build custom design systems to stand out from generic UI components. Strong case studies are the most important strategy."
The deliverable for this milestone is a public portfolio site that demonstrates mastery of the Bootstrap 5 components covered in class: buttons, cards, carousel, jumbotron, navbar, and the 12-column responsive grid.
A primary methodological choice was which build platform to use. I evaluated two paths.
| Platform | Strengths | Weaknesses |
|---|---|---|
| Framer (no-code visual builder) | Fast time-to-publish, built-in hosting, auto-responsive components | Generated code is opaque, does not demonstrate hand-coded Bootstrap, does not satisfy the DDSGN 215 rubric |
| Adobe Dreamweaver (code + design hybrid IDE) | Real HTML/CSS authoring, Bootstrap-aware code hints, built-in SFTP to the Pierce server, full ownership of every line | Slower to publish, the student must debug their own code |
Framer would have produced a working site in an afternoon, but the course outcome is to demonstrate hand-coded Bootstrap mastery, not platform configuration. The trade-off was speed in exchange for skill demonstration.
A site called Flat White (hosted on Framer at flat-white.framer.website)
was studied as a visual reference for restraint: numbered section system, generous whitespace,
single-typography hierarchy, and minimal call-to-action treatments. None of Flat White's code
was used. Only the editorial language was borrowed and re-implemented in Bootstrap.
All Bootstrap 5 components covered in the Bootstrap Components lecture are present on the home page.
Three slides with indicators and prev/next controls.
Three discipline cards using .card, .card-img-top, .card-body, .card-title, .card-text.
All nine .btn color classes, all eight .btn-outline-* variants, three sizes (.btn-lg, default, .btn-sm), shown in a dedicated Design System section.
Closing call-to-action band, full-width on every page.
Responsive col-md and col-xl breakpoints with justify-content centering.
Dropdown menu, mobile hamburger toggle, active link state.
In direct response to Professor Pak's feedback that critical thinking and a custom design
system differentiate strong portfolios from generic ones, a strict system was authored in a
single CSS file: css/portfolio.css. Every page inherits from this file. No page
contains inline color or font overrides.
Rationale. Restraint reads as class. Token sprawl reads as vibe-coding. Fewer perceived choices increase the appearance of intention. These limits made every decision deliberate rather than improvised.
Problem. Case study PDF was 153 MB. Server rejected at the size gate.
Resolution. Re-encoded all 253 embedded images as JPEG quality 72 via PyMuPDF, saved with garbage collection and stream deflation.
Outcome. 153 MB to 14 MB (91% reduction). All 60 pages preserved. Full local backup retained.
Problem. 29 image files had names with spaces, commas, parentheses (e.g. ChatGPT Image May 14, 2026, 08_01_51 PM.png).
Resolution. Programmatically renamed all 29 files to web-safe equivalents, updated 18 HTML references across 6 pages in one pass.
Outcome. Zero broken image links after rename.
Problem. Three pillar cards rendered cream text on a white background. Technically present, completely unreadable.
Resolution. Rewrote about.html using only design system classes. Removed all inline color overrides.
Outcome. Full readability restored.
Problem. Five secondary pages still contained <style> blocks with retired Parisian Evening color tokens.
Resolution. Stripped duplicate <style> blocks from all five pages and replaced retired variable names with active design system tokens site-wide.
Outcome. All twelve pages now inherit from a single source of truth.
Problem. 131 em-dashes across 10 HTML files. A recognized AI/vibe-coded stylistic tell per a 500-site audit.
Resolution. Replaced contextually with periods, commas, or colons via a single Python pass.
Outcome. Copy reads as intentional, not generated.
Problem. Over-aggressive cleanup deleted the case study PDF, a portrait, and two graphic design samples that were still referenced.
Resolution. Recovered PDF backup from Desktop. Recovered portrait from Downloads. For two truly lost files, swapped HTML references to existing similar images.
Process improvement. Adopted a non-destructive workflow: deprecated files now move to _excluded_from_upload/ rather than being deleted.
| Category | Tool | Use |
|---|---|---|
| Code editor + FTP | Adobe Dreamweaver 2021 | HTML/CSS authoring; SFTP transfer to Pierce server |
| Framework | Bootstrap 5.3.8 | UI components and 12-column grid |
| PDF compression | Adobe Acrobat, PyMuPDF (Python) | Reduced 153 MB case study PDF to 14 MB |
| Image editing | Adobe Photoshop | Cropping, background cleanup |
| Code assistant | Claude AI | Pair-coding for design system architecture, debugging, copy review. Design decisions, brand voice, and structure remained mine. |
| Programmatic file ops | Python 3.14, paramiko SSH library | Batch filename normalization; recursive SFTP upload |
| Terminal | Git Bash | Script execution |
| Local preview | Python http.server |
Verifying rendering before deployment |
Limiting the system to 5 colors, 2 fonts, and 3 type sizes was harder than designing with unlimited choices, and produced a stronger result. Every decision had to be considered.
Framer would have shipped a "nice looking" site in an afternoon. Choosing Dreamweaver meant I leave this class able to read and write my own markup. The right tool is the one that grows the maker.
The audit of 500 vibe-coded sites confirmed something I sensed: the difference between a generic portfolio and a senior-feeling one is mostly subtraction. No glowing hovers. No purple gradients. No emoji headings. No fake testimonials. Discipline reads on the page.
When assets were accidentally deleted, the single-source design system made recovery linear: identify the missing file, replace the reference, ship. A page-by-page custom-style approach would have required hunting through every file.
photography.html.The portfolio is live, structurally sound, and built on a defensible design system. The Bootstrap rubric is met. The tool decision is documented. The remaining work is content depth, additional case studies, rather than infrastructure.
Thank you to Professor Pak for the direct feedback throughout this term. The discipline you pushed me toward shaped every visible and invisible decision in this build.