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 ⭐️.

Features

• 🍎 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

Table of Contents

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

Getting Started

Prerequisites

• Node.js (v20 or higher)

Installation

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

Development

To start the development server:

npm run dev

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

Building for Production

To create a production build:

npm run build

To preview the production build:

npm run preview

Deployment

Deploy with Vercel

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"

Deploy with Cloudflare Pages

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"

Tech Stack

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

License

MIT License