astro-portfolio

The Astro Portfolio is a modern, responsive, and SEO-friendly personal portfolio website template designed for developers. Built with the Astro framework, it allows for fast and efficient website creation using your preferred frontend tools. This template simplifies the process of showcasing your skills, projects, and contact information.

Key Features:

• Astro Framework: Leverages Astro for building performant, content-focused websites with a modern developer experience.
• Easy Customization: Personalize your portfolio by simply modifying src/data/info.ts, making it quick to update your details.
• Responsive Design: Ensures your portfolio looks great and functions flawlessly across all devices, from desktops to mobile phones.
• SEO-Friendly: Optimized for search engines to help your portfolio gain visibility and attract potential employers or clients.
• Modular Structure: Organized with clear separation of concerns, including components, data, layouts, pages, and styles, making it easy to navigate and extend.
• Static Assets Management: Easily manage images, fonts, and other static assets within the public/assets directory.

Project Structure Overview: The repository follows a standard Astro project structure:

• /public: Contains static assets like fonts, images, and favicon.ico.
• /src: Houses the core application logic.
  • /src/components: Reusable UI components, categorized into home/ and general/ (e.g., Header.astro, Footer.astro).
  • /src/data: Centralized location for personal portfolio data, primarily info.ts.
  • /src/layouts: Astro layout components (e.g., Layout.astro).
  • /src/pages: Astro or Markdown files that define website routes (e.g., projects.astro, index.astro).
  • /src/styles: Global and custom CSS styles (e.g., custom-styles.css, fonts.css, styles.css).
  • /src/types: TypeScript type definitions.
  • /src/utils: Utility functions.
• package.json: Manages project dependencies and scripts.

Usage and Commands: To get started with the Astro Portfolio template, use the following commands from your project root:

• npm install: Installs all necessary project dependencies.
• npm run dev: Starts a local development server, typically accessible at localhost:3000, for live preview and development.
• npm run build: Compiles your project into a production-ready static site, outputting files to the ./dist/ directory.
• npm run preview: Allows you to preview your built production site locally before deployment.
• npm run astro ...: Executes various Astro CLI commands, such as astro add for integrations or astro check for type checking.
• npm run astro --help: Provides detailed help and options for using the Astro CLI.

This template is ideal for developers looking for a quick, customizable, and high-performance solution to build their online presence.