How to Create a Digital Portfolio or Personal Website in FlutterFlow

Create a single page named Portfolio. Start with a Stack widget at full viewport width and 500px height. Add an Image as the background (a professional photo or abstract background). Overlay a Container with a gradient from transparent to dark (Colors.black54) for text readability. On top, add a Column centered both vertically and horizontally: your name as Headline Large text in white, your professional title as Body Large in white with opacity, and a Row with two Buttons: View My Work (primary, scrolls to projects section) and Contact Me (outlined, scrolls to contact section).

Below the hero Stack, add a Container with padding as the About section. Inside, add a Row for desktop layout (image left, text right) using Responsive Visibility to switch to a Column on mobile. The left side shows a CircleImage or rounded Container with your photo. The right side has a Column with a Headline Small heading About Me, a Body Medium paragraph with your bio, and a Wrap widget containing ChoiceChips or styled Containers for your skills (e.g., FlutterFlow, Firebase, UI Design, Product Strategy). Use consistent accent colors for the skill chips.

Add a Projects section with a Headline Small heading. Use a GridView with crossAxisCount 3 on desktop, 2 on tablet, 1 on mobile using Responsive Values. Each project card is a Container with: an Image showing the project screenshot, a Column below with the project title (Text, bold), a short description (Text, Body Small, maxLines 2), a Wrap of small tech tag chips, and a Row with two icon buttons: one linking to the live site (Launch URL action) and one to the GitHub repo. Store project data in Firestore or hardcode if you prefer a static portfolio.

Add an Experience section. Use a ListView for your work history. Each entry is a Row: on the left, a vertical line (Container width 2px, full height, accent color) with a Circle dot at the top. On the right, a Column with company name (Text, bold), job title and date range (Text, Body Small, grey), and a bullet list of key accomplishments. For the vertical timeline connector, use a Column with a CircleAvatar at the top and an Expanded Container with width 2 below it. This creates a clean timeline visual without needing a Custom Widget.

Add a Contact section at the bottom. Include three TextFields: name, email (with email keyboard), and message (multiline, 5 lines). Add a Send button. On tap, validate that all fields are filled and email format is valid. Create a document in a contact_submissions collection with name, email, message, and submittedAt timestamp. Optionally trigger a Cloud Function on document creation that sends the message to your personal email via SendGrid or similar. Show a success SnackBar and clear the form fields.

Wrap the entire page content in a ScrollableColumn with a ScrollController. Add a sticky AppBar or fixed-position Row at the top with navigation links: About, Projects, Experience, Contact. Create a Custom Action that accepts a target section position (pixels from top) and calls scrollController.animateTo(position, duration, curve: Curves.easeInOut). Assign each nav link an On Tap action calling this Custom Action with the approximate pixel offset of each section. For web, use GlobalKey and RenderBox to calculate exact section positions dynamically.

1// Custom Action: scrollToSection
2import 'package:flutter/material.dart';
3
4Future scrollToSection(
5  ScrollController controller,
6  double offset,
7) async {
8  controller.animateTo(
9    offset,
10    duration: const Duration(milliseconds: 600),
11    curve: Curves.easeInOut,
12  );
13}