🚀 From tech sales to web development - turning 8+ years of customer-facing experience into code that makes a difference.
- Tip Calculator: Saves workplace 45+ minutes daily - from 1+ hour to 15 minutes
- Production Applications: Live, working projects used by real teams
- Quantified Results: Proven ROI delivery, not just coding exercises
- Immersive 3D Background: Custom Three.js starfield with interactive parallax
- Personal Bitmoji Greeting: Memorable first impression with animated welcome
- Scroll-Triggered Animations: Progressive content revelation using Intersection Observer
- Glassmorphism Design: Modern UI with sophisticated visual effects
- 8+ Years customer service & team leadership experience
- Career Transition: November 2023 → March 2025 coding journey
- Rapid Learning: From beginner to production applications in months
- Full-Stack Path: Currently expanding to Node.js, PostgreSQL, Next.js
- Personal Bitmoji Greeting: Friendly welcome with animated waving
- 3D Starfield Background: Interactive parallax with mouse movement
- Scroll Animations: Progressive content revelation as you explore
- Glassmorphism Design: Modern, premium visual treatment
- Mobile-First Approach: Optimized for all device sizes
- Progressive Enhancement: Enhanced features on larger screens
- Cross-Browser Compatibility: Consistent experience across platforms
- Performance Optimized: Smooth 60fps animations with efficient rendering
- Quantified Impact: Real metrics (45+ minutes daily savings)
- Project Timeline: Clear development progression and skill growth
- Professional Story: Career transition narrative with compelling results
- Multiple Contact Methods: Form, email, social media integration
Impact: Saves 45+ minutes daily at workplace
- Problem: Manual tip calculations taking 1+ hours daily
- Solution: React-based calculator with presets and splitting options
- Result: Reduced calculation time to 15 minutes, used daily by management
- 🔗 Live Demo | 📂 Source Code
Innovation: Spotify playlists based on weather conditions
- Tech Stack: JavaScript, Spotify API, OpenWeather API
- Features: Geolocation detection, real-time weather data, dynamic UI
- Achievement: Complex multi-API integration with seamless user experience
- 🔗 Live Demo | 📂 Source Code
Mastery: Complete React ecosystem demonstration
- Architecture: Context API, React Router, EmailJS integration
- Design: Modern responsive design with Three.js animations
- Scope: Full-featured ecommerce experience with cart management
- 🔗 Live Demo | 📂 Source Code
src/
├── Components/
│ ├── Header.jsx # Navigation & brand identity
│ ├── Hero.jsx # Value proposition & CTAs
│ ├── About.jsx # Personal story & Three.js cube
│ ├── Skills.jsx # Animated tech stack showcase
│ ├── Projects.jsx # Timeline of development journey
│ ├── Contact.jsx # Multi-channel contact system
│ ├── StarfieldBackground.jsx # Interactive 3D environment
│ ├── BitmojiGreeting.jsx # Personal welcome experience
│ └── AnimatedSection.jsx # Scroll-triggered animations
├── hooks/
│ └── useInView.js # Intersection Observer hook
├── App.jsx # Main application orchestration
├── main.jsx # React 18+ bootstrap
└── index.css # Global styles & animations
- WebGL Rendering: Hardware-accelerated 3D graphics
- Interactive Parallax: Mouse and scroll-responsive animations
- Performance Optimized: Efficient memory management and cleanup
- Cross-Device Compatible: Responsive 3D experience
- Intersection Observer: Performance-conscious visibility detection
- Custom Hooks: Reusable animation system
- Accessibility Support: Respects reduced motion preferences
- Staggered Timing: Strategic animation sequencing
- Glassmorphism: Sophisticated backdrop-blur effects
- Custom Animations: Complex keyframe sequences
- CSS Variables: Dynamic theming system
- Cross-Browser: Webkit and Firefox compatibility
- Node.js 16+ and npm/yarn
- Modern browser with WebGL support
- Git for version control
# Clone the repository
git clone https://github.com/Arobaczewski/portfolio.git
# Navigate to project directory
cd portfolio
# Install dependencies
npm install
# Start development server
npm run dev# Create optimized build
npm run build
# Preview production build
npm run previewThe portfolio is optimized for deployment on:
- Netlify (current hosting)
- Vercel
- GitHub Pages
- AWS S3/CloudFront
- Create/Export Bitmoji: Get PNG from Bitmoji.com or Snapchat
- Save Image: Place as
/public/bitmoji-wave.png - Customize Greeting: Edit text in
BitmojiGreeting.jsx
The portfolio uses a teal-based color system (#14b8a6):
/* Primary brand colors */
--teal-400: #2dd4bf;
--teal-500: #14b8a6;
--teal-600: #0d9488;- Projects: Update array in
Projects.jsx - Skills: Modify skills array in
Skills.jsx - Contact Info: Update details in
Contact.jsx - About Story: Personalize content in
About.jsx
- Performance: 95+
- Accessibility: 100
- Best Practices: 100
- SEO: 95+
- Asset Preloading: Critical resources loaded early
- Code Splitting: Optimized bundle sizes
- Image Optimization: Responsive images with modern formats
- Animation Performance: GPU-accelerated transforms
- Real-World Applications: Projects solve actual business problems
- Quantified Results: Measurable impact (45+ minutes daily savings)
- User-Centered Design: Focus on practical value and usability
- Professional Quality: Production-ready code and deployment
- Unique Presentation: Stands out from template-based portfolios
- Technical Depth: Advanced features beyond typical portfolios
- Personal Touch: Memorable greeting creates lasting impression
- Professional Story: Compelling career transition narrative
This project is open source and available under the MIT License.
- Codecademy: Full-stack development program foundation
- Three.js Community: 3D graphics inspiration and resources
- React Team: Amazing framework and documentation
- Design Inspiration: Modern glassmorphism and animation trends
Last updated: December 2024 | Built with ❤️ and lots of ☕