https://github.com/educlopez/polaris
Polaris is a sleek and modern portfolio template built with Astro, designed to help designers, developers, and creatives showcase their work with clarity and style. Inspired by the guiding North Star, Polaris puts your projects in the spotlight while keeping the layout clean, responsive, and performance-focused.
https://github.com/educlopez/polaris
astrojs designer developer minimal portfolio react
Last synced: 19 days ago
JSON representation
Polaris is a sleek and modern portfolio template built with Astro, designed to help designers, developers, and creatives showcase their work with clarity and style. Inspired by the guiding North Star, Polaris puts your projects in the spotlight while keeping the layout clean, responsive, and performance-focused.
- Host: GitHub
- URL: https://github.com/educlopez/polaris
- Owner: educlopez
- License: mit
- Created: 2025-08-22T17:36:25.000Z (about 2 months ago)
- Default Branch: main
- Last Pushed: 2025-08-23T22:02:36.000Z (about 1 month ago)
- Last Synced: 2025-08-24T09:45:26.634Z (about 1 month ago)
- Topics: astrojs, designer, developer, minimal, portfolio, react
- Language: Astro
- Homepage: https://polaris-six-rust.vercel.app
- Size: 31.4 MB
- Stars: 5
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
Polaris
A modern, responsive personal portfolio template built with Astro.
What's included ·
Prerequisites ·
Getting Started ·
How to use ·
Customization
Everything you need to build a stunning personal portfolio website. Polaris is an opinionated Astro template designed for designers and developers who want to showcase their work with a clean, modern aesthetic. Built with performance and user experience in mind, it provides a solid foundation that grows with your career.
## What's included
[Astro](https://astro.build/) - Static site generator
[React](https://reactjs.org/) - Interactive components
[Tailwind CSS](https://tailwindcss.com/) - Utility-first styling
[Lucide](https://lucide.dev/) - Beautiful icon library
[TypeScript](https://www.typescriptlang.org/) - Type safety
[MDX](https://mdxjs.com/) - Enhanced markdown for content
[Sharp](https://sharp.pixelplumbing.com/) - Image optimization
[Class Variance Authority](https://cva.style/) - Component variant management
[Radix UI](https://www.radix-ui.com/) - Accessible component primitives
## Directory Structure
```
.
├── public/ # Static assets
│ ├── favicon.svg # Site favicon
│ └── image.png # Hero image
├── src/
│ ├── components/ # Reusable components
│ │ ├── ui/ # UI components (buttons, dropdowns, etc.)
│ │ ├── fade.astro # Fade animation component
│ │ └── listProjects.astro # Project listing component
│ ├── config/
│ │ └── site.json # Site configuration and content
│ ├── content/
│ │ └── projects/ # Project markdown files and images
│ ├── layouts/
│ │ └── Layout.astro # Main layout component
│ ├── lib/
│ │ └── utils.ts # Utility functions
│ ├── pages/
│ │ ├── index.astro # Homepage
│ │ └── projects/ # Dynamic project pages
│ └── styles/
│ └── global.css # Global styles
├── astro.config.mjs # Astro configuration
├── components.json # UI components configuration
├── package.json # Dependencies and scripts
├── tsconfig.json # TypeScript configuration
└── vercel.json # Vercel deployment configuration
```
## Prerequisites
Node.js (version 18 or higher)
pnpm (recommended) or npm
Git
## Getting Started
Clone this repo locally with the following command:
```bash
git clone
cd polaris
```
1. Install dependencies using pnpm:
```sh
pnpm install
```
2. Start the development server:
```sh
pnpm dev
```
3. Open your browser and navigate to `http://localhost:4321`
## How to use
This template is designed to be a starting point for your personal portfolio. It includes everything you need to showcase your work professionally while maintaining excellent performance and user experience.
### Key Features
- **Modern Tech Stack**: Built with Astro for optimal performance and React for interactive components
- **Responsive Design**: Fully responsive layout that looks great on all devices
- **Project Showcase**: Dynamic project pages with detailed case studies using MDX
- **Clean Design**: Minimalist aesthetic with smooth transitions and interactions
- **Content Management**: Markdown-based content for easy updates and maintenance
- **Performance Optimized**: Static site generation with optimized images and assets
- **Accessible**: Built with accessibility in mind using Radix UI primitives
### Available Scripts
| Command | Action |
| :--------------- | :----------------------------------------------- |
| `pnpm dev` | Starts local dev server at `localhost:4321` |
| `pnpm build` | Build your production site to `./dist/` |
| `pnpm preview` | Preview your build locally, before deploying |
| `pnpm astro ...` | Run CLI commands like `astro add`, `astro check` |
## Customization
### Site Configuration
Update `src/config/site.json` to modify:
- Personal information and bio
- Contact details and social links
- Professional experience timeline
- Project grid layout preferences
- Company information and specialties
### Adding Projects
1. Create a new markdown file in `src/content/projects/`
2. Add project images to `src/content/projects/images/`
3. Use the existing project structure as a template with frontmatter for metadata
### Styling
- Global styles are in `src/styles/global.css`
- Component-specific styles use Tailwind CSS classes
- Smooth transitions and interactions built with CSS
- UI components follow a consistent design system
### Deployment
This project can be deployed to any static hosting service:
- **Vercel**: Connect your repository for automatic deployments
- **Netlify**: Drag and drop the `dist` folder or connect your repository
- **GitHub Pages**: Use GitHub Actions for automated deployment
- **Any static hosting**: Upload the contents of the `dist` folder
## Recognition
Built with ❤️ by [Eduardo Calvo](https://github.com/educlopez) - UI Designer & Frontend Developer based in Madrid, Spain.