Nikola Tesla Portfolio is an open-source Astro portfolio template built with Astro 5.7, React 19, and TailwindCSS 4 that ships with project, blog, about, and contact pages for developers and designers.
What is Nikola Tesla Portfolio?
Nikola Tesla Portfolio is a starter template for building a personal portfolio website with the Astro static site generator. It takes a standard Astro project—with src/pages, src/components, and src/layouts—and adds React 19 components, TailwindCSS 4 styling through src/styles/global.css, and the React Paper Shaders library for visual effects. The template outputs static pages for a homepage, projects, about, contact, and a blog with dynamic routes created from markdown or content files. It is maintained by GitHub user iann-mathaiya, who has published the project under the MIT License.
Key Features
- Astro 5.7 framework — Built on Astro 5.7 with file-based routing in
src/pages, a sharedRootLayout.astro, and static site output. - React 19 integration — React components live in
src/componentsand render as interactive islands inside Astro pages. - TailwindCSS 4 styling — Global utility-first styles are defined in
src/styles/global.css; no separate CSS framework is needed. - React Paper Shaders — The template includes the Paper Design shaders library for WebGL effects; the library is pre-v1 and the README warns that breaking changes are expected under 0.0.x versioning.
- Blog with dynamic slugs — A
blog/index.astrolisting page plus a[...slug].astroroute generates individual post pages from content files. - Astro server actions — An
src/actionsfolder is included for server-side logic such as contact form handling. - Asset pipeline — Images placed in
src/assetsare transformed, optimized, and bundled by Astro;public/holds static files likefavicon.svgandsocial-image.svg. - Vercel deployment config — The project is configured for deployment to Vercel and can be modified for any other hosting provider.
Who is it for?
- Freelance developers who need a portfolio site with a project showcase and a blog to post technical content.
- Designers who want a ready-made layout with custom shader effects without writing WebGL from scratch.
- Astro learners who want a working example combining Astro 5.7, React 19, TailwindCSS 4, and server actions.
- Open-source contributors who want an MIT-licensed starting point to customize for their own personal brand.
What can you do with Nikola Tesla Portfolio?
- Developers: Deploy a personal portfolio with separate About, Projects, and Contact pages plus a blog powered by dynamic
[...slug].astroroutes. - Content creators: Write blog posts and have them automatically appear in the blog index via Astro's content files.
- Freelancers: Replace the sample content and social image, then push to Vercel for a live site using the included deployment setup.
- Shader enthusiasts: Experiment with React Paper Shaders inside React components while watching for breaking changes in the pre-v1 library.
How does Nikola Tesla Portfolio work?
The template follows the standard Astro workflow: clone the repository, run pnpm install to install dependencies, and start a development server with pnpm run dev. A production build is produced with pnpm run build, and pnpm run preview serves the built site locally. Pages are plain Astro files in src/pages, and React components are imported from src/components.
Pros and cons
- Pros: Uses a modern stack (Astro 5.7, React 19, TailwindCSS 4); includes a dynamic blog; MIT license allows free use and modification; Vercel deployment is preconfigured.
- Cons: The commands require the pnpm package manager; React Paper Shaders is still under 0.0.x and its published breaking changes may require updates; the template includes only the basic portfolio pages, without e-commerce or a CMS.
Pricing
The template is free to use and modify under the MIT License, with no paid tiers or premium features mentioned in the repository.
FAQ
Is Nikola Tesla Portfolio free?
Yes, Nikola Tesla Portfolio is released under the MIT License, so you can use, modify, and redistribute it freely for personal or commercial projects.
What tech stack does Nikola Tesla Portfolio use?
The template uses Astro 5.7 as the static site generator, React 19 for interactive components, TailwindCSS 4 for styling, and React Paper Shaders for visual effects. The package manager is pnpm.
Does Nikola Tesla Portfolio include a blog?
Yes, it includes a blog section with an index page at blog/index.astro and a dynamic [...slug].astro route that generates individual post pages from content files.
Can I deploy Nikola Tesla Portfolio to a hosting service other than Vercel?
Yes, the template is preconfigured for Vercel, but the README states that with slight modifications it can be deployed to any hosting service.
Why does the template use React Paper Shaders?
React Paper Shaders from Paper Design adds WebGL visual effects to React components. The README warns that the library is pre-v1 and will publish breaking changes, so check for updates when Paper Shaders v1 is released.
