Gerald Johnson Portfolio (MERN Stack)

A personal portfolio site for Gerald Evan Johnson, built with MongoDB, Express, React (Vite), and Node.js.

• Resume content (experience, projects, skills, education) lives in client/src/data/resumeData.js — edit it directly to update the site.
• The contact form is fully functional: it POSTs to the Express API, saves the message to MongoDB, and emails Gerald via Nodemailer.

Prerequisites

• Node.js 18+
• MongoDB running locally (mongod), or a MongoDB Atlas connection string

1. Server setup

cd server
npm install
cp .env.example .env

Edit server/.env:

• MONGODB_URI — defaults to mongodb://127.0.0.1:27017/portfolio for a local MongoDB instance.
• SMTP_HOST / SMTP_PORT / SMTP_USER / SMTP_PASS — SMTP credentials used to email you contact-form submissions. For Gmail: enable 2-Step Verification, then create an "App Password" at myaccount.google.com/apppasswords and use that as SMTP_PASS.
• CONTACT_RECEIVER_EMAIL — where contact-form emails are delivered.

Run the API:

npm run dev

Starts on http://localhost:5000. If MongoDB isn't reachable yet, the server still starts (it logs a warning) but /api/contact won't be able to save messages until Mongo is up.

2. Client setup

cd client
npm install
npm run dev

Opens on http://localhost:5173 and proxies /api/* requests to the Express server on port 5000.

3. Add your photo

Drop your headshot at:

client/public/images/profile.jpg

Until then, the hero section shows a circular initials avatar automatically — nothing breaks.

Production build

cd client && npm run build
cd ../server && npm start

The Express server serves the built React app from client/dist and the API from the same process/port.

Notes

• Reference contacts listed on the original resume were intentionally left off the public site to avoid publishing third parties' personal emails.
• Contact-form submissions are stored in the messages collection in MongoDB even if email delivery isn't configured, so nothing is lost.