ViteReactHTML作品集

react-portfolio — Vite 作品集模板

作者 vedangdhuri

基于 React 与 Vite 的个人作品集网站模板，包含英雄区、关于、技能、项目、联系等页面组件，并配有动画星空背景与滚动感知导航。

打开源站下载源码 ZIP

看看你的网站会是什么样

浏览真实页面截图，比较内容排版与手机效果。点击下方缩略图切换，放大查看整页细节。

2 个预览视图
桌面端首页1 / 2
桌面端截图首屏预览

由服务器浏览器实际访问页面后截取。

全部页面与视图 2

截图用于了解视觉与布局，交互效果请以实际项目为准。

采集于 2026-10-16查看来源

值得关注的模板亮点

从已有项目资料中，快速了解它的特点。

01

使用 React 构建，配合 Vite 与自定义别名进行开发配置

02

包含动画星空背景与动态区块的视觉呈现

03

提供滚动感知导航与响应式布局

04

集成 toast 通知与联系表单组件

05

组件按 pages 与 ui 分层组织，另有 hooks 与 lib 工具目录

06

以 MIT 许可证发布

模板详细介绍

这是一个用于展示个人项目与技能的作品集网站模板，README 将其定位为 Vedang Dhuri 的个人作品集项目。项目使用 React 构建，配合 Vite 与自定义别名进行开发配置，界面层引入 React Bootstrap 与 Bootstrap，并包含 Tailwind CSS 相关说明。

README 列出的核心特性包括：动画星空背景与动态区块、滚动感知导航与响应式布局、toast 通知与联系表单、模块化的组件与工具组织。源码结构显示页面组件分为 HeroSection、AboutSection、SkillSection、ProjectSection、ContactSection、Navbar、Footer 与 StarBackground，UI 组件包括 AnimatedContent、ProfileCard、ScrollStack、FlipWords 以及 toast/toaster，另有 hooks/use-toast 与 lib/utils。

README 未提供关于数据来源、内容管理方式、部署流程、浏览器兼容性或性能表现的说明，也未说明联系表单的后端处理方式。安装步骤为克隆仓库、执行 npm install、运行 npm start，并在 http://localhost:5173/ 打开页面。项目以 MIT 许可证发布。

ViteReactHTML作品集

适合你的项目吗？

适用场景

  • 搭建个人作品集网站，展示项目与技能
  • 作为 React + Vite 项目的组件化结构参考
  • 在个人主页中加入动画背景与滚动交互效果
  • 为联系区域提供表单与 toast 提示的界面实现

适合人群

  • 需要 React 作品集模板的个人开发者
  • 希望参考组件分层与页面结构的前端学习者
  • 准备基于现有组件替换内容搭建个人主页的用户

上手与定制指南

结合仓库当前版本的说明，按下面的资料检查内容、配置与运行要求。

  1. 1

    克隆仓库：git clone https://github.com/vedangdhuri/vedangdhuri.github.io

  2. 2

    进入目录后执行 npm install 安装依赖

  3. 3

    运行 npm start 启动应用

  4. 4

    在浏览器打开 http://localhost:5173/ 查看页面

  5. 5

    README 未说明部署步骤与生产构建方式

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

本次收录的是公开仓库中采用 MIT 许可的免费版本；免费范围为该版本代码，不代表外部服务或第三方素材免费。

使用时需要遵守

  • 允许免费使用、修改、商用和分发该版本代码。
  • 分发代码副本或实质性部分时，保留原作者版权声明和完整 MIT 许可声明。
  • 代码按现状提供；担保与责任限制以原许可证及适用法律为准。

额外费用与待核对事项

  • 演示图片、字体、图标及其他第三方素材需按各自许可核对，不能仅凭代码的 MIT 许可判断。
  • 域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
查看原文依据

Permission is hereby granted, free of charge

许可证原文
https://github.com/vedangdhuri/react-portfolio/blob/main/LICENSEhttps://github.com/vedangdhuri/react-portfolio/blob/main/README.md

