Blockchain Portfolio Manager

Cloudflare PagesHono v4 (TypeScript)Vite v6Wrangler v4BNB Chain (BEP-20)Tailwind CSS CDNChart.jsFontAwesome 6.4MetaMask IntegrationWalletConnectPancakeSwapChainlink

공통 블록체인 정책 — 모든 프로젝트 BNB Chain (BEP-20) 발행

BNB Chain

공식 발행 네트워크 (BSC Mainnet)

Chain ID: 56

토큰 표준

BEP-20 (ERC-20 호환)

BSCScan 컨트랙트 검증 필수

공통 DEX

PancakeSwap (BSC)

초기 유동성 공급 기본 DEX

공통 지갑 연동

MetaMask + WalletConnect

BNB Chain 네트워크 자동 추가

컨트랙트 보안

CertiK / BSCScan Verified

소스코드 공개 검증 필수

Gas 비용

BNB (저렴한 트랜잭션 수수료)

~$0.01~0.1 per tx (평균)

공통 원칙: 모든 프로젝트 토큰은 BNB Chain (BSC Mainnet, Chain ID: 56) 에서 BEP-20 표준으로 발행됩니다. 컨트랙트 주소는 BSCScan (bscscan.com)에서 확인 가능합니다.

공통 페이지

/

Home Page

12~14 sections: Hero, Stats, How It Works, Features, Tokenomics, Roadmap, Team, Partners, FAQ, Footer

/login

MetaMask + WalletConnect + Email — 모든 프로젝트 공통

/mypage

My Dashboard

User profile, wallet balance, token holdings, vesting info

/vesting

Vesting Schedule

토큰 베스팅 일정 확인 — TGE 이후 필수 페이지

/whitepaper

Whitepaper

Project documentation, tokenomics, roadmap details

/legal/privacy

GDPR 대응 개인정보처리방침

/legal/terms

서비스 이용약관

/legal/disclaimer

Disclaimer

투자 고지 및 면책 조항

향후 추가 예정 (프로젝트별 선택)

/airdrop 에어드랍 신청 페이지/referral 레퍼럴 프로그램/leaderboard 커뮤니티 랭킹/signup 이메일 회원가입

⚠️ 핵심 원칙: 절대 같은 디자인은 안된다

각 프로젝트는 서로 다른 개발자가 독립적으로 만든 것처럼 보여야 한다

절대 금지 사항

동일한 Hero 레이아웃 구조 (같은 그리드, 같은 타이포그래피)

동일한 색상 팔레트 (blue+mint, purple+pink 등 반복 금지)

동일한 CSS 클래스명 사용 (glass-card, gradient-text 등)

동일한 섹션 순서 & 멘트 (How It Works, Core Features 등)

동일한 카드 컴포넌트 패턴 (rounded glass card 반복)

같은 폰트 조합 (Inter+Manrope를 모든 프로젝트에 사용)

같은 버튼 스타일 (gradient, rounded 반복)

필수 차별화 요소

완전히 다른 색상 시스템 (primary accent 색상 반드시 상이)

다른 폰트 패밀리 조합 (Space Grotesk, Clash Display, Syne 등)

다른 레이아웃 패턴 (타임라인, 수평스크롤, 스플릿, 터미널)

다른 카드 스타일 (sharp corners, border-only, asymmetric)

다른 섹션 헤드라인 멘트 & 아이코노그래피

다른 애니메이션 방향 (fadeUp vs slideLeft vs zoomIn)

다른 Hero 패턴 (데모패널, 파티클, 3D효과, 터미널)

프로젝트별 디자인 시스템 현황

AILINK ✓ 구현완료

폰트: Inter + Manrope

Accent: Blue #3b82f6 + Mint #10b981

레이아웃: Rounded glass cards, gradient hero

Hero: Animated grid + floating cards

ZENTARAI ✓ 구현완료

폰트: Space Grotesk + Space Mono

Accent: Emerald #10b981 + Cyan #06b6d4

레이아웃: Sharp terminal cards, border-only

Hero: Live signal terminal demo panel

DaVinci AI ✓ 구현완료

폰트: Inter + SF Pro Display (추정)

