Mr. Hoelee Resume - Animated Resume

This project is inspired by: Animating Resume Deep respect to the original author.

An interactive animated resume built with Vue 3 and Vite that showcases your professional profile in a unique and engaging way. Features responsive design with separate mobile and desktop experiences.

Prerequisites

• Node.js: >= 18.0.0 (Download)
• npm: >= 9.0.0
• Git: Download

Usage

1. Clone this repository:

git clone <your-repository-url>
cd hoelee-profile2
npm install
npm run dev

2. The development server will automatically open in your browser at http://localhost:8080

Build and Deployment

Building for Production

1. Build the project:

npm run build

2. The built files will be generated in the dist/ directory

Deployment Options

Option 1: Static Web Server

Upload the contents of the dist/ directory to any static web server (Netlify, Vercel, GitHub Pages, etc.)

Option 2: Preview Locally

Test the production build locally:

npm run preview

Development

• npm run dev - Start development server with hot reload (opens at http://localhost:8080)
• npm run build - Build for production (outputs to dist/ directory)
• npm run preview - Preview production build locally

Project Structure

src/
├── App.vue          # Desktop version of the resume
├── Mobile.vue       # Mobile-optimized version
├── main.js          # Entry point with responsive logic
├── assets/          # Stylesheets and static assets
│   └── reset.css    # CSS reset styles
└── components/      # Resume components
    ├── ResumeEditor.vue  # Resume content editor
    ├── StyleEditor.vue   # Style/CSS editor
    └── ThankEditor.vue   # Thank you section

Features

• Responsive Design: Automatically switches between desktop and mobile versions based on screen width (500px breakpoint)
• Interactive Animation: Type-writer effect for resume content
• Live Preview: Real-time preview of resume as it's being "typed"
• Modern Stack: Built with Vue 3 composition API and Vite for fast development
• Syntax Highlighting: Integrated Prism.js for code highlighting
• Markdown Support: Uses marked.js for markdown parsing

Customization

Personalizing Your Resume

1. Content: Edit the resume content in src/components/ResumeEditor.vue
2. Styling: Modify CSS styles in src/components/StyleEditor.vue
3. Layout: Adjust the main layout in src/App.vue (desktop) or src/Mobile.vue (mobile)
4. Title: Update the page title in index.html

Configuration

• Port: Development server port is set to 8080 in vite.config.js
• Build Output: Configured to output to dist/ directory with organized asset structure
• Aliases: Path aliases are set up for easy imports (@, src, assets, components)

Technologies Used

• Vue 3 - Progressive JavaScript framework with Composition API
• Vite - Next-generation frontend build tool
• Prism.js - Syntax highlighting library
• Marked - Markdown parser and compiler
• CSS3 Animations - Smooth typing animations and transitions
• PostCSS & Autoprefixer - CSS processing and vendor prefixing

Browser Support

This project uses modern JavaScript features and is compatible with:

• Chrome/Edge 88+
• Firefox 85+
• Safari 14+

License

This project is for personal/educational use. Please respect the original author's work.