Aura

Build your digital aura.

A beautifully crafted, animation-rich personal homepage template.
Designed to help you present your projects, blogs, and digital identity — with elegance.

Live Demo · Get Started · Customize

Features

• Scroll-Driven Animations — Smooth reveal, zoom, and horizontal scroll effects powered by GSAP ScrollTrigger.
• Fully Responsive — Thoughtfully adapted across mobile (320px+), tablet (768px+), and desktop (1440px+).
• Modular Sections — Hero banner, project showcase, blog gallery, featured product highlight, and more — each as an independent Vue component.
• SEO Ready — Semantic HTML, Open Graph, Twitter Cards, and JSON-LD structured data built in.
• Minimalist Aesthetic — Clean layouts, gradient accents, generous whitespace, and custom typography.
• Performance Optimized — Lazy-loaded images, debounced handlers, and efficient animation triggers.

Tech Stack

Layer	Technology
Framework	Vue 3 + Vue Router 4
Styling	Tailwind CSS 3 + SCSS
Animation	GSAP 3 + ScrollTrigger
Build	Vite
Extras	medium-zoom

Getting Started

Prerequisites

• Node.js >= 16
• pnpm (recommended) or npm

Install & Run

# Clone the repository
git clone https://github.com/nicejade/aura.git
cd aura

# Install dependencies
pnpm install
# or: npm install

# Start development server
pnpm start
# or: npm start

The app will be available at http://localhost:5173.

Build for Production

pnpm build

Output will be generated in the dist/ directory, ready for static hosting.

Project Structure

aura/
├── index.html           # HTML entry (Vite) with SEO meta tags
├── public/
│   ├── images/          # Section images (banner, projects, blogs)
│   └── svgs/            # Social media & UI icons
├── src/
│   ├── assets/
│   │   ├── css/         # Global styles & Tailwind directives
│   │   ├── font/        # Custom typefaces
│   │   └── icons/       # Component-level icons
│   ├── components/
│   │   ├── Banner.vue          # Hero section
│   │   ├── ScrollReveal.vue    # Project showcase (scroll reveal)
│   │   ├── HorizontalScroll.vue # Blog gallery (horizontal scroll)
│   │   ├── ScrollZoom.vue      # Featured project (scroll zoom)
│   │   ├── Wechats.vue         # Social QR codes
│   │   ├── LifeSpent.vue       # Life visualization widget
│   │   ├── GPTWordbook.vue     # Interactive word cards
│   │   ├── Footer.vue          # Footer with links & social icons
│   │   └── Elevator.vue        # Scroll-to-top button
│   ├── helper/
│   │   └── utils.js     # Shared utilities
│   ├── views/
│   │   └── Home.vue     # Page composition
│   ├── router/          # Route definitions
│   ├── App.vue          # Root component
│   └── main.js          # Application entry
├── tailwind.config.js   # Tailwind theme & breakpoints
└── package.json

Customization

Aura is designed as a starting point. Here's how to make it yours:

1. Branding

• Site title & meta — Edit index.html at project root to update the title, description, OG tags, and favicons.
• Banner — Modify src/components/Banner.vue to change the hero headline, tagline, and CTA link.
• Colors — Adjust the brand palette in tailwind.config.js under selfCustomColors.

2. Content

• Projects — Update the three project cards in src/components/ScrollReveal.vue with your own titles, descriptions, images, and links.
• Blogs — Edit the BLOGS_LIST array in src/components/HorizontalScroll.vue.
• Featured project — Replace the content in src/components/ScrollZoom.vue.
• Footer links — Modify footerInfoArr in src/components/Footer.vue.

3. Sections

Each section is a standalone Vue component imported in src/views/Home.vue. You can freely reorder, remove, or add sections:

<template>
  <div class="page-container">
    <Banner />
    <!-- Add, remove, or reorder sections here -->
    <ScrollReveal />
    <HorizontalScroll />
    <footer />
  </div>
</template>

4. Images

Replace the static assets in public/images/ with your own. Maintain the same dimensions for best results, or update the corresponding component styles.

5. Analytics

Swap the Google Analytics ID in index.html with your own, or remove the script entirely.

Deployment

Aura outputs a static dist/ folder. Deploy it anywhere:

Platform	Command / Guide
Vercel	Connect repo → auto-detected
Netlify	Build command: pnpm build, publish dir: dist
GitHub Pages	Push dist/ to gh-pages branch
Cloudflare Pages	Build command: pnpm build, output dir: dist
Any static host	Upload the dist/ folder

Contributing

Contributions are welcome! Feel free to open an issue or submit a pull request.

1. Fork the repository
2. Create your branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

Licensed under the MIT License.

---

_{Crafted with care by nicejade}