Duranium x UXAB: Handoff Guide

Everything you need to update and maintain the Duranium website.

Quick Start

npm install        # first time only
npm run dev        # start local dev server: http://localhost:5173
npm run build      # build for production

Headshots

Team photos live on the Careers page (src/pages/Careers.jsx).

Adding a headshot

Drop the photo into src/assets/branding/ (square crop, ~400x400px recommended)
At the top of Careers.jsx, add an import. For example:
```
import john from '../assets/branding/john.jpg';
```

Find the TEAM array near the top of the file:

const TEAM = [
  { name: 'Name', role: 'Position', img: null, linkedin: '#' },
];

Replace name & position fields and img: null with your import:

{ name: 'John Doe', role: 'ABC', img: john, linkedin: 'https://linkedin.com/in/...' },

Adding a team member

Add a new line to the TEAM array:

{ name: 'New Guy', role: 'Guy', img: newGuy, linkedin: 'https://linkedin.com/in/...' },

Don't forget to follow the steps for adding a new headshot. The import at the top and the comma after the previous entry are required.

Removing a team member

Delete their line from the TEAM array and remove the unused headshot import at the top.

Job Listings

Job listings live on the Careers page (src/pages/Careers.jsx). The Apply Now button can be linked to any job listing platform (Line 116).

Adding a job listing

Find the POSITIONS array near the top of the file and add a new entry:

const POSITIONS = [
  {
    title: 'MECHANICAL ENGINEER',                 // Shown in bold
    type: 'Full-Time',                            // Shown top-right
    location: 'Los Angeles, CA',                  // Shown right below type
    description: 'Design and optimize reactor components for high-temperature applications.',
    link: 'https://www.linkedin.com/jobs'         // Link to any job listing for redirect on click
  },
  // Add new listings here, same format.
];

Each new entry automatically gets the hover bracket effect and consistent styling.

Editing a listing

Change the title, type, location, or description text directly.

Removing a listing

Delete the entire { ... }, block from the array.

Hosting

Where it's hosted

The site is deployed on Vercel. Every time you push code to the main branch on GitHub, Vercel automatically rebuilds and deploys within 1-2 minutes.

Domain

In the Vercel dashboard → Settings → Domains → Add your domain
Vercel gives you DNS values — enter these in your domain registrar's settings
Wait 15-30 minutes for propagation
HTTPS is automatic

Analytics

Analytics can be enabled and analyzed natively through Vercel, and managed through the dashboard.

Contact Us

The contact form sends messages to your email via Formspree. No backend or server needed.

Setup (one time)

Go to formspree.io and create an account.
Click New Form, name it.
Copy the Form ID (looks like xpznqkla).
Open src/pages/Contact.jsx.

Find this line at the top:

const [state, handleSubmit] = useForm("YOUR_FORM_ID");

Replace YOUR_FORM_ID with your actual ID:

const [state, handleSubmit] = useForm("xpznqkla");

In the Formspree dashboard, set the email address where submissions should go.

What happens when someone submits

They see a "Message Sent" confirmation on screen.
You receive an email with their name, email, and message.
Formspree handles spam filtering automatically.

Limits

Free tier: 50 submissions/month
You can upgrade your plan at formspree.io/plans if needed

Editing Other Content

All page content lives in src/pages/. Each file is a single page:

File	Page	URL
`Home.jsx`	Landing Page	`/`
`Process.jsx`	Video Scroller	`/process`
`Careers.jsx`	Team + Job Listings	`/careers`
`Contact.jsx`	Contact Form	`/contact`

Changing any text

Find the text between JSX tags and edit it directly:

<h2 className="font-heading text-3xl font-thin mb-8">
  What Is Duranium?          // Just change the text directly
</h2>

Do not edit or delete the className="..." part; that controls styling.

Replacing images

Drop the new image in src/assets/branding/

Update the import at the top of the file:

import newImage from '../assets/branding/new-image.jpg';

Find the <img> tag and swap the src:

<img src={newImage} alt="Description" className="w-full h-full object-cover" />

Replacing the logo

Replace src/assets/branding/logo_light.png with a new file using the same filename if you don't want to edit the code. It updates everywhere automatically (including navbar + footer).

