A comprehensive, professional portfolio website showcasing my skills, experience, and projects in Computer Information Systems, Web Development, and Cybersecurity.
Live Site: View Portfolio
This portfolio website was created as the term project for BU's Web Application Development course (MET CS601). The project demonstrates mastery of modern web development technologies including HTML5, CSS3, JavaScript, React, and TypeScript.
- Create a professional online presence showcasing my skills and experience
- Demonstrate proficiency in web development technologies
- Provide a platform for potential employers and collaborators to learn about my work
- Implement modern, responsive design principles
- Showcase both technical skills and professional accomplishments
- 6 Content Pages:
- Home - Landing page with hero section and overview
- About - Biography, interests, education timeline, and values
- Resume - Detailed professional experience and skills
- Portfolio - Project showcase with filtering capabilities
- Gallery - Photo gallery with lightbox functionality
- Contact - Interactive contact form with validation
- Responsive Navigation - Mobile-friendly hamburger menu with smooth transitions
- Form Validation - Real-time client-side validation with helpful error messages
- Portfolio Filtering - Dynamic project filtering by category
- Gallery Lightbox - Full-screen image viewer with keyboard navigation
- Smooth Animations - Scroll-triggered animations and transitions
- Skill Progress Bars - Animated proficiency indicators
- Stats Counter - Animated numerical counters
- Fully Responsive - Optimized for mobile, tablet, and desktop screens
- Modern UI/UX - Clean, professional design with intuitive navigation
- Accessibility - Semantic HTML, ARIA labels, keyboard navigation
- Performance - Optimized images, efficient CSS, minimal JavaScript
- Print Styles - Printer-friendly resume page
| Technology | Implementation |
|---|---|
| HTML5 | Semantic markup, forms, media elements |
| CSS3 | Flexbox, Grid, animations, custom properties |
| JavaScript | ES6+, DOM manipulation, event handling |
| React | Component-based architecture, hooks |
| TypeScript | Type-safe React components |
✅ CSS Grid & Flexbox - Responsive layouts without frameworks
✅ TypeScript - Type-safe React component implementation
✅ DOM Manipulation - Extensive use of JavaScript DOM APIs
✅ Form Validation - Comprehensive client-side validation
✅ Accessibility - WCAG 2.1 compliant design
Portfolio-Project/ ├── index.html # Home page ├── about.html # About page ├── resume.html # Resume page ├── portfolio.html # Portfolio page ├── gallery.html # Gallery page ├── contact.html # Contact page ├── styles.css # Main stylesheet (1000+ lines) ├── script.js # JavaScript functionality ├── skills-showcase.tsx # React/TypeScript component (Extra Credit) ├── assets/ # Contains downloadble .pdf │ └── Morgan_Rogers_Resume.pdf ├── images/ # Image assets │ ├── ad-man.jpg │ ├── auto-scripts.jpg │ ├── contact-form.jpg │ ├── fresh-market.jpg │ ├── github.jpg │ ├── home-lab.jpg │ ├── net-tools.jpg │ ├── Profile.jpg │ ├── sec-an.jpg │ ├── sec-lab.jpg │ ├── vm.jpg │ └── web-dev.jpg └── README.md # This file