Gumifolio

A calm portfolio that proves real data work.

Gumifolio is a single-page personal portfolio for Gumi, a beginner freelance data analyst focused on web scraping, crawling, data cleaning, and dataset building. It presents honest background, real projects, a simple process view, and easy contact options so visitors can quickly judge fit and reach out.

Business Goals

  • Reach 500 unique visits per month within 90 days of launch.
  • Generate at least 10 qualified contact clicks per month within 90 days.
  • Achieve a 5% contact click-through rate from total visits within 90 days.
  • Earn at least 3 inbound opportunities from SMEs, agencies, researchers, or recruiters within 6 months.
  • Maintain Lighthouse mobile scores above 90 for Performance, Accessibility, Best Practices, and SEO on the live site.

User Goals

  • Help visitors understand what Gumi does in under 15 seconds.
  • Show proof of skill through real projects and a visible working process.
  • Make contact easy through direct links without forms or friction.
  • Provide an English and Indonesian experience with remembered language preference.
  • Build trust through honest positioning, accessible content, and ethical scraping notes.

Non-Goals

  • No pricing page, service catalog, or package selection.
  • No lead form, newsletter signup, or marketing funnel.
  • No fake case studies, testimonials, client logos, or invented metrics.
  • No interactive demo suite or multi-page content expansion beyond the portfolio and 404 page.

SME Owner Dina, 39 - Needs help with messy online data but does not know how to evaluate a freelancer deeply. She wants a quick way to see whether the person has practical skill and can communicate clearly.

SME Owner Dina, 39

  • As an SME owner, I want to see real projects and a simple explanation of the workflow, so that I can judge whether this person can handle my data task.
  • As an SME owner, I want direct contact links, so that I can ask a question without filling out a form.
  • As an SME owner, I want to understand the ethics of scraping, so that I know the work will be done responsibly.

Agency Producer Rafi, 32 - Looks for a dependable specialist to support short-term delivery work. He needs fast proof of capability and low-risk collaboration.

Agency Producer Rafi, 32

  • As an agency producer, I want to scan project tags and status quickly, so that I can see whether the portfolio matches a current brief.
  • As an agency producer, I want the site to load fast on mobile, so that I can review it during a commute or between meetings.
  • As an agency producer, I want the contact links to be obvious, so that I can forward the profile or reach out immediately.

Researcher or AI Builder Mira, 28 - Works with datasets and prototypes and needs someone who can gather, clean, and structure data carefully. She values technical honesty and clear evidence of process.

Researcher or AI Builder Mira, 28

  • As a researcher, I want to see how raw input becomes clean output, so that I can trust the data-handling approach.
  • As a researcher, I want the portfolio to mention AI-assisted workflow openly, so that expectations stay realistic.
  • As a researcher, I want the project list to come from a central config, so that the portfolio stays current as new work appears.

Content Management · High priority

  • All visible portfolio content must live in a single central config file so updates are simple and non-technical.
  • Store profile, about copy, process text, project list, contact links, SEO copy, and UI labels in one config source.
  • Support English and Indonesian strings for all user-facing text.
  • Allow easy addition, removal, and reordering of projects without changing page structure.
  • Render fallback empty-state content when the project list is empty or too short.
  • Prevent broken layout when optional fields are missing.

Profile Header · High priority

  • Present identity quickly and clearly at the top of the page.
  • Show name, avatar, and rotating role line such as Data Scraper, Data Cleaner, and Dataset Builder.
  • Keep the role line readable and accessible without relying on animation alone.
  • Ensure the header content works well on 360px wide screens.
  • Provide semantic heading structure for assistive tech.
  • Avoid exaggerated claims or sales language.

About and Process Story · High priority

  • Explain the background honestly and show the working method in a compact identity moment.
  • Include a short about section that connects welding, computer science, and data work as a strength in discipline and quality.
  • Mention AI-assisted workflow openly as part of the process, not as a hidden detail.
  • Show one terminal-style or pipeline-style visual that explains raw input, process, and clean output.
  • Keep this element informational, not interactive.
  • Do not add extra demo modules or unrelated illustrations.

