How to Build a Personal Portfolio Website with React

Start with the outcome, not the framework

A portfolio is a product page for your skills. Before writing React code, decide what you want visitors to do: shortlist you for a role, contact you for freelance work, review your open-source contributions, or understand your technical depth. That decision should shape the headline, project selection, navigation, and calls to action.

For an India-based developer, useful trust signals may include internships, hackathon results, production systems, research, open-source work, or projects built for Indian users and languages. If your work includes AI, make the result concrete: describe the dataset, latency, evaluation method, deployment cost, and what you personally built. A focused portfolio is stronger than a catalogue of unfinished demos.

Choose a modern React setup

The original Create React App workflow is no longer the best default for a new site. For a lightweight portfolio in 2026, use Vite with React for a fast development server and simple production build. If you need server-side rendering, content collections, or stronger search-engine defaults, consider a React framework such as Next.js.

Install Node.js LTS, then create the project:

npm create vite@latest my-portfolio -- --template react
cd my-portfolio
npm install
npm run dev

Open the local URL shown in your terminal. Keep the first version deliberately small: React, a styling approach, an icon library if necessary, and no dependency that does not solve a real problem. A portfolio should load quickly on mobile networks, including slower connections common outside major Indian metros.

Set up a clear structure early:

src/
  components/
    Header.jsx
    ProjectCard.jsx
    Section.jsx
  data/
    projects.js
  App.jsx
  index.css

Put project content in data files rather than duplicating markup. This makes it easier to add, reorder, or localise projects without changing your components.

Plan a useful page structure

A single-page portfolio works well when the content is concise and the navigation is clear. Use semantic sections with descriptive IDs:

Header: Your name, role, and links to work, about, and contact.
Hero: A specific value proposition, not just “developer”.
Selected work: Three to six projects with outcomes and links.
About: Your background, strengths, location, and current interests.
Writing or open source: Optional evidence of how you think and build.
Contact: One obvious route to reach you.

Your hero might say: “Frontend engineer building accessible data products for Indian users,” followed by a short explanation and two buttons: View projects and Contact me. Avoid animated introductions that delay the useful information.

For AI-focused portfolios, show both software and problem understanding. A project involving Indic-language data can be strengthened by explaining the language, annotation process, evaluation, and limitations; readers interested in that area may also find this builder’s guide to low-resource Indic NLP useful.

Build reusable, accessible components

Create components around repeated patterns, while keeping the markup easy to read:

const projects = [
  {
    title: "Transit Insights",
    summary: "A dashboard that helps commuters compare route reliability.",
    result: "Reduced manual reporting time by 60%.",
    stack: ["React", "TypeScript", "PostgreSQL"],
    demo: "https://example.com",
    code: "https://github.com/example/project"
  }
];

function ProjectCard({ project }) {
  return (
    <article className="project-card">
      <h3>{project.title}</h3>
      <p>{project.summary}</p>
      <p><strong>Result:</strong> {project.result}</p>
      <p>{project.stack.join(" · ")}</p>
      <a href={project.demo}>View case study</a>
      <a href={project.code}>Source code</a>
    </article>
  );
}

Use real headings, lists, buttons, and links instead of clickable div elements. Every image needs useful alt text; decorative images should use an empty alt attribute. Ensure keyboard users can see focus states, text meets adequate colour contrast, and animations respect prefers-reduced-motion.

Do not hide essential project information behind a click toggle. Recruiters often scan quickly, and search engines cannot reliably interpret interaction-dependent content. If you use state, reserve it for meaningful enhancements such as a theme switcher or filter. A theme switcher should persist the preference and remain usable without JavaScript-heavy effects.

Make projects read like case studies

Each project card should answer five questions:

What problem did you solve?
Who was the user?
What did you build personally?
What technical decisions mattered?
What changed as a result?

Include a screenshot or short product video only when it clarifies the work. Link to a live demo, repository, design file, or write-up. If a project cannot be publicly shared, describe the architecture without exposing confidential information and explain the constraint.

If you are building agentic or AI products, include model choice, prompt or retrieval strategy, guardrails, evaluation, and operating cost. A portfolio that demonstrates these trade-offs is more credible than one that only lists “AI” in a technology badge. You can reference ideas from building generative AI agents or show a deployed conversational project alongside your frontend work.

Add responsive styling and basic SEO

Start with mobile styles, then add wider layouts using CSS grid or flexbox. Set a readable maximum content width, generous spacing, and a consistent type scale. Avoid large background videos and oversized image files. Convert images to modern formats, specify dimensions to reduce layout shift, and lazy-load below-the-fold media.

Add a useful document title and description in index.html, plus Open Graph metadata for sharing. Use one descriptive h1, logical heading levels, canonical URLs where relevant, and a custom 404 page. Create a sitemap if your portfolio has multiple pages. Search visibility helps, but clarity for human reviewers comes first.

If you publish technical work, link your portfolio to detailed writing rather than adding a long list of badges. Developers exploring AI product work can also learn from distributed systems with AI agents, especially when explaining reliability and system boundaries.

Test before deployment

Run the production build locally:

npm run build
npm run preview

Check the site on a phone and a laptop. Test navigation, external links, the contact flow, keyboard access, reduced motion, dark mode if included, and the 404 route. Use Lighthouse or PageSpeed Insights to inspect performance, accessibility, best practices, and SEO. Fix large images, layout shifts, missing labels, and poor contrast before adding visual polish.

Never place API keys, private tokens, or personal documents in the frontend bundle. A contact form should submit to a secure backend or trusted form service, include spam protection, and provide a clear success or failure message. Do not publish a personal phone number unless you are comfortable receiving unsolicited calls.

Deploy with a custom domain

Vercel and Netlify provide straightforward Git-based deployments for Vite and React sites. Connect your repository, set the build command to npm run build, and use dist as the output directory. Configure environment variables in the hosting dashboard, not in committed files.

For GitHub Pages, configure the correct base path when the site is hosted under username.github.io/repository-name; a custom domain is simpler for a professional portfolio. Register a domain that is easy to spell, enable HTTPS, and verify that redirects and canonical URLs work.

After deployment, set up analytics only if you need them, disclose tracking where appropriate, and avoid collecting more data than necessary. A lightweight portfolio with a reliable contact link is often better than a dashboard full of unused metrics.

Keep the portfolio current

Review the site every few months. Replace weak projects, update your availability, remove broken demos, and add measurable outcomes as your work evolves. Your portfolio should show progression: stronger problem framing, better engineering decisions, and clearer communication.

The best final check is simple: ask someone unfamiliar with your work to identify your role, strongest project, and contact method within 30 seconds. If they cannot, improve the content hierarchy before changing the framework.

Apply for AI Grants India