Apple-Style Portfolio Template

English | 简体中文

A modern, minimalist portfolio template built with Astro and designed with Apple's design aesthetic in mind.

live demo: apple-style-portfolio

If you find this project helpful, please consider giving it a star ⭐️.

• 🍎 Apple-style design aesthetic
• ⚡️ Built with Astro for optimal performance
• 🎨 Tailwind CSS for styling
• 🌟 GSAP animations
• 📱 Fully responsive design
• 🎬 Three.js integration for 3D elements
• ⚛️ React components integration

This template is MIT — use it for client work, invoice for it, ship it. No strings, no gated "pro" version.

If you're shipping paid projects on it, there are three ways to support the work: a one-time $75 commercial sponsorship, a $199 ship-assist if you're stuck, and a $499/yr agency plan.

→ Commercial use & support

• Getting Started
  • Prerequisites
  • Installation
  • Development
  • Building for Production
• Deployment
  • Deploy with Vercel
  • Deploy with Cloudflare Pages
• Tech Stack
• More Astro templates
• License

• Node.js (v20 or higher)

1. Clone the repository:

# Clone the repository
git clone https://github.com/larry-xue/apple-style-portfolio
cd apple-style-portfolio

# Or use astro create
npm create astro@latest -- --template larry-xue/apple-style-portfolio

2. Install dependencies:

npm install

To start the development server:

npm run dev

The site will be available at http://localhost:4321

To create a production build:

npm run build

To preview the production build:

npm run preview

1. Fork this repository
2. Connect to Vercel using your GitHub account
3. Select the forked repository
4. Vercel will automatically detect Astro and configure the build settings
5. Click "Deploy"

1. Fork this repository
2. Log in to the Cloudflare dashboard
3. Select "Pages" from the sidebar
4. Create a new project and connect your GitHub repository
5. Configure the build settings:
   • Build command: npm run build
   • Build output directory: dist
   • Node.js version: 20.x
6. Click "Save and Deploy"

• Astro
• React
• Tailwind CSS
• GSAP
• Three.js
• Inter Font
• Source Sans Pro

• Astroloop — a landing page for AI agent products: an agent-loop diagram with a human handoff gate, and a per-tool permission matrix. Demo
• Astro Sassify — a SaaS landing page with a full design system, dark mode and view transitions. Demo
• Astro Zen Blog — a minimal blog, with typography tuned for long-form reading. Demo
• Quiet Bar — a one-pager for a bar or restaurant. No CSS framework, no JavaScript libraries. Demo

All MIT, all free for commercial use.

MIT License

Using it commercially? See COMMERCIAL.md — MIT means you owe nothing, but there is a button if you'd rather not.