Accent: Purple #6d28d9 + Violet #8b5cf6

레이아웃: Section-based scroll, full-width hero

Hero: AI Agent showcase with stat counters

LUMORAI ✓ 구현완료

폰트: Syne + Inter

Accent: Gold #f59e0b + Purple #a855f7

레이아웃: Terminal demo panel, minimal sharp cards

Hero: AI Reputation Score 실시간 터미널 패널

섹션별 멘트 차별화 규칙 (같은 표현 재사용 금지)

섹션	AILINK	ZENTARAI	DaVinci AI	LUMORAI
Hero 태그라인	Build. Link. Empower.	predict outcomes.	Create. Imagine. Own. (AI Agents)	Earn Your Voice. Own Your Influence.
메인 섹션명	How It Works	System Architecture	How Agents Think	How Reputation Works
기능 섹션명	Core Features	Signal Intelligence	AI Agent Platform (17+ Agents)	AI Reputation Engine
토큰 섹션명	Tokenomics · ALINK Economy	utility drives the flywheel.	Value Architecture · $DAVINCI	LMRAI Economy · Reputation Rewards
커뮤니티 섹션	Community & DAO	network nodes	Creator Collective (8,888+ creators)	Influence Loop · Creator Fly-wheel
CTA 문구	Join the Ecosystem	init_wallet	Start Creating	Claim Your Score

🔍 DaVinci AI 사이트 분석 — davinciai.io

레퍼런스 분석 · 포트폴리오 참고용 인사이트

사이트 방문

AI Agent 플랫폼 구조

›17+ 전문 AI 에이전트 (11개 라이브)
›총 324k+ 생성 건수 누적
›8,888+ 크리에이터 유저베이스
›Visio(48.2k) · Genesis(29.3k) · Prism(31.7k)
›에이전트별 독립 사용량 트래킹 공개

$DAVINCI 토큰 구조

›BEP-20 · 총 공급량 8.88B
›TGE Q4 2025 · Community 45% (5% TGE, 5년 베스팅)
›Strategic 15% (10% TGE, 3년 베스팅)
›Team 12% (48개월) · Treasury 10% (60개월)
›Artist Fund 5% (36개월)

UI/UX 디자인 패턴

›다크 네이비 배경 + 퍼플 그래디언트 액센트
›유리모폼(glassmorphism) 카드 스타일
›에이전트 쇼케이스 섹션 — 사용량 수치 강조
›섹션별 스크롤 애니메이션 적용
›팀·파트너 섹션 분리 구성

기술 스택 & 파트너

›OpenAI · Midjourney · Stable Diffusion 통합
›KlingAI · HeyGen · Suno AI 모델
›Tailwind CSS CDN (경고 있음 — 프로덕션 비권장)
›페이지 로딩 12.56s — 최적화 필요
›Partners: BNB Chain, PancakeSwap, Chainlink

로드맵 5단계

›Phase 1: Genesis & Foundation (2025)
›Phase 2: Agent Platform Launch & TGE
›Phase 3: Ecosystem Expansion
›Phase 4: Multi-Chain & Scale
›Phase 5: Renaissance Protocol (2027+)

우리 프로젝트에 적용할 인사이트

›에이전트/기능별 사용량 수치 공개 → 신뢰도↑
›크리에이터 수 & 생성 건수 실시간 카운터
›AI 모델 파트너십 배지 노출 (OpenAI 등)
›월별 순환공급량 테이블 → ZNTR에도 적용 권장
›Tailwind CDN 대신 빌드 번들 사용 권장

davinciai.io 성능 주의사항: 페이지 로드 12.56s · Tailwind CDN 프로덕션 사용 경고 · 404 리소스 오류 감지됨 — 우리 프로젝트는 이 문제를 반복하지 않도록 Vite 번들 빌드 및 최적화 CDN 사용 권장

공통 컴포넌트 & 기능

Layout System

Sticky navbar, footer, responsive breakpoints

Auth System

Wallet connect + Email login, localStorage session

Tokenomics Chart

Allocation donut chart + vesting schedule

Roadmap

4-5 phase roadmap with status indicators

