Natasha's Personal Portfolio

Welcome to my personal portfolio site - a hand-coded one-pager that showcases my work as a Design Technologist, Front-End Developer, and UI/UX Engineer. This project was built using only HTML5, CSS3, and vanilla JavaScript - no frameworks or libraries - to highlight my foundational front-end skills and design sensibilities.

🧠 Overview

This site includes:

• A responsive layout and custom design
• Dynamic portfolio filtering (JavaScript)
• Accessible navigation with ARIA roles and keyboard support
• Theme switcher (light/dark mode)
• Interactive slide-in project details panel
• Testimonials and contact form

📂 Project Structure

├── css/               # Stylesheets (compiled from SCSS)
├── js/                # JavaScript files
├── img/               # Images and thumbnails
├── fonts/             # Custom fonts
├── 404.html           # 404 page
├── index.html         # Main HTML file
├── package.json       # Build configuration
├── README.md          # This file
└── site.webmanifest   # Web app manifest

💡 Motivation

This project was created to:

• Demonstrate proficiency in semantic HTML, CSS architecture, and vanilla JavaScript
• Showcase real-world examples of front-end work I've contributed to
• Implement accessible, performant, and scalable front-end patterns without relying on frameworks

🔗 Live Site

👉 natashasfolio.com

🛠 Built With

• HTML5
• CSS3 (Sass preprocessed and minified)
• Vanilla JavaScript (ES6+)
• Google Apps Script (contact form backend)
• No frameworks or CSS libraries

✨ Features

• Responsive layout optimized for desktop and mobile
• Category-based project filtering
• Accessible keyboard navigation and ARIA attributes
• Interactive modal-style portfolio detail viewer
• Dark/light theme toggle with preference saved to localStorage
• Fully functional contact form with spam protection
• Dynamic footer year injection
• Optimized performance (Lighthouse scores: ~100 across all metrics)

🧪 Accessibility Notes

This site follows accessibility best practices:

• Skip-to-content link
• Semantic HTML tags
• aria-* attributes for dynamic elements
• Keyboard support for navigation, toggles, and filters
• WCAG 2.1 AA compliant

🧑‍💻 Developer Setup

If you'd like to run or customize this project:

1. Clone the repo:

   git clone https://github.com/natashapl/natashasfolio.git
   cd natashasfolio

2. Install dependencies:

   npm install

3. Start development (auto-compiles SCSS & JS on save):

   npm run dev

4. Build for production:

   npm run build

5. Open index.html in your browser or deploy to your preferred hosting.

🚫 Note: PRs are not accepted. This is a personal portfolio project.

📬 Contact

Interested in working together or have questions?

• Email: natashapl@natashasfolio.com
• LinkedIn: linkedin.com/in/natashapl
• Instagram: @natashasworld
• GitHub: @natashapl

---

© 2026 Natasha Pierre-Louis. All Rights Reserved.