Astro static generation with Tailwind CSS for a cyberpunk visual style
AstroPortfolio
yisus.dev — Astro Portfolio Template
By YisusOnDev
A cyberpunk-style personal portfolio template built with Astro and Tailwind CSS, supporting English and Spanish, with content driven by JSON data.
Explore the design
Compare the page layouts and mobile experience. Open any screenshot for a closer look.
Desktop homepage1 / 2
Desktop captureTop of page
Actual screenshot captured by the server browser.
All pages & views 2
Screenshots show visual appearance; interactive behavior may differ.
Recorded 2026-10-12View source
What stands out
A quick read of the recorded project description.
English and Spanish bilingual support, with translation text centralized in JSON files under src/i18n
Projects, categories, experience, and skills are all driven by JSON files under src/data
Project showcase supports category filtering, image modals, and demo and repository links
Includes sections such as Hero, social links, experience timeline, skills list, and email contact form
Code is under the MIT license, allowing use, modification, commercial use, and distribution
Template Details
yisus.dev is the personal portfolio website of developer YisusTM_01, built with Astro, styled with Tailwind CSS, and including TypeScript and pnpm configuration. The pages use a cyberpunk visual style, mainly gradients and neon effects, with a color palette of cyan-400, blue-400, purple-400, and pink-400 paired with black and gray-900 backgrounds.
The site content is divided into several sections: a Hero self-introduction, social links, project showcase, career experience timeline, skills list, and email contact form. The project showcase supports category filtering, pop-up image modals, and displays the technologies used along with demo and repository links. The experience section presents entries such as Freelancer, Content Creator, and Developer in a timeline format.
Multilingual support is implemented through es.json and en.json under src/i18n, with page routing at [locale].astro. Project, category, experience, and skill data are stored in projects.json, categories.json, experience.json, and skills.json under src/data, so content can be modified without changing the page structure. Images can be placed under public/images and referenced by filename in JSON, or external URLs can be used directly.
Before use, you need to prepare your own domain and hosting environment, and verify the licenses of third-party assets such as demo images, fonts, and icons; the code itself is under the MIT license.
AstroPortfolio
Is it right for your project?
Use Cases
- Build a personal developer portfolio website to showcase projects, experience, and skills in one place
- Need a static personal site that supports switching between English and Spanish
- Want to update portfolio content by modifying JSON files rather than page code
- Use as a reference project for combining Astro and Tailwind CSS to learn data-driven page structure
Suitable For
- Developers who want to quickly build a personal portfolio
- Freelancers or content creators who need a multilingual personal site
- Users who prefer JSON data-driven static sites that are easy to maintain content for
- Astro users interested in a cyberpunk visual style
Getting started & customization
Use these recorded setup notes alongside the repository instructions for your chosen version.
- 1
Use pnpm install to install dependencies, and pnpm dev to start the local development server (default localhost:4321)
- 2
Use pnpm build to build the production version to ./dist/, and pnpm preview to preview the build result locally
- 3
Project, category, experience, and skill content are maintained in JSON files under src/data
- 4
Translation text is modified in src/i18n/es.json and src/i18n/en.json
- 5
Images can be placed in public/images and referenced by filename in JSON, or external URLs can be entered directly
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 this version and does not mean external services or third-party assets are free.
Must comply with when using
- Free use, modification, commercial use, and distribution of this version's code are allowed.
- 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 domain, hosting, database, payment, or AI may incur additional charges.
View Original Text Basis
https://github.com/YisusOnDev/yisus.dev/blob/main/LICENSEhttps://github.com/YisusOnDev/yisus.dev/blob/main/README.mdPermission is hereby granted, free of charge
Original License Text
Compiled by DeepSeek based on repository license and README ·2026-10-12. 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 · 83 / 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
- 2025-11-11
- Screenshot last checked
- 2026-10-12
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: 0a539cb6a09317d0e995bcf9db83bd3723ed15b4fef239b9dd4c072d90f812c2
2026-10-12T21:13:17.588Z
Source file / repository# YisusTM_01 - Personal Portfolio A modern cyberpunk personal portfolio developed with **Astro** and **Tailwind CSS**. A dynamic website with project sections, experience, social links, and technical skills. ## ✨ Features - 🎨 Modern cyberpunk design with gradients and neon effects - 🚀 Ultra-fast with Astro (static generation) - 📱 Fully responsive (mobile and desktop) - 🌍 Multi-language support (Spanish and English) - 💼 Dynamic project showcase with categories - 🎭 Interactive image modal - 📊 Professional experience timeline - 🔗 Integrated social links - ⚡ SEO optimized - 🎯 Project filtering by category ## 🛠️ Technologies - **[Astro](https://astro.build/)** - Modern web framework - **[Tailwind CSS](https://tailwindcss.com/)** - Utility-first CSS framework - **[TypeScript](https://www.typescriptlang.org/)** - Typed JavaScript - **[pnpm](https://pnpm.io/)** - Fast package manager ## 📁 Project Structure ```text / ├── public/ │ ├── images/ # Static images │ └── favicon.ico ├── src/ │ ├── components/ │ │ ├── ProjectCard.astro # Project card with modal │ │ └── SocialLink.astro # Social link │ ├── data/ │ │ ├── projects.json # Projects and categories │ │ ├── categories.json # Project categories │ │ ├── experience.json # Professional experience │ │ └── skills.json # Technical skills │ ├── i18n/ │ │ ├── es.json # Spanish translations │ │ └── en.json # English translations │ ├── layouts/ │ │ └── Layout.astro # Base layout │ ├── pages/ │ │ └── [locale].astro # Multi-language main page │ └── styles/ │ └── global.css # Global styles ├── astro.config.mjs ├── tsconfig.json └── package.json ``` ## 🧞 Commands | Command | Action | | :--------------------- | :-------------------------------------------------- | | `pnpm install` | Install dependencies | | `pnpm dev` | Start development server at `localhost:4321` | | `pnpm build` | Build for production to `./dist/` | | `pnpm preview` | Preview build locally | | `pnpm astro ...` | Run Astro CLI commands | ## 🎨 Sections ### 1. Hero Personal presentation with profile image and description. ### 2. Social Links Links to social networks (GitHub, Twitch, Twitter, Instagram, Discord). ### 3. Projects - Dynamic project showcase - Filter by categories - Interactive image modal - Technology information - Links to live demo and repository ### 4. Experience Visual timeline of professional experience with: - Freelancer - Content Creator - Developer ### 5. Skills List of technical skills sorted alphabetically. ### 6. Contact Direct contact form via email. ## 📝 Customization ### Dynamic Data All data is stored in JSON files in `src/data/`: - **projects.json**: Add/edit your projects - **categories.json**: Define project categories - **experience.json**: Your professional experience - **skills.json**: Your technical skills ### Translations Edit `src/i18n/` to change text: - `es.json` - Spanish - `en.json` - English ### Images - Place project images in `public/images/` - Reference locally in projects.json: `"image": "imagename.jpg"` - Or use direct URLs: `"image": "https://..."` ### Styles Design uses Tailwind CSS. Main colors: - Primary: `cyan-400` / `blue-400` - Secondary: `purple-400` / `pink-400` - Background: `black` / `gray-900` ## 📄 License This project is under the MIT License. --- Developed by **YisusTM_01** [GitHub](https://github.com/YisusOnDev) • [Twitch](https://twitch.tv/YisusTM_01) • [Twitter](https://x.com/YisusTM_01)
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