DeepSeek 根据仓库许可证和 README 整理 ·2026-10-16。结果仅覆盖已读取资料，依赖、图片、字体及后续条款变更以各自原文为准。

项目核对记录与介绍依据

模板资料

来源平台
GitHub
资料与维护参考分
资料较完整 · 88 / 100
技术栈
Vite · React · HTML
网站类型
作品集
这个分数如何计算

本站按许可资料（最高30分）、演示链接（12分）、预览图（10分）、Star数（15分）、记录的维护时间（15分）、描述完整度（8分）、功能记录（5分）和分类资料（5分）计算。它不是代码、安全或性能测试，也不是 Google 评分；有链接不代表已实测可用。

这个项目需要核对什么

记录的仓库更新时间
2026-01-30
截图检查日期
2026-10-16

已收录演示链接。请用你的内容与屏幕尺寸检查；有演示不代表表单、认证或支付已经可用。

目录记录的主要技术栈是 Vite。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料，不代表代码审计或部署实测。

查看具体选型方法 →

介绍的制作与核对状态

介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。

审核声明: codex-user-requested-batch-review-20261017 · 2026-10-16

查看当时使用的来源资料

SHA-256: 382a3c52639af07c30b49007b62d329be9da502670ddf378e723cbbd80e2f9d0

2026-10-16T16:12:33.241Z

来源文件 / 仓库
<h1 align="center">REACT PORTFOLIO</h1>
<h3 align="center">Transforming Visions Into Stunning Digital Realities</h3>
<div align=center>
    <img src="https://img.shields.io/github/last-commit/vedangdhuri/vedangdhuri.github.io?style=flat&logo=git&logoColor=white&color=0080ff" alt=""/>
    <img src="https://img.shields.io/github/languages/top/vedangdhuri/vedangdhuri.github.io?style=flat&color=0080ff" alt=""/>
    <img src="https://img.shields.io/github/languages/count/vedangdhuri/vedangdhuri.github.io?style=flat&color=0080ff" alt=""/>
    <a href="https://vedangdhuri.github.io/"><img src="https://img.shields.io/badge/Visit_Site-Portfolio-blue?style=flat&color=0080ff" alt=""/></a> 
</div>
<h2 align="center">Built with the tools and technologies:</h2>
<div align="center">
    <img src="https://img.shields.io/badge/JSON-000?logo=json&logoColor=fff" alt="" />
    <img src="https://img.shields.io/badge/npm-CB3837?logo=npm&logoColor=fff" alt="" />
    <img src="https://img.shields.io/badge/esbuild-FFCF00.svg?style=flat&logo=esbuild&logoColor=black" alt="" />
    <img src="https://img.shields.io/badge/JavaScript-F7DF1E?logo=javascript&logoColor=000" alt="" />
    <img src="https://img.shields.io/badge/React%20Bootstrap-41E0FD.svg?style=flat&logo=React-Bootstrap&logoColor=black" alt="" /> <br/>
    <img src="https://img.shields.io/badge/React-%2320232a.svg?logo=react&logoColor=%2361DAFB" alt="" />
    <img src="https://img.shields.io/badge/Vite-646CFF?logo=vite&logoColor=fff" alt="" />
    <img src="https://img.shields.io/badge/ESLint-4B32C3.svg?style=flat&logo=ESLint&logoColor=white" alt="" />
    <img src="https://img.shields.io/badge/Bootstrap-7952B3.svg?style=flat&logo=Bootstrap&logoColor=white" alt="" />
</div>
<h2 align="left">✅ Overview</h2>
<p>Vedang Dhuri's portfolio website template is a modern, React-powered project designed to showcase personal projects and skills with style and efficiency. It combines cutting-edge tools like Vite, Tailwind CSS, and Bootstrap to enable rapid development and a cohesive user experience.</p>

