AstroReactPortfolioBlog

mirsazzathossain.me — Astro Portfolio Template

By mirsazzathossain

Source code for an academic portfolio and blog site built on Astro, using React islands, Tailwind CSS, and MDX content collections, with publication data synchronization and Vercel deployment configuration.

Open Source SiteDownload Source ZIP

Explore the design

Compare the page layouts and mobile experience. Open any screenshot for a closer look.

3 previews
Desktop homepage1 / 3
Desktop captureTop of page

Actual screenshot captured by the server browser.

All pages & views 3

Screenshots show visual appearance; interactive behavior may differ.

Recorded 2026-09-29View source

What stands out

A quick read of the recorded project description.

01

Astro static output with a Vercel adapter, with interactive parts implemented as React islands

02

Uses Tailwind CSS and MDX content collections to organize pages and articles

03

Publication data is split into generated files and manual override files, avoiding direct modification of generated fields

04

Built-in giscus comments, remark-math and rehype-katex mathematical formula support

05

Includes a GitHub Actions workflow for weekly synchronization of Google Scholar publications and citation data

Template Details

This is the source code for the personal academic portfolio and research website of the author mirsazzathossain.me. It uses Astro static output with a Vercel adapter, implements interactive parts as React islands, styles with Tailwind CSS, and manages content through Astro content collections and MDX. The site includes modules for publications, projects, resources, courses, CV, and profile, with data stored as build-time JSON in the src/data directory.

Publication data is intentionally split: publications.json contains generated data oriented toward Google Scholar, publications.override.json is used for manual corrections, BibTeX, PDFs, ranks, venue citations, feature toggles, and manual entries, and publication_stats.json stores the statistical summary used by the site. The README explicitly warns not to edit generated fields directly and to supplement them via the override file. The repository also includes two GitHub Actions workflows: one for build checks on pushes and pull requests, and one for weekly synchronization of publications and citation data from Google Scholar.

The site integrates giscus comments, remark-math and rehype-katex for mathematical formula rendering, and Vercel Analytics and Speed Insights. The deployment target is Vercel, the build command is npm run build, and the output directory is dist. If you clone or fork the repository, you need to replace the personal content in src/data, src/content, public/images, and public/files, and modify the site metadata in the layout and configuration files.

AstroReactPortfolioBlog

Is it right for your project?

Use Cases

  • Building a personal academic portfolio to showcase publications, projects, courses, and CV
  • As a foundation for a blog site with MDX articles and mathematical formulas
  • Referencing the static site organization approach of Astro + React islands + Tailwind
  • Scenarios requiring periodic synchronization of Google Scholar publication data to the site

Suitable For

  • Researchers with Astro or front-end build experience who want to build their own academic homepage
  • Personal blog authors who need MDX writing and mathematical formula rendering
  • Developers planning to deploy to Vercel and willing to manually replace personal content

Getting started & customization

