# Joseph Bidias - Interactive Portfolio ## 🚀 Live Demo **[View Portfolio](https://javascript-dom-portfolio.netlify.app/)** [](https://app.netlify.com/sites/javascript-dom-portfolio/deploys) ## 📋 Overview A modern, interactive portfolio showcasing Joseph Bidias as a Quantitative Researcher & Software Engineer. This project demonstrates advanced JavaScript DOM manipulation techniques, creating a dynamic and engaging user experience with futuristic design elements and professional functionality. ## 🎨 Visual Presentation ### 🖼️ Portfolio Screenshots #### 🌟 Hero Section - Matrix Rain Animation ``` ┌─────────────────────────────────────────────────────────────┐ │ ████████ â–„â–„â–„â–„â–„â–„â–„ ████████ ████████ â–„â–„â–„â–„â–„â–„â–„ ██████ │ │ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ │ │ ████████ ██████ ████████ ██████ ████████ ████████ │ │ │ │ Joseph Bidias │ │ Quantitative Researcher & │ │ Software Engineer │ │ │ │ [Theme Toggle] [Mobile Menu] [Contact] │ └─────────────────────────────────────────────────────────────┘ ``` #### 🎯 Interactive Features Visual Guide ``` 🌙 Theme Toggle 📱 Mobile Menu ⌨️ Typewriter Effect ┌─────────────┐ ┌─────────────┐ ┌─────────────────┐ │ ☀️ Light │ │ ≡ Menu │ │ Hello, I'm a... │ │ 🌙 Dark │ ───► │ About │ ───► │ Developerâ–ˆ │ │ Auto Switch │ │ Projects │ │ Researcherâ–ˆ │ └─────────────┘ │ Contact │ │ Problem Solverâ–ˆ │ └─────────────┘ └─────────────────┘ 📝 Form Validation 🔍 Project Filter 🎠 Mobile Carousel ┌─────────────┐ ┌─────────────┐ ┌─────────────────┐ │ Name: ✓ │ │ [All] React │ │ ← Project 1 → │ │ Email: ✗ │ ───► │ Node Python │ ───► │ Project 2 │ │ Message: ✓ │ │ AI/ML Vue │ │ Project 3 │ └─────────────┘ └─────────────┘ └─────────────────┘ ``` ### 🎨 Color Palette & Design System #### 🌙 Dark Theme (Default) ```css Primary Colors: ├── Matrix Green: #00ff88 (Accent & Highlights) ├── Deep Black: #0a0a0a (Background) ├── Dark Gray: #1a1a1a (Cards & Sections) └── Light Green: #4ade80 (Secondary Actions) Text Colors: ├── Primary Text: #ffffff (Headings) ├── Secondary Text: #e5e7eb (Body Text) ├── Muted Text: #9ca3af (Captions) └── Success: #10b981 (Form Success) ``` #### ☀️ Light Theme ```css Primary Colors: ├── Professional Blue: #3498db (Accent & Highlights) ├── Clean White: #ffffff (Background) ├── Light Gray: #f8f9fa (Cards & Sections) └── Sky Blue: #60a5fa (Secondary Actions) Text Colors: ├── Primary Text: #1f2937 (Headings) ├── Secondary Text: #374151 (Body Text) ├── Muted Text: #6b7280 (Captions) └── Info: #2563eb (Form Info) ``` ### 🔄 Animation Showcase #### ✨ Matrix Rain Effect ``` Column 1 Column 2 Column 3 Column 4 ↓ ↓ ↓ ↓ 01001010 01000001 01001100 01001110 01001111 01001001 01000101 01000101 01010011 01010010 01000001 01010100 01000101 01000101 01010010 01010111 01010000 01010011 01001110 01001111 01001000 01000101 01001001 01010010 ↓ ↓ ↓ ↓ ``` #### 🌊 Glitch Text Animation ``` Frame 1: Joseph Bidias Frame 2: JÌ´o̵s̶eÌ·p̸h̵ ̶BÌ·i̸d̵i̶aÌ·s̸ Frame 3: ꞁoseph ßidias Frame 4: Joseph Bidias ``` #### 📊 Progress Bar Animation ``` Skills Progress: JavaScript ████████████████████ 95% Python ███████████████████▒ 90% React ██████████████████▒▒ 85% Node.js █████████████████▒▒▒ 80% ``` ## ✨ Key Features ### 🎨 Interactive Design Elements - **Matrix Rain Animation**: Dynamic binary code background with cascading green characters - **Glitch Text Effects**: Animated title with cyberpunk-style distortion - **Theme Toggle**: Seamless dark/light mode switching with localStorage persistence - **Futuristic UI**: Neon brackets, underglow effects, and sci-fi styling - **Smooth Animations**: CSS transitions and JavaScript-powered effects ### 🛠️ Advanced DOM Manipulation - **Dynamic Content Loading**: Real-time project data rendering - **Interactive Navigation**: Mobile-friendly hamburger menu with smooth animations - **Form Validation**: Client-side contact form with real-time feedback - **Project Filtering**: Dynamic filtering by technology stack - **Scroll Progress**: Visual indicator showing page scroll position - **Typewriter Effect**: Animated typing for hero section text ### 📱 Responsive & Accessible - **Mobile-First Design**: Optimized for all device sizes - **Touch Gestures**: Swipe support for mobile project carousel - **Keyboard Navigation**: Full accessibility with helpful shortcuts - **ARIA Compliance**: Screen reader support and semantic markup - **Progressive Enhancement**: Works without JavaScript enabled ## 🏗️ Technical Implementation ### Technologies & Tools - **Frontend**: HTML5, CSS3, Vanilla JavaScript (ES6+) - **Styling**: CSS Grid, Flexbox, CSS Custom Properties - **Icons**: Font Awesome 6.4.0 with fallback systems - **Fonts**: Google Fonts (EB Garamond, Fira Code) - **Deployment**: Netlify with continuous deployment - **Version Control**: Git with GitHub Actions workflow ### Advanced JavaScript Features - **DOM Manipulation**: Pure vanilla JavaScript - no frameworks - **Event Handling**: Comprehensive user interaction management - **State Management**: Theme preferences and UI state tracking - **Local Storage**: Persistent user preferences - **Intersection Observer**: Performance-optimized scroll animations - **Media Query API**: JavaScript-based responsive behavior ### Performance Optimizations - **Debounced Events**: Optimized scroll and resize handlers - **GPU Acceleration**: CSS transforms for smooth animations - **Efficient Queries**: DOM caching and reduced reflows - **Lazy Loading**: Progressive content enhancement - **Reduced Motion**: Accessibility-first animation approach ## 🎯 Interactive Features Showcase ### 🌙 1. Theme Toggling System - **Functionality**: Dynamic dark/light mode switching - **Implementation**: CSS custom properties with JavaScript control - **Persistence**: localStorage for user preference retention - **Keyboard Shortcut**: Press `T` to toggle theme ### 📱 2. Mobile Navigation Menu - **Features**: Animated hamburger menu with smooth slide transitions - **Accessibility**: ARIA labels and keyboard navigation support - **Interactions**: Outside click and escape key to close - **Keyboard Shortcut**: Press `M` to toggle mobile menu ### ⌨️ 3. Typewriter Animation - **Effect**: Character-by-character typing animation - **Customization**: Configurable speeds and phrase rotation - **Implementation**: Pure JavaScript with realistic timing ### 📝 4. Advanced Form Validation - **Real-time Feedback**: Immediate validation with custom messages - **Features**: Email validation, character counting, visual states - **Accessibility**: Error announcements and clear feedback ### 🔍 5. Project Filtering System - **Dynamic Filtering**: Sort projects by technology stack - **Categories**: React, Node.js, Python, AI/ML, and more - **Animations**: Smooth transitions for filtered results - **Keyboard Shortcut**: Press `F` to focus filters ### 🎠 6. Touch-Friendly Carousel - **Mobile Optimized**: Swipe gestures and navigation indicators - **Responsive**: Grid layout on desktop, carousel on mobile - **Auto-play**: Optional automatic progression ### 📊 7. Scroll Progress Indicator - **Visual Feedback**: Fixed position progress bar - **Smooth Updates**: Real-time scroll position tracking - **Gradient Styling**: Professional visual design ### 📈 8. Animated Skill Bars - **Trigger**: Intersection Observer for scroll-based animation - **Performance**: Optimized with requestAnimationFrame - **Visual Appeal**: Smooth progress bar animations ### 🌊 9. Smooth Scrolling Navigation - **Behavior**: Smooth section transitions with offset calculation - **Active States**: Dynamic navigation highlighting - **Keyboard Shortcuts**: Number keys 1-4 for section navigation ### ⌨️ 10. Comprehensive Keyboard Support - **Full Navigation**: Complete keyboard accessibility - **Shortcuts Available**: - `1-4`: Navigate to sections (Hero, About, Projects, Contact) - `T`: Toggle theme mode - `M`: Toggle mobile menu - `F`: Focus on project filters - `Esc`: Close open menus and modals ## 🌐 Deployment & Hosting ### Netlify Deployment - **Platform**: Netlify with automatic SSL and global CDN - **URL**: [javascript-dom-portfolio.netlify.app](https://javascript-dom-portfolio.netlify.app/) - **Features**: - Continuous deployment from GitHub - Automatic HTTPS with SSL certificates - Global CDN for fast worldwide access - Build optimization and compression ### GitHub Integration - **Repository**: [JavaScript-DOM-Portfolio](https://github.com/eaglepython/JavaScript-DOM-Portfolio) - **Workflow**: GitHub Actions for automated deployment - **Branch Protection**: Main branch with deployment triggers - **Version Control**: Full git history and collaboration support ### Performance Metrics - **Lighthouse Score**: 95+ Performance rating - **First Contentful Paint**: < 1.5 seconds - **Time to Interactive**: < 2.5 seconds - **Mobile Optimization**: 100% responsive compatibility ## 📁 Project Structure ``` JavaScript-DOM-Portfolio/ ├── index.html # Main HTML structure ├── assets/ │ ├── css/ │ │ ├── styles.css # Core styling │ │ └── interactive-styles.css # Animation & interaction styles │ ├── js/ │ │ ├── script.js # Core JavaScript functionality │ │ └── enhanced-features.js # Additional interactive features │ └── images/ │ ├── profile.jpg # Professional profile photo │ └── projects/ # Project screenshots ├── .github/ │ └── workflows/ │ └── deploy.yml # GitHub Actions deployment ├── .netlify/ # Netlify configuration ├── .nojekyll # GitHub Pages compatibility ├── netlify.toml # Netlify build settings └── README.md # Project documentation ``` ## 🖥️ Responsive Design Showcase ### 📱 Mobile Layout (320px - 768px) ``` ┌─────────────────────────┐ │ ≡ 🌙 │ ← Header with hamburger menu ├─────────────────────────┤ │ │ │ [Profile Photo] │ ← Centered hero content │ │ │ Joseph Bidias │ │ Software Engineer │ │ │ ├─────────────────────────┤ │ ⬅️ [Project 1/3] ➡️ │ ← Swipeable carousel ├─────────────────────────┤ │ │ │ Stacked Contact │ ← Vertical form layout │ Form │ │ │ └─────────────────────────┘ ``` ### 💻 Desktop Layout (1024px+) ``` ┌─────────────────────────────────────────────────────────────┐ │ Home About Projects Contact 🌙 Theme │ ← Fixed navigation ├─────────────────────────────────────────────────────────────┤ │ │ │ [Profile] Joseph Bidias Matrix │ ← Hero section │ Photo Quantitative Researcher Rain │ with animation │ & Software Engineer Background │ │ │ ├─────────────────────────────────────────────────────────────┤ │ [Project 1] [Project 2] [Project 3] [Project 4] │ ← Grid layout ├─────────────────────────────────────────────────────────────┤ │ Contact Form Social Links │ ← Two-column │ [Name ] [Email ] [GitHub] │ contact section │ [Message ] [LinkedIn] │ └─────────────────────────────────────────────────────────────┘ ``` ### 📊 Interactive Element States #### 🎯 Button States Visualization ``` Default State: Hover State: Active State: ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │ Contact │ ───► │ ✨ Contact ✨│ ───► │ âš¡ Contact ⚡│ │ #00ff88 │ │ Glow Effect │ │ Pressed │ └─────────────┘ └─────────────┘ └─────────────┘ Form Validation: Filter Active: Navigation: ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │ Email ✗ │ │ [React] ✓ │ │ About ● │ │ Invalid │ │ [Node] â—‹ │ │ Projects │ │ #ef4444 │ │ [Python] â—‹ │ │ Contact │ └─────────────┘ └─────────────┘ └─────────────┘ ``` ## 🎨 Design Philosophy ### Visual Identity - **Cyberpunk Aesthetic**: Matrix-inspired design with neon green accents - **Professional Balance**: Futuristic elements with clean, readable content - **Dark-First Design**: Optimized for modern dark mode preferences - **Accessible Colors**: High contrast ratios and colorblind-friendly palette ### User Experience Principles - **Progressive Enhancement**: Core functionality without JavaScript - **Mobile-First Approach**: Touch-optimized interactions - **Performance-Focused**: Fast loading and smooth animations - **Accessibility-Driven**: WCAG 2.1 compliance and keyboard navigation ## 🎭 User Interface Elements ### 🎪 Component Gallery #### 🏷️ Project Cards ``` ┌─────────────────────────────────────┐ │ 📷 [Project Screenshot] │ │ │ │ 🚀 E-Commerce Platform │ ← Project title │ ─────────────────────────────────── │ │ Full-stack online store with │ ← Description │ payment integration and user auth │ │ │ │ 🏷️ React Node.js MongoDB Stripe │ ← Tech tags │ │ │ [🔗 Live Demo] [📁 GitHub] │ ← Action buttons └─────────────────────────────────────┘ ``` #### 📧 Contact Form ``` ┌─────────────────────────────────────┐ │ 📞 Get In Touch │ │ ─────────────────────────────────── │ │ │ │ 👤 Name │ │ ┌─────────────────────────────────┐ │ │ │ Your name here... │ │ │ └─────────────────────────────────┘ │ │ │ │ 📧 Email ✓ Valid │ │ ┌─────────────────────────────────┐ │ │ │ [email protected] │ │ │ └─────────────────────────────────┘ │ │ │ │ 💬 Message 250/500 │ │ ┌─────────────────────────────────┐ │ │ │ Your message here... │ │ │ │ │ │ │ │ │ │ │ └─────────────────────────────────┘ │ │ │ │ [✨ Send Message ✨] │ └─────────────────────────────────────┘ ``` #### 🎮 Interactive Navigation ``` Desktop Navigation: ┌─────────────────────────────────────────────────────────┐ │ Joseph Bidias [Home] [About] [Projects] [Contact] 🌙 │ └─────────────────────────────────────────────────────────┘ Mobile Navigation (Collapsed): ┌─────────────────────────┐ │ ≡ Joseph Bidias 🌙 │ └─────────────────────────┘ Mobile Navigation (Expanded): ┌─────────────────────────┐ │ ✕ Joseph Bidias 🌙 │ ├─────────────────────────┤ │ │ │ 🏠 Home │ │ 👤 About │ │ 💼 Projects │ │ 📞 Contact │ │ │ └─────────────────────────┘ ``` ### 🎯 Interactive States & Animations #### âš¡ Loading States ``` Theme Toggle Loading: 🌙 → 🔄 → ☀️ Form Submission: [Send Message] → [⏳ Sending...] → [✅ Sent!] Project Filter: [All Projects] → [🔍 Filtering...] → [React Projects] Page Load: Matrix Rain → Profile Fade In → Content Slide Up ``` #### 🎪 Hover Effects ``` Button Hover: Normal: [Contact] Hover: [✨ Contact ✨] + Glow Active: [âš¡ Contact âš¡] + Scale Project Card Hover: Normal: Static card Hover: Lift + Shadow + Border glow Click: Scale down + Navigate Social Links: GitHub: 🐙 → 🐙✨ LinkedIn: 💼 → 💼✨ Twitter: 🐦 → 🐦✨ ``` ## 🛠️ Development Setup ### Prerequisites - Modern web browser (Chrome 90+, Firefox 88+, Safari 14+, Edge 90+) - Git for version control - Text editor or IDE (VS Code recommended) - Local web server (optional but recommended) ### Local Development 1. **Clone the repository** ```bash git clone https://github.com/eaglepython/JavaScript-DOM-Portfolio.git cd JavaScript-DOM-Portfolio ``` 2. **Run locally** ```bash # Option 1: Direct browser opening open index.html # Option 2: Local server (recommended) # Python python -m http.server 8000 # Node.js npx live-server # PHP php -S localhost:8000 ``` 3. **View in browser** ``` http://localhost:8000 ``` ### Development Workflow 1. **Feature Development**: Create feature branches for new functionality 2. **Testing**: Cross-browser and device testing 3. **Code Review**: Ensure code quality and performance 4. **Deployment**: Automatic deployment via Netlify on main branch push ## 🔧 Customization Guide ### Adding New Projects 1. **HTML Structure**: Add project cards in the projects section 2. **Technology Tags**: Include appropriate filter categories 3. **Images**: Add project screenshots to assets/images/projects/ 4. **Links**: Update project URLs and repository links ### Theme Customization 1. **CSS Variables**: Edit custom properties in interactive-styles.css 2. **Color Schemes**: Add new theme options in JavaScript 3. **Animations**: Modify transition timings and effects 4. **Typography**: Update font selections and sizing ### Feature Extensions 1. **JavaScript Modules**: Add new features to enhanced-features.js 2. **Styling**: Include corresponding CSS in interactive-styles.css 3. **Documentation**: Update README and code comments 4. **Testing**: Ensure cross-browser compatibility ## 📊 Code Quality & Standards ### Best Practices Implemented - **Semantic HTML5**: Proper element usage and document structure - **Modern CSS**: Grid, Flexbox, and custom properties - **Clean JavaScript**: ES6+ features, modular code organization - **Performance**: Optimized animations and efficient DOM manipulation - **Accessibility**: ARIA labels, keyboard navigation, screen reader support ### Testing & Quality Assurance - **Cross-Browser Testing**: Chrome, Firefox, Safari, Edge - **Device Testing**: Desktop, tablet, mobile responsiveness - **Performance Monitoring**: Lighthouse audits and optimization - **Accessibility Testing**: WAVE, axe, and manual keyboard testing - **Code Validation**: HTML5, CSS3, and JavaScript linting ## 🚀 Performance Features ### Optimization Techniques - **Critical CSS**: Inline critical styles for faster rendering - **Font Optimization**: Preconnect to Google Fonts with display swap - **Image Optimization**: Compressed images with proper formats - **JavaScript Efficiency**: Debounced events and intersection observers - **CSS Animations**: GPU-accelerated transforms and optimized keyframes ### Monitoring & Analytics - **Core Web Vitals**: Optimized for LCP, FID, and CLS metrics - **Error Handling**: Graceful degradation and fallback systems - **Performance Budgets**: Asset size monitoring and optimization - **User Experience**: Real user monitoring considerations ## 🔮 Future Enhancements ### Planned Features 1. **Blog Integration**: Dynamic content management system 2. **API Connections**: Real-time GitHub project data 3. **Contact Backend**: Functional email form processing 4. **PWA Features**: Offline functionality and app installation 5. **Analytics Dashboard**: User interaction insights 6. **Internationalization**: Multi-language support ### Technical Improvements 1. **TypeScript Migration**: Enhanced type safety and development experience 2. **Build System**: Webpack or Vite for advanced optimization 3. **Testing Suite**: Automated testing with Jest and Cypress 4. **CI/CD Pipeline**: Advanced deployment and testing automation 5. **Performance Monitoring**: Real-time performance tracking ## 🤝 Contributing Contributions are welcome! This project demonstrates professional web development practices: 1. **Fork the Repository**: [JavaScript-DOM-Portfolio](https://github.com/eaglepython/JavaScript-DOM-Portfolio) 2. **Create Feature Branch**: `git checkout -b feature/amazing-feature` 3. **Commit Changes**: `git commit -m 'Add amazing feature'` 4. **Push to Branch**: `git push origin feature/amazing-feature` 5. **Open Pull Request**: Detailed description of changes and testing ### Contribution Guidelines - Follow existing code style and conventions - Test across multiple browsers and devices - Update documentation for new features - Ensure accessibility compliance - Optimize for performance ## 📄 License This project is open source and available under the [MIT License](LICENSE). ## 🙏 Acknowledgments - **Netlify**: Reliable hosting platform with excellent developer experience - **Font Awesome**: Comprehensive icon library with professional quality - **Google Fonts**: Beautiful typography with EB Garamond and Fira Code - **GitHub**: Version control and collaborative development platform - **MDN Web Docs**: Comprehensive web development documentation - **WCAG Guidelines**: Web accessibility standards and best practices - **Web Development Community**: Inspiration and best practices ## 📞 Contact & Connect **Joseph Bidias** Quantitative Researcher & Software Engineer - 🌐 **Portfolio**: [javascript-dom-portfolio.netlify.app](https://javascript-dom-portfolio.netlify.app/) - 💼 **GitHub**: [@eaglepython](https://github.com/eaglepython) - 🔗 **LinkedIn**: [Connect professionally](https://linkedin.com/in/eaglepython) - 📧 **Email**: Available through portfolio contact form - 🐦 **Twitter**: [@eaglepython](https://twitter.com/eaglepython) --- ## 🌟 Project Highlights This interactive portfolio represents the intersection of **quantitative research expertise** and **advanced software engineering skills**. Built with modern web technologies, it demonstrates: ✅ **Advanced DOM Manipulation** - Pure JavaScript without frameworks ✅ **Professional Design** - Cyberpunk aesthetic with accessibility focus ✅ **Performance Optimization** - Fast loading and smooth interactions ✅ **Mobile-First Approach** - Touch-optimized responsive design ✅ **Accessibility Compliance** - WCAG 2.1 standards with keyboard navigation ✅ **Production Ready** - Professional deployment with continuous integration ## 🎬 Visual Demo & Features ### 🎥 Key Visual Features #### 🌊 Matrix Rain Animation - **Visual Effect**: Cascading green binary code background - **Implementation**: Pure CSS keyframe animations - **Performance**: GPU-accelerated with `transform3d` - **Customization**: Variable speed and density #### ✨ Glitch Text Effect - **Target**: Main heading "Joseph Bidias" - **Effect**: Cyberpunk-style text distortion - **Trigger**: Automatic on page load + hover interactions - **Fallback**: Graceful degradation for motion-sensitive users #### 🎭 Theme Switching ``` Dark Mode: Light Mode: 🌙 Matrix Green ☀️ Professional Blue ┌─────────────┐ ┌─────────────┐ │ ████████ │ │ ████████ │ │ ██░░░░██ │ ⟷ │ ██▓▓▓▓██ │ │ ████████ │ │ ████████ │ └─────────────┘ └─────────────┘ #0a0a0a bg #ffffff bg #00ff88 accent #3498db accent ``` #### 📱 Mobile Responsiveness ``` Desktop (1200px+): Tablet (768px): Mobile (320px): ┌─────────────────┐ ┌─────────────┐ ┌─────────┐ │ [Nav] [Profile] │ │ [Profile] │ │ ≡ [🌙] │ │ [Projects Grid] │ → │ [Projects] │ → │ [Hero] │ │ [Contact Form] │ │ [Contact] │ │ [Cards] │ └─────────────────┘ └─────────────┘ └─────────┘ ``` ### 🎮 Interactive Experience Map #### 🗺️ User Journey Visualization ``` Landing ↓ 🎭 Choose Theme → 🌙 Dark / ☀️ Light ↓ 📖 Read About → Typewriter animation ↓ 💼 Browse Projects → Filter by tech → View details ↓ 📧 Contact Form → Validation → Submit ↓ 🔗 Social Links → External profiles ``` #### ⌨️ Keyboard Navigation Flow ``` Tab Order: 1. Theme Toggle (T) 2. Mobile Menu (M) 3. Navigation Links (1-4) 4. Project Filters (F) 5. Project Cards 6. Contact Form 7. Social Links Shortcuts: T → Toggle theme M → Mobile menu F → Focus filters 1-4 → Navigate sections Esc → Close modals ``` **🚀 Built with passion for code, designed for impact, deployed for the world to see.** *Showcasing the future of interactive web development through cutting-edge JavaScript techniques and professional engineering practices.*