Portfolio - Software Engineer

Description

• Repo
• Live URL

A modern, responsive portfolio showcasing advanced IoT, AI, and full-stack development projects. Built with React 19 and Vite, featuring interactive project filtering, comprehensive technology visualization, and a data-driven architecture for easy maintenance.

Table of Contents

• Installation
• Technology Stack
• Features
• Project Structure
• Development
• Deployment
• Author

Installation

Run the following command to install necessary dependencies:

npm install

Technology Stack

• Frontend: React 19, Vite, TypeScript
• Styling: CSS3 with custom properties, semantic-utility classes
• Icons: Lucide React
• Build Tools: Vite with code splitting and optimization
• Deployment: GitHub Pages

Features

• Dynamic Project Showcase: Featured section highlighting advanced IoT and AI projects
• Interactive Filtering: Search and filter projects by technology, complexity, and category
• Technology Visualization: Color-coded tech badges with hover effects
• Project Modals: Detailed project information with comprehensive tech stack breakdown
• Responsive Design: Mobile-first approach with smooth animations
• Performance Optimized: Code splitting, lazy loading, and service worker caching
• SEO Optimized: Comprehensive meta tags, structured data, and social media integration
• Accessibility: ARIA labels, keyboard navigation, and semantic HTML

Project Structure

src/
├── components/          # Reusable UI components
│   ├── FilterBar/      # Project filtering and search
│   ├── ProjectModal/   # Detailed project information
│   ├── TechStack/      # Technology badge system
│   └── TechBadge/      # Individual technology badges
├── pages/              # Main application pages
│   ├── About.jsx       # About section with bio
│   ├── Portfolio.jsx   # Project showcase
│   └── Resume.jsx      # Professional resume
├── assets/
│   ├── css/           # Styling with design system
│   ├── data/          # Portfolio and resume data
│   └── img/           # Project screenshots and assets
└── utils/             # Helper functions and utilities

Development

# Start development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

Deployment

The portfolio is automatically deployed to GitHub Pages when changes are pushed to the main branch. The build process includes:

• Code splitting for optimal performance
• Asset optimization and compression
• Service worker registration for caching
• SEO optimization with meta tags and structured data

Author

Edwin M. Escobar

Software Engineer - IoT, AI & Full-Stack Development

• Email
• GitHub
• LinkedIn
• Portfolio

Specializing in IoT systems, AI development, and smart manufacturing solutions with experience in Angular, Node.js, FastAPI, MQTT, and enterprise software architecture.