A fully functional professional portfolio website showcasing data analytics expertise, creative hobby passion, and interactive web development skills. The site features a responsive Bootstrap-based portfolio, a from-scratch custom-coded hobby page, and an interactive personality quiz game.
🌐 Live Site: https://mwardledugan.github.io/WebDev-Project/
WebDev-Project/
├── index.html # Professional homepage with portfolio
├── resume.html # HTML resume with section navigation
├── about.html # Professional bio page
├── css/
│ └── style.css # Professional page styling (pink theme #e91e63)
├── images/
│ ├── Painting.png # Artwork 1
│ ├── Painting2.png # Artwork 2
│ ├── Painting3.png # Artwork 3
│ └── Painting4.png # Artwork 4
├── scratch-page/
│ ├── index.html # From-scratch painting hobby page
│ └── painting-styles.css # Custom CSS (600+ lines)
├── web-app/
│ └── index.html # Would You Rather Game (HTML/CSS/JS)
└── README.md # This file
-
index.html - Portfolio homepage with:
- Navigation bar with smooth anchor scrolling
- Featured projects section (Tableau, Data Visualization, SQL)
- Skills showcase
- Links to painting hobby page and interactive game
- Social links (LinkedIn, GitHub, Email)
- Responsive design across all screen sizes
-
resume.html - Professional resume with:
- Sticky sidebar navigation (Quick Links + Sections)
- 6 organized resume sections with smooth scrolling
- Education, Experience, Skills, Projects, Certifications, Languages
- Download PDF functionality
- Styled with custom pink theme
-
about.html - Professional bio page
- Company and role information
- Professional narrative and skills
- Responsive card layouts
File: scratch-page/index.html
Demonstrates advanced HTML/CSS skills with:
- ✅ Nested Lists - Bulleted lists within numbered lists
- ✅ Multiple Images - 4 artwork images with captions
- ✅ Embedded YouTube Video - Painting tutorial link
- ✅ On-Page Anchors - 4 sections (About, Gallery, Tableau, Bridge)
- ✅ Custom Background - Gradient backgrounds and overlays
- ✅ Advanced CSS - 600+ lines including:
- Font family specifications (Poppins, Playfair Display, Open Sans)
- Font colors and opacity variations
- Div positioning (flexbox, grid, absolute positioning)
- 3+ divs for layout structure
- Smooth transitions and animations
- ✅ Interactive Tableau Visualization - Social media impact data chart
- ✅ Navigation - Links back to portfolio and game pages
Content: Explores the connection between painting as a creative practice and professional data analytics work. Includes:
- Personal narrative about painting practice
- How painting skills translate to work (presence, problem-solving, visual communication)
- Gallery of artwork
- Educational resources
- Tableau data visualization on creative work impact
File: web-app/index.html
A personality quiz game built with HTML/CSS/JavaScript featuring:
- 50 hilarious "would you rather" questions covering ridiculous dilemmas
- 15 random questions per game - different selection every playthrough
- Quirky point system - 0-4 points per answer with randomized combinations
- 10 personality result tiers:
- 🎯 Perfectly Sensible (0-4 points)
- 📚 Wise Conservative (5-9 points)
- 🎯 Pragmatic Soul (10-14 points)
- 🌟 Grounded Explorer (15-19 points)
- ⭐ Balanced Adventurer (20-24 points)
- ✨ Spirited Rebel (25-29 points)
- 🚀 Adventurous Spirit (30-34 points)
- 🎨 Creative Chaos (35-39 points)
- 🎪 Certified Weirdo (40-44 points)
- 🌈 Ultimate Chaos Agent (45-50 points)
Features:
- Real-time score tracking with progress bar
- Personality judgments after each answer
- 1.5-second transition between questions
- Smooth animations and polished UI
- Personality results screen with detailed descriptions
From Portfolio:
- Home page with links to resume, about, painting page, and game
- Anchor links to projects and skills sections
- All social media links
From Painting Page:
- Navigation bar with page sections
- Link to play the game
- Back to portfolio link
From Game Page:
- Link to view art
- Back to portfolio link
All pages are fully interconnected for seamless user experience!
- HTML5 - Semantic markup
- CSS3 - Custom styling with gradients, flexbox, transitions
- JavaScript - Game logic, interactive features, animations
- Bootstrap 5.3.0 - Professional page framework
- Tableau Public - Interactive data visualization
- YouTube API - Embedded video content
- GitHub Pages - Web hosting
- Mobile-friendly layouts
- Tested across device sizes
- Smooth navigation experience
- Smooth scroll behavior with navbar offset calculations
- Fast gameplay with optimized timing
- Clear visual feedback for interactions
- Professional color scheme (pink #e91e63 theme)
- Optimized image loading
- Efficient CSS selectors
- Minimal JavaScript footprint
- GitHub Pages CDN deployment
✅ Professional Bootstrap pages (index, resume, about) ✅ From-scratch HTML/CSS hobby page with all components ✅ Custom stylesheet (600+ lines) ✅ Responsive design across all pages ✅ Interactive web app (personality quiz game) ✅ Navigation between all pages ✅ GitHub Pages deployment ✅ Image gallery with 4+ images ✅ Embedded YouTube video ✅ Interactive Tableau visualization ✅ On-page anchor links with smooth scrolling ✅ Nested lists ✅ Multiple CSS styling techniques ✅ JavaScript interactivity
- View Online: Visit https://mwardledugan.github.io/WebDev-Project/
- Navigate Pages: Use the navigation bar or page links
- Play Game: Click "Play Game" button - choose answers and discover your personality!
- View Art: Explore the painting hobby page with gallery and video
- Read Resume: Check out the organized resume with section navigation
- Smooth Scrolling: Custom JavaScript calculates navbar height for accurate anchor positioning
- Game Randomization: Fisher-Yates shuffle algorithm ensures different question order each game
- Personality Scoring: Dynamic tier assignment based on point accumulation
- Tab Management: Game and painting pages open in new tabs with proper closing functionality
- Custom Theme: Consistent pink (#e91e63) branding across professional pages
Maisa Wardle-Dugan
- Portfolio: https://mwardledugan.github.io/WebDev-Project/
- GitHub: https://github.com/mwardledugan
- LinkedIn: https://www.linkedin.com/in/maisa-wardle-dugan-4659781a5/
April 15, 2026
- Test all links work (internal and external)
- Test YouTube video plays when hosted online
- Verify Tableau graph loads
- Test responsive design on mobile
- Test web app functionality
- Deploy to GitHub Pages
- Local Testing: Images and local assets will work when testing locally
- YouTube Videos: Will NOT work locally but WILL work once hosted online
- Tableau Graphs: Requires internet connection to display
- Social Links: Update the footer links to your actual profiles
- Customize the content in all HTML files with your real information
- Update the scratch page with your chosen topic
- Test all functionality locally
- Push to GitHub for online hosting
- Verify everything works on your live domain
Good luck! Your portfolio is ready to showcase! 🎉