Personal Website with Astro and Dante Theme

Project preview

Project Overview

This project involved creating a new personal website to showcase my portfolio and blog using Astro, a static site generator. My goal was to replace my hand-coded website with a more modern, scalable, and maintainable solution. The design leverages the clean and responsive Dante theme, which I customized extensively to reflect my personal brand.

Development Process

  1. Choosing the Tech Stack:

    • Decided to use Astro for its flexibility and performance in building static sites.
    • Selected the Dante theme for its professional layout and ease of customization.
    • Hosted the website on Netlify for seamless deployment and scalability.

  2. Customizing the Design:

    • Replaced the default font with my own custom font to better align with my branding.
    • Modified the theme’s color palette to a bold black-and-white base with pink accents, emphasizing a minimalist and type-oriented design.
    • Added bespoke UI elements and animations to enhance the user experience.

  3. Implementing Version Control:

    • Set up Git for managing the project’s development.
    • Created a GitHub repository to maintain version control and collaborate on updates.
    • Used Git branches for feature development and bug fixes, ensuring a smooth workflow.

  4. Deployment and Hosting:

    • Configured Netlify for continuous deployment linked directly to the GitHub repository.
    • Automated builds and preview deployments to streamline the development process.

  5. Content Scalability:

    • Structured the website to support scalable and dynamic content using Astro’s built-in Markdown and data-fetching capabilities.
    • Implemented modular components to easily add or update portfolio case studies and blog posts.

Key Challenges

  • Adapting the pre-built Dante theme to align with my unique design vision.
  • Ensuring smooth integration of custom fonts and maintaining performance.
  • Setting up a seamless workflow for continuous deployment using GitHub and Netlify.

Results

The updated website is modern, scalable, and easy to maintain. The clean design and improved functionality enhance user experience while ensuring content updates can be made effortlessly. The use of Astro and Netlify has streamlined development, hosting, and deployment, making this project a significant upgrade from my previous self-coded website.

Tech Stack

  • Framework: Astro
  • Theme: Dante (customized)
  • Hosting: Netlify
  • Version Control: Git + GitHub
  • Languages: HTML, CSS, JavaScript

View Next

Designing the Robin’s Hood Web App

A user-focused design and management process for the Robin’s Hood web app, utilizing a modular UX design and a database-driven approach to development, bug tracking, and testing.