Brand, identity, contact information, and social links are centralized in src/config/Identity.ts, with no personal data in components
ViteReactPortfolio
fiqtor.com — Vite Portfolio Template
By FIQTOR
A Vite and React single-page portfolio template where branding, identity, and SEO metadata are driven by configuration files, usable as a reusable template.
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-10-08View source
What stands out
A quick read of the recorded project description.
Build-time generation of head metadata, JSON-LD, sitemap.xml, and robots.txt from src/config/Head.ts
File-based routing for src/pages/*.tsx using vite-plugin-pages, with page logic in src/modules/
Built-in AI assistant component supporting streaming chat, Web Speech API voice dictation, and attachment type selection
Content data split into src/data/ by projects, experience, certificates, skills, services, etc., for easy replacement
Vercel deployment configuration provided, with SPA rewrites while preserving sitemap.xml and robots.txt
Template Details
This is a React + TypeScript + Vite single-page portfolio application, also designed as a reusable template: brand name, personal identity, contact information, social links, resume path, site origin, and analytics ID are centralized in src/config/Identity.ts, with no personal data written into component code. SEO-related parts are generated at build time by src/config/Head.ts, producing <head>, OpenGraph, Twitter, JSON-LD, as well as sitemap.xml and robots.txt, injected via htmlHeadPlugin in vite.config.ts; index.html is only a minimal shell with placeholder markers and should not be edited directly.
At the content level, projects, work experience, certificates, skills, services, navigation, and social links are placed in corresponding files under src/data/, and replacing the sample data is sufficient. Routing uses vite-plugin-pages file-based routing, with src/pages/*.tsx acting as thin wrappers and the actual page modules located in src/modules/. Styling uses Tailwind CSS and Framer Motion animations, with dark/light theme support.
The repository also includes an AI assistant component offering streaming chat, voice dictation based on the Web Speech API, and image/video/document attachment selection (up to 4.5MB, drag-and-drop supported), controlled by the VITE_ENABLE_AI switch. The contact form uses reCAPTCHA, GitHub/WakaTime statistics and cryptocurrency quotes are provided by backend APIs, and no third-party API keys are placed on the frontend.
Regarding usage limitations: the README states that running requires Node.js 24.x and npm, and the backend must be started first (default http://localhost:4000) with VITE_API_BASE_URL matching it; all VITE_* variables enter the public browser bundle and cannot hold secrets; the reCAPTCHA secret should be placed in the backend. Third-party assets such as demo images, fonts, and icons need separate license verification. The repository root README provides full-stack configuration, while the frontend README only covers the frontend/ part.
ViteReactPortfolio
Is it right for your project?
Use Cases
- Building a personal portfolio single-page site to showcase projects, experience, certificates, and skills
- Adapting the existing configuration structure into a reusable portfolio template for others or a team
- Static sites that need build-time generation of SEO metadata, sitemap, and robots.txt
- Integrating interactive modules such as contact forms, GitHub/WakaTime statistics, and an AI assistant into a portfolio
Suitable For
- Developers familiar with React and TypeScript who are willing to customize the site by editing configuration files
- Individuals or small teams needing a reusable portfolio template and preparing their own backend APIs
- Users who accept maintaining content and identity information through code files rather than an admin interface
Getting started & customization
Use these recorded setup notes alongside the repository instructions for your chosen version.
- 1
Requires Node.js 24.x and npm; after installation, copy .env.example to .env and fill in the values
- 2
The backend must be started before running (default http://localhost:4000), and VITE_API_BASE_URL must match it
- 3
All VITE_* variables enter the public browser bundle; secret information should be placed in the backend
- 4
reCAPTCHA uses a site key; the secret key must not be placed on the frontend
- 5
index.html is a minimal shell; head is injected at build time, so modify src/config/Identity.ts or the optional VITE_DOMAIN
License & source material
Usage conditions & limitations
Free to use · keep license noticeThis listing covers the free version under the MIT license in the public repository; the free scope is the code of that version and does not imply that 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 permitted.
- 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 backend service must be started separately before running the frontend (default http://localhost:4000), and VITE_API_BASE_URL must match it; otherwise, related data APIs are unavailable.
- Configuration is primarily through code files, with only a few values set via environment variables; customizing identity and branding requires directly editing source code and rebuilding.
- All VITE_* variables enter the public browser bundle; API keys or private tokens must not be placed in them and must remain in the backend.
- The contact form uses reCAPTCHA; the site key is on the frontend, and the secret key must be placed in the backend and must not appear on the frontend.
- Cryptocurrency quotes and social statistics rely on backend APIs (/api/v1/crypto, /api/v1/social/stats) for data; the frontend does not include these data sources.
- The AI assistant feature is controlled by the VITE_ENABLE_AI switch and must be explicitly set to TRUE to enable it.
- When deploying to Vercel, import the frontend/ directory and set VITE_API_BASE_URL (optionally VITE_DOMAIN); it is not ready to use out of the box.
- The runtime requires Node.js 24.x and npm; version mismatches may prevent proper installation or building.
View Original Text Basis
Permission is hereby granted, free of charge
Original License Text
Make sure the backend is running (`http://localhost:4000`) and `VITE_API_BASE_URL` matches it.
Original README
Only a handful of values remain in env — everything else is code-based.
Original README
**Every `VITE_*` variable is embedded in the public browser bundle.** Never put secrets (API secrets, private tokens) behind a `VITE_` variable — keep those on the backend.
Original README
reCAPTCHA **secret** key belongs on the backend, never here.
Original README
Crypto prices (`/api/v1/crypto`) and social stats (`/api/v1/social/stats`) are fetched from the backend, which serves static data.
Original README
`VITE_ENABLE_AI` | `TRUE` / `FALSE` to toggle AI features
Original README
Import the `frontend/` folder, set `VITE_API_BASE_URL` (and optionally `VITE_DOMAIN`), and deploy.
Original README
https://github.com/FIQTOR/fiqtor.com/blob/master/LICENSEhttps://github.com/FIQTOR/fiqtor.com/blob/master/README.mdNode.js **24.x**, npm
Original README
Compiled by DeepSeek based on repository license and README ·2026-10-08. 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
- Vite · React
- 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-10-08
- Screenshot last checked
- 2026-10-08
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 Vite 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-08
Inspect the recorded source material
SHA-256: ddbd1afdfcca305984ab538c33a9905d714ec9b729164897b053c6f8a50e6f77
2026-10-08T02:06:36.757Z
Source file / repository# 🎨 Frontend — Portfolio SPA
React 19 + TypeScript + Vite single-page app for the portfolio. Branding, identity and SEO metadata are configuration-driven (code in `src/config/`, plus a few env vars), so the project doubles as a reusable template.
> 🔗 See the [root README](../README.md) for full-stack setup and configuration.
## ✨ Features
- ⚡ **Vite + React 19** with TypeScript (strict) and HMR.
- 🎨 **Tailwind CSS v4** (`@tailwindcss/vite`) + Framer Motion animations, dark/light theme.
- 🧭 **File-based routing** via `vite-plugin-pages` (`src/pages/*.tsx`).
- 🔍 **Config-driven SEO** — `<head>`, OpenGraph, Twitter, JSON-LD, `sitemap.xml`, and `robots.txt` are **generated at build time** from `src/config/Head.ts` + `src/config/Identity.ts`.
- 🤖 **AI Assistant (`src/components/AIHelper.tsx`)** — streaming chat with:
- 🎙️ **Voice dictation** — Web Speech API transcribes speech straight into the composer textarea (append mode, auto-stops on close).
- 📎 **Attachment type picker** — a popup to choose **Image / Video / Document** before opening the file dialog (max 4.5MB; drag-and-drop also supported).
- A 4-bar equalizer animation while listening, copy & regenerate actions, and a dimmed + blurred backdrop (with a width-stable scroll lock) while the panel is open.
- 🖼️ **Interactive widgets** — contact form (reCAPTCHA), live GitHub/WakaTime stats, crypto widget.
- 🌐 **Fully configurable** — no personal data in component code; identity comes from `src/config/Identity.ts` and only a few `VITE_*` env vars.
- 🔐 **No secrets in the bundle** — crypto prices and social stats are fetched from *our backend* (static data); integration usernames live in `src/config/*.ts`. No third-party API key ever reaches the browser.
## 🛠 Tech Stack
- React 19, TypeScript, Vite, Tailwind CSS v4
- Framer Motion, GSAP, `react-helmet-async`, `react-router-dom`
- `ogl` (WebGL line waves), `animejs`, `lottie-web`
- Axios, `react-google-recaptcha`
- Icons: `react-icons`
## ✅ Prerequisites
- Node.js **24.x**, npm
## 📦 Installation
```bash
cd frontend
npm install
cp .env.example .env # then edit .env with your values
```
## ▶️ Running
```bash
npm run dev # dev server at http://localhost:5173
npm run build # type-check + production build
npm run preview # preview the production build
npm run lint # ESLint
```
Make sure the backend is running (`http://localhost:4000`) and `VITE_API_BASE_URL` matches it.
## ⚙️ Configuration
### Environment Variables (`frontend/.env`)
Only a handful of values remain in env — everything else is code-based. See [`.env.example`](.env.example).
> ⚠️ **Every `VITE_*` variable is embedded in the public browser bundle.** Never put secrets (API secrets, private tokens) behind a `VITE_` variable — keep those on the backend.
| Variable | Purpose |
|----------|---------|
| `VITE_DOMAIN` | Optional site-origin override (defaults to `SITE_ORIGIN` in `src/config/Identity.ts`) |
| `VITE_API_BASE_URL` | Backend API base URL |
| `VITE_RECAPTCHA_SITE_KEY` | reCAPTCHA **site** key (never the secret) |
| `VITE_ENABLE_AI` | `TRUE` / `FALSE` to toggle AI features |
### Identity & branding (`src/config/Identity.ts`)
> ℹ️ Branding, owner identity, contact info, social URLs, resume paths, the company/business brand, the site origin and the Google Analytics ID are **code-based** (NOT env vars). Edit [`src/config/Identity.ts`](src/config/Identity.ts) and rebuild.
| Export | Controls |
|--------|----------|
| `BRAND_NAME`, `OWNER_NAME`, `OWNER_ALIAS`, `JOB_TITLE`, `HEADLINE` | Names / role / tagline |
| `YEARS_OF_EXPERIENCE`, `COUNTRY`, `COUNTRY_CODE`, `LANGUAGES` | Profile facts |
| `CONTACT_EMAIL`, `BUSINESS_EMAIL`, `CONTACT_PHONE`, `WHATSAPP_NUMBER`, `TWITTER_HANDLE` | Contact info |
| `SOCIAL_LINKS`, `RESUME`, `PORTRAIT_IMAGE` | Socials, resumes, portrait |
| `COMPANY` | Company/business brand (services & linktree) |
| `SITE_ORIGIN`, `GA_MEASUREMENT_ID` | Canonical origin & analytics |
> 🔐 **No API keys here.** Crypto prices (`/api/v1/crypto`) and social stats (`/api/v1/social/stats`) are fetched from the backend, which serves static data. Integration usernames also live in source, not env:
>
> | File | Controls |
> |------|----------|
> | `src/config/Github.ts` | GitHub username (profile link) |
> | `src/config/Wakatime.ts` | WakaTime username (profile link) |
>
> Social handles (Instagram, TikTok, YouTube, LinkedIn, GitHub) come from `SOCIAL_LINKS` in `src/config/Identity.ts`.
### Content (`src/data/`)
Replace the sample content with your own:
| File | Controls |
|------|----------|
| `projects.ts` | Project portfolio |
| `career.ts` | Work experience timeline |
| `certificate.ts` | Certificates & awards |
| `skills.ts` / `services.ts` | Skills & services |
| `menu.ts` | Navigation |
| `social.ts` | Social links (wired to `Identity.ts`) |
### Integration usernames (`src/config/`)
Public usernames are kept out of env and live in source, since they're not secrets and are edited far less often than env vars: `Github.ts`, `Wakatime.ts`. Social handles live in `SOCIAL_LINKS` inside `src/config/Identity.ts`. Secrets for those integrations stay on the **backend**.
### `<head>` / SEO generation
- `src/config/Head.ts` builds the `<head>` (title, meta, OG, Twitter, JSON-LD, GA) **and** `sitemap.xml` + `robots.txt`.
- The `htmlHeadPlugin` in `vite.config.ts` injects them at dev/build time.
- `index.html` is a minimal shell with a `<!--vite-html-head-->` marker — **don't edit it directly**; change `src/config/Identity.ts` (or the optional `VITE_DOMAIN`) instead.
- Origin defaults to `SITE_ORIGIN` in `src/config/Identity.ts`, optionally overridden via `VITE_DOMAIN`.
### Styling & layout notes
- **No horizontal scroll:** `html, body { overflow-x: clip }` in `src/index.css` guards against page-wide horizontal scroll from full-bleed / off-screen decorative elements. Use `w-full` (not `w-screen` / `100vw`, which includes the scrollbar width).
- **Stable layout width:** `html { scrollbar-gutter: stable }` permanently reserves the scrollbar space, so opening overlays that lock scrolling (e.g. the AI panel) never causes a layout shift.
- **Voice-input types:** the Web Speech API typings live in `src/vite-env.d.ts` (not in the default TS DOM lib).
## 📂 Project Structure
```
frontend/
├── public/ # static assets (img, pdf, favicon) — sitemap/robots are generated
├── src/
│ ├── components/ # shared UI components (incl. AIHelper.tsx, Footer.tsx)
│ ├── config/ # Identity, Metadata, Head, Github/Wakatime
│ ├── context/ # React contexts (theme, container, welcome)
│ ├── data/ # 📝 your content (projects, career, certificates…)
│ ├── layouts/ # layout wrappers
│ ├── modules/ # feature modules — page = folder
│ │ ├── home/ # ├── sections/ (header, about, skills…) + components/ + index.tsx
│ │ ├── career/ # └── components/ (CareerView.tsx)
│ │ ├── certification/ # certificates grid
│ │ ├── contact/ # contact form, recaptcha, response message
│ │ ├── linktree/ # linktree box
│ │ └── projects/ # projects grid
│ ├── pages/ # file-based routes (thin wrappers around modules)
│ ├── App.tsx
│ └── main.tsx
├── index.html # minimal shell (head injected at build)
├── vite.config.ts # htmlHeadPlugin (head + sitemap + robots)
└── .env.example
```
> 🧹 **Naming conventions:** shared `components/` and module files use **PascalCase** (`CareerView.tsx`); module sub-folders are `sections/` (page blocks) and `components/` (domain pieces); each page-module has an `index.tsx` entry.
## 🚢 Deployment
Vercel-ready (`vercel.json`, SPA rewrite that preserves `sitemap.xml` / `robots.txt`). Import the `frontend/` folder, set `VITE_API_BASE_URL` (and optionally `VITE_DOMAIN`), and deploy.
## 🔒 Security
- Never commit `.env` (gitignored) — only `.env.example` is tracked.
- `VITE_*` values are **public**; no secrets in the frontend.
- reCAPTCHA **secret** key belongs on the backend, never here.
- **No third-party API keys on the client.** Crypto/social data comes from the backend (static), and integration usernames live in `src/config/*.ts`. If you add a live provider later, proxy it through the backend.
- No hardcoded credentials in source — secrets live only in env on the backend; public identity lives in `src/config/`.
## 📄 License
ISC.
Explore similar templates
Compare previews and descriptions within the same stack and category.
Resumify
Resumify is a browser-based resume builder built with React, TypeScript, and Vite.
Vite · Portfolio
showlit
Showlit is a personal website template built with React, Vite, TypeScript, Tailwind CSS, and shadcn/ui.
Vite · Portfolio
folium
A developer portfolio template built with Vite, React, TypeScript, and Tailwind CSS.
Vite · Portfolio
kurizu-discord
A personal portfolio website built with React and Vite that mimics the Discord desktop app, organizing projects, skills, and experience into customizable channels, threads, a member list, and emoji reactions.
Vite · Portfolio
about-me-personal-portfolio-website-template
AboutMe is a free personal website template built with Bootstrap and Vite, released under the MIT license. It provides a single-page index.html with organized src directories for images, JavaScript, and SCSS, along with npm scripts for development and build.
Vite · Portfolio
HackFolio
HackFolio is a hacker-style personal portfolio template for ethical hackers, penetration testers, bug bounty hunters, red teamers, and cybersecurity professionals.
Vite · Portfolio