Use these recorded setup notes alongside the repository instructions for your chosen version.

  1. 1

    Run npm install to install dependencies, and npm run dev to start the local development server (default http://localhost:4321)

  2. 2

    Use npm run build to generate a production build, and npm run preview to preview the build result locally

  3. 3

    When deploying to Vercel, the build command is npm run build, the output directory is dist, the install command is npm install, and the project root directory is the repository root

  4. 4

    After cloning or forking, you need to replace the personal content in src/data, src/content, public/images, and public/files, and modify the site metadata in the layout and configuration files

  5. 5

    Publication corrections should be written to src/data/publications.override.json; do not directly edit the generated fields in publications.json

Read repository instructions

License & source material

Usage conditions & limitations

Free to use · keep license notice

This entry covers the free MIT version in the public repository; the free scope is the code of this version and does not mean that external services or third-party assets are free.

Must comply with when using

  • When using, modifying, or distributing the code, retain the original author's copyright notice and the complete MIT license.
  • Free use, modification, and commercial use are permitted, as is distribution of the code; when distributing, the copyright and license notice must still be included.
  • The code is provided as is, and the author does not promise warranties or assume liability for use.

Additional costs & items to verify

  • The comment feature depends on the third-party service giscus, which requires configuration at giscus.app and association with a GitHub repository, making it an external service dependency.
  • The site integrates Vercel Analytics and Speed Insights; using these analytics features requires deployment on Vercel and may be subject to its terms of service.
  • The workflow for weekly synchronization of Google Scholar publications and citation data depends on Google Scholar scraping and may be affected by its access restrictions.
  • After cloning or forking, you must replace the personal content in src/data, src/content, public/images, and public/files and the site metadata; otherwise, the author's personal information will be published.
  • Generated publication fields should not be edited manually; corrections must be written to publications.override.json, otherwise they may be overwritten by the synchronization process.
  • Demo images, fonts, icons, and other third-party assets must be checked against their respective licenses and cannot be judged solely by the code's MIT license.
  • External services such as domains, hosting, databases, payments, or AI may incur additional charges.
View Original Text Basis

Permission is hereby granted, free of charge

Original License Text

Comments: [giscus](https://giscus.app/)

Original README

Analytics: Vercel Analytics and Speed Insights

Original README

Weekly Google Scholar publication and citation sync

Original README

If you clone or fork this repository, replace the personal content before publishing

Original README

Do not hand-edit generated publication fields in `publications.json`.

Original README
https://github.com/mirsazzathossain/mirsazzathossain.me/blob/main/LICENSEhttps://github.com/mirsazzathossain/mirsazzathossain.me/blob/main/README.md

Based on the full MIT license and the repository README · 2026-09-29. Results only cover the materials read; dependencies, images, fonts, and subsequent term changes are subject to their respective original texts.

Project checks & description sources

Template Information

Source platforms
GitHub
Documentation and maintenance reference score
More documented · 96 / 100
Technologies
Astro · React
Website type
Portfolio · Blog
How this score is calculated

Our heuristic uses license records (up to 30), a demo link (12), a preview (10), stars (15), recorded maintenance (15), description completeness (8), feature records (5) and classification data (5). It is not a code, security or performance test, or a Google score. A link does not establish tested functionality.

What to verify for this project

Repository update recorded
2026-09-29
Screenshot last checked
2026-09-29

A demo link is listed. Check it with your own content and viewport sizes; its presence does not confirm that forms, authentication or payments work.

The catalog identifies Astro as the primary stack. Check the actual dependency manifest and lockfile for versions and hosting requirements. These notes use recorded metadata, not a code audit or a deployment test.

Use a selection guide →

How this description was prepared

AI-assisted description based on catalog records and repository material. Repository authors are not automatically the reviewers of this description.

Automatically checked against source and license rules; no manual editorial review.

Inspect the recorded source material

SHA-256: 6dbb9b71214de272c4409ae40097c06f87eeb441d62a164291c168d6b4c9a343

2026-09-29T01:11:55.002Z

Source file / repository
![Tech Stack](public/images/msh-nextjs.png)

## mirsazzathossain.me

![website status](https://img.shields.io/website?down_color=red&down_message=offline&up_color=green&up_message=online&url=https%3A%2F%2Fmirsazzathossain.me&style=flat-square) ![GitHub](https://img.shields.io/github/license/mirsazzathossain/mirsazzathossain.me?style=flat-square) ![GitHub last commit](https://img.shields.io/github/last-commit/mirsazzathossain/mirsazzathossain.me?style=flat-square) ![GitHub repo size](https://img.shields.io/github/repo-size/mirsazzathossain/mirsazzathossain.me?style=flat-square) ![GitHub top language](https://img.shields.io/github/languages/top/mirsazzathossain/mirsazzathossain.me?style=flat-square)

Source code for [mirsazzathossain.me](https://mirsazzathossain.me), my academic portfolio and research website. The site is built with [Astro](https://astro.build/), interactive [React](https://react.dev/) islands, [Tailwind CSS v4](https://tailwindcss.com/), and MDX content collections.

## Stack

- Framework: [Astro](https://astro.build/) with static output and the Vercel adapter
- UI islands: [React](https://react.dev/)
- Styling: [Tailwind CSS](https://tailwindcss.com/) v4
- Content: Astro content collections and MDX
- Math: `remark-math` and `rehype-katex`
- Comments: [giscus](https://giscus.app/)
- Deployment: [Vercel](https://vercel.com/)
- Analytics: Vercel Analytics and Speed Insights

## Project Structure

- `src/pages/*`: Astro routes.
- `src/components/*`: Astro and React components.
- `src/content/*`: MDX posts and snippets.
- `src/data/*`: Build-time JSON data for publications, projects, resources, courses, CV, and profile sections.
- `src/styles/*`: Tailwind entry point and global site layers.
- `src/utils/*`: Shared data, formatting, and content utilities.
- `public/*`: Static assets such as images, icons, PDFs, and the web manifest.
- `.github/workflows/ci.yml`: Build check for pushes and pull requests.
- `.github/workflows/update-publications.yml`: Weekly Google Scholar publication and citation sync.
- `vercel.json`: Vercel deployment settings for Astro.

## Publication Data

Publication data is split intentionally:

- `src/data/publications.json`: generated Scholar-facing publication data.
- `src/data/publications.override.json`: user-managed overrides and manual publication entries.
- `src/data/publication_stats.json`: publication summary stats used by the site.

Do not hand-edit generated publication fields in `publications.json`. Add corrections, BibTeX, PDFs, ranks, venue citations, feature flags, and manual papers in `publications.override.json`.

## Development

Install dependencies:

```bash
npm install
```

Start the local dev server:

```bash
npm run dev
```

Open [http://localhost:4321](http://localhost:4321).

Create a production build:

```bash
npm run build
```

Preview the production build locally:

```bash
npm run preview
```

## Deployment

The site is deployed on Vercel. The important settings are:

- Build command: `npm run build`
- Output directory: `dist`
- Install command: `npm install`
- Project root: repository root

## Forking

If you clone or fork this repository, replace the personal content before publishing:

- `src/data/*`
- `src/content/*`
- `public/images/*`
- `public/files/*`
- site metadata in the layout/config files
Report a correction

Explore similar templates

Compare previews and descriptions within the same stack and category.

astrowind

astrowind

AstroWind is a free, open-source Astro starter theme using Astro and Tailwind CSS, released under the MIT license.

Astro · Blog

astro-paper

astro-paper

AstroPaper is a minimal, responsive, accessible, and SEO-friendly Astro blog theme. Articles are stored as Markdown/MDX in src/content/posts/, with subdirectories affecting URLs.

Astro · Blog

fuwari

fuwari

Fuwari is a static blog template built with Astro and Tailwind CSS for personal blogs. It manages posts as Markdown files in src/content/posts/, with frontmatter for title, date, description, cover, tags, categories, draft status, and language.

Astro · Blog

Firefly

Firefly

Firefly is a clean personal blog theme forked from Astro and Fuwari, offering four background modes, single/double sidebar and list/grid layouts, Pagefind client-side full-text search, and a six-language UI.

Astro · Blog

astro-theme-cactus

astro-theme-cactus

Astro Cactus is an Astro-based blog and portfolio theme that uses Markdown/MDX content collections to manage posts, notes, and tags, with frontmatter type-checked by a schema.

Astro · Portfolio

astrofy

astrofy

Astrofy is a free and open-source personal portfolio website template built with Astro and TailwindCSS, with built-in blog, CV timeline, project showcase, store, and RSS feed modules.

Astro · Portfolio