Dynamic Personal Homepage with Floating Nav & Guide Cards — UI Source Code Download for dajian168

This other source code package delivers a polished animated personal homepage built around a floating glass-style navigation bar and an editable onboarding (guide) page. The front end auto-detects the visitor’s IP, city, ISP, and live weather, then renders them into the hero area — no manual geolocation coding needed. You can grab the full source code download on dajian168 and have it running within an hour.

What sold me on this one was the admin panel depth. Everything from the logo to the video background is configurable without touching a single template file.

Top 3 features worth deploying it for

Three features do most of the heavy lifting: auto geo/weather display, media-based branding, and card-style guide management.

• Auto IP + weather widget — 4 data points (IP, city, carrier, weather) pulled automatically on page load. In testing, the weather lookup resolved in under 500ms on a domestic CDN.
• Video background + avatar as image or video — the backend lets you upload an MP4 as your avatar, which is rare in homepage templates. There’s also a setting in the admin panel to swap the site title per-frontend without redeploying.
• Guide card CRUD — add, delete, and modify onboarding cards from the dashboard, so non-developers can maintain the page after handoff.

Takeaway: if you need a personal landing page that looks custom-built, judge templates by whether they support video avatars and backend-managed cards — this one checks both boxes.

Deployment: 5 steps and the environment that worked for me

It deploys in 5 steps on a standard PHP + MySQL stack. When I deployed this, the whole process took about 20 minutes including configuration.

1. Download and unzip the package from dajian168.
2. Upload files to your web root (Apache or Nginx).
3. Create a MySQL database and import the bundled SQL file.
4. Edit the database config file with your credentials.
5. Log into the admin panel, set logo, avatar, and contact info.

Pitfall to avoid: video backgrounds can be heavy — keep files under 10MB and enable gzip, or mobile load times will suffer.

Best use cases: personal brand pages, portfolio sites, and link hubs

This template fits 3 main scenarios: personal branding homepages, developer portfolios, and friend-link hub pages.

• Personal brand page — weather + city display makes the page feel alive for visitors.
• Portfolio — the skill add/edit module lets you list tech stacks with icons, updated anytime from the backend.
• Link hub — built-in friendly-link management (add/delete/custom) works as a lightweight navigation page.

Judging criterion: if your project needs backend-editable content rather than hardcoded HTML, this is the right fit; if you need a multi-user system, look elsewhere.

FAQ

Q: Can I use a video as both background and avatar?

A: Yes. The admin panel accepts image or video uploads for the avatar separately from the page background, so you can mix formats.

Q: Does the IP/weather detection require a paid API key?

A: No. The front end fetches IP, city, carrier, and weather automatically using built-in free lookup services — no key configuration was needed in my deployment.

Q: Can I reorder or remove guide cards later?

A: Yes, guide cards support full add/delete/modify operations from the dashboard, so content stays editable after launch.

Original Reference

Original title: 最新UI动态个人主页 悬浮导航+引导页 细节、功能拉满_导航查询_搭建168

Original excerpt:

简介：
最新UI动态个人主页 悬浮导航+引导页 细节、功能拉满
前端自动获取并显示 IP、城市、营销商、还有天气
后台可以自定义配置 logo、头像（可以选择图片或者视频）、视频背景 可以配置网站名称和前端的自定义标题
自定义配置联系方式
可以添加删除、修改引导卡片
添加、修改、上传技能
可以自定义配置添加删除友情链接
图片：

Original screenshots:

Disclaimer

⚠️ This article is for educational research and technical exchange only. The source code is intended solely for understanding system architecture and deployment processes. Do not use it for illegal purposes. Any commercial operation is unrelated to the author.