Team Section

Core team profiles with roles

Partners

Partner logos grid

FAQ

Accordion Q&A section

Social Links

Twitter, Telegram, GitHub links

공통 배포 구조

Hosting

☁️ Cloudflare Pages

🔧 Wrangler CLI

🌐 Custom Domain

Build

📦 npm run build

📁 dist/ output

🚀 Pages deploy

Dev

⚡ PM2 + wrangler

🔀 Port 3000/4000

🐙 GitHub main branch

공통 토큰 배포 가이드 (BEP-20)

배포 절차

Remix IDE 접속

https://remix.ethereum.org

컴파일 설정

Compiler: 0.8.20 · EVM: paris · Optimization: OFF

MetaMask 연결

Injected Provider · BNB Smart Chain (Chain ID: 56)

Deploy 실행

initialSupply_ 입력 후 Deploy (소수점 없이 정수)

BSCScan Verify

verifyContract · Single file · v0.8.20 · MIT

배포된 컨트랙트

ALINK 20,000,000,000

0x33c55022...f47254

DAVINCI 8,888,888,888

0xBaEBd348...0B971C

ZNTR 10,000,000,000

0x2E82B00F...FC0321

LMRAI 15,000,000,000

0xA47a6c8C...f40F11

VSXN 12,000,000,000

0x8C128eBc...a166FE

토큰 컨트랙트 소스코드 원본

ALINK.sol DAVINCI.sol ZNTR.sol LMRAI.sol VSXN.sol

프로젝트 정체성

필수

Project Name 프로젝트 공식 이름

필수

Codename GitHub repo / Cloudflare project 코드명

필수

Version 현재 버전 (v1.0.0)

필수

Owner GitHub 계정명

필수

Status active / dev / planned

필수

Description 한 줄 설명

권장

Category 예: DeFi + AI, AI + NFT

토큰 정보

필수

Token Symbol ALINK, DAVINCI 등

필수

Total Supply 총 발행량

공통고정

Blockchain ⚠️ 모든 프로젝트: BNB Chain (BSC Mainnet, Chain ID: 56)

공통고정

Token Standard ⚠️ 모든 프로젝트: BEP-20 (ERC-20 호환)

필수

Contract Address 배포된 BSCScan 컨트랙트 주소

필수

TGE Date 토큰 발행 예정일

공통고정

DEX Listing ⚠️ 공통: PancakeSwap (BSC) 초기 상장

URL & 소셜

필수

Production URL 실제 도메인

필수

Cloudflare Pages URL *.pages.dev URL

필수

GitHub Repository github.com/...

필수

Twitter/X x.com/...

필수

Telegram t.me/...

권장

BSCScan Token BSCScan 토큰 페이지

권장

Discord 커뮤니티 Discord

배포 정보

필수

Deploy Platform Cloudflare Pages

필수

Build Command npm run build

필수

Output Directory dist/

필수

Production Branch main

필수

Tech Stack Hono + TypeScript + Vite 등

권장

CF Project Name Cloudflare 프로젝트명

권장

Node Version 사용 Node.js 버전

토큰노믹스

필수

Allocation Table 각 카테고리별 % 및 수량

필수

Cliff Period 각 할당별 클리프 기간 (월)

필수

Vesting Period 각 할당별 베스팅 기간 (월)

필수

Vesting Chart 시각적 베스팅 스케줄

권장

Unlock Schedule 월별 언락 수량 표

권장

Initial Circulating 초기 유통량

팀 & 파트너

필수

Core Team CEO, CTO 등 핵심 구성원

필수

Roles 각 팀원 역할

필수

Partners List 주요 파트너사

권장

Advisors 자문위원

권장

LinkedIn/Social 팀원 SNS 링크

페이지 목록

필수

Home (/) 홈페이지 — 12~14섹션

필수

My Page (/mypage) 사용자 대시보드

필수

Vesting (/vesting) 토큰 베스팅 스케줄 — TGE 이후 필수

필수

Whitepaper (/whitepaper) 프로젝트 문서

필수

