Minecraft Developer Portfolio

A Vite, React, TypeScript, and Tailwind CSS portfolio for Minecraft developers. It includes a responsive home page, skills and services, project highlights, testimonials, and a contact page.

Requirements

• Node.js 18 or newer
• npm 9 or newer

Install

Open a terminal in the project folder and run:

npm install

Start Development

npm run dev

Open the local URL shown by Vite, normally http://localhost:8080.

Production Build

Create an optimized production build:

npm run build

Preview the production build locally:

npm run preview

Check the code with ESLint:

npm run lint

Personalize The Website

Replace the placeholder information in these files:

File	Edit
index.html	Page title, description, author, keywords, social preview URL, and profile image metadata
src/components/Hero.tsx	Main heading, introduction, availability text, profile image, and buttons
src/components/Header.tsx	Logo image, logo alt text, and navigation links
src/components/Experience.tsx	Minecraft skills, services, tools, and descriptions
src/components/Projects.tsx	Project names, descriptions, images, links, and featured labels
src/components/Testimonials.tsx	Client names, roles, quotes, ratings, and testimonial images
src/pages/Contact.tsx	Email address, Discord handle, location, and availability
src/components/Footer.tsx	Contact email, social links, copyright name, and footer text
src/index.css	Colors, spacing, background, and global styling
public/robots.txt	Search engine crawling rules

Updating Images

The profile image is referenced in src/components/Header.tsx, src/components/Hero.tsx, and src/components/LogoGraphic.tsx. Update all three references if you want the same logo everywhere.

Project and testimonial images are defined in their respective component data arrays. Use reliable HTTPS image URLs or add local images to public/ and reference them with paths such as /images/project.png.

Adding A Project

Open src/components/Projects.tsx and add an item to the projects array with:

• title
• description
• image
• featured

Add a real project URL to the Live Demo button when the project is ready to share.

Updating Navigation

Edit the navItems array in src/components/Header.tsx. Use section IDs such as #about, #experience, #projects, and #contact, or use a route such as /contact.

Deployment

Run npm run build and deploy the generated dist/ folder to a static host such as Vercel, Netlify, GitHub Pages, or any web server that supports single-page applications.

For the /contact route to work after refreshing the page, configure the host to redirect unknown paths to index.html.

Project Structure

src/
  components/       Reusable portfolio sections and UI components
  hooks/            Shared React hooks
  lib/              Shared utility functions
  pages/            Route-level pages
  App.tsx           Application routes and global UI
  main.tsx          Browser entry point
  index.css         Tailwind layers and global styles
public/             Static assets such as robots.txt