Robert Shaw

About the Project: Robert Shaw is a photography portfolio website built with Next.js and React. It showcases the work of a professional visual artist — including gallery shoots, services, and recent projects — in a clean, dark-themed layout designed to impress.

Key Highlights: Features a custom cursor, animated hero text, auto-rotating gallery cards, scroll-based reveal effects, and a fully responsive layout across all devices.

Project Details

What's Inside

• Header — Sticky navigation with mobile menu and contact details.
• Hero — Full-screen banner with animated rotating headline text.
• Gallery — Auto-rotating project cards with image transitions on hover.
• Category — Grid displaying all photography categories with hover previews.
• About — Artist biography with signature image and decorative shapes.
• Service — List of professional services with hover image reveal effect.
• Portfolio — Two-column layout showcasing recent photography projects.
• Footer — Contact call-to-action with social links and scroll progress button.
• Preloader — Animated loading screen shown before the page fully loads.
• ScrollReveal — Utility that fades in elements as the user scrolls down.
• CustomCursor — Custom cursor that reacts to hovering over links and buttons.

Key Features

• Animated Hero Text — Headline words rotate automatically every three seconds.
• Auto-Rotating Gallery Cards — Gallery items cycle between two images automatically.
• Scroll Reveal Animations — Elements fade and slide in as the user scrolls.
• Custom Cursor — Cursor scales up smoothly when hovering interactive elements.
• Sticky Header — Header changes background color after scrolling past the top.
• Mobile Navigation — Slide-in menu with overlay and body scroll lock.
• Scroll Progress Button — Back-to-top button shows live scroll percentage.
• Data-Driven Components — All content is stored in JSON files for easy updates.
• Fully Responsive — Layout adapts cleanly from mobile to large desktop screens.

Technologies Used

• Next.js — React framework used for routing, layout, and page structure.
• React — Component-based UI library powering all interactive sections.
• CSS (Custom Properties) — Global styles, animations, and responsive design system.
• JSON Data Files — Separate data files for each component to keep content organized.
• Lucide React — Clean icon library used for buttons and UI actions.
• Next.js Font Optimization — Google Fonts loaded via next/font for better performance.

Project Structure

robert-shaw/
│
├── public/                         # Images for gallery, portfolio, services, and decorative shapes
│
├── src/
│   ├── app/
│   │   ├── layout.jsx              # Root layout with fonts and metadata
│   │   ├── page.jsx                # Main page assembling all components
│   │   └── index.css               # Global styles and CSS variables
│   │
│   ├── components/
│   │   ├── Preloader.jsx           # Page loading animation
│   │   ├── ScrollReveal.jsx        # Scroll-based reveal effects
│   │   ├── CustomCursor.jsx        # Interactive cursor tracking
│   │   ├── Header.jsx              # Navigation and mobile menu
│   │   ├── Hero.jsx                # Banner with rotating text
│   │   ├── Gallery.jsx             # Auto-rotating project cards
│   │   ├── Category.jsx            # Photography category grid
│   │   ├── About.jsx               # Artist biography section
│   │   ├── Service.jsx             # Professional services showcase
│   │   ├── Portfolio.jsx           # Recent projects display
│   │   └── Footer.jsx              # Footer with social links
│   │
│   └── data/
│       ├── Preloader.json          # Loading screen content
│       ├── Header.json             # Navigation and contact info
│       ├── Hero.json               # Hero section content
│       ├── Gallery.json            # Gallery cards data
│       ├── Category.json           # Category items data
│       ├── About.json              # About section content
│       ├── Service.json            # Services information
│       ├── Portfolio.json          # Portfolio projects data
│       └── Footer.json             # Footer content and links
│
├── package.json                    # Dependencies and scripts
├── next.config.mjs                 # Next.js configuration
└── README.md                       # Project documentation
    

Quick Start

1. Clone the repository:

   git clone https://github.com/nawazdevx/robert-shaw.git

  <li>
    <strong>Navigate to project folder:</strong>
    <pre><code>cd robert-shaw</code></pre>
  </li>

  <li>
    <strong>Install dependencies:</strong>
    <pre><code>npm install</code></pre>
  </li>

  <li>
    <strong>Start development server:</strong>
    <pre><code>npm run dev</code></pre>
    Then visit the local URL shown in terminal (usually <code>http://localhost:3000</code>)
  </li>

  <li>
    <strong>Build for production:</strong>
    <pre><code>npm run build</code></pre>
    Production files will be generated in <code>.next/</code> folder
  </li>
</ol>

License: This project is licensed under the MIT License.

Contact: Connect with me on LinkedIn or visit my Portfolio.

Support: Found this helpful? Give it a ⭐ on GitHub! Thank you.

Project Preview

You can view the live project here ➜ Live Demo