AstroPortfolioBlog

ascend-x.dev — Astro Portfolio Template

By ascend-x

A cybersecurity-themed personal portfolio and research blog template built with Astro, Tailwind CSS, and TypeScript, featuring an in-browser terminal, a honeypot 404 page, and a Matrix easter egg.

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-10-13View source

What stands out

A quick read of the recorded project description.

01

Custom in-browser terminal with Ctrl + ~ toggle and session persistence across pages

02

Honeypot-style 404 page that shows a security warning for invalid routes and path traversal requests

03

Matrix digital rain easter egg triggered on any page via the Konami code

04

SEO configuration for search engines and AI crawlers, including llms.txt, JSON-LD, and a dynamic sitemap

05

Pagefind static search index generated at build time, unavailable in development mode

06

Markdown/MDX content management based on Astro Content Collections and Zod validation

Template Details

This template is the source code for the personal site of penetration testing and cloud security engineer Nandakishore V, positioned as a combination of portfolio and research blog. Pages are statically generated by Astro, styling uses Tailwind CSS, logic uses TypeScript, and content is managed through Astro Content Collections. Blog posts, projects, and achievements are placed as Markdown or MDX files in the corresponding directories under src/content/, with frontmatter validated by Zod.

On the interactive side, it includes a custom in-browser terminal that can be toggled via a button in the bottom-right corner or the Ctrl + ~ shortcut. Using Astro View Transitions, the session state persists across page navigations. Built-in commands include help, whoami, ls, cat contact.txt, decrypt ascendx, hack, and matrix. The site also provides a Matrix digital rain easter egg (triggered on any page by entering the Konami code), a honeypot 404 page that renders invalid routes and path traversal requests as a "SECURITY PROTOCOL BREACH" warning, button hover chromatic aberration glitch effects, and a decrypt-style text scramble animation for the homepage title.

For SEO and crawler governance, it provides llms.txt, robots.txt, humans.txt, JSON-LD structured data, and an automatically generated sitemap. Search uses Pagefind, which generates a static index at build time and is therefore unavailable in development mode. Analytics uses GoatCounter. Deployment instructions point to Cloudflare Pages and explicitly require using npm with the repository's package-lock.json, advising against switching to pnpm. The repository is MIT licensed, and the free scope covers only this version of the code; third-party assets such as demo images, fonts, and icons, as well as external services like domains and hosting, must be verified separately and paid for by the user.

AstroPortfolioBlog

Is it right for your project?

Use Cases

  • Building a cybersecurity-themed personal portfolio and resume site
  • Publishing a technical research blog focused on penetration testing and cloud security
  • Serving as a learning and customization starting point for an Astro + Tailwind CSS + TypeScript project
  • Adding playful elements such as terminal interaction, easter eggs, and honeypot-style error pages to a site

Suitable For

  • Developers with Astro or front-end build experience who want to maintain the source code themselves
  • Authors of personal sites who need a combined portfolio and research blog
  • Creators interested in terminal interaction, glitch aesthetics, and security-themed visuals

Getting started & customization

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

  1. 1

    Install dependencies with npm; the repository relies on a strictly generated package-lock.json for Cloudflare compatibility, so do not switch to pnpm

  2. 2

    Run npm run dev to start the development server, with the default address at http://localhost:4321

  3. 3

    Pagefind search depends on build output, so local verification requires running npm run build followed by npm run preview

  4. 4

    To add a blog post, project, or achievement, add a .md or .mdx file in the corresponding directory under src/content/; frontmatter is validated by Zod

  5. 5

    The MIT license covers only this version of the code; third-party assets such as demo images, fonts, and icons, as well as external services like domains and hosting, require separate license and cost verification

Read repository instructions

License & source material

Usage conditions & limitations

Free to use · keep license notice

This listing covers the free version under the MIT license in the public repository; the free scope is limited to this version of the code and does not imply that external services or third-party assets are free.

Must comply with when using

  • You may use, modify, commercialize, and distribute this version of the code for free.
  • When distributing copies or substantial portions of the code, retain the original author's copyright notice and the full MIT license notice.
  • The code is provided as is; warranties and limitations of liability are governed by the original license and applicable law.

Additional costs & items to verify

  • 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.
  • The project requires npm and relies on a strictly generated package-lock.json for Cloudflare deployment compatibility, and explicitly prohibits switching to the pnpm package manager.
  • Pagefind search depends on a static index generated at build time, so search is disabled in development mode and must be built first for local verification.
  • The deployment target is Cloudflare Pages, which requires using that external hosting service and may involve account and related service costs.
  • Site analytics depends on the external service GoatCounter, which requires registering an account and configuring it before use.
View Original Text Basis

Permission is hereby granted, free of charge

Original License Text

*(Note: This project relies on `npm` and a strictly generated `package-lock.json` for Cloudflare compatibility. Do not use `pnpm`)*

Original README

Because Pagefind search relies on a built static index, search is disabled in dev mode.

Original README

