MyDevPort - Developer Portfolio

A modern, interactive portfolio showcasing my skills, projects, and experience as a Full Stack Developer. Built with Vue.js and featuring dynamic animations, responsive design, and smooth user interactions.

🌐 MyDevPort

Tech Stack

               

Features

• Interactive Canvas: Dynamic particle system with mouse interaction and responsive animations
• Vue 3 Composition API: Modern Vue.js architecture with TypeScript support
• Fully Responsive: Optimized for all devices with mobile-first design
• Smooth Animations: CSS transitions and custom animations throughout
• Project Showcase: Interactive modals with detailed project information
• Certifications Gallery: Visual display of professional achievements
• Experience Timeline: Professional background with company details
• Contact Form: Functional contact system with validation
• Skills Display: Technical and soft skills with interactive elements
• CV Download: Direct PDF download functionality
• Modern UI/UX: Glassmorphism design with gradient effects

Setup Guide

This guide will help you set up the project locally on Mac or Windows.

Prerequisites

• Node.js (v18 or higher)
• npm or yarn
• Git

Installation Steps

1. Clone the Repository

git clone https://github.com/amirmx2905/MyDevPort.git
cd MyDevPort

2. Install Dependencies

npm install

3. Start Development Server

npm run dev

This will start the development server at http://localhost:5173/

4. Build for Production

npm run build

This creates optimized production files in the dist/ directory.

5. Preview Production Build

npm run preview

Project Structure

MyDevPort/
├── public/                    # Static assets
│   ├── documents/            # CV and documents
│   │   └── Amir_Flores_CV.pdf
│   └── images/               # Images and icons
│       ├── certifications/   # Certification images
│       ├── icons/           # Skill and UI icons
│       ├── logos/           # Company logos
│       ├── profile/         # Profile photos
│       └── projects/        # Project screenshots
├── src/
│   ├── components/          # Vue components
│   │   ├── Header/          # Landing section
│   │   ├── AboutMe/         # About section
│   │   ├── Experience/      # Work experience
│   │   ├── Projects/        # Portfolio projects
│   │   ├── Certifications/  # Achievements
│   │   ├── Contact/         # Contact form
│   │   └── Footer/          # Footer section
│   ├── composables/         # Vue composables
│   │   ├── useDeviceDetection.ts
│   │   ├── useModalScroll.ts
│   │   └── useSmoothScroll.ts
│   ├── App.vue              # Main application
│   ├── main.ts              # Application entry point
│   └── style.css            # Global styles
├── package.json             # Dependencies and scripts
├── vite.config.ts           # Vite configuration
├── tsconfig.json            # TypeScript configuration
└── README.md                # This file

Development

Available Scripts

# Start development server
npm run dev

# Build for production
npm run build

# Preview production build locally
npm run preview

Component Architecture

The project follows a modular component structure:

• Header: Interactive landing section with particle canvas
• AboutMe: Personal information, skills, and profile
• Experience: Professional background and work history
• Projects: Portfolio showcase with detailed modals
• Certifications: Educational achievements and credentials
• Contact: Functional contact form with validation
• Footer: Additional links and information

Key Technologies Explained

• Vue 3: Latest version with Composition API and <script setup> syntax
• TypeScript: Type-safe development with enhanced IDE support
• Tailwind CSS: Utility-first CSS framework for rapid styling
• Vite: Fast build tool with hot module replacement
• Responsive Design: Mobile-first approach with breakpoint utilities

Deployment

This project is automatically deployed to Vercel on every push to the main branch.

Manual Deployment to Vercel

1. Install Vercel CLI: npm i -g vercel
2. Run: vercel
3. Follow the prompts

Other Deployment Options

• Netlify: Drag and drop the dist/ folder
• GitHub Pages: Use gh-pages package
• Firebase Hosting: Use Firebase CLI

Performance Features

• Optimized Images: WebP format for faster loading
• Code Splitting: Automatic chunking by Vite
• Tree Shaking: Unused code elimination
• Minification: Compressed production builds
• CDN Delivery: Fast global content delivery via Vercel

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Contributing

1. Fork the repository
2. Create a feature branch: git checkout -b feature-name
3. Commit changes: git commit -m 'Add feature'
4. Push to branch: git push origin feature-name
5. Submit a pull request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Contact

• Portfolio: https://mydevport.vercel.app/
• GitHub: @amirmx2905
• LinkedIn: Amir Sebastián Flores Cardona

Author

Amir Sebastián Flores Cardona

• Full Stack Developer