- Extract content to src/config/profile.js (single-file customization) - Add Apache-2.0 LICENSE, CONTRIBUTING.md, robots.txt - Add GitHub Pages auto-deploy workflow - Update package.json: private=false, license, homepage - Add SEO/Open Graph meta tags to index.html - Rewrite README.md with Quick Start guide - Update .gitignore: AI tooling, caches, deployment state
This commit is contained in:
@@ -1,117 +1,83 @@
|
||||
# Mr. Hoelee Resume - Animated Resume
|
||||
# Animated Profile
|
||||
|
||||
This project is inspired by: [Animating Resume](https://github.com/jirengu-inc/animating-resume)
|
||||
Deep respect to the original author.
|
||||
> Type your way to a stunning developer showcase.
|
||||
|
||||
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.
|
||||
[](https://me.hoelee.com)
|
||||
[](LICENSE)
|
||||
|
||||
## Prerequisites
|
||||
An interactive animated resume template built with Vue 3 and Vite. It is inspired by and credits [jirengu-inc/animating-resume](https://github.com/jirengu-inc/animating-resume).
|
||||
|
||||
- **Node.js**: >= 18.0.0 ([Download](https://nodejs.org/))
|
||||
- **npm**: >= 9.0.0
|
||||
- **Git**: [Download](https://git-scm.com/)
|
||||
## Quick Start
|
||||
|
||||
## Usage
|
||||
1. Click **Use this template** on GitHub, or clone the repository:
|
||||
|
||||
1. Clone this repository:
|
||||
```bash
|
||||
git clone https://github.com/hoelee/hoelee-profile.git
|
||||
cd hoelee-profile
|
||||
```
|
||||
|
||||
```bash
|
||||
git clone <your-repository-url>
|
||||
cd hoelee-profile2
|
||||
npm install
|
||||
npm run dev
|
||||
```
|
||||
2. Install dependencies:
|
||||
|
||||
2. The development server will automatically open in your browser at `http://localhost:8080`
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
|
||||
## Build and Deployment
|
||||
3. Edit `src/config/profile.js` and fill in your name, bio, skills, and contact information.
|
||||
|
||||
### Building for Production
|
||||
4. Start a local preview at <http://localhost:8080>:
|
||||
|
||||
1. Build the project:
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
5. Create a production build in `dist/`:
|
||||
|
||||
2. The built files will be generated in the `dist/` directory
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
|
||||
### Deployment Options
|
||||
6. Deploy `dist/` to Netlify, Vercel, GitHub Pages, or any static host.
|
||||
|
||||
#### Option 1: Static Web Server
|
||||
## Typing Speed
|
||||
|
||||
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:
|
||||
|
||||
```bash
|
||||
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
|
||||
Set `typingSpeed` in `src/config/profile.js` to control the milliseconds per character. `1` is fastest; `20` creates a slow, dramatic effect.
|
||||
|
||||
## Project Structure
|
||||
|
||||
```text
|
||||
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
|
||||
```
|
||||
| Path | Purpose |
|
||||
| --- | --- |
|
||||
| `src/App.vue` | Desktop animated profile |
|
||||
| `src/Mobile.vue` | Mobile animated profile |
|
||||
| `src/config/profile.js` | Personal details, Markdown, animation speed, and typed CSS |
|
||||
| `src/main.js` | Responsive application entry point |
|
||||
| `src/components/` | Resume, style, and thank-you editors |
|
||||
| `src/assets/` | Reset stylesheet and static assets |
|
||||
| `public/robots.txt` | SEO crawler directives |
|
||||
|
||||
## Features
|
||||
## Deployment
|
||||
|
||||
- **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
|
||||
| Platform | Approach |
|
||||
| --- | --- |
|
||||
| GitHub Pages | The included GitHub Actions workflow deploys every push to `main`. |
|
||||
| Netlify | Build with `npm run build` and publish `dist/`. |
|
||||
| Vercel | Import the repository; Vite settings are detected automatically. |
|
||||
| Static server | Upload the contents of `dist/` to any static web server. |
|
||||
|
||||
## Customization
|
||||
`public/robots.txt` is pre-included for SEO and is copied into the production build.
|
||||
|
||||
### Personalizing Your Resume
|
||||
## Tech Stack
|
||||
|
||||
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+
|
||||
| Technology | Role |
|
||||
| --- | --- |
|
||||
| Vue 3 | UI framework |
|
||||
| Vite | Development server and build tool |
|
||||
| Prism.js | Syntax highlighting |
|
||||
| marked.js | Markdown rendering |
|
||||
|
||||
## License
|
||||
|
||||
This project is for personal/educational use. Please respect the original author's work.
|
||||
Licensed under [Apache-2.0](LICENSE).
|
||||
|
||||
## Credits
|
||||
|
||||
Inspired by the original [animating-resume](https://github.com/jirengu-inc/animating-resume) project by jirengu-inc.
|
||||
|
||||
Reference in New Issue
Block a user