Replacing the hero background

Make sure the new hero is in src/assets/branding/. In Home.jsx, find the hero import at the top and change it:

import hero from '../assets/branding/hero.png';     // Just change the filename to the new Hero

Same for Careers (team_3.jpeg) and Process (team_4.jpeg).

Editing carousel slides

In Home.jsx, find the "Why Duranium?" section. Each slide is a <SwiperSlide> block. Edit the title, image, or description inside, and copy a whole <SwiperSlide>...</SwiperSlide> block to add a new slide.

Editing the periodic table

In src/components/PeriodicTable.jsx, the ELEMENTS array controls what shows. Edit title and description on any active element. To make a new element interactive, add active: true, title, and description, then add its image to the getImage function.

Editing the footer

Open src/components/Footer.jsx. Change the copyright year or any text directly.

Editing the navbar

Open src/components/Navbar.jsx. The NAV_LINKS array controls which pages appear:

const NAV_LINKS = [
  { to: '/', label: 'Home' },
  { to: '/process', label: 'Process' },
  { to: '/careers', label: 'Careers' },
];

Add or remove entries to change the navbar.

Adjusting the Video Scroller

The Process page video scrubber has three knobs:

Setting	Where	What it does
`h-[2000vh]`	`Process.jsx`	Total scroll distance: higher = slower
`scrub: 2`	`Process.jsx`	Animation lag: higher = smoother
`wheelMultiplier: 0.8`	`Process.jsx`	Scroll sensitivity: lower = slower

Replacing the video

Re-encode with every-frame keyframes (required for smooth scrubbing):

ffmpeg -i new-video.mp4 -vf "scale=1920:-2" -c:v libx264 -preset slow -crf 23 -g 1 -an -movflags +faststart public/video/Duranium-scrub.mp4

That's it, same filename means the video has been re-encoded and no further code changes are needed

Replacing Favicon

The favicon is the small icon shown on the browser tab. Replace public/favicon.png with a square image of choice; keep it named favicon.png or edit code accordingly (index.html line 24).

Replacing OpenGraph Thumbnail/One-Liner

This content controls the preview image and text shown when the site's link is shared online. In index.html, find the metadata tags () within the SEO block and edit the content accordingly.

File Locations Quick Reference

What	Where
All images/photos	`src/assets/branding/`
Logo	`src/assets/branding/logo_light.png`
Favicon	`public/favicon.png`
Process video	`public/video/Duranium-scrub.mp4`
Global styles	`src/index.css`
Page content	`src/pages/`
Navbar	`src/components/Navbar.jsx`
Footer	`src/components/Footer.jsx`
Periodic table	`src/components/PeriodicTable.jsx`

Troubleshooting/Common Errors

Problem	Fix
Black screen	Check browser console (right-click → Inspect → Console) for red errors. Usually a missing image import.
Video not playing	Make sure `public/video/Duranium-scrub.mp4` exists. Try opening `http://localhost:5173/video/Duranium-scrub.mp4` directly.
Styles look wrong	Check for typos in class names. Restart dev server: `Ctrl+C` then `npm run dev`.
Page loads scrolled down	Make sure `ScrollToTop` component exists in `App.jsx`.
Contact form not sending	Verify the Formspree form ID in `Contact.jsx`. Check Formspree dashboard.
Deploy fails	Run `npm run build` locally first. Delete `node_modules` and run `npm install` again.
Image not showing	Make sure the import filename matches exactly (case-sensitive).

Tech Stack

Tool	Purpose
React + Vite	UI framework + build tool
Tailwind CSS	Styling
GSAP + ScrollTrigger	Scroll animations
Lenis	Smooth scrolling
Swiper	Carousel
React Router	Page routing
Formspree	Contact form
Vercel	Hosting + deploy

Name		Name	Last commit message	Last commit date
Latest commit History 45 Commits
public		public
src		src
.gitattributes		.gitattributes
.gitignore		.gitignore
README.md		README.md
eslint.config.js		eslint.config.js
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
postcss.config.js		postcss.config.js
tailwind.config.js		tailwind.config.js
vite.config.js		vite.config.js

Folders and files

Latest commit

History

Repository files navigation