Select a result to preview

#portfolio #web-development #frontend #retro-design #personal-website

Details

My portfolio website featuring a 1980s-90s consumer electronics theme with interactive CRT television interface. The site showcases my professional experience, education, and technical projects complete with:

Key Information

Field Value
Live URL https://maws.is-a.dev/
GitHub Profile https://github.com/Maws7140
Primary Language Vanilla JavaScript (no frameworks)
Styling CSS3 (Custom Properties, Grid, Flexbox, Animations)
Deployment GitHub Pages / Custom Domain
Stars/Engagement 10 stars, 2 forks (Maws-vault-v1)
Design Theme Retro CRT/TV Electronics

Live Site Structure

Main Sections

Portfolio Layout:
├── Hero Section - Interactive TV Display
│   ├── CRT TV Frame (project channels)
│   └── Remote Control (navigation)
├── Experience Section - "MAWS TV Guide"
│   ├── Education Timeline
│   ├── Work Experience
│   └── Certifications
├── Contact Section - DVD Menu Theme
│   ├── Bouncing Logo Animation
│   └── Interactive Menu Items
└── Skills Bar - Scrolling Technology Ticker

Projects Showcased

1. UFC Predictor

Technologies: Python, Scikit-learn, Azure
Description: Full-stack Flask application predicting fight outcomes with 78% accuracy
Link: https://github.com/Maws7140/ufc-predictor
Channel: Featured on main TV display

2. Storyteller Suite

Technologies: TypeScript, esbuild, Vitest
Description: Obsidian plugin with 2,000+ users featuring entity management capabilities
Link: https://www.obsidianstats.com/plugins/storyteller-suite
Impact: Active user base in Obsidian community

3. Java Scheduler

Technologies: Java, JDBC, Apache Derby
Description: Data management application emphasizing OOP design and database persistence
Link: https://maws7140.github.io/CourseScheduler/
Focus: Academic project demonstrating software engineering principles

4. Trading Bot

Technologies: Python, Robinhood API, Schwab API
Description: Freelance project integrating multiple exchange platforms
Link: https://github.com/Maws7140/robin_schwab_trader
Status: Freelance commission work

5. Flashly

Technologies: TypeScript
Description: Automated flashcard generation tool
Type: Obsidian plugin

6. GeoDistance

Technologies: HTML, JavaScript, Maps API
Description: Geographic distance calculator

7. UFC Sellthrough

Technologies: PySpark, MLlib, GraphFrames
Description: Performance analysis and visualization system

8. Study Group AI

Technologies: Next.js, FastAPI, LangChain, Gemini
Description: RAG-powered Q&A hub for collaborative learning

Technical Implementation

Frontend Technologies

Core Stack:
- Vanilla JavaScript (no framework dependency)
- CSS3 Custom Properties
- HTML5 Semantic Elements
- Google Fonts: VT323, Press Start 2P (retro typography)

Design Features

1. CRT Monitor Effects

Scanline Overlay:

/* Global scanlines effect */
- Horizontal lines with semi-transparent repeating gradient
- Red/green/blue RGB color separation
- Mimics vintage monitor phosphor artifacts

Visual Details:

2. Interactive TV Remote

Features:

Functionality:

Channel Switching:
- JavaScript-powered content switching
- Static fuzz transition animation
- Dynamic content loading per channel
- State management for active channel

3. TV Guide Layout

Experience Timeline:

MAWS TV Guide Format:
| Channel | Date/Era | Program |
|---------|----------|---------|
| Education | 2022-Present | Penn State CS |
| Work | May-Aug 2025 | Azure DevOps Intern |
| Freelance | Jun 2025+ | Trading Bot Developer |

Features:

4. DVD Menu Contact Section

Bouncing Logo Animation:

Physics Simulation:
- Corner-to-corner bouncing animation
- Classic DVD screensaver behavior
- Velocity-based movement
- Edge collision detection

Interactive Menu:

5. Skill Ticker Bar

Scrolling Technology Display:

Technologies Shown:
- Languages: Python, SQL, Java, JavaScript, TypeScript
- Cloud: Azure (DevOps, Data Factory, AD), AWS
- Frameworks: Flask, Next.js, FastAPI
- ML/Data: Scikit-learn, Pandas, NumPy
- Tools: REST APIs, Git, JDBC

Implementation:

Responsive Design

Breakpoints:

Desktop (>1200px):
- Full TV remote with all controls
- Wide TV guide grid
- Full scanline effects

Tablet (768px-1200px):
- Scaled remote control
- Adjusted padding and borders
- Optimized grid columns

Mobile (<768px):
- Compact remote layout
- Stacked content sections
- Reduced scanline intensity
- Touch-optimized controls

