Skip to content

README.md

Latest commit

 

History

History
108 lines (84 loc) · 4.15 KB

README.md

File metadata and controls

108 lines (84 loc) · 4.15 KB
Raw

Morgan Rogers - Professional Portfolio

A comprehensive, professional portfolio website showcasing my skills, experience, and projects in Computer Information Systems, Web Development, and Cybersecurity.

Live Site: View Portfolio

Project Overview

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.

Project Goals

  • 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

Features

Core Features

  • 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

Interactive Elements

  • 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

Design Highlights

  • 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

Technologies Used

Core Technologies (Required)

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

Advanced Features (Extra Credit)

✅ 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

Project Structure

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