# Portfolio 2

> Portfolio 2 variant for block.

A shadcn/ui block from the [@uiable](https://uiable.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/uiable/block-portfolio-2).

- Page, with a live preview: https://shadcn.exchange/r/uiable/block-portfolio-2
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/uiable/block-portfolio-2-light-d75995b54253b6f7.png
- Registry item: https://uiable.com/r/block-portfolio-2.json
- Categories: portfolio
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://uiable.com/r/block-portfolio-2.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- npm packages: `lucide-react`
- Registry items: `@uiable/button`

## Files

### `src/components/uiable/blocks/portfolio/portfolio-2/portfolio-2.tsx`

```tsx
// shadcn
import { Button } from "@/components/ui/button"

// assets
import {
  Bluetooth,
  HardDrive,
  Headphones,
  Settings,
  Shield,
  Volume2,
} from "lucide-react"

//  ------------------------------ | PORTFOLIO 2 | ------------------------------  //

export default function Portfolio2() {
  const features = [
    {
      title: "audio prompts",
      icon: Volume2,
    },
    {
      title: "bluetooth transfer",
      icon: Bluetooth,
    },
    {
      title: "more free space",
      icon: HardDrive,
    },
    {
      title: "24/7 support",
      icon: Headphones,
    },
    {
      title: "Security",
      icon: Shield,
    },
    {
      title: "settings",
      icon: Settings,
    },
  ]
  return (
    <section className="bg-slate-100 py-24 sm:py-32 dark:bg-slate-900">
      <div className="container mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex flex-col items-center justify-center gap-6 lg:flex-row">
          <div className="basis-full lg:basis-5/12">
            <div className="relative">
              <img
                src="https://cdn.uiable.com/block/feature-watch.png"
                alt="img"
                className="relative z-20 h-auto w-full"
              />
              <img
                src="https://cdn.uiable.com/block/feature-moke-shadow.png"
                alt="img"
                className="absolute top-0 left-0 z-10 h-auto w-full"
              />
            </div>
          </div>
          <div className="basis-full lg:basis-6/12">
            <div className="flex flex-col gap-6 sm:gap-12">
              <div className="flex flex-col gap-1 sm:gap-2">
                <h2 className="text-lg font-medium text-slate-800 sm:text-2xl dark:text-slate-50">
                  WearFit Smartwatch UI
                </h2>
                <span className="text-sm font-medium tracking-wider text-slate-400 uppercase dark:text-slate-500">
                  UI/UX • MOBILE & WEARABLE DESIGN
                </span>
              </div>
              <p className="max-w-150 text-slate-600 dark:text-slate-100">
                A wearable fitness application built with a user-first approach,
                offering workout tracking, activity monitoring, and performance
                insights through a clean, responsive, and visually engaging
                smartwatch interface.
              </p>
              <div className="grid grid-cols-12 gap-3">
                {features.map((feature, idx) => (
                  <div
                    key={idx}
                    className="col-span-6 sm:col-span-6 md:col-span-4"
                  >
                    <div className="relative rounded-lg bg-card px-2 py-6 shadow-[0_0_40px_-8px_#4680ff38]">
                      <div className="flex flex-col items-center gap-4 text-center">
                        <feature.icon className="size-6 text-pink-500 md:size-10" />
                        <div className="text-lg font-medium text-slate-600 capitalize dark:text-slate-100">
                          {feature.title}
                        </div>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
              <div>
                <Button
                  size="lg"
                  className="rounded-full border-0 border-b-2 border-b-pink-700 bg-pink-500 shadow-[0_8px_10px_-2px_#8f8f8f6b] hover:translate-y-1 hover:opacity-90 lg:flex"
                >
                  Explore Project
                </Button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}
```