Projects Carousel · High priority

  • Show real projects in a compact, browsable format that proves practical work.
  • Display only projects that exist, are in progress, or are intentionally placed as an empty-state fallback.
  • Each card must include name, period or status, description, features, tags, and links if available.
  • Support a carousel pattern for browsing, with keyboard and touch access.
  • If there are fewer than two projects, show a clear empty state that points visitors to GitHub.
  • Never generate fake project examples or placeholder client work.

Contact and Navigation · High priority

  • Make contact simple through direct links only.
  • Provide link-only contact options such as mailto, WhatsApp, GitHub, LinkedIn, and Telegram.
  • Use either a nav dock or contact block, but no form and no lead capture fields.
  • Make every link accessible with aria labels and clear focus states.
  • Keep contact actions visible near the top and again in the footer area.
  • Allow external links to open safely with appropriate attributes.

SEO, AI Readiness, and Trust · Medium priority

  • Make the portfolio visible to search engines and AI tools while staying honest and crawlable.
  • Include llms.txt and llms-full.txt with key facts and content map.
  • Add JSON-LD Person schema, robots.txt allowing crawlers, sitemap, favicon, and OG image metadata.
  • Keep key information in real HTML text rather than only in images or scripts.
  • Target the supplied keywords naturally in visible content and metadata.
  • Show an ethics statement in the footer about robots.txt, rate limits, and no sensitive personal data.

First Visit Experience

  • Open the page and immediately understand who Gumi is and what they do.
  • See the rotating role line and avatar while the page remains calm and readable.
  • Read the about section and understand the background story in less than 20 seconds.
  • Review the process moment to see how raw data becomes clean output.
  • Browse real projects or an empty state if the list is short.
  • Use direct contact links or language toggle without searching for hidden menus.

1. Recognize the person

  • The header should establish name, role, and identity right away.
  • Show a concise role rotation that changes at a gentle pace.
  • Keep the avatar and name visible before any scrolling.
  • If motion is reduced, show a static role list or one stable label.

2. Understand the background

  • The about section should connect welding, computer science, and data work as a useful mix of discipline and process.
  • State the background honestly without apology language.
  • Mention AI-assisted workflow clearly as part of the work style.
  • Keep copy short and concrete so it is easy to scan.

3. See the process

  • A single pipeline or terminal-style moment should show how input becomes output.
  • Use raw input, cleaning, validation, and clean output as the core story.
  • Keep it informational and non-interactive.
  • If the view animates, it must communicate sequence rather than decoration.

4. Browse projects

  • Visitors should be able to inspect real work and understand current status quickly.
  • Each project card must show name, status or period, description, features, tags, and links.
  • Carousel controls must work by mouse, touch, and keyboard.
  • If projects are missing, show a polished empty state with a GitHub pointer.

5. Contact or leave

  • The user should be able to reach out directly or close the page with clear next steps.
  • Display contact links in the nav dock or contact block and again in the footer.
  • Ensure the language toggle is visible and persistent.
  • Provide a 404 page that returns users to the homepage and GitHub.

Advanced Behaviors and Edge Cases

  • Persist language preference in localStorage and restore it on return visits.
  • Respect prefers-reduced-motion by disabling all non-essential motion and simplifying transitions.
  • Handle very small screens down to 360px width without overlap or hidden controls.
  • Provide graceful fallback when project data is missing, incomplete, or temporarily not ready.
  • Keep external links safe, labeled, and predictable across desktop and mobile.

Experience Principles

  • Use semantic HTML and a clear heading hierarchy for scanability and accessibility.
  • Keep interactions obvious, keyboard reachable, and focus states visible.
  • Keep the page fast, with lightweight assets and no unnecessary client-side complexity.
  • Use motion only to explain sequence, presence, or interaction, never as ornament.
  • Make the design feel calm, sharp, and characterful without relying on color tricks or trendy effects.

A researcher arrives looking for someone who can gather and clean niche public data. In the first few seconds, she sees Gumi’s role, honest background, and one compact process view that explains how raw input becomes clean output, which is enough to build initial trust.

She scrolls to the project carousel and sees only real work with clear status, features, and links. There is no inflated marketing language, no fake case study, and no hidden contact form, so the site feels straightforward and reliable.

She opens the GitHub link, checks the work, then taps the contact link directly. The result is a faster hiring path, fewer trust barriers, and a clearer chance for Gumi to win a first client or collaboration.

