First Steps

Now that you have Portfolio CMS installed, let's configure it with your information and get your portfolio ready.

Step 1: Access the Admin Panel

Open your browser and navigate to:

http://localhost:3000/admin

If this is your first time, you'll be prompted to create an admin account. Enter your email and a secure password.

Step 2: Configure Site Settings

Navigate to Settings > Site Settings in the sidebar.

General Tab

Field	Description	Example
Site Name	Your portfolio name	"John Doe"
Site Tagline	Short description	"Full Stack Developer"
Logo	Upload your logo	PNG/SVG recommended
Logo Text	Text if no logo	"JD"
Favicon	Browser tab icon	32x32 PNG

Contact Tab

Field	Description	Example
Email	Contact email	"hello@johndoe.dev"
Phone	Phone number	"+1 (555) 123-4567"
Location	Your location	"San Francisco, CA"
Availability	Status message	"Available for freelance"

Step 3: Set Up Your Profile

Navigate to Content > Profile in the sidebar.

Basic Info

Name: Your Full Name
Title: Your Professional Title
Tagline: A catchy one-liner
Bio: Brief introduction (2-3 sentences)
Avatar: Your professional photo

About Section

Write a detailed about section using the rich text editor:

I'm a passionate developer with X years of experience building
web applications. I specialize in React, Node.js, and cloud
technologies.

When I'm not coding, you'll find me [your hobbies].

Stats

Add impressive statistics:

Label	Value	Icon
Years Experience	"5+"	Briefcase
Projects Completed	"50+"	Code
Happy Clients	"30+"	Users
Coffee Cups	"1000+"	Coffee

Services

List the services you offer:

Service	Description	Icon
Web Development	Full-stack web applications	Code
UI/UX Design	Beautiful, user-friendly interfaces	Palette
API Development	RESTful and GraphQL APIs	Server

Step 4: Add Your Skills

Navigate to Collections > Skills and click "Create New".

Adding a Skill

Name: React
Category: Frontend
Proficiency: 90 (1-100)
Years of Experience: 5
Icon: (select from list)
Featured: ✓ (check if important)

Recommended Categories

Group your skills logically:

• Frontend: React, Vue, TypeScript, TailwindCSS
• Backend: Node.js, Python, PostgreSQL, Redis
• DevOps: Docker, AWS, CI/CD, Kubernetes
• Tools: Git, VS Code, Figma, Postman

Step 5: Add Your Projects

Navigate to Collections > Projects and click "Create New".

Project Fields

Field	Description
Title	Project name
Slug	URL-friendly name (auto-generated)
Description	Brief overview
Content	Detailed write-up (rich text)
Featured Image	Main project image
Gallery	Additional screenshots
Category	Project category
Technologies	Tech stack used
Live URL	Demo link
Repository URL	GitHub/GitLab link
Featured	Show on homepage
Status	Published/Draft

Example Project

Title: E-Commerce Platform
Slug: e-commerce-platform
Description: A full-featured online store with real-time inventory
Category: Web Application
Technologies: Next.js, Stripe, PostgreSQL, TailwindCSS
Live URL: https://demo-store.example.com
Repository: https://github.com/username/demo-store
Featured: ✓
Status: Published

Step 6: Add Work Experience

Navigate to Collections > Experience and add your work history.

Experience Entry

Company: Acme Corporation
Position: Senior Developer
Start Date: 2020-01-01
End Date: (leave empty if current)
Current: ✓
Location: Remote
Description: Led development of microservices architecture...

Responsibilities (Array)

• Built and maintained React applications
• Mentored junior developers
• Implemented CI/CD pipelines

Step 7: Configure Navigation

Navigate to Settings > Navigation.

Menu Items

Label	URL	Highlight
Home	/	No
Projects	/projects	No
About	/#about	No
Contact	/#contact	No

CTA Button

Show CTA: ✓
CTA Label: Hire Me
CTA URL: /#contact

Step 8: Configure Footer

Navigate to Settings > Footer.

Link Columns

Column 1: Quick Links

• Home → /
• Projects → /projects
• About → /#about

Column 2: Connect

• GitHub → https://github.com/username
• LinkedIn → https://linkedin.com/in/username
• Twitter → https://twitter.com/username

Copyright

Copyright Text: © {year} Your Name. All rights reserved.

Step 9: Set Up SEO

Back in Site Settings > SEO Defaults:

Meta Title: %s | Your Name - Full Stack Developer
Meta Description: Portfolio of Your Name, a full stack developer
                  specializing in React, Node.js, and cloud technologies.
OG Image: (upload a 1200x630 image)
Twitter Handle: @yourusername

Step 10: Add Social Links

In Site Settings > Social Links, add your profiles:

Platform	URL
GitHub	https://github.com/username
LinkedIn	https://linkedin.com/in/username
Twitter	https://twitter.com/username
Website	https://yourblog.com

Viewing Your Portfolio

After making changes, view your portfolio at:

http://localhost:3000

Changes appear immediately thanks to Payload's integration with Next.js.

Using Live Preview

For real-time editing:

1. Open any content item in the admin
2. Click the "Live Preview" button (eye icon)
3. Select a breakpoint (Mobile, Tablet, Desktop)
4. Make changes and see them instantly

Pro Tip

Take your time filling in quality content. A well-written portfolio with good projects will make a stronger impression than having every section filled with placeholder content.