A pixel-perfect static recreation of Evernote's website built with semantic HTML and a custom CSS design system. The project demonstrates attention to design fidelity, component-based CSS architecture, and responsive layout techniques.
The CSS architecture separates concerns into three files: reset.css for browser normalization, design-system.css for tokens and component styles, and main.css for page-specific layouts. This modular approach mirrors real-world design system practices.
Recreating a production website taught me how professional teams structure their CSS, manage image assets, and think about design systems. Comparing the semantic and non-semantic versions highlighted how HTML structure impacts accessibility and maintainability.