User-Centric Metrics

  • At least 60% of visitors reach the projects section on mobile and desktop.
  • At least 40% of visitors interact with the language toggle or carousel controls within the first session.
  • At least 25% of visitors scroll to the contact area within a session.
  • At least 80% of surveyed or observed users can correctly describe what Gumi does after one visit.
  • At least 90% of keyboard-navigation checks can complete the main path without a mouse.

Business Metrics

  • 500 unique visits per month within 90 days.
  • 10 or more qualified contact clicks per month within 90 days.
  • 5 percent or higher contact click-through rate from total visits within 90 days.
  • 3 or more inbound opportunities within 6 months.
  • At least 2 repeat visitors per 10 unique visitors after 60 days, indicating recall and return interest.

Technical Metrics

  • 99.9 percent uptime on Vercel over a 30-day period.
  • First contentful paint under 2.0 seconds on mobile on a representative mid-tier device.
  • No accessibility blockers in Lighthouse and manual keyboard checks.
  • No client-side JavaScript error rate above 1 percent of sessions.

Tracking Plan

  • Track page_view with language, device class, and referrer.
  • Track language_toggle with from_language and to_language.
  • Track project_card_view when a card enters the active viewport.
  • Track project_link_click with project name and link type.
  • Track contact_click with channel name such as email, WhatsApp, GitHub, LinkedIn, or Telegram.
  • Track scroll_depth at 25, 50, 75, and 100 percent.
  • Track 404_view and return_to_home_click on the error page.

Technical Needs

  • Next.js App Router with TypeScript strict mode.
  • Tailwind CSS v4 for utility styling and responsive layout.
  • GSAP ScrollTrigger for scroll-linked sequences and pinning.
  • Motion for component interactions, hover states, and presence animations.
  • Lenis for smooth scrolling, synced to ScrollTrigger through gsap.ticker.
  • lucide-react icons for contact and utility actions.
  • Deployment on Vercel with a custom domain and static-first rendering where possible.

Integration Points

  • Vercel Web Analytics for cookie-less usage tracking.
  • GitHub for project links and source visibility.
  • WhatsApp deep links for direct contact.
  • LinkedIn profile link for professional verification.
  • Telegram optional link if the owner wants a second chat channel.

Data Storage & Privacy

  • Store only non-sensitive site preferences in localStorage, primarily language choice.
  • Do not collect personal user data through forms because there is no form.
  • Keep analytics minimal and cookie-less, using Vercel Web Analytics only.
  • Respect GDPR and CCPA principles by minimizing data collection and avoiding personal identifiers in tracking.
  • Do not display or store sensitive personal data in project examples or footer text.

Scalability & Performance

  • Keep the page mostly server-rendered with small client islands only where needed.
  • Lazy load non-critical motion and only hydrate interactive sections that require it.
  • Optimize images for the avatar and OG image, with modern formats and responsive sizing.
  • Target Lighthouse mobile scores above 90 in all categories through small bundles and limited animation overhead.

Potential Challenges

  • Few projects available: mitigate with a polished empty state, strong about copy, and clear GitHub links.
  • Scraping legality concerns: mitigate by stating ethical practices, respecting robots.txt, and avoiding sensitive data.
  • Animation performance on mobile: mitigate with reduced-motion support, low-cost transforms, and limited ScrollTrigger usage.
  • Looking generic: mitigate by tying the story to welding, self-teaching, and the real data process.
  • Content drift across languages: mitigate by keeping all copy in one central config file with paired EN and ID strings.

Team & resourcing - Small solo build or very small team: 1 engineer, 1 designer or content editor, part-time PM support.

Phase 1: Content and structure MVP · Weeks 1 to 2

  • Single-page layout with header, about, process, projects, contact, and footer sections.
  • Central config file for all content and labels in English and Indonesian.
  • Basic routing for homepage and 404 page.
  • Accessible semantic markup, skip link, and keyboard navigation.

Phase 2: Motion and project presentation · Weeks 3 to 4

  • Role line animation, process sequence, and controlled carousel behavior.
  • GSAP ScrollTrigger sequences for scroll-linked moments.
  • Motion interactions for hover, focus, and presence.
  • Empty state behavior for short or missing project lists.

