Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/luislopez-stack/landing-pages/llms.txt

Use this file to discover all available pages before exploring further.

All branding in the Soumyajit Landing Pages template is centralised in a handful of files — public/index.html, src/components/Navbar.js, public/favicon.png, and src/style.css. There is no separate build configuration or theme file to touch; every brand-facing detail lives in one of these locations.

​
Site name and metadata

The browser tab title and search-engine description are defined directly in public/index.html. Open the file and update the highlighted values below.
public/index.html
<head>
  <meta charset="utf-8" />
  <link rel="icon" href="%PUBLIC_URL%/favicon.png" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="theme-color" content="#000000" />

  <!-- ① Change this to your site title -->
  <title>S0umyajit | Portfolio</title>

  <!-- ② Change this to your site description -->
  <meta name="description" content="Self Developed personal website build with React.js">

  <!-- Google / Search Engine Tags -->
  <!-- ③ Mirror your title and description here too -->
  <meta itemprop="name" content="S0umyajit | Portfolio">
  <meta itemprop="description" content="Self Developed personal website build with React.js">

  <!-- Open Graph (Facebook / LinkedIn share previews) -->
  <meta property="og:title" content="S0umyajit | Portfolio">
  <meta property="og:description" content="Self Developed personal website build with React.js">
  <meta property="og:url" content="https://soumyajit.vercel.app">

  <!-- Twitter Card -->
  <meta name="twitter:title" content="S0umyajit | Portfolio">
  <meta name="twitter:description" content="Self Developed personal website build with React.js">
</head>
Update all occurrences of the title and description — including the Open Graph and Twitter Card <meta> tags — so that social share previews also reflect your brand.
The navbar logo image lives at src/Assets/logo.png and is imported at the top of src/components/Navbar.js.
src/components/Navbar.js
import logo from "../Assets/logo.png";
The imported file is then rendered inside the <Navbar.Brand> component:
src/components/Navbar.js
<Navbar.Brand href="/" className="d-flex">
  <img src={logo} className="img-fluid logo" alt="brand" />
</Navbar.Brand>
To replace the logo, choose one of these approaches:
1

Swap the file in place

Replace src/Assets/logo.png with your own PNG, keeping the exact filename logo.png. The import and <img> tag require no changes.
2

Use a different filename or path

Add your image anywhere under src/Assets/ and update the import line in Navbar.js:
src/components/Navbar.js
// Before
import logo from "../Assets/logo.png";

// After — using a renamed file
import logo from "../Assets/my-brand-logo.png";
3

Adjust the display size

The .logo CSS class in src/style.css controls the rendered dimensions. Change height and width to suit your artwork:
src/style.css
.logo {
  height: 1.4em !important;
  width: 2.5em !important;
}

​
Favicon

The browser favicon is the file public/favicon.png, referenced in public/index.html:
public/index.html
<link rel="icon" href="%PUBLIC_URL%/favicon.png" />
Replace public/favicon.png with your own icon, keeping the filename favicon.png. A 32 × 32 or 64 × 64 pixel PNG works best across all browsers. If you prefer a different filename or format, update the href in index.html to match.

​
Accent color

Every purple highlight across the site — including the hero name, typewriter text, section heading accents, and nav link underlines — is driven by a single CSS custom property defined in src/style.css.
src/style.css
html {
  --imp-text-color: #c770f0;
}

.purple {
  color: var(--imp-text-color) !important;
}
Change --imp-text-color to any valid CSS color value and the accent recolors everywhere automatically. For example, to use the project’s primary brand color:
src/style.css
html {
  --imp-text-color: #744cfa;
}
The .purple utility class is applied throughout the component JSX (e.g., <span className="purple">, <b className="purple">). You do not need to touch any JSX when changing the accent color — updating --imp-text-color is the only step required.

​
Navbar brand name

The brand identity in the navbar is expressed through the logo image rendered inside <Navbar.Brand>. If you prefer a plain-text brand name instead of an image, replace the <img> tag with your text:
src/components/Navbar.js
// Logo image (current default)
<Navbar.Brand href="/" className="d-flex">
  <img src={logo} className="img-fluid logo" alt="brand" />
</Navbar.Brand>

// Plain text alternative
<Navbar.Brand href="/" className="d-flex">
  My Business Name
</Navbar.Brand>
You can also combine both — an image followed by a text string — using standard JSX sibling elements inside <Navbar.Brand>.
Once your accent color is set, head to Styling and Theming to customize section backgrounds, scrollbar colors, button styles, and more.

Build docs developers (and LLMs) love

Get started for freeTalk to us