Homepage WebGL cylindrical carousel: project covers arranged along a cylindrical surface, with shaders producing liquid and chromatic aberration reactions based on scroll speed, falling back to regular images when WebGL is unavailable
AstroPortfolio
elias-vent-astro — Astro Portfolio Template
By agnilem
Elias Vent is a dark portfolio theme for product and motion designers, built on Astro, outputting pure static files, with interactions implemented by native TypeScript modules.
Explore the design
Compare the page layouts and mobile experience. Open any screenshot for a closer look.
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-30View source
What stands out
A quick read of the recorded project description.
Lenis smooth scrolling, combined with text and section reveals that progress with scrolling, and portrait parallax
Award list cover images that follow the cursor
Motion modules such as 3D flip cards, a looping marquee, a fixed services switcher, and an image fly-in gallery
Case study pages generated from Markdown, with frontmatter driving both the homepage carousel and detail pages, and a "next project" link
Respects prefers-reduced-motion, disabling smooth scrolling, idle animations, and reveal effects; Sora font self-hosted via Fontsource
Template Details
The theme organizes portfolio pages around a dark visual style and motion. The homepage includes a WebGL cylindrical carousel (project covers arranged along a cylindrical surface, with shaders producing liquid and chromatic aberration reactions based on scroll speed, falling back to regular images when WebGL is unavailable), Lenis smooth scrolling, text and section reveals that progress with scrolling, portrait parallax, award covers that follow the cursor, 3D flip cards, a looping marquee, a fixed services switcher, and an image fly-in gallery. On the content side, site copy is centralized in src/content/site.json, case studies are placed as Markdown files in src/content/projects/, and frontmatter fields drive both the homepage carousel and the /projects/<filename> detail pages, with a "next project" link at the bottom of detail pages. There is also a 404 page (rotating image ring), an FAQ accordion, and a contact form with loading and success states. The theme respects prefers-reduced-motion, disabling smooth scrolling, idle animations, and reveal effects; the font is Sora, self-hosted via Fontsource.
Usage limitations: the contact form has no backend and requires integrating a form service in src/components/sections/Contact.astro; the two environment variables for Vercel Analytics and the fixed store badge are off by default and only enabled when set to true. The build output is pure static files under dist/, deployable to any static host; on Vercel or Netlify, import the repository and keep the default build command and output directory, and update site in astro.config.mjs to the actual domain to ensure canonical and Open Graph links are correct.
Regarding licensing, the code is under the MIT license and may be used, modified, commercialized, and distributed for free; when distributing, the copyright notice and the full MIT license text must be retained; third-party assets such as demo images, fonts, and icons must be checked separately under their respective licenses, and external services such as domains and hosting may incur additional charges.
AstroPortfolio
Is it right for your project?
Use Cases
- Product designers or motion designers building a personal portfolio site
- Needing to present multiple projects as case studies with metadata such as role, timeline, and year
- A showcase site that uses a dark visual style and scroll-driven motion as its primary means of expression
- Deploying to Vercel, Netlify, or another static host and requiring pure static output
Suitable For
- Personal portfolios for product and motion designers
- Those who accept managing case content with Markdown and site copy with JSON
- Sites that require pure static output and do not depend on a framework runtime
- Users willing to integrate a form service themselves and verify third-party asset licenses
Getting started & customization
Use these recorded setup notes alongside the repository instructions for your chosen version.
- 1
Install and run: npm install, npm run dev (default http://localhost:4321), npm run build (outputs to dist/), npm run preview
- 2
Site copy is centralized in src/content/site.json, case studies are src/content/projects/*.md, images go in public/assets/, and colors, font sizes, and layout are in src/styles/global.css
- 3
The contact form has no backend; point it to your own form service in src/components/sections/Contact.astro
- 4
PUBLIC_VERCEL_ANALYTICS and PUBLIC_STORE_BADGE are off by default and only enabled when set to true
- 5
Before deployment, update site in astro.config.mjs to the actual domain to ensure canonical and Open Graph links are correct
License & source material
Usage conditions & limitations
Free to use · keep license noticeThis entry covers the free version under the MIT license in the public repository; the free scope is the code of that version and does not mean external services or third-party assets are free.
Must comply with when using
- The code of this version may be used, modified, commercialized, and distributed 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
- The contact form has no backend; you must integrate a third-party form service yourself in src/components/sections/Contact.astro, which may incur external service fees.
- The two environment variables PUBLIC_VERCEL_ANALYTICS and PUBLIC_STORE_BADGE are off by default and must be manually set to true to enable Vercel Analytics and the fixed store badge.
- Placeholder images are for demonstration only and must be replaced with your own work; third-party asset licenses must be checked separately.
- Before deployment, update site in astro.config.mjs to the actual domain to ensure canonical and Open Graph links are correct.
- Demo images, fonts, icons, and other third-party assets must be checked under 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
The contact form has no backend. Point it at your form service in `src/components/sections/Contact.astro`.
Original README
Both are off by default. Set them to `true` to enable.
Original README
Placeholder images are for demo purposes only; replace them with your own work.
Original README
https://github.com/agnilem/elias-vent-astro/blob/main/LICENSEhttps://github.com/agnilem/elias-vent-astro/blob/main/README.mdUpdate `site` in `astro.config.mjs` to your domain so canonical and Open Graph URLs are correct.
Original README
Compiled by DeepSeek based on repository license and README ·2026-10-02. 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 · 80 / 100
- Technologies
- Astro
- Website type
- Portfolio
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-28
- Screenshot last checked
- 2026-10-02
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: 7cf6537b025f5a8abd5d420fa922d2ef90ef957ae49b2ffc5327378a5bc4b456
2026-10-02T14:16:01.529Z
Source file / repository# Elias Vent, an Astro portfolio theme A dark, motion-led portfolio theme for product and motion designers. Static output, no framework runtime: every interaction is a small vanilla TypeScript module. ## Features - WebGL cylinder carousel in the hero: project covers curve on a cylinder with a liquid and chromatic shader that reacts to scroll speed. Falls back to plain images without WebGL. - Lenis smooth scrolling - Scroll-scrubbed word and block reveals, portrait parallax - Awards list with a cover image that follows the cursor - 3D flip cards, a looping ticker, a pinned services switcher, an image fly-in gallery - FAQ accordion, contact form with loading and success states - Liquid gradient shader in the footer - Case study pages generated from Markdown, with a "next project" link - 404 page with a spinning image ring - Honours `prefers-reduced-motion`: smooth scrolling, idle animation and reveals are switched off - Sora font, self-hosted through Fontsource ## Getting started ```sh npm install npm run dev # http://localhost:4321 npm run build # outputs to dist/ npm run preview # serves dist/ ``` ## Editing content - `src/content/site.json` holds all site copy: name, tagline, navigation, socials, awards, principles, services, gallery, FAQ, contact text and the 404 ring images. - `src/content/projects/*.md` holds one file per case study. The frontmatter fields (title, category, order, role, timeline, year, overview, challenge, images) drive both the home carousel and `/projects/<file-name>`. Any Markdown body renders under the overview (the demo files leave it empty, matching the original). - Images live in `public/assets/`. - Colors, type scale and layout live in `src/styles/global.css`. The contact form has no backend. Point it at your form service in `src/components/sections/Contact.astro`. ## Environment variables Both are off by default. Set them to `true` to enable. | Variable | Effect | | --- | --- | | `PUBLIC_VERCEL_ANALYTICS` | Loads Vercel Web Analytics and Speed Insights | | `PUBLIC_STORE_BADGE` | Shows the fixed store badge in the corner | ## Deploy The build is plain static files in `dist/`, so it runs on any static host. On Vercel or Netlify, import the repo and keep the defaults (build command `npm run build`, output `dist`). Update `site` in `astro.config.mjs` to your domain so canonical and Open Graph URLs are correct. ## License and credits MIT, see `LICENSE`. Sora is by Jonathan Barnbrook and Julián Moncada, licensed under the SIL Open Font License 1.1. Placeholder images are for demo purposes only; replace them with your own work.
Explore similar templates
Compare previews and descriptions within the same stack and category.
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 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
astro-nano
Astro Nano is a static, minimalist portfolio and blog template built with Astro, Tailwind, and TypeScript without frontend frameworks. It includes light/dark themes, animated UI, automatic sitemap and RSS feed generation, and Markdown/MDX support with component imports.
Astro · Portfolio
astro-erudite
astro-erudite is an opinionated, unstyled static blog template built with Astro and native CSS, with no UI or CSS framework and minimal dependencies.
Astro · Portfolio
astro-sphere
Astro Sphere is a static, minimalist portfolio and blog theme maintained by markhorn-dev, built mainly with Astro, Tailwind, and TypeScript, with a small amount of SolidJS for stateful components.
Astro · Portfolio
astro-micro
Astro Micro is a framework-free blog and portfolio theme for Astro, forked from Astro Nano. It adds Pagefind search and Giscus comments while retaining type safety, sitemap, RSS, Markdown and MDX support, and TailwindCSS with system, light, and dark themes.
Astro · Portfolio