Phase 3: SEO and trust setup · Week 5

  • llms.txt, llms-full.txt, JSON-LD Person schema, robots.txt, sitemap, favicon, and OG image.
  • Meta title and description in English and Indonesian.
  • Vercel Web Analytics integration.
  • Footer ethics statement and clean crawlability.

Phase 4: Polish and launch · Week 6

  • Performance pass to meet Lighthouse mobile targets.
  • Cross-device QA at 360px width and common desktop sizes.
  • Reduced-motion validation and accessibility review.
  • Custom domain deployment on Vercel and final content review.

Paste this into Cursor, Bolt, Lovable, or v0 to start building.

Build a production-ready single-page personal portfolio website for Gumi, a beginner freelance data analyst focused on web scraping, crawling, data cleaning, and dataset building.

Use Next.js App Router, TypeScript strict, Tailwind v4, GSAP ScrollTrigger, Motion, Lenis, lucide-react, and deploy-ready Vercel-friendly architecture. No backend, no database, no auth. Add a 404 page.

Core requirements:
- Single homepage with sections: profile header, about, one process moment, projects carousel, contact links, footer ethics statement.
- All content, UI labels, project data, and EN or ID copy must live in one central config file for easy editing.
- Language: English default, Indonesian toggle, preference stored in localStorage.
- Accessibility: skip link, aria labels, visible focus states, keyboard navigation, works at 360px width.
- Performance: keep it lightweight and aim for Lighthouse mobile above 90 in all categories.
- SEO and AI readiness: llms.txt, llms-full.txt, JSON-LD Person schema, robots.txt allowing crawlers, sitemap, favicon, OG image, and real HTML text for key info.
- Integrations: Vercel Web Analytics only, no Google Analytics, no Stripe, no Calendly.

Content behavior:
- Header must show name, avatar, and rotating role line such as Data Scraper, Data Cleaner, Dataset Builder.
- About copy must honestly connect welding, computer science, and data work as strengths in discipline, process, and quality. Mention AI-assisted workflow openly.
- One process moment should show raw input, process, and clean output as a small terminal or pipeline story. It is not a demo suite.
- Projects section should be a carousel of real projects only, with name, period or status, description, features, tags, and links. If there are too few projects, show an elegant empty state pointing to GitHub. Never invent projects.
- Contact section should be links only: mailto, WhatsApp, GitHub, LinkedIn, Telegram. No form.
- Footer must include a short ethics statement about scraping, robots.txt, rate limits, and no sensitive personal data.

Motion guidance:
- Use GSAP ScrollTrigger for scroll-linked sequences, pinning, and any multi-step storytelling moment.
- Use Motion for component interactions, hover states, presence, and small transitions.
- Use Lenis for smooth scrolling and sync it to ScrollTrigger via gsap.ticker.
- Read motion as purpose, not decoration.
- Disable all non-essential motion under prefers-reduced-motion.

Data model:
- Profile object: name, avatar, roles, short headline.
- About object: concise paragraph(s) in EN and ID.
- Process object: 3 to 4 pipeline steps with labels and short descriptions.
- Projects array: id, name, period, status, description, features, tags, githubUrl, liveUrl optional, featured boolean.
- Contact links object: email, WhatsApp, GitHub, LinkedIn, Telegram.
- SEO object: meta titles and descriptions in EN and ID, keywords, OG image alt text.
- UI copy object: section labels, empty states, button labels, and 404 copy in both languages.

Implementation notes:
- Keep the portfolio calm, sharp, and characterful. Do not define colors, fonts, or a visual concept beyond using the provided reference materials if present.
- Build with semantic HTML, responsive layout, and accessible components.
- Make the projects carousel usable with keyboard, touch, and pointer interactions.
- Add a graceful 404 page that returns users to home and GitHub.
- Use clean, maintainable component structure with content driven by the config file.
- Include source-friendly code organization suitable for a real production portfolio.

Business Idea

