Which design principles does the reviewee's site implement effectively?
Examples of areas where the site designer uses design principles.
Design Principles
Use markdown heading 5 and 6 to describe how the designer used each principle checked above.
Alignment
The site uses consistent left-justification throughout all text content, and a clean two-section (10 column) grid system that keeps all elements anchored to invisible grid lines. Navigation items in the header are right-aligned as a coherent group.
Balance
Each major section achieves asymmetric balance effectively. For example, the hero section pairs a left-side text block with a right-side portrait photo, creating visual weight on both sides without being rigidly symmetric. The information inhabits a larger space to give it more importance, and the same goes for each left section.
Symmetry
The Writing section uses the same two-section column layout: "Featured Publications" on the left and "Selected Poems & Essays" on the right, both with matching heading styles and equal column widths.
Visual Hierarchy
The site establishes a clear hierarchy through size and weight: the large display name "dylan delong-headley" draws the eye first, followed by the small all-caps label "Poet & Web Designer," then the body paragraph. Section numbers (01 • About, 02 • Writing, 03 • Design) serve as consistent wayfinding markers at a smaller scale.
Negative Space
The site uses generous vertical padding between sections, giving each content block room to breathe. The hero section in particular has substantial white space around the portrait and text to separate it.
Color
The palette is restrained and intentional: a warm cream/off-white background, dark near-black text, coral/orange-red for CTAs and accent labels, and an italic teal/slate used for the italicized name and subheadings. The dark-mode toggle switches the background to a deep navy, which the accent colors remain legible against.
Type
The site pairs a serif display typeface for headings (evoking a literary/editorial feel appropriate for a poet) with a clean sans-serif for body text. Italic is used deliberately and consistently for the secondary/subtitle lines (e.g., & the web designer, & certification), creating a layered typographic rhythm. It also uses a mono font for buttons and section headers.
Which design principles should the designer revisit?
Examples of areas where the site designer should revise their use of a principle
Design Principles
Use markdown heading 5 and 6 to describe how the designer used each principle checked above.
Color
The coral/orange-red CTA buttons ("READ ME," "READ MY POETRY") are vivid and effective as accent elements individually, but when three "READ ME" buttons appear stacked in close vertical proximity in the Writing section, the repetition of the same high-saturation color becomes visually noisy. Could possibly reduce button size, use a lower-contrast variant for secondary actions, or differentiate them slightly so the eye isn't pulled equally to all three at once. There are also several contrast errors.
This site has at least one page which is reviewable and publically availble at the reviewee's *.github.io URL.
Yes
Reviewee's site implements at least 3 Astro components.
Yes
Reviewee's site effectively implements a BaseLayout (or other similar construct) for controlling site-wide layout.
Yes
Site being reviewed implements styles in the public/style/style.css file.
Yes
The sites's BaseLayout contains a <!DOCTYPE> tag
Yes
The site's BaseLayout uses the root element tag and specifies en as the page's language.
Yes
The sites's BaseLayout uses the root element tag and specifies en as the page's language.
Yes
Throughout all files, the site uses semantic elements where appropriate, only using div elements where semantic elements don't exist.
Yes
Examples of improper use of non-semantic elements.
<!-- Use code blocks to include examples -->
Does the markup of the site use any single ID more than once?
No
Which IDs are used more than once?
None
Does the markup contain superfluous, un-necessary
elements?
No
Examples of superfluous
tags.
<!-- Use code blocks to include examples -->
If needing ARIA attributes, does the site use them in the correct places?
Yes
Examples of elements requiring ARIA attributes.
<button
type="button"
className="nav__theme-toggle"
aria-label="Toggle dark mode"
aria-pressed={isDark}
onClick={handleClick}
>
{isDark ? "☾" : "☀"}
</button>The names of the various CSS rules implemented make sense in the context of their use.
Yes
Which rules use confusing, non-descriptive, or ambiguous names?
None
Where possible, the designer uses CSS variables to unify colors, types, or other CSS properties.
Yes
Are padding, margin, and border used correctly?
Yes
Examples of elements misusing the above properties.
/* Use code blocks to include examples */
Does the designer use absolute units (i.e., pixels) instead of relative units?
No
Do any CSS rules appear repetitive or redundant? Could some be consolidated into one rule with multiple uses?
No
Examples of repetitive or redundant rules.
/* Use code blocks to include examples */
Provide areas where the designer's work demonstrates a grasp of course principles.
- Intentional, cohesive visual identity — The combination of editorial serif headings, teal italics, and coral accents creates a distinctive "poet-meets-developer" aesthetic that is consistent across all sections and both color modes.
- Effective use of dark/light mode theming — The site implements a working theme toggle that meaningfully changes the palette (cream to deep navy) while maintaining readability and color harmony.
- Semantic sectioning and navigation — The site uses numbered section markers (01 • About, 02 • Writing, 03 • Design) tied to anchor navigation, demonstrating understanding of single-page layout, semantic structure, and UX flow.
Provide areas where the designer's work could use revision.
- Placeholder content in production — The "Selected Poems & Essays" column has four identical "Coming soon! under construction" links that are non-functional (
href="#"). These should either be removed until content is ready or replaced with styled placeholder cards that feel intentional.
- LinkedIn URL is malformed — The footer LinkedIn link resolves to
https://dylanheadley.me/www.linkedin.com/... (relative path appended to the domain) rather than the correct https://www.linkedin.com/...
- Button repetition and visual noise — Three identically styled coral "READ ME" buttons stacked vertically in the Writing section create visual congestion. Consolidating their CSS into a single reusable class and considering size/weight variation would improve both code quality and visual rhythm.
Components are small and are focused on singular functionality.
Yes
Components only use useEffect when absolutely necessary.
Yes
Provide examples of improper useEffect, if any
// Use code blocks to include examples
Comments are used appropriately in React components.
Yes
Components use useState effectively to control React variable values and states.
Yes
Markup included in JSX is compact and focused solely on the control created.
Yes
Provide examples of excessive JSX
// Use code blocks to include examples
No functions contain unused variables.
// Use code blocks to include examples
Overall Impressions
My portfolio site is a strong, well-considered piece of work for an introductory web design course. It demonstrates my genuine design voice rather than a generic template aesthetic; it has typographic pairings, restrained color palette, and editorial layout feel that are intentional and personal. The main areas for growth are in polish (removing placeholder content, fixing the LinkedIn URL) and CSS consolidation (reusable button classes).
Methods
Quality Rating
Above Average
Reasoning for Quality Rating
The site fulfills all structural requirements (BaseLayout, Astro components, semantic HTML, CSS variables, public deployment) and goes beyond them with a thoughtful visual identity. Deductions are minor: placeholder content in production, one broken URL, and likely some CSS redundancy in button styling.
Learning Objective 1 Ranking
Above Average
Learning Objective 1 Summary
The site is built with Astro and deploys cleanly to GitHub Pages. It uses semantic HTML throughout — nav, header, footer, section, main, p, and img — alongside CSS custom properties for theming and a functioning JavaScript dark/light mode toggle. The two-section column grid layout and generous spacing show responsive design awareness.
Learning Objective 2 Ranking
Meets Expectations
Learning Objective 2 Summary
The site uses aria attributes throughout and has a decent visual hierarchy, as well as decent keyboard navigability. It is lacking in contrast in some places, but generally succeeds at readability and passes WCAG AA and AAA.
Learning Objective 3 Ranking
Above Average
Learning Objective 3 Summary
The site applies well-established single-page portfolio patterns effectively: sticky navigation with anchor-linked sections, an above-the-fold hero with clear CTAs, expandable accordion items for education and experience entries, and a filterable project grid in the Design section. The information structure flows logically (intro → about → writing → design → contact), which is a conventional and user-friendly IA choice. The accordion pattern in particular shows understanding of progressive disclosure.
Learning Objective 4 Ranking
Above Average
Learning Objective 4 Summary
I think I use visual rhetoric intentionally and effectively for my audience. The editorial serif typeface, italic secondary lines, and muted literary palette construct a clear personality and the site reads as the work of a poet-developer. The numbered section markers (01 • About, 02 • Writing, 03 • Design) function rhetorically as a table of contents and signal organizational confidence. The coral CTA buttons create focus and urgency.
Learning Objective 5 Ranking
Above Average
Learning Objective 5 Summary
The choice of Astro as a static site generator is appropriate and well-justified for this use case: a personal portfolio requires fast load times, no server-side logic, easy GitHub Pages deployment, and a component model for reuse (BaseLayout, Navigation, Footer). Astro's zero-JS-by-default approach fits a content-heavy static site well, and the project structure—with a BaseLayout controlling site-wide scaffolding, discrete section components, and a public/style/style.css for global styles—reflects a clear understanding of how Astro's conventions support maintainability. The implementation demonstrates a considered technology selection rather than a default to plain HTML.
Which design principles does the reviewee's site implement effectively?
Examples of areas where the site designer uses design principles.
Design Principles
Use markdown heading 5 and 6 to describe how the designer used each principle checked above.
Alignment
The site uses consistent left-justification throughout all text content, and a clean two-section (10 column) grid system that keeps all elements anchored to invisible grid lines. Navigation items in the header are right-aligned as a coherent group.
Balance
Each major section achieves asymmetric balance effectively. For example, the hero section pairs a left-side text block with a right-side portrait photo, creating visual weight on both sides without being rigidly symmetric. The information inhabits a larger space to give it more importance, and the same goes for each left section.
Symmetry
The Writing section uses the same two-section column layout: "Featured Publications" on the left and "Selected Poems & Essays" on the right, both with matching heading styles and equal column widths.
Visual Hierarchy
The site establishes a clear hierarchy through size and weight: the large display name "dylan delong-headley" draws the eye first, followed by the small all-caps label "Poet & Web Designer," then the body paragraph. Section numbers (01 • About, 02 • Writing, 03 • Design) serve as consistent wayfinding markers at a smaller scale.
Negative Space
The site uses generous vertical padding between sections, giving each content block room to breathe. The hero section in particular has substantial white space around the portrait and text to separate it.
Color
The palette is restrained and intentional: a warm cream/off-white background, dark near-black text, coral/orange-red for CTAs and accent labels, and an italic teal/slate used for the italicized name and subheadings. The dark-mode toggle switches the background to a deep navy, which the accent colors remain legible against.
Type
The site pairs a serif display typeface for headings (evoking a literary/editorial feel appropriate for a poet) with a clean sans-serif for body text. Italic is used deliberately and consistently for the secondary/subtitle lines (e.g., & the web designer, & certification), creating a layered typographic rhythm. It also uses a mono font for buttons and section headers.
Which design principles should the designer revisit?
Examples of areas where the site designer should revise their use of a principle
Design Principles
Use markdown heading 5 and 6 to describe how the designer used each principle checked above.
Color
The coral/orange-red CTA buttons ("READ ME," "READ MY POETRY") are vivid and effective as accent elements individually, but when three "READ ME" buttons appear stacked in close vertical proximity in the Writing section, the repetition of the same high-saturation color becomes visually noisy. Could possibly reduce button size, use a lower-contrast variant for secondary actions, or differentiate them slightly so the eye isn't pulled equally to all three at once. There are also several contrast errors.
This site has at least one page which is reviewable and publically availble at the reviewee's *.github.io URL.
Yes
Reviewee's site implements at least 3 Astro components.
Yes
Reviewee's site effectively implements a BaseLayout (or other similar construct) for controlling site-wide layout.
Yes
Site being reviewed implements styles in the public/style/style.css file.
Yes
The sites's BaseLayout contains a <!DOCTYPE> tag
Yes
The site's BaseLayout uses the root element tag and specifies
enas the page's language.Yes
The sites's BaseLayout uses the root element tag and specifies
enas the page's language.Yes
Throughout all files, the site uses semantic elements where appropriate, only using
divelements where semantic elements don't exist.Yes
Examples of improper use of non-semantic elements.
<!-- Use code blocks to include examples -->Does the markup of the site use any single ID more than once?
No
Which IDs are used more than once?
None
Does the markup contain superfluous, un-necessary elements?
No
Examples of superfluous tags.
<!-- Use code blocks to include examples -->If needing ARIA attributes, does the site use them in the correct places?
Yes
Examples of elements requiring ARIA attributes.
The names of the various CSS rules implemented make sense in the context of their use.
Yes
Which rules use confusing, non-descriptive, or ambiguous names?
None
Where possible, the designer uses CSS variables to unify colors, types, or other CSS properties.
Yes
Are padding, margin, and border used correctly?
Yes
Examples of elements misusing the above properties.
/* Use code blocks to include examples */Does the designer use absolute units (i.e., pixels) instead of relative units?
No
Do any CSS rules appear repetitive or redundant? Could some be consolidated into one rule with multiple uses?
No
Examples of repetitive or redundant rules.
/* Use code blocks to include examples */Provide areas where the designer's work demonstrates a grasp of course principles.
Provide areas where the designer's work could use revision.
href="#"). These should either be removed until content is ready or replaced with styled placeholder cards that feel intentional.https://dylanheadley.me/www.linkedin.com/...(relative path appended to the domain) rather than the correcthttps://www.linkedin.com/...Components are small and are focused on singular functionality.
Yes
Components only use
useEffectwhen absolutely necessary.Yes
Provide examples of improper
useEffect, if any// Use code blocks to include examplesComments are used appropriately in React components.
Yes
Components use
useStateeffectively to control React variable values and states.Yes
Markup included in
JSXis compact and focused solely on the control created.Yes
Provide examples of excessive
JSX// Use code blocks to include examplesNo functions contain unused variables.
// Use code blocks to include examplesOverall Impressions
My portfolio site is a strong, well-considered piece of work for an introductory web design course. It demonstrates my genuine design voice rather than a generic template aesthetic; it has typographic pairings, restrained color palette, and editorial layout feel that are intentional and personal. The main areas for growth are in polish (removing placeholder content, fixing the LinkedIn URL) and CSS consolidation (reusable button classes).
Methods
Quality Rating
Above Average
Reasoning for Quality Rating
The site fulfills all structural requirements (BaseLayout, Astro components, semantic HTML, CSS variables, public deployment) and goes beyond them with a thoughtful visual identity. Deductions are minor: placeholder content in production, one broken URL, and likely some CSS redundancy in button styling.
Learning Objective 1 Ranking
Above Average
Learning Objective 1 Summary
The site is built with Astro and deploys cleanly to GitHub Pages. It uses semantic HTML throughout —
nav,header,footer,section,main,p, andimg— alongside CSS custom properties for theming and a functioning JavaScript dark/light mode toggle. The two-section column grid layout and generous spacing show responsive design awareness.Learning Objective 2 Ranking
Meets Expectations
Learning Objective 2 Summary
The site uses aria attributes throughout and has a decent visual hierarchy, as well as decent keyboard navigability. It is lacking in contrast in some places, but generally succeeds at readability and passes WCAG AA and AAA.
Learning Objective 3 Ranking
Above Average
Learning Objective 3 Summary
The site applies well-established single-page portfolio patterns effectively: sticky navigation with anchor-linked sections, an above-the-fold hero with clear CTAs, expandable accordion items for education and experience entries, and a filterable project grid in the Design section. The information structure flows logically (intro → about → writing → design → contact), which is a conventional and user-friendly IA choice. The accordion pattern in particular shows understanding of progressive disclosure.
Learning Objective 4 Ranking
Above Average
Learning Objective 4 Summary
I think I use visual rhetoric intentionally and effectively for my audience. The editorial serif typeface, italic secondary lines, and muted literary palette construct a clear personality and the site reads as the work of a poet-developer. The numbered section markers (01 • About, 02 • Writing, 03 • Design) function rhetorically as a table of contents and signal organizational confidence. The coral CTA buttons create focus and urgency.
Learning Objective 5 Ranking
Above Average
Learning Objective 5 Summary
The choice of Astro as a static site generator is appropriate and well-justified for this use case: a personal portfolio requires fast load times, no server-side logic, easy GitHub Pages deployment, and a component model for reuse (BaseLayout, Navigation, Footer). Astro's zero-JS-by-default approach fits a content-heavy static site well, and the project structure—with a BaseLayout controlling site-wide scaffolding, discrete section components, and a
public/style/style.cssfor global styles—reflects a clear understanding of how Astro's conventions support maintainability. The implementation demonstrates a considered technology selection rather than a default to plain HTML.