This is a single-page portfolio website built with Astro, React, and Tailwind CSS. It features an astronomy-themed design and a narrative structure to showcase projects and skills. The user interface includes scroll-based animations and effects.
- Design: A dark, space/astronomy theme with gradients, celestial objects, and a "glassmorphism" effect.
- User Experience: Scroll-based animations and effects.
- Content: The portfolio is structured to guide visitors through the developer's journey, skills, and projects.
- Architecture: A component-based architecture for the React portion, following the principles of shadcn/ui.
- Responsiveness: The website is designed to be responsive across different devices.
- Core Framework: Astro for the static site generation and React (v19) for the UI components.
- Language: TypeScript for type-safe code.
- Styling: Tailwind CSS for utility-first styling.
- UI Components:
- Radix UI Primitives: Headless, accessible components.
- class-variance-authority (CVA): For creating variant-based component styles.
- tailwind-merge and clsx: For conditional and clean class name management.
- Animation: Motion One for component animations.
- Icons: Lucide React for icons.
The codebase is organized with an Astro container for the main page, which then runs a full React application.
/
├─── src/
│ ├─── pages/
│ │ └─── index.astro # Astro page, the main entry point
│ ├─── react-app/
│ │ ├─── components/ # All React components (ui, custom, etc.)
│ │ ├─── App.tsx # Main React application component
│ │ └─── styles/
│ │ └─── globals.css # Global styles for the React app
│ └─── styles/
│ └─── global.css # Global styles for Astro pages
├─── public/
│ └─── images/ # Static image assets
├─── astro.config.mjs # Astro configuration
└─── package.json # Project dependencies and scripts
To get a local copy up and running, follow these steps.
- Clone the repo
git clone https://github.com/your_username/your_project_name.git
- Install dependencies
bun install
- Start the development server
bun run dev
The application will be available at http://localhost:4321.
The project can be built for production using the Astro CLI.
To build the application, run:
bun run buildThis will create a dist/ directory with the production-ready files, which can then be deployed to any static hosting service.
The celestial objects used in this project are from public domain sources. Please see the src/react-app/Attributions.md file for a complete list of attributions.