<h4 align="left">Why vedangdhuri.github.io?</h4>
<p>This project provides a robust foundation for building engaging, visually appealing personal websites. The core features include:</p>
<ul align="left">
    <li><strong>🌟 Visual Enhancements:</strong>  Animated starry backgrounds and dynamic sections create an immersive browsing experience.</li>
    <li><strong>🛠 Streamlined Configuration:</strong>  Uses Vite and custom aliases for fast, consistent development workflows.</li>
    <li><strong>🚀 User Engagement:</strong>  Integrated toast notifications and contact forms facilitate real-time interaction.</li>
    <li><strong>📦 Modular Architecture:</strong>  Well-organized components and utilities promote maintainability and scalability.</li>
    <li><strong>🖥 Responsive Design:</strong> Scroll-aware navigation and adaptable layouts ensure seamless access across devices.</li>
</ul>

<h2 align="left">⚙️ Installation & Setup</h2>

1. 1️⃣ Clone the repository
    <pre><code>❯ git clone https://github.com/vedangdhuri/vedangdhuri.github.io</code></pre>
    <pre><code>cd vedangdhuri.github.io</code></pre>

2. 2️⃣ Install dependencies
    <pre><code>npm install</code></pre>

3. 3️⃣ Run the app
    <pre><code>npm start</code></pre>

4. 4️⃣ Open in browser
   <p>The app will automatically open at</p>
   <pre><code>http://localhost:5173/</code></pre>

<h2 align="left">🧭 Project Structure</h2>
<pre><code>
src/
├── assets/
│   ├── font/
│   │   ├── Poppins-Bold.ttf
│   │   └── BastligaOne.ttf
│   └── img/
│       ├── code.png
│       ├── main_image.png
│       ├── match_master_game.png
│       ├── safecityhub.png
│       ├── to_do_list_using_react.png
│       ├── top_icon.png
│       ├── weather_app.png
│       ├── aes_ed.png
│       └── homeImg.png
├── components/
│   ├── ui/
│   │   ├── css/
│   │   │   ├── ProfileCard.css
│   │   │   └──ScrollStack.css
│   │   ├── AnimatedContent.jsx
│   │   ├── ProfileCard.jsx
│   │   ├── ScrollStack.jsx
│   │   ├── FlipWords.jsx
│   │   ├── toast.jsx
│   │   └── toaster.jsx
│   └── pages/
│       ├── AboutSection.jsx
│       ├── ContactSection.jsx
│       ├── Footer.jsx
│       ├── HeroSection.jsx
│       ├── Navbar.jsx
│       ├── ProjectSection.jsx
│       ├── SkillSection.jsx
│       └── StarBackground.jsx
├── hooks/
│   └── use-toast.jsx
├── lib/
│   └── utils.jsx
├── App.jsx
├── index.css
└── main.jsx
</code></pre>

<h2 align="left">📜 License</h2>
<p>Licensed under the <a href="https://github.com/vedangdhuri/vedangdhuri.github.io/blob/main/LICENSE" target="_blank">MIT License</a>.</p>
反馈内容错误

看看同类模板

对比同技术栈与用途的模板，找到更适合的视觉与内容结构。

Resumify

Resumify

Free, privacy-first resume builder — 6 ATS-friendly templates, full customization, JSON import/export. No sign…

Vite · 作品集

showlit

showlit

✨ Showlit - A modern and clean template for creating a personal website

Vite · 作品集

folium

folium

Professional developer portfolio boilerplate (React • TypeScript • Tailwind • Vite) with simple content custom…

Vite · 作品集

kurizu-discord

kurizu-discord

A Discord themed website built using React & Vite

Vite · 作品集

cv-educornelsen

cv-educornelsen

Production portfolio with a streaming AI chatbot (Gemini + SSE), containerized via Docker, deployed to Google …

Vite · 作品集

about-me-personal-portfolio-website-template

about-me-personal-portfolio-website-template

Simple Personal Website Template, built with bootstrap and vite js project.

Vite · 作品集