Mobile Optimizations:

Professional Information

Education

Pennsylvania State University (Aug 2022 – Present)

Certifications:

Work Experience

Covenant Global Services Intern (May – Aug 2025)

Freelance Python Developer (Jun 2025 – Present)

Contact Information

Platform Link
CV https://share.note.sx/o6txmoua
Email feranwb@gmail.com
GitHub https://github.com/Maws7140
LinkedIn https://www.linkedin.com/in/oluwaferanmi-wale-bogunjoko-72160b2bb/

Technical Skills Demonstrated

Frontend Development

Creative Design

UX/UI Principles

Unique Features

1. Channel Navigation System

Innovation: Using a TV remote as primary navigation is creative and memorable

2. Authentic Retro Aesthetic

Attention to Detail:

3. Easter Eggs & Delight

Performance Considerations

Optimizations:

Accessibility:

Design Philosophy

Retro-Futurism

Blends 1980s-90s nostalgia with modern web standards:

Storytelling Through Design

Each section tells a story:

The TV metaphor creates cohesive narrative thread throughout portfolio.

Development Insights

Challenges Solved

  1. CRT Effect Authenticity

    • Researched actual CRT monitor characteristics
    • Implemented accurate scanline patterns
    • RGB separation for phosphor glow effect

  2. Responsive Remote Control

    • Scaling complex SVG/HTML structure
    • Maintaining aspect ratio across devices
    • Touch vs. click interactions

  3. Channel Switching Animation

    • Smooth content transitions
    • Static fuzz effect timing
    • State management without framework

  4. Performance vs. Visual Fidelity

    • Balanced heavy visual effects with performance
    • CSS transforms over JavaScript animations
    • Optimized scanline overlay

Technical Decisions

Why Vanilla JavaScript?

Why Retro Theme?

Comparison to Standard Portfolios

Feature KING MAWS Typical Portfolio
Navigation TV Remote Channels Scroll or Menu Bar
Visual Theme Retro CRT Electronics Modern Minimalist
Project Display TV Channels Grid/Cards
Experience TV Guide Timeline Linear Timeline
Contact DVD Menu Contact Form
Memorability High (unique theme) Medium-Low
Technical Showcase CSS/JS Mastery Framework Usage

Future Enhancements

Potential additions while maintaining retro theme:

  1. Audio Effects

    • Channel switch static sound
    • Button click feedback
    • VHS tracking noise

  2. Additional Channels

    • Blog posts as "TV shows"
    • Code snippets as "commercials"
    • Testimonials as "news broadcasts"

  3. Extended Interactivity

    • Volume control affects text size
    • Antenna adjustment changes signal quality
    • Color/tint knobs adjust theme colors

  4. Archive Mode

    • Time travel through career history
    • "Rerun" old project versions
    • Historical screenshots

Impact & Reception

Professional Benefits

Technical Showcase

The portfolio showcases 8 major projects spanning:

See individual project notes for detailed documentation:

Technologies Summary

Category Technologies
Frontend Vanilla JavaScript, HTML5, CSS3
Styling Custom Properties, Grid, Flexbox, Animations
Typography VT323, Press Start 2P (Google Fonts)
Effects Scanlines, RGB separation, transforms, transitions
Deployment GitHub Pages (assumed)
Domain is-a.dev (free subdomain service)

Source Code

GitHub Profile: https://github.com/Maws7140
Repository Note: The specific portfolio repository may be private or under a different name. The live site is accessible at https://maws.is-a.dev/

Key Achievements

Learning Outcomes

Web Development Mastery

  1. Vanilla JavaScript Proficiency

    • No dependency on frameworks
    • DOM manipulation expertise
    • Event handling and state management

  2. Advanced CSS Techniques

    • Custom property usage
    • Complex animations and transforms
    • Visual effect implementation (scanlines, glow)

  3. Responsive Design

    • Mobile-first approach
    • Breakpoint strategy
    • Touch vs. mouse interactions

Creative Development

  1. Thematic Consistency

    • Unified design language
    • Metaphor-driven navigation
    • Cohesive user experience

  2. Attention to Detail

    • Authentic retro aesthetics
    • Physics-based animations
    • Easter eggs and delight moments

  3. User-Centered Design

    • Intuitive navigation
    • Accessible interactions
    • Performance optimization

Status: Live and Deployed
URL: https://maws.is-a.dev/
Last Updated: January 2026

This portfolio successfully combines technical expertise with creative design, creating a memorable professional presence that stands out in the competitive tech industry. The retro CRT theme is not just visually appealing but serves as a demonstration of advanced frontend development skills.