Personal portfolio site for Angela Read — Architectural Designer, Design Technologist, and Spatial Thinker
The portfolio includes UX case studies, architectural design work, and creative projects spanning both fields.
Live site — angelaread.design
This site was built by hand using plain HTML, CSS, and vanilla JavaScript — no frameworks, no templates, no site builders. Every design and layout decision was made intentionally to keep the code clean, readable, and easy to maintain.
I wrote all HTML myself. Structure, semantics, accessibility attributes, and content organization are my own work. I am comfortable with HTML and consider it a strong foundation in my development practice.
CSS is where I am most confident. I wrote the stylesheet myself including:
- CSS custom properties for a consistent design system
- Responsive layout using media queries
- Grid and flexbox for page structure
- Component-level styles for cards, tabs, navigation, and project sections
- Animations and transitions
- A consistent typographic scale using Google Fonts
I used Claude for occasional guidance when I was stuck on a specific problem but wrote and edited every rule myself.
JavaScript is still new to me and I am actively building my skills through freeCodeCamp. The JavaScript in this site handles tab switching and a lightbox for the creative work gallery. I used Claude to help write this logic while I focused on understanding how it works. I can read, follow, and modify the code — I am not there yet with writing complex JavaScript from scratch independently.
I am honest about this distinction because I think it matters. Using AI tools to move faster is standard practice. Knowing what you actually understand versus what you are still learning is just as important.
I use Claude as a development aid — the same way a developer might use Stack Overflow or documentation. It helps me move faster and work through problems I have not encountered before.
What AI helped with:
- JavaScript logic for tab switching and lightbox
- Debugging specific CSS issues
- Generating SVG wireframe layouts that I then refined in Figma
What I did myself:
- All HTML structure and content
- All CSS design decisions, layout, and styling
- All UX case study research, design thinking, and design decisions
- All visual design in Figma including color schemes, typography, and screen layouts
- Deployment, DNS configuration, and GitHub setup
- HTML5
- CSS3
- Vanilla JavaScript
- GitHub Pages — hosting
- Namecheap — domain
The site is a set of plain HTML files sharing one stylesheet and one JavaScript file. Each case study and architecture project has its own HTML page. All images are organized in subfolders by project inside the images directory.
Hosted on GitHub Pages with a custom domain configured through Namecheap DNS. Any push to the main branch deploys automatically.
© 2026 Angela Read