Chu Qiao

Personal Website

Welcome to my personal website! This is an MIT licensed Next.js-based Jamstack application. It offers a simple interface, easy modifications, static export capabilities, and free automatic deployments via GitHub Pages.

🚀 Features

• Built with modern TypeScript, using Next.js 15.4, React 19, and SCSS.
• Type-safe development with TypeScript strict mode.
• Optimized performance with static export and automatic font optimization.
• Automated workflows via GitHub Actions.
• And more!

🛠 Adapting this Project

Want to create your own personal website based on this project? You can set it up in as little as 30 minutes! Follow the setup instructions below and check out the detailed guide and checklist on adapting this project to your needs. If you encounter any challenges, don’t hesitate to contact me through an issue or email at help@mldangelo.com.

🤝 Contributing

Your contributions are warmly welcomed! If you wish to contribute, please review the design goals, roadmap, and contributing guidelines. For any bugs or suggestions, you can reach out via email, submit a pull request (I’d be happy to get you a coffee as a thank-you!), or open an issue.

🔧 Dependencies

Ensure you have node >= v20. Optionally, use nvm to manage node versions.

🚀 Setup and Running

1. Clone the repository:

   git clone git://github.com/mldangelo/personal-site.git
   cd personal-site
   

2. (Optional) Ensure you’re on Node v20 or higher:

   nvm install
   node --version
   

3. Install dependencies:

   npm install
   

4. Start the development server:

   npm run dev
   

   By default, the application will be available at http://localhost:3000/.

🏗 Building for Production

1. Build the static export:

   npm run build
   

   The build process automatically creates a static export in the out/ directory.

2. Preview the production build locally:

   npm run start
   

🚢 Deploying

Deploying to GitHub Pages

1. Update the environment variables and Git remote URL in .github/workflows/github-pages.yml.

2. Enable GitHub Actions and Pages for your repository.

3. Push to the main branch to trigger automatic deployment.

   git add .
   git commit -m "Deploy to GitHub Pages"
   git push origin main
   

Static Export

You can export the site as static HTML to host anywhere:

npm run build

The static files will be automatically generated in the out/ directory.

🔬 Testing

npm run lint          # Run ESLint
npm run type-check    # Run TypeScript type checking
npm run format        # Format code with Prettier
npm run format:check  # Check code formatting
npm test              # Run Jest tests

🎨 Customization

• Personal Information: Update files in src/data/ with your information.
• Images: Replace images in public/images/ with your own.
• Theme: Modify SCSS variables in src/static/css/libs/_vars.scss.

📝 License

MIT

This site is open source. Improve this page.