{"id":51274414,"url":"https://github.com/cloud-oc/liquid-portfolio","last_synced_at":"2026-06-29T20:01:29.594Z","repository":{"id":365887861,"uuid":"1274182325","full_name":"cloud-oc/liquid-portfolio","owner":"cloud-oc","description":"Liquid Portfolio is a one-page portfolio template for visual creators.Liquid Portfolio 是一个面向视觉创作者的单页作品集模板。Liquid Portfolio は、ビジュアルクリエイター向けの 1 ページポートフォリオテンプレートです。","archived":false,"fork":false,"pushed_at":"2026-06-19T10:19:56.000Z","size":8740,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-06-19T11:24:38.551Z","etag":null,"topics":["liquid-glass","portfolio","portfolio-website"],"latest_commit_sha":null,"homepage":"https://cloud-oc.github.io/liquid-portfolio/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cloud-oc.png","metadata":{"files":{"readme":"README.en.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-06-19T08:56:59.000Z","updated_at":"2026-06-19T10:57:55.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/cloud-oc/liquid-portfolio","commit_stats":null,"previous_names":["cloud-oc/liquid-portfolio"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/cloud-oc/liquid-portfolio","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cloud-oc%2Fliquid-portfolio","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cloud-oc%2Fliquid-portfolio/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cloud-oc%2Fliquid-portfolio/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cloud-oc%2Fliquid-portfolio/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cloud-oc","download_url":"https://codeload.github.com/cloud-oc/liquid-portfolio/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cloud-oc%2Fliquid-portfolio/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34941027,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-29T02:00:05.398Z","response_time":58,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["liquid-glass","portfolio","portfolio-website"],"created_at":"2026-06-29T20:01:13.943Z","updated_at":"2026-06-29T20:01:29.585Z","avatar_url":"https://github.com/cloud-oc.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Liquid Portfolio\n\n[中文](README.md) | [日本語](README.ja.md) | [English](README.en.md)\n\nLiquid Portfolio is a one-page portfolio template for visual creators. It is designed for presenting a profile, services, selected projects, friend links, and a clear contact path. It works well as a starting point for designers, 3D artists, motion designers, and small creative studios.\n\nThe template is built with Vite, React, TypeScript, Tailwind CSS, Framer Motion, and Lucide React, and is ready to publish on GitHub Pages. Most editable content lives in `src/content/portfolio.ts`. You can customize the site by replacing copy, project images, links, and media paths without rewriting the page layout.\n\n## Tech Stack\n\n- Vite\n- React\n- TypeScript\n- Tailwind CSS\n- Framer Motion\n- Lucide React\n\n## Quick Start\n\nInstall dependencies:\n\n```bash\nnpm install\n```\n\nStart the local development server:\n\n```bash\nnpm run dev\n```\n\nCreate a production build:\n\n```bash\nnpm run build\n```\n\nPreview the production build:\n\n```bash\nnpm run preview\n```\n\n## Customize Profile Content\n\nMain content is managed in:\n\n```text\nsrc/content/portfolio.ts\n```\n\nStart with the `profile` object:\n\n```ts\nexport const profile = {\n  name: \"Username\",\n  title: \"Username\",\n  heroTitle: \"Hi, I'm Username\",\n  heroDescription:\n    \"a visual creator crafting striking brands, web experiences, motion, and unforgettable digital projects\",\n  aboutTitle: \"About me\",\n  about: \"With more than five years of experience...\",\n  contactLabel: \"Contact Me\",\n  contactEmail: \"username@example.com\",\n  contactUrl: \"#footer-contact\",\n};\n```\n\nCommon fields to update:\n\n- `name`: the displayed name\n- `heroTitle`: the hero headline\n- `heroDescription`: the hero supporting text\n- `about`: the about section body\n- `contactEmail`: the contact email\n- `contactUrl`: the button target, for example `mailto:your-name@example.com`\n\n## Customize Navigation and Links\n\nNavigation items live in `navLinks`:\n\n```ts\nexport const navLinks = [\n  { label: \"关于我\", href: \"#about\" },\n  { label: \"商业合作\", href: \"#services\" },\n  { label: \"艺术作品\", href: \"#projects\" },\n  { label: \"联系我\", href: \"#footer-contact\" },\n];\n```\n\nFooter friend links live in `friendLinks`:\n\n```ts\nexport const friendLinks = [\n  { label: \"Cloud09\", href: \"https://cloud09.space\" },\n];\n```\n\n## Add Projects\n\nProjects are managed in the `projects` array. Copy an existing object and replace the values:\n\n```ts\nexport const projects = [\n  {\n    id: \"project-id\",\n    number: \"04\",\n    name: \"Project Name\",\n    category: \"Client\",\n    liveUrl: \"https://example.com\",\n    images: {\n      leftTop: {\n        src: \"/artworks/project-name/detail-1.webp\",\n        alt: \"Project detail image\",\n      },\n      leftBottom: {\n        src: \"/artworks/project-name/detail-2.webp\",\n        alt: \"Project second detail image\",\n      },\n      featured: {\n        src: \"/artworks/project-name/cover.webp\",\n        alt: \"Project featured image\",\n      },\n    },\n  },\n];\n```\n\nRecommended image location:\n\n```text\npublic/artworks/project-name/\n```\n\nThen reference images with site-relative paths:\n\n```ts\nsrc: \"/artworks/project-name/cover.webp\"\n```\n\nRecommended image sizes:\n\n```text\ncover.webp       1600 x 1200 or larger\ndetail-1.webp    1200 x 800\ndetail-2.webp    1200 x 1200\n```\n\nUse `.webp` or compressed `.jpg` images when possible. Avoid publishing very large raw images directly.\n\n## Customize Services\n\nServices are managed in the `services` array:\n\n```ts\nexport const services = [\n  {\n    number: \"01\",\n    name: \"3D Modeling\",\n    description: \"Creation of detailed objects...\",\n  },\n];\n```\n\nYou can add, remove, or reorder items. The page renders the array automatically.\n\n## Replace Audio and Visual Assets\n\nThe background music file is:\n\n```text\npublic/audio/bgm.mp3\n```\n\nProject images are best placed in:\n\n```text\npublic/artworks/\n```\n\nGlobal visual styles are in:\n\n```text\nsrc/styles.css\n```\n\nTo adjust the liquid-glass surfaces, background atmosphere, or dark theme, start with `.site-backdrop`, `.liquid-glass`, and `.liquid-glass-strong`.\n\n## Deploy to GitHub Pages\n\nThe project includes a GitHub Actions deployment workflow:\n\n```text\n.github/workflows/deploy.yml\n```\n\nRecommended setup:\n\n1. Use `main` as the repository branch.\n2. Open `Settings \u003e Pages` in the GitHub repository.\n3. Select `GitHub Actions` under `Build and deployment`.\n4. Push to `main`; the workflow will build and publish `dist`.\n\nIf the repository is named `your-name.github.io`, the site root is `/`, so the default setting works:\n\n```text\nVITE_BASE_PATH=/\n```\n\nIf the repository is a project repository such as `portfolio`, the URL is usually:\n\n```text\nhttps://your-name.github.io/portfolio/\n```\n\nIn that case, add an Actions variable in the GitHub repository:\n\n```text\nSettings \u003e Secrets and variables \u003e Actions \u003e Variables\nName: VITE_BASE_PATH\nValue: /portfolio/\n```\n\nFor local testing, copy `.env.example` to `.env.local` and edit it:\n\n```bash\ncp .env.example .env.local\n```\n\n```text\nVITE_BASE_PATH=/portfolio/\n```\n\n## Extension Ideas\n\n- Project detail pages\n- Project category filters\n- Contact form\n- CMS integration\n- Language switcher\n- Dark / light theme switch\n- SEO and Open Graph images\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcloud-oc%2Fliquid-portfolio","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcloud-oc%2Fliquid-portfolio","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcloud-oc%2Fliquid-portfolio/lists"}