https://github.com/amirmx2905/mydevport
MyDevPort is a personal portfolio showcasing my projects, skills, and experience. This repository contains code samples, web applications, and other works that highlight my development journey.
https://github.com/amirmx2905/mydevport
css html5 javascript tailwindcss typescript vercel vite vue3
Last synced: 15 days ago
JSON representation
MyDevPort is a personal portfolio showcasing my projects, skills, and experience. This repository contains code samples, web applications, and other works that highlight my development journey.
- Host: GitHub
- URL: https://github.com/amirmx2905/mydevport
- Owner: amirmx2905
- License: mit
- Created: 2025-02-21T17:08:54.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-06-10T19:03:25.000Z (about 1 year ago)
- Last Synced: 2025-06-10T20:30:15.372Z (about 1 year ago)
- Topics: css, html5, javascript, tailwindcss, typescript, vercel, vite, vue3
- Language: Vue
- Homepage: https://mydevport.vercel.app
- Size: 24.3 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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.
## 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
```bash
git clone https://github.com/amirmx2905/MyDevPort.git
cd MyDevPort
```
### 2. Install Dependencies
```bash
npm install
```
### 3. Start Development Server
```bash
npm run dev
```
This will start the development server at `http://localhost:5173/`
### 4. Build for Production
```bash
npm run build
```
This creates optimized production files in the `dist/` directory.
### 5. Preview Production Build
```bash
npm run preview
```
## Project Structure
```bash
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
```bash
# 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 `` 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
<br>
## 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
<br>
## 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
<br>
## Browser Support
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
<br>
## 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
<br>
## License
This project is licensed under the MIT License - see the `LICENSE` file for details.
<br>
## Contact
- **Portfolio**: [https://mydevport.vercel.app/](https://mydevport.vercel.app/)
- **GitHub**: [@amirmx2905](https://github.com/amirmx2905)
- **LinkedIn**: [Amir Sebastián Flores Cardona](https://www.linkedin.com/in/amir-sebasti%C3%A1n-flores-cardona-617556250/)
<br>
## Author
**Amir Sebastián Flores Cardona**
- Full Stack Developer