FUI Portfolio – Fictional User Interface Digital Art Showcase

A pristine, fully interactive portfolio website built with React + Vite, featuring a sci-fi/cyberpunk aesthetic with smooth scrolling, velocity-based animations, and an adaptive masonry gallery.

🎨 Design System

• Theme: Fictional User Interface (FUI) / Sci-Fi Cyberpunk Terminal (clean & minimalist)
• Color Palette: Catppuccin Macchiato
  • Background: #24273a
  • Primary Accent (Mauve): #c6a0f6
  • Text: #cad3f5
  • Surface: #363a4f
• Typography: JetBrains Mono (monospace) + Inter (sans-serif)

🚀 Quick Start

1. Install Dependencies

npm install

2. Run Development Server

npm run dev

The site will open at http://localhost:5173

3. Build for Production

npm run build
npm run preview

📁 Project Structure

/src
  /assets
    /styles
      index.css              # Global styles + Tailwind directives
  /components
    /UI
      FUIButton.jsx          # FUI-styled button with glow effects
      Crosshair.jsx          # Interactive crosshair cursor
      FUIBorder.jsx          # Bracket-style borders for cards
      index.js               # UI exports
    /Layout
      Navbar.jsx             # Top navigation with FUI design
      Hero.jsx               # Hero/splash section
      Footer.jsx             # Footer with links
      index.js               # Layout exports
    /Gallery
      Gallery.jsx            # Main gallery section
      MasonryGrid.jsx        # CSS Grid masonry layout
      ArtworkCard.jsx        # Individual artwork card with hover effects
      index.js               # Gallery exports
    /Effects
      Loader.jsx             # Boot-up loading screen
      index.js               # Effects exports
  /data
    artworks.json            # YOUR ARTWORK DATA (edit weekly!)
  /hooks
    useMouseVelocity.js      # Track mouse movement physics
    useSmoothScroll.js       # Lenis smooth scrolling setup
  App.jsx                    # Main app component
  main.jsx                   # Entry point
/public
  /assets
    /artworks                # Drop your artwork images here
index.html
vite.config.js
tailwind.config.js
postcss.config.js
package.json

📤 Weekly Upload Workflow

For the Artist (No Coding Required!)

Step 1: Add Your Artwork Images

Place your new artwork files in one of two subfolders inside /public/assets/artworks/ depending on category:

portfolio/public/assets/artworks/digital art/
portfolio/public/assets/artworks/photograph/

The build script does not move files automatically; you can organize manually. Filenames may contain spaces but they will be URI‑encoded in the JSON paths (e.g. my%20piece.jpg).

Step 2: Update src/data/artworks.json

Edit the JSON file and add/modify entries. Only id, aspectRatio, category, and image are needed – the site no longer displays titles or dates. A subtle gradient is generated automatically over each card; its color is sampled from the artwork itself and sits where the title would have been.

{
  "id": 1,
  "aspectRatio": "1:1",           // All artwork is shown square
  "category": "Digital Art",      // or "Photograph"
  "image": "/assets/artworks/my-piece.jpg"
}

Supported Aspect Ratios:

• "1:1" – Square (most common)
• "3:2" – Medium wide
• "16:9" – Ultra-wide cinema format

Category Field: Add "category": "Digital Art" or "category": "Photograph" to split the gallery into two sections.

Step 3: Done!

The gallery will automatically reorder and layout your artwork. No deployment needed for development—just refresh the browser.

🎬 Features

✨ Futuristic UI Elements

• Glow Effects: Mauve accents with dynamic shadows
• Bracket Borders: FUI-style [ ] corner brackets on hover
• Crosshair Cursor: Appears based on mouse velocity
• Grid Background: Subtle geometric pattern overlay

🔄 Smooth Interactions

• Smooth Scrolling (Lenis): Premium scroll experience
• Velocity Tracking: Mouse speed influences UI feedback
• Hover States: Every element responds with elegant micro-animations
• Staggered Loading: Cards fade in with progressive delays

🖼️ Adaptive Gallery

• Masonry Layout: CSS Grid automatically positions artwork
• Responsive Design: Adapts from 1 column (mobile) to 4 columns (desktop)
• Flexible Aspect Ratios: Cards self-size based on artwork dimensions
• No Awkward Gaps: Grid fills efficiently regardless of image sizes

🚀 Performance

• Vite: Ultra-fast hot module replacement during development
• Code Splitting: Only loads what's needed
• Optimized Animations: GPU-accelerated with Framer Motion

🛠️ Tech Stack

Technology	Purpose
React 18	UI framework
Vite 5	Build tool & dev server
Tailwind CSS 3	Utility-first styling
Framer Motion 10	Physics-based animations
Lenis 1	Smooth scrolling
PostCSS	CSS processing

🎯 Customization

Change Colors

Edit tailwind.config.js:

catppuccin: {
  bg: '#24273a',        // Change background
  accent: '#c6a0f6',    // Change accent color
  text: '#cad3f5',      // Change text color
  // ... etc
}

Modify Animations

All animation timings are in component files. Look for:

• transition={{ duration: 0.6 }}
• whileHover={{ ... }}
• initial={{ opacity: 0 }}

Add New Sections

1. Create a new component in /src/components/Layout/
2. Import it into App.jsx
3. Add it to the render tree

📋 Browser Support

• Chrome/Edge 90+
• Firefox 88+
• Safari 14+
• Modern mobile browsers

🐛 Troubleshooting

Images not showing?

• Ensure files are in /public/assets/artworks/
• Check the path in artworks.json matches exactly
• Verify image format (JPG, PNG, WebP supported)

Scrolling feels janky?

• Clear browser cache: Ctrl+Shift+R
• Check that Lenis is initialized (check console for errors)

Build fails?

rm -rf node_modules
npm install
npm run build

📝 Notes

• The site is production-ready but currently a development template
• All animations use prefers-reduced-motion standards (optional enhancement)
• No backend required—works as a static site
• SEO-friendly structure with semantic HTML

📄 License

This template is yours to use and modify. Share and enjoy!

---

Questions or Issues? Check the component comments and configuration files for inline documentation.

Happy Creating! 🚀