Unit Build: Portfolio Visual System

The portfolio can look like yours now.

But visual identity is not the only success criterion.

The generated site must remain readable, responsive, accessible, and explainable.

Required source architecture

Your site should have an intentional asset structure and shared CSS strategy.

Example:

assets/
  css/
  images/
  js/        # only if actually used
_sass/       # only if using Sass

Do not create empty folders for technologies you are not using.

Required visual behaviors

• consistent typography;
• consistent spacing;
• usable navigation;
• project-grid/card system;
• responsive narrow-screen layout;
• visible keyboard focus;
• meaningful image alt text;
• semantic shared layout structure.

Build evidence

Prove:

1. one asset was copied or processed into _site;
2. one internal asset URL is generated correctly;
3. one shared CSS change affects multiple pages;
4. one responsive rule changes layout at narrower space;
5. one keyboard/accessibility issue was repaired.

Quality audit

Test at minimum:

• narrow viewport;
• normal laptop/Chromebook viewport;
• keyboard-only navigation;
• 200% zoom or a comparable enlargement check;
• images disabled or alt text inspected;
• one generated page source inspection.

Unit defense

Explain:

1. Which assets are copied versus processed?
2. How do you know the browser requested the correct generated path?
3. Which CSS rules form your design system rather than one-off fixes?
4. What is one semantic decision enforced by your layout?
5. What is one accessibility failure you found through testing rather than appearance?
6. What would break if the site were deployed under a non-root base path?

Move on when

The site looks intentional and another student can use keyboard, narrow viewport, and generated-output evidence to verify the important design claims.