# Portfolio 01

> Portfolio showcase with masonry grid layout featuring project details, client information, and social media links

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

- Page, with a live preview: https://shadcn.exchange/r/shadcn-studio/portfolio-01
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/shadcn-studio/portfolio-01-light-69754fbc96621e1b.png
- Registry item: https://shadcnstudio.com/r/new-york-v4/portfolio-01.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://shadcnstudio.com/r/new-york-v4/portfolio-01.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: `badge`, `separator`

## Files

### `src/registry/new-york/blocks/marketing-ui/portfolio/portfolio-01/page.tsx`

```tsx
import Portfolio from '@/registry/new-york/components/blocks/portfolio-01/portfolio-01'

const images: string[] = [
  'https://cdn.shadcnstudio.com/ss-assets/blocks/marketing/portfolio/image-37.png',
  'https://cdn.shadcnstudio.com/ss-assets/blocks/marketing/portfolio/image-36.png',
  'https://cdn.shadcnstudio.com/ss-assets/blocks/marketing/portfolio/image-35.png',
  'https://cdn.shadcnstudio.com/ss-assets/blocks/marketing/portfolio/image-34.png',
  'https://cdn.shadcnstudio.com/ss-assets/blocks/marketing/portfolio/image-33.png',
  'https://cdn.shadcnstudio.com/ss-assets/blocks/marketing/portfolio/image-32.png'
]

const PortfolioPage = () => {
  return <Portfolio images={images} />
}

export default PortfolioPage
```

### `src/assets/svg/facebook-icon.tsx`

```tsx
// React Imports
import type { SVGAttributes } from 'react'

const FacebookIcon = (props: SVGAttributes<SVGElement>) => {
  return (
    <svg
      xmlns='http://www.w3.org/2000/svg'
      width='24'
      height='24'
      viewBox='0 0 24 24'
      fill='none'
      stroke='currentColor'
      strokeWidth='2'
      strokeLinecap='round'
      strokeLinejoin='round'
      aria-hidden='true'
      {...props}
    >
      <path d='M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z'></path>
    </svg>
  )
}

export default FacebookIcon
```

### `src/assets/svg/github-icon.tsx`

```tsx
// React Imports
import type { SVGProps } from 'react'

const GithubIcon = (props: SVGProps<SVGSVGElement>) => {
  return (
    <svg
      xmlns='http://www.w3.org/2000/svg'
      width='24'
      height='24'
      viewBox='0 0 24 24'
      fill='none'
      stroke='currentColor'
      strokeWidth='2'
      strokeLinecap='round'
      strokeLinejoin='round'
      aria-hidden='true'
      {...props}
    >
      <path d='M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4'></path>
      <path d='M9 18c-4.51 2-5-2-7-2'></path>
    </svg>
  )
}

export default GithubIcon
```

### `src/assets/svg/instagram-icon.tsx`

```tsx
// React Imports
import type { SVGAttributes } from 'react'

const InstagramIcon = (props: SVGAttributes<SVGElement>) => {
  return (
    <svg
      xmlns='http://www.w3.org/2000/svg'
      width='24'
      height='24'
      viewBox='0 0 24 24'
      fill='none'
      stroke='currentColor'
      strokeWidth='2'
      strokeLinecap='round'
      strokeLinejoin='round'
      aria-hidden='true'
      {...props}
    >
      <rect width='20' height='20' x='2' y='2' rx='5' ry='5'></rect>
      <path d='M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z'></path>
      <line x1='17.5' x2='17.51' y1='6.5' y2='6.5'></line>
    </svg>
  )
}

export default InstagramIcon
```

### `src/assets/svg/twitter-icon.tsx`

```tsx
// React Imports
import type { SVGAttributes } from 'react'

const TwitterIcon = (props: SVGAttributes<SVGElement>) => {
  return (
    <svg
      xmlns='http://www.w3.org/2000/svg'
      width='24'
      height='24'
      viewBox='0 0 24 24'
      fill='none'
      stroke='currentColor'
      strokeWidth='2'
      strokeLinecap='round'
      strokeLinejoin='round'
      aria-hidden='true'
      {...props}
    >
      <path d='M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z'></path>
    </svg>
  )
}

export default TwitterIcon
```

### `src/registry/new-york/components/blocks/portfolio-01/portfolio-01.tsx`

```tsx
import { Badge } from '@/registry/new-york/ui/badge'
import { Separator } from '@/registry/new-york/ui/separator'

import FacebookIcon from '@/assets/svg/facebook-icon'
import GithubIcon from '@/assets/svg/github-icon'
import InstagramIcon from '@/assets/svg/instagram-icon'
import TwitterIcon from '@/assets/svg/twitter-icon'

const Portfolio = ({ images }: { images: string[] }) => {
  return (
    <section className='py-8 sm:py-16 lg:py-24'>
      <div className='mx-auto max-w-7xl space-y-12 px-4 sm:space-y-16 sm:px-6 lg:space-y-24 lg:px-8'>
        {/* Section Header */}
        <div className='space-y-4'>
          <Badge variant='outline' className='text-sm font-normal'>
            Our portfolio
          </Badge>

          <h2 className='text-2xl font-semibold sm:text-3xl lg:text-4xl'>Our Impactful Creations</h2>

          <p className='text-muted-foreground text-xl'>
            A glimpse into our work, showcasing the power of design, technology, and strategic thinking.
          </p>
        </div>

        {/* Portfolio Content */}
        <div className='grid gap-6 lg:grid-cols-3'>
          {/* Left Section */}
          <div className='columns-1 gap-6 sm:col-span-2 sm:columns-2'>
            {images.map((image, index) => (
              <div key={index} className='mb-6 break-inside-avoid-column overflow-hidden rounded-xl'>
                <img src={image} alt={`Portfolio Image ${index + 1}`} className='w-full object-cover' />
              </div>
            ))}
          </div>

          {/* Right Section */}
          <div className='space-y-6 px-6'>
            <h3 className='text-3xl font-medium'>AI Innovations</h3>

            <p className='text-muted-foreground'>
              Explore cutting-edge AI solutions that enhance productivity and streamline workflows across various
              industries.Our technologies empower businesses to automate repetitive tasks, allowing teams to focus on
              strategic initiatives.
              <br />
              Join us in transforming the future of work with intelligent systems that adapt to your unique needs.
            </p>

            <Separator />

            <ul className='space-y-4'>
              <li className='flex items-center gap-8'>
                <span className='w-21 text-lg font-medium'>Client:</span>
                <span className='text-muted-foreground'>AI Innovations</span>
              </li>
              <li className='flex items-center gap-8'>
                <span className='w-21 text-lg font-medium'>Services:</span>
                <span className='text-muted-foreground'>Machine Learning</span>
              </li>
              <li className='flex items-center gap-8'>
                <span className='w-21 text-lg font-medium'>Year:</span>
                <span className='text-muted-foreground'>2024</span>
              </li>
            </ul>

            <Separator />

            <div className='flex items-center gap-8'>
              <span className='w-21 text-lg font-medium'>Share:</span>
              <div className='flex gap-2'>
                <a href='#'>
                  <FacebookIcon className='size-5.5 text-sky-600' />
                </a>
                <a href='#'>
                  <InstagramIcon className='text-destructive size-5.5' />
                </a>
                <a href='#'>
                  <GithubIcon className='text-primary size-5.5' />
                </a>
                <a href='#'>
                  <TwitterIcon className='size-5.5 text-sky-600' />
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}

export default Portfolio
```