Free modern portfolio template UI built with React, Vite, TypeScript, and Vanilla CSS.
🌐 Live Demo · Features · Quick Start · Customize · Deploy
Pro5 Portfolio Template UI is a clean, responsive, and easy-to-customize personal website template for developers, creators, students, freelancers, and indie makers.
The template is designed to help you quickly publish a polished portfolio with a hero profile section, product/project cards, contact buttons, social links, smooth reveal animations, and SEO-friendly metadata.
Live demo: https://biyos.pages.dev
Use it as a starter UI, customize the content, then deploy it to Cloudflare Pages, Vercel, Netlify, or any static hosting platform.
- ⚡ Built with React + Vite + TypeScript
- 🎨 Styled with Vanilla CSS — no CSS framework lock-in
- 📱 Fully responsive layout for mobile, tablet, and desktop
- 🧩 Product/project showcase cards
- 🔗 Contact buttons and social media links
- 🪄 Smooth scroll reveal animations
- 🧠 SEO-ready HTML metadata
- 🗺️ Includes
robots.txtandsitemap.xml - ☁️ Easy deployment to Cloudflare Pages, Vercel, or Netlify
- 🧼 Simple file structure for beginners to edit
| Tool | Purpose |
|---|---|
| React | UI components |
| Vite | Fast dev/build tooling |
| TypeScript | Safer development |
| Vanilla CSS | Custom styling without framework lock-in |
| Cloudflare Pages | Static hosting for the live demo |
Clone the repository:
git clone https://github.com/ltntai/portfolio-template-ui.git
cd portfolio-template-uiInstall dependencies:
npm installRun locally:
npm run devOpen the local URL shown in your terminal, usually:
http://localhost:5173/npm run buildThe production files will be generated in:
dist/Preview the production build locally:
npm run previewEdit these files to make the template yours:
| File | What to change |
|---|---|
src/App.tsx |
Name, intro text, email, phone, social links, product/project links |
src/App.css |
Layout, colors, cards, buttons, animations, responsive styles |
src/index.css |
Global CSS reset and base styles |
src/assets/profile.png |
Profile avatar / main image |
index.html |
SEO title, description, Google verification, social preview metadata |
public/robots.txt |
Search engine crawl rules |
public/sitemap.xml |
URLs submitted to Google Search Console |
- Replace the profile image with your own avatar.
- Change the hero name and description in
src/App.tsx. - Update product cards with your real projects.
- Update email, phone number, and social links.
- Change SEO title and description in
index.html. - Change
https://biyos.pages.dev/inindex.html,robots.txt, andsitemap.xmlto your own domain.
This template includes basic SEO files and metadata so your portfolio can be indexed by search engines.
public/robots.txt
public/sitemap.xml
index.htmlAfter deploying your site:
- Go to Google Search Console.
- Add your live website URL.
- Choose the HTML tag verification method.
- Copy the verification meta tag.
- Paste it inside the
<head>section ofindex.html. - Deploy again.
- Submit your sitemap:
https://your-domain.com/sitemap.xmlportfolio template UI, React portfolio template, Vite portfolio template, TypeScript portfolio, developer portfolio template, personal website template, free portfolio UI, responsive portfolio website, modern portfolio design, Cloudflare Pages portfolio
Use these settings when connecting the GitHub repository:
Framework preset: Vite
Build command: npm run build
Build output directory: distManual deploy with Wrangler:
npm run build
npx wrangler pages deploy dist --project-name your-project-nameFramework preset: Vite
Build command: npm run build
Output directory: distBuild command: npm run build
Publish directory: distThis template is useful for:
- Developers who need a quick portfolio website
- Students building a personal profile page
- Freelancers showcasing services and projects
- Indie makers linking deployed products
- Creators who want a clean personal landing page
Contributions are welcome. You can fork this repository, improve the UI, fix bugs, or suggest new sections.
If you use this template, a star ⭐ on the repository is appreciated.
MIT License — free to use, customize, and share.
Created by Lê Tấn Tài.
- GitHub: https://github.com/ltntai
- Live demo: https://biyos.pages.dev