Create a production-ready PRD.md for a single-page personal portfolio website. Focus on WHAT is built and WHY, not on visual style or code. ## Owner Gumi (Gumihoo), beginner freelance data analyst (web scraping, crawling, data cleaning, dataset building). Background: vocational school graduate in welding, studied computer science until semester 4 (did not continue), self-taught, works with AI agent assistance. No clients yet. ## Product A single-page portfolio (plus a 404 page). Structure follows a calm, minimal personal portfolio: 1. Profile header: name, avatar, rotating role line (e.g. Data Scraper | Data Cleaner | Dataset Builder) 2. About: short, honest, personal. Welding to IT to data, told as strength (discipline, process, attention to quality), not as an apology. Mention AI-assisted workflow openly 3. One process moment: a small terminal-style or pipeline-style visual showing how I work (raw input, process, clean output). A single identity piece, not an interactive demo suite 4. Projects: a carousel of REAL projects that already exist or are in progress (for example the Flutter trading journal app, status: in progress, plus anything else I add in the config). Each card: name, period/status, description, features, tags, links (GitHub/live). If projects are few, show a well-designed empty state pointing to my GitHub. Never invent projects 5. Contact: links only (mailto, WhatsApp, GitHub, LinkedIn/Telegram) via a nav dock or contact block. No form, no lead capture, no lead magnet 6. Footer: short ethics statement on scraping (robots.txt, rate limits, no sensitive personal data) Purpose: introduce who I am, prove skill through real work, and make contact easy. Not a sales page. ## Hard rules - No pricing, no services section, no FAQ, no blog, no case studies, no testimonials, no client logos, no fake numbers or fake projects - No new interactive demo suite built only for the page - All content (profile, projects, UI text in EN/ID) lives in one central config file for easy editing ## Design and motion - Do NOT define colors, fonts, or a visual concept. Visual direction comes only from /references/reference.md and the screenshots in /references/screenshots (my own selected references). State this in the PRD - Vibe words: calm, sharp, characterful. High contrast, dark-warm or neutral. No gradients, no neon, no purple-blue, no glassmorphism, no generic template look - Motion is a major quality goal. In the PRD, describe motion as PURPOSES (which moments need animation, what each must communicate), not styles. Define when to use GSAP ScrollTrigger (sequences, scroll, pin), Motion (component interactions, hover, presence), and Lenis (smooth scroll). Lenis must sync with ScrollTrigger via gsap.ticker, use the current "lenis" package, and all motion must switch off under prefers-reduced-motion ## Technical constraints (document as constraints) Next.js App Router, TypeScript strict, Tailwind v4, GSAP ScrollTrigger, Motion, Lenis, lucide-react. Deploy on Vercel with a custom domain. No backend, no database, no auth. Language: English default, Indonesian toggle, preference stored in localStorage. Accessibility: skip link, aria labels, focus states, keyboard navigation, works at 360px width. Performance: Lighthouse mobile above 90 in all categories. ## SEO and discoverability - Visible to AI tools: llms.txt, llms-full.txt, JSON-LD Person schema, robots.txt allowing crawlers, key info in real HTML text - Keywords: web scraping freelancer, data cleaning freelancer, dataset builder, freelance data analyst Indonesia, jasa scraping data - Write meta title and description in EN and ID (title max 60 chars, description max 155 chars), natural and specific, no buzzwords - OG image 1200x630, sitemap, favicon ## Integrations Vercel Web Analytics only (cookie-less). No Google Analytics, no Stripe, no Calendly. ## PRD must contain 1. Overview and goal, with realistic measurable success metrics (visits, contact clicks, Lighthouse scores) 2. Target visitors (SMEs, agencies, researchers/AI builders, recruiters) and what makes them trust me 3. Honest one-sentence positioning, no buzzwords 4. Section-by-section spec: purpose, required content, behavior 5. Project card data model and empty-state behavior 6. Motion requirements (purposes, tool choice, reduced-motion rules) 7. Functional and non-functional requirements 8. SEO and AI-readiness spec 9. Non-goals 10. Risks and mitigations (few projects, scraping legality, animation performance, looking generic) 11. Success checklist with priorities P0/P1/P2 12. Open questions for me to fill: domain, email, WhatsApp number, GitHub/LinkedIn/Telegram links, project list, avatar photo ## Output rules - Output only PRD.md, markdown, simple and specific language - Use hyphens and colons, no em dashes or en dashes - State assumptions at the top, do not ask me questions back - You may challenge my assumptions if there is a better approach, and explain why

Make My PRD

Design by The Resonance | Powered by GPC – The AI Transformation Company