Screenshot of Astro Me

Introduction

Astro Me is a crisp, minimal personal portfolio theme designed for Astro. It offers a lightweight solution for creating performant personal websites with a focus on minimalism and reduced JavaScript usage. The theme is inspired by Gatsby Intro and provides essential features for a beautiful, functional portfolio, including dark mode support and resume download capabilities.

Main Features

  • Minimal and crisp design optimized for markdown content
  • Responsive layout for various screen sizes
  • Data configuration using YAML files for easy customization
  • Svelte integration for interactive components like theme switchers
  • Modular structure with focused, single-purpose components
  • Support for 6+ color themes, configurable via tailwind.config.js
  • Dark mode support across all color themes
  • Print-ready styling for one-page portfolio printing
  • Resume download functionality via /api/resume endpoint

Installation Steps

  1. Clone the repository to your local machine.
  2. Navigate to the project directory in your terminal.
  3. Run the following command to install dependencies:
    yarn install
    
  4. Start the development server with:
    yarn start
    
  5. Open your browser and visit the local development URL (typically http://localhost:3000).

Usage Instructions

  1. Customize the YAML files in the content directory to update your personal information and portfolio details.
  2. Modify the components in the src/components directory to adjust the layout and design as needed.
  3. Update the color themes in tailwind.config.js to match your preferred color scheme. Remember to restart the development server after making changes.
  4. Add your resume file to the appropriate directory for the download functionality to work correctly.
  5. Create or modify markdown files in the content directory to add or update your portfolio projects and information.
  6. Adjust the Svelte components in the src directory if you need to modify interactive elements like the theme switcher.
  7. Test the print functionality by using your browser's print feature to ensure the layout is correct for physical copies.
  8. Deploy your site to a hosting platform like Vercel for easy publishing and API support.

Important Notes

  1. The theme uses yarn start instead of yarn dev for local development to maintain compatibility with vercel dev for local function development.

  2. When modifying color themes in tailwind.config.js, always restart the development server to see the changes.

  3. The modular structure of the theme allows for easy customization, but be mindful of maintaining the overall design consistency.

  4. While the theme is lightweight by default, be cautious when adding new features or components to preserve performance.

  5. Test the dark mode functionality thoroughly to ensure all components and content are visible in both light and dark themes.

  6. When adding new pages or sections, remember to update the navigation component accordingly.

  7. The print-ready feature is designed for one-page portfolios. Test the print layout if you add significant amounts of content.

  8. Keep the resume file updated in the correct location for the download feature to work properly.

  9. Future planned features include Form Spree integration for contact forms and improved styles, so check for updates regularly.

  10. When deploying, ensure that your hosting platform supports serverless functions if you're using the resume download API.

Astro Me

Crisp, minimal, personal portfolio theme for Astro

Theme Information:

Stars : github star36
Forks : github fork9
Updated : 08 Oct, 2021
Published : 07 Oct, 2021
Types :
Nextjs IconTailwind IconPortfolio Icon
one-aalam
Created byone-aalam

Similar Themes To Consider

Screenshot of 2021 Portfolio
by BraydenTW
Screenshot of 3bdallah
by 3bdalah
Screenshot of Agcty
by fu4303
Screenshot of Ahurle Dev
by fracture91