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 links

📂 Project Structure

├── css/
├── js/
├── img/               # Images and thumbnails
├── fonts/             # Custom fonts
├── 404.html           # 404 page
├── index.html         # Main HTML file
├── README.md          # This page
└── 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 (with Sass precompiled into minified CSS)
• JavaScript (ES6+)
• 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
• Dynamic footer year injection

🧪 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

🧑‍💻 Developer Notes

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

1. Clone the repo:

   git clone https://github.com/natashapl/portfolio-site.git

2. Open index.html in your browser - no build process required.

3. If modifying styles/scripts:

   • Update your Sass/JS source files
   • Minify as needed before deployment

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

📬 Contact

If you're interested in working together or have any questions:

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