Legal (/legal/*) Privacy · Terms · Disclaimer

선택

Airdrop (/airdrop) 에어드랍 신청 — 프로젝트별 선택

선택

Referral (/referral) 레퍼럴 프로그램 — 프로젝트별 선택

로드맵

필수

Phase List 모든 개발 단계

필수

Period 각 단계 예상 기간

필수

Status completed / in-progress / upcoming / future

필수

Key Items 각 단계 주요 작업

권장

Milestones 주요 마일스톤

작업 진행 방식 — Workflow Tree

신규 프로젝트 시작부터 토큰 발행 · 매각까지 전체 흐름을 정의합니다.

STEP
01

소셜 계정 세팅

›X (Twitter) 계정 생성
›Telegram 채널 개설
›Gmail 계정 생성 (도메인 이메일용)
›→ Portfolio Manager Sheet에 등록 (id 순번, 계정정보 입력)

STEP
02

도메인 & 브랜딩

›도메인 구입 (Namecheap 등)
›로고 3종 제작: logo-square.svg / logo-wide.svg / logo-icon.svg
›컬러 테마 확정
›→ /home/user/portfolio-manager/public/static/logos/{name}/ 에 업로드

STEP
03

웹사이트 개발

›기술 스택: Hono v4 + Vite + TypeScript + Cloudflare Pages
›필수 페이지: / · /login · /mypage · /vesting · /whitepaper · /legal/*
›공통 섹션: Tokenomics · Roadmap · Team · Partners · FAQ
›로컬 개발: npm run build → pm2 start → curl http://localhost:3000

STEP
04

Cloudflare Pages 배포

›npx wrangler pages project create {name} --production-branch main
›npm run build
›npx wrangler pages deploy dist --project-name {name}
›확인: https://{name}.pages.dev

STEP
05

도메인 연결

›Cloudflare Pages → Custom Domains → Add domain
›Namecheap Advanced DNS: www CNAME → {name}.pages.dev
›@ URL Redirect → https://www.{domain}
›SSL 발급 대기 (5분~24시간)

STEP
06

토큰 발행 (BEP-20)

›컨트랙트 작성: /home/user/token-contracts/{SYMBOL}.sol (ZNTR.sol 기반)
›Remix IDE: Compiler 0.8.20 · EVM paris · Optimization OFF
›Deploy: initialSupply_ = {총공급량 숫자 그대로}
›BSCScan Verify: Single file / v0.8.20 / MIT / Optimization OFF
›주소 + 프라이빗키 → sheet-tokens.ts에 등록

STEP
07

Portfolio Manager 업데이트

›sheet-tokens.ts: tokenAddr / tokenKey / bscscanUrl 입력
›dashboard.ts: Grid/Tree 카드 progress · version 업데이트
›project-detail.ts: sourceCodeUrl · contractAddress · urls 업데이트
›ZIP 재생성: zip -r downloads/{name}-source.zip {name}/ -x "*/node_modules/*"
›npm run build && wrangler pages deploy dist --project-name portfolio-manager

STEP
08

매각 / 종료 처리

›Sheet: rank · sold 필드에 "매각완료" 입력
›sheet-tokens.ts: tokenAddr/tokenKey 유지 (이력 보존)
›dashboard.ts Tree/Grid 카드 status 업데이트

신규 프로젝트 개발 — 완전 트리

STEP 03 상세

new-project.sh 기반 자동화 스캐폴딩 → 개발 → Cloudflare 배포까지 완전 흐름

Phase A — 스캐폴딩 실행 (5분)

bash /home/user/new-project.sh

입력값 PROJECT_NAME · CODENAME · TOKEN_SYMBOL · TOTAL_SUPPLY · DOMAIN · TWITTER · TELEGRAM · CATEGORY · COLOR_HEX · TAGLINE · TGE

자동 생성 package.json · wrangler.jsonc · tsconfig.json · vite.config.mts · ecosystem.config.cjs · .gitignore

소스 파일 src/index.tsx · pages/layout.ts · login.ts · mypage.ts · vesting.ts · whitepaper.ts · legal.ts

정적 자산 public/index.html (홈페이지) · public/static/logos/{codename}/ (SVG 3종)

자동 실행 npm install → git init → npm run build → pm2 start → HTTP 200 확인

Phase B — 생성되는 프로젝트 구조

/home/user/{codename}/

├── src/

│   ├── index.tsx       # Hono 앱 진입점 (라우터 + API)

│   └── pages/

│       ├── layout.ts    # 공통 CSS + htmlShell()

│       ├── login.ts     # 지갑/이메일 로그인

│       ├── mypage.ts    # 대시보드 (토큰 잔액)

│       ├── vesting.ts   # 베스팅 스케줄 테이블

│       ├── whitepaper.ts# 백서 페이지

│       └── legal.ts     # Privacy/Terms/Disclaimer

├── public/

│   ├── index.html      # 홈페이지 (Hero/Features/Tokenomics/Roadmap)

│   └── static/logos/{codename}/

│       ├── logo-icon.svg · logo-square.svg · logo-wide.svg

├── dist/             # 빌드 결과물 (Cloudflare Pages 배포)

├── ecosystem.config.cjs  # PM2 설정

├── wrangler.jsonc · package.json · tsconfig.json

Phase C — 커스터마이징 (프로젝트별 차별화)

홈페이지 (public/index.html)

›Hero 섹션: 프로젝트 핵심 메시지
›Features 섹션: 실제 기능 설명 (6개 카드)
›Tokenomics: 도넛 차트 + 비율 수정
›Roadmap: 4~5 Phase 실제 내용 입력
›Partners: 실제 파트너사 로고/이름
›FAQ: 프로젝트 특화 질문 추가

앱 페이지 (src/pages/)

›mypage.ts: 실제 기능 연동 (지갑 잔액 등)
›vesting.ts: 실제 토크노믹스 비율/클리프 입력
›whitepaper.ts: 실제 백서 내용 작성
›layout.ts: 프로젝트 특화 네비게이션 추가
›index.tsx: 신규 API 엔드포인트 추가

Phase D — 기본 제공 API 엔드포인트

GET /api/health

서버 상태 확인

POST /api/auth/login

이메일 로그인 (데모)

POST /api/auth/wallet

지갑 주소 로그인

GET /api/auth/me

세션 확인

POST /api/auth/logout

로그아웃

GET /* (pages)

Phase E — Cloudflare Pages 배포

Cloudflare 인증

npx wrangler whoami → 계정 확인

Pages 프로젝트 생성

npx wrangler pages project create {codename} --production-branch main

빌드

cd /home/user/{codename} && npm run build

배포

npx wrangler pages deploy dist --project-name {codename}

확인

curl https://{codename}.pages.dev → 200 OK

Portfolio Manager 등록

project-detail.ts sourceCodeUrl · cloudflareUrl 업데이트 후 재배포

데모 계정 패턴 (자동 생성)

이메일

demo@{domain}

예: demo@mindvoria.org

비밀번호

{codename}2026

예: mindvoria2026

코드 수정 후 필수 순서

① 코드 수정 ② npm run build ③ pm2 restart ④ curl localhost:3000 (200 확인) ⑤ wrangler pages deploy ⑥ git commit

토큰 주소 수정: src/sheet-tokens.ts 만 수정 → dashboard · project-detail · table 모두 자동 반영 (Single Source of Truth)
ZIP 다운로드 갱신: public/static/downloads/ 에 재생성 후 재배포 필요

AILINK

DaVinci AI

ZentarAI

LUMORAI

VISIXION

MynForge

SYNTHORYX

공통 기술 스택

공통 블록체인 정책 — 모든 프로젝트 BNB Chain (BEP-20) 발행

공통 페이지

⚠️ 핵심 원칙: 절대 같은 디자인은 안된다

🔍 DaVinci AI 사이트 분석 — davinciai.io

공통 컴포넌트 & 기능

공통 배포 구조

공통 토큰 배포 가이드 (BEP-20)

프로젝트 정체성

토큰 정보

URL & 소셜

배포 정보

토큰노믹스

팀 & 파트너

페이지 목록

로드맵

작업 진행 방식 — Workflow Tree

신규 프로젝트 개발 — 완전 트리

Blockchain Portfolio Manager — Changelog