The home page header is a dynamic sky scene: layered SVG clouds drift at different speeds, wind streaks pass behind the clouds, the sun rises or sets when the theme is switched, and the entire cloud set switches between light and dark variants.
ViteReactPortfolio
My-Portfolio — Vite Portfolio Template
By TanerTalas
Taner Talas's personal developer portfolio, built with React 19, Vite 8, Tailwind CSS 4, and React Router 7, including a home page and a project list page, plus a serverless function for the contact form.
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-16View source
What stands out
A quick read of the recorded project description.
MiniMe is a small character composed of separate SVG parts such as head, body, hands, and stick, running a timed animation sequence while the user stays in the Hero area.
The palette is a set of CSS custom properties on :root and .dark, and the toggle button only flips a class on <html>, changing the entire site, including the clouds.
Smooth scrolling with Lenis, IntersectionObserver reveals content when sections enter the viewport, and scroll detection keeps the navigation in sync with the section currently being read.
The Hero title types out letter by letter when the page opens, with a blinking cursor.
Project cards are simulated browser windows, including an address bar with a lock icon and a real domain name, and the screenshot zooms in slightly on hover.
Template Details
This is a personal portfolio single-page application, containing a home page and a /projects route for the full project catalog. The README states that it was designed, built, and maintained by the author, without using a template, page builder, or UI kit; all sections, animations, and SVGs were made for this site. The site is static except for one serverless function: the contact form submits to api/contact.js, which screens spam and forwards the message to the author's email, with no database or analytics involved.
The home page includes Hero, About, Services, Stack, Projects, Contact, and other sections, as well as decorative effect components such as Cloud, Wind, and MiniMe. Project cards are presented as simulated browser windows, including an address bar with a lock icon and a real domain name, plus a screenshot. Content is stored in plain data files under src/data/, including projects.js, services.js, skills.js, and navLinks.js, so the site is edited by changing data rather than markup.
The README does not provide information about browser compatibility, accessibility support, performance metrics, or production readiness.
ViteReactPortfolio
Is it right for your project?
Use Cases
- As a personal developer portfolio, showcasing selected projects, services, tech stack, and contact information.
- Browsing the full project catalog via the /projects page and filtering by tags such as Three.js.
- Sending a message through the contact form, which is screened for spam by the api/contact.js serverless function and then forwarded to the author's email.
- As a reference for implementing front-end effects such as theme switching, scroll reveal, and typewriter with React, Vite, Tailwind, and Lenis.
Suitable For
- Developers who want to reference or adapt it into their own portfolio; the README states that you may take useful parts from it, but do not publish it as your own portfolio.
- Front-end learners who need to see an example combining React 19, Vite 8, Tailwind CSS 4, and React Router 7.
- Developers who want to understand how to drive project cards and skill lists with data files.
- Authors of personal sites who need to deploy to Vercel and use a serverless function to handle the contact form.
Getting started & customization
Use these recorded setup notes alongside the repository instructions for your chosen version.
- 1
Install dependencies: npm install.
- 2
Start the development server: npm run dev.
- 3
Build the production version: npm run build.
- 4
Preview the production build: npm run preview.
- 5
Deployed on Vercel; vercel.json rewrites all paths to index.html, so visiting or refreshing /projects directly still resolves; pushing to the main branch publishes it.
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 that external services or third-party assets are free.
Must comply with when using
- Free use, modification, commercial use, and distribution of that 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 separate charges.
- The MIT license permits use, copying, modification, merging, publication, distribution, sublicensing, and/or sale of copies of the software, but the README explicitly requires: you may take useful parts from it, but do not publish it as your own portfolio.
View Original Text Basis
Permission is hereby granted, free of charge
Original License Text
https://github.com/TanerTalas/My-Portfolio/blob/main/LICENSEhttps://github.com/TanerTalas/My-Portfolio/blob/main/README.md[MIT](LICENSE) — take what is useful, just don't ship it as your own portfolio.
Original README
Compiled by DeepSeek based on repository license and README ·2026-10-16. 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-09-09
- Screenshot last checked
- 2026-10-16
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: codex-user-requested-batch-review-20261017 · 2026-10-16
Inspect the recorded source material
SHA-256: 752b7f187e98fab74f6e880bddeba013d4f68b0d3a9d5087167438b63cb79c7c
2026-10-16T11:49:23.232Z
Source file / repository<div align="center">
<img src="public/img/avatar.svg" width="120" alt="Taner Talas" />
# Taner Talas — Developer Portfolio
**A hand-built portfolio with a sky that changes with the theme, clouds that drift,
and a little pixel version of me who walks in while you read.**
[](https://tanertalas-portfolio.vercel.app)
<img src="public/img/banner.png" alt="Taner Talas portfolio preview" width="820" />
</div>
---
## Contents
- [What it is](#what-it-is)
- [Featured work](#featured-work)
- [The details worth noticing](#the-details-worth-noticing)
- [Stack](#stack)
- [Getting started](#getting-started)
- [Project layout](#project-layout)
- [Adding a project](#adding-a-project)
- [Deploying](#deploying)
- [Contact](#contact)
---
## What it is
My personal portfolio — designed, built and maintained entirely by me. No template,
no page builder, no UI kit. Every section, animation and SVG in this repo was made
for this site.
It is a single-page React app with one extra route for the full project catalogue.
Static apart from one serverless function: the contact form posts to `api/contact.js`,
which screens the message for spam and relays it to my inbox. No database, no analytics.
---
## Featured work
The two cards on the home page, plus everything else on `/projects`:
| Project | What it is | Built with |
| --- | --- | --- |
| **[Stargazers](https://stargazers-rust.vercel.app)** | Send someone words under the stars | Next.js · TypeScript · Three.js · Tailwind |
| **[Solar System Journey](https://solar-system-journey-plum.vercel.app)** | A 3D flight from the Sun out to Neptune at true spacing | Next.js · TypeScript · Three.js · Tailwind |
| **[Fire Eye](https://tanertalas.github.io/fire-eye/)** | A burning eye drawn by a custom GLSL shader | Three.js · GLSL · JS |
| **[Dragon](https://tanertalas.github.io/dragon/)** | A dragon that builds its own scales in the browser | Three.js · JS |
| **[Logo Quiz](https://logo-quiz-lake.vercel.app)** | Guess the brand behind the blurred logo | Next.js · TypeScript · Tailwind · PostgreSQL |
<sub>…and more on the [projects page](https://tanertalas-portfolio.vercel.app/projects).</sub>
---
## The details worth noticing
**A sky, not a background.** The header is a live scene: layered SVG clouds drifting
at different speeds, wind streaks crossing behind them, and a sun that rises or sets
when you flip the theme — the whole cloud set swaps between a light and a dark
variant rather than just dimming.
**The mini me.** A small character assembled from separate SVG parts (head, body,
hands, stick) that runs a timed animation sequence while you sit on the hero.
**One class, two skies.** The palette is a set of CSS custom properties on `:root` and
`.dark`; the toggle flips a single class on `<html>` and the whole site — clouds
included — changes with it.
**Motion that follows you.** [Lenis](https://github.com/darkroomengineering/lenis)
smooths the scroll, an `IntersectionObserver` reveals each block as it enters the
viewport, and a scroll-spy keeps the nav in sync with the section you are reading.
**A typewriter hero.** The headline types itself out one character at a time when the
page opens, with a blinking caret trailing behind it.
**Projects as browser windows.** Each project card is a mock browser — a URL bar with
a padlock and the real domain, and a screenshot that zooms a little when you hover it.
**Responsive down to a phone.** Every section reflows; the nav collapses into a
mobile menu.
---
## Stack
| Layer | Choice | Why |
| --- | --- | --- |
| UI | **React 19** | Component-per-section, data-driven cards |
| Build | **Vite 8** | Instant dev server, tiny production bundle |
| Styling | **Tailwind CSS 4** | Utility-first, with theme tokens as CSS variables |
| Routing | **React Router 7** | `/` and `/projects`, client-side |
| Scroll | **Lenis** | Smooth scrolling that plays well with the reveals |
Content lives in plain data files under `src/data/` — projects, services, skills and
nav links — so the site is edited by changing data, not markup.
---
## Getting started
```bash
npm install # install dependencies
npm run dev # start the dev server
npm run build # build for production
npm run preview # preview the production build
```
---
## Project layout
```
api/contact.js # Serverless endpoint behind the contact form
public/img/ # All artwork: clouds, character, tool icons, project shots
src/
├── components/
│ ├── effects/ # Clouds, Wind, MiniMe — the decorative layer
│ ├── layout/ # Navbar, Footer
│ ├── sections/ # Hero, About, Services, Stack, Projects, Contact
│ └── ui/ # ProjectCard, SectionHeading, Reveal, Turnstile
├── data/ # projects.js, services.js, skills.js, navLinks.js
├── hooks/ # useTheme, useLenis, useScrollSpy, useTypewriter, useInView
├── pages/ # HomePage, ProjectsPage
├── App.jsx # Routes and layout
└── main.jsx # Entry point
```
---
## Adding a project
One entry in `src/data/projects.js` — the home preview takes the first two, the
projects page renders the whole list, so order is priority:
```js
{
name: "Solar System Journey",
tagline: "3D flight from the Sun out to Neptune",
urlLabel: "solar-system-journey-plum.vercel.app",
image: "/img/projects/solar-system-journey.png",
live: "https://solar-system-journey-plum.vercel.app",
github: "https://github.com/TanerTalas/Solar-System-Journey",
threejs: true, // optional — only marks it for the Three.js filter on /projects
}
```
Drop the screenshot in `public/img/projects/` at **1981 × 1400** to match the rest.
New technology in the stack section? Add its SVG under
`public/img/toolicons/<category>/` and one line in `src/data/skills.js`.
---
## Deploying
Hosted on **Vercel**. `vercel.json` rewrites every path to `index.html`, so
`/projects` still resolves on a direct visit or a refresh. Pushing to `main` ships it.
---
## Contact
<div align="center">
**[[email protected]](mailto:[email protected])**
[](https://github.com/TanerTalas)
[](https://www.linkedin.com/in/tanertalas/)
</div>
---
## License
[MIT](LICENSE) — take what is useful, just don't ship it as your own portfolio.
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
cv-educornelsen
A React + TypeScript personal portfolio template built with Vite, featuring a streaming AI chatbot powered by Google Gemini. An Express backend proxies requests to keep the API key server-side, with rate limiting, IP throttling, canary token injection, and LangFuse tracing.
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