**Hosting**: [Cloudflare Pages](https://pages.cloudflare.com/) - Global edge network deployment with automated CI/CD via npm.

Original README

**Analytics**: [GoatCounter](https://www.goatcounter.com/) - A lightweight, open-source, and privacy-respecting analytics solution (Zero tracking pixels).

Original README
https://github.com/ascend-x/ascend-x.dev/blob/main/LICENSEhttps://github.com/ascend-x/ascend-x.dev/blob/main/README.md

Compiled by DeepSeek based on repository license and README ·2026-10-13. 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 · 85 / 100
Technologies
Astro
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-08-01
Screenshot last checked
2026-10-13

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.

Review declaration: [email protected] · 2026-10-13

Inspect the recorded source material

SHA-256: b2295c57cbc45e8a0be42e1523b30cb387cfec3c7e113aaaedf3761c82a6ccda

2026-10-13T01:37:10.632Z

Source file / repository
# 🚀 Ascend-X.dev | Cybersecurity Portfolio & Research Blog

> The personal portfolio and technical blog of **Nandakishore V**, a Penetration Tester, Cloud Security Engineer, and avid CTF competitor. 

Welcome to the source code for [ascend-x.dev](https://ascend-x.dev). This site is built to be more than just a resume—it is a deeply customized, interactive experience designed to showcase cybersecurity skills, cloud engineering architecture, and a passion for infosec.

---

## 🛠️ Architecture & Tech Stack

This project is engineered for maximum performance, security, and developer experience.

- **Framework**: [Astro](https://astro.build/) - For blazing-fast, static HTML generation with islands architecture.
- **Styling**: [Tailwind CSS v4](https://tailwindcss.com/) - Utility-first styling with modern optimizations.
- **Logic**: [TypeScript](https://www.typescriptlang.org/) - Strongly typed components and configuration.
- **Analytics**: [GoatCounter](https://www.goatcounter.com/) - A lightweight, open-source, and privacy-respecting analytics solution (Zero tracking pixels).
- **Search**: [Pagefind](https://pagefind.app/) - A static search engine indexing the site at build-time.
- **Hosting**: [Cloudflare Pages](https://pages.cloudflare.com/) - Global edge network deployment with automated CI/CD via npm.

---

## 🔥 Key Features & Highlights

This portfolio includes several unique, cybersecurity-themed features and easter eggs:

### 💻 The Interactive Terminal
An entirely custom, browser-based CLI built directly into the site.
- **Access:** Click the "TERMINAL" button in the bottom right, or use the keyboard shortcut `Ctrl + ~` (or `Ctrl + \``) to toggle it open.
- **Features:** A persistent state utilizing Astro View Transitions so your terminal session survives page navigations.
- **Commands:** Try typing `help`, `whoami`, `ls`, `cat contact.txt`, `decrypt ascendx`, `hack`, or `matrix`!

### 🌧️ Matrix Digital Rain Easter Egg
A hidden canvas animation globally integrated into the `Base.astro` layout.
- **Trigger:** Type the classic Konami Code anywhere on the site: `⬆ ⬆ ⬇ ⬇ ⬅ ➡ ⬅ ➡ B A`
- **Effect:** The screen will overlay a green "Matrix" falling digital rain effect. Type the code again to disable it.

### 🛑 Security Honeypot 404 Page
Standard "Page Not Found" errors are boring.
- If a user (or bot) attempts path traversal or requests an invalid route, they are met with a red **"SECURITY PROTOCOL BREACH"** warning, complete with simulated terminal logs logging their "unauthorized access attempt."

### 🕵️‍♂️ Advanced SEO & Bot Governance
Engineered to be perfectly parsed by search engines and modern AI crawlers.
- **`llms.txt`**: A custom markdown file in the root directory providing high-level context specifically formatted for Large Language Models.
- **`robots.txt` & `humans.txt`**: Strict bot crawling guidelines and author credits.
- **JSON-LD Schema**: Included in the `<head>` for rich Google search results (like the Sitelinks Search Box).
- **Dynamic Sitemap**: Automatically generated for all routes and blog posts.

### 🎨 Glitch Aesthetics
- Features custom CSS keyframe animations to create chromatic aberration "glitch" effects on hover for primary Call-To-Action buttons.
- A "decryption" text scramble effect on the homepage hero section on load.

---

## 🚀 Running Locally

Want to run the site on your own machine? It's simple.

1. **Clone the repository:**
   ```bash
   git clone https://github.com/ascend-x/ascend-x.dev.git
   cd ascend-x.dev
   ```

2. **Install dependencies:**
   *(Note: This project relies on `npm` and a strictly generated `package-lock.json` for Cloudflare compatibility. Do not use `pnpm`)*
   ```bash
   npm install
   ```

3. **Start the development server:**
   ```bash
   npm run dev
   ```
   *The site will be available at `http://localhost:4321`.*

4. **Test Production Build & Search:**
   Because Pagefind search relies on a built static index, search is disabled in dev mode. To test search locally:
   ```bash
   npm run build
   npm run preview
   ```

---

## 📝 Content Management

Blog posts, projects, and achievements are driven by Astro Content Collections.
- Add new Markdown (`.md`) or MDX (`.mdx`) files into the respective folders inside `src/content/`.
- Frontmatter schemas are strictly validated via Zod in `src/content.config.ts`.

---

## 🤝 Let's Connect
- **Email:** [[email protected]](mailto:[email protected])
- **LinkedIn:** [linkedin.com/in/ascend-x](https://linkedin.com/in/ascend-x)
- **GitHub:** [github.com/ascend-x](https://github.com/ascend-x)
- **TryHackMe:** [tryhackme.com/p/ascendx001](https://tryhackme.com/p/ascendx001)
Report a correction

Explore similar templates

Compare previews and descriptions within the same stack and category.