uibloxuiblox
View on GitHub
← TemplatesPersonal

Creative Portfolio

A stunning portfolio template for designers and creatives. Showcase your work with beautiful galleries, smooth animations, and memorable interactions.

Hero SectionProject GalleryAbout SectionContact FormTestimonials

Overview

Make a Lasting Impression

Your portfolio is your digital handshake. This template helps you present your work in the most compelling way, with stunning visuals, smooth animations, and thoughtful interactions that leave visitors wanting more.

✨

Stunning Hero Section

Animated intro that captures attention instantly

🖼️

Dynamic Project Gallery

Filterable grid with lightbox and hover effects

💫

Smooth Animations

Scroll-triggered animations and micro-interactions

📱

Mobile Optimized

Perfect experience on every device

Blox Used

Horizontal NavigationMinimal FooterTheme Customizer

Perfect For

  • • Designers & Illustrators
  • • Photographers
  • • Developers & Engineers
  • • Freelancers & Agencies

Live Demo

Jane.Design

Hello, I'm

Jane Designer

A creative designer crafting beautiful digital experiences that delight users and drive business results.

Selected Work

A collection of projects I'm proud of

Brand Identity

branding

Mobile App UI

ui design

Website Redesign

web

Logo Collection

branding

Dashboard Design

ui design

E-commerce Site

web

About Me

I'm a designer with 8+ years of experience creating digital products for startups and established brands. I believe great design is invisible – it just works.

8+
Years Experience
100+
Projects Done
50+
Happy Clients

Let's Work Together

Have a project in mind? I'd love to hear about it.

Implementation Guide

1

Create the Hero Section

Build an attention-grabbing hero with animated text and smooth transitions.

step-1.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
function HeroSection() {
  return (
    <section className="min-h-screen flex items-center justify-center relative overflow-hidden">
      {/* Background gradient */}
      <div className="absolute inset-0 bg-gradient-to-br from-pink-500/20 via-purple-500/20 to-indigo-500/20" />

      {/* Floating shapes */}
      <div className="absolute top-20 left-20 w-72 h-72 bg-pink-500/30 rounded-full blur-3xl animate-float" />
      <div className="absolute bottom-20 right-20 w-96 h-96 bg-purple-500/20 rounded-full blur-3xl animate-float delay-300" />

      <div className="relative z-10 text-center px-6">
        <p className="text-pink-600 dark:text-pink-400 font-medium mb-4 animate-fade-in">
          Hello, I'm
        </p>
        <h1 className="text-5xl md:text-7xl font-bold text-slate-900 dark:text-white mb-6 animate-slide-up">
          Jane Designer
        </h1>
        <p className="text-xl text-slate-600 dark:text-slate-300 max-w-2xl mx-auto mb-8 animate-slide-up delay-100">
          A creative designer crafting beautiful digital experiences that delight users
          and drive business results.
        </p>
        <div className="flex gap-4 justify-center animate-slide-up delay-200">
          <a href="#work" className="px-6 py-3 bg-pink-600 text-white rounded-xl hover:bg-pink-700">
            View My Work
          </a>
          <a href="#contact" className="px-6 py-3 border border-slate-300 dark:border-slate-700 rounded-xl hover:bg-slate-100 dark:hover:bg-slate-800">
            Get in Touch
          </a>
        </div>
      </div>
    </section>
  );
}
2

Build the Project Gallery

Create a filterable project grid with smooth hover effects.

step-2.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
const projects = [
  { id: 1, title: "Brand Identity", category: "branding", image: "/project1.jpg" },
  { id: 2, title: "Mobile App", category: "ui-design", image: "/project2.jpg" },
  { id: 3, title: "Website Redesign", category: "web", image: "/project3.jpg" },
];

function ProjectGallery() {
  const [filter, setFilter] = useState("all");
  const categories = ["all", "branding", "ui-design", "web"];

  const filteredProjects = filter === "all"
    ? projects
    : projects.filter(p => p.category === filter);

  return (
    <section id="work" className="py-20 px-6">
      <h2 className="text-3xl font-bold text-center mb-4">Selected Work</h2>
      <p className="text-center text-slate-600 dark:text-slate-400 mb-12">
        A collection of projects I'm proud of
      </p>

      {/* Filter buttons */}
      <div className="flex justify-center gap-2 mb-12">
        {categories.map(cat => (
          <button
            key={cat}
            onClick={() => setFilter(cat)}
            className={`px-4 py-2 rounded-full text-sm font-medium transition-colors ${
              filter === cat
                ? "bg-pink-600 text-white"
                : "bg-slate-100 dark:bg-slate-800 hover:bg-slate-200 dark:hover:bg-slate-700"
            }`}
          >
            {cat.replace("-", " ").replace(/\b\w/g, l => l.toUpperCase())}
          </button>
        ))}
      </div>

      {/* Project grid */}
      <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto">
        {filteredProjects.map(project => (
          <div key={project.id} className="group cursor-pointer">
            <div className="aspect-[4/3] rounded-2xl overflow-hidden bg-slate-100 dark:bg-slate-800 relative">
              <img
                src={project.image}
                alt={project.title}
                className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
              />
              <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity flex items-end p-6">
                <div>
                  <h3 className="text-white font-semibold text-lg">{project.title}</h3>
                  <p className="text-white/80 text-sm">{project.category}</p>
                </div>
              </div>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}
3

Add Testimonials Section

Build credibility with client testimonials carousel.

step-3.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
const testimonials = [
  {
    quote: "Jane transformed our brand completely. Her attention to detail is remarkable.",
    author: "Sarah Johnson",
    role: "CEO, TechStart",
    avatar: "/avatar1.jpg"
  },
  {
    quote: "Working with Jane was a dream. She understood our vision perfectly.",
    author: "Michael Chen",
    role: "Founder, DesignCo",
    avatar: "/avatar2.jpg"
  }
];

function TestimonialsSection() {
  const [current, setCurrent] = useState(0);

  return (
    <section className="py-20 bg-slate-50 dark:bg-slate-900/50">
      <div className="max-w-4xl mx-auto px-6 text-center">
        <h2 className="text-3xl font-bold mb-12">What Clients Say</h2>

        <div className="relative">
          <blockquote className="text-2xl text-slate-700 dark:text-slate-300 mb-8">
            "{testimonials[current].quote}"
          </blockquote>

          <div className="flex items-center justify-center gap-4">
            <img
              src={testimonials[current].avatar}
              alt={testimonials[current].author}
              className="w-12 h-12 rounded-full"
            />
            <div className="text-left">
              <p className="font-semibold">{testimonials[current].author}</p>
              <p className="text-sm text-slate-500">{testimonials[current].role}</p>
            </div>
          </div>

          {/* Navigation dots */}
          <div className="flex justify-center gap-2 mt-8">
            {testimonials.map((_, i) => (
              <button
                key={i}
                onClick={() => setCurrent(i)}
                className={`w-2 h-2 rounded-full transition-colors ${
                  i === current ? "bg-pink-600" : "bg-slate-300 dark:bg-slate-700"
                }`}
              />
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}
4

Create Contact Section

Add a contact form with validation and success state.

step-4.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
function ContactSection() {
  const [submitted, setSubmitted] = useState(false);

  const handleSubmit = (e: FormEvent) => {
    e.preventDefault();
    // Handle form submission
    setSubmitted(true);
  };

  if (submitted) {
    return (
      <section id="contact" className="py-20 px-6 text-center">
        <div className="w-16 h-16 bg-emerald-100 rounded-full flex items-center justify-center mx-auto mb-4">
          <svg className="w-8 h-8 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
          </svg>
        </div>
        <h2 className="text-2xl font-bold mb-2">Message Sent!</h2>
        <p className="text-slate-600 dark:text-slate-400">I'll get back to you soon.</p>
      </section>
    );
  }

  return (
    <section id="contact" className="py-20 px-6">
      <div className="max-w-xl mx-auto">
        <h2 className="text-3xl font-bold text-center mb-4">Let's Work Together</h2>
        <p className="text-center text-slate-600 dark:text-slate-400 mb-12">
          Have a project in mind? I'd love to hear about it.
        </p>

        <form onSubmit={handleSubmit} className="space-y-6">
          <div className="grid md:grid-cols-2 gap-6">
            <input
              type="text"
              placeholder="Name"
              required
              className="px-4 py-3 bg-slate-100 dark:bg-slate-800 rounded-xl focus:outline-none focus:ring-2 focus:ring-pink-500"
            />
            <input
              type="email"
              placeholder="Email"
              required
              className="px-4 py-3 bg-slate-100 dark:bg-slate-800 rounded-xl focus:outline-none focus:ring-2 focus:ring-pink-500"
            />
          </div>
          <textarea
            placeholder="Tell me about your project..."
            rows={6}
            required
            className="w-full px-4 py-3 bg-slate-100 dark:bg-slate-800 rounded-xl focus:outline-none focus:ring-2 focus:ring-pink-500 resize-none"
          />
          <button
            type="submit"
            className="w-full py-3 bg-pink-600 hover:bg-pink-700 text-white font-medium rounded-xl"
          >
            Send Message
          </button>
        </form>
      </div>
    </section>
  );
}

Full Source Code

portfolio.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
"use client";

import { useState } from "react";
import Link from "next/link";

// Portfolio Landing Page
export default function Portfolio() {
  return (
    <div className="min-h-screen bg-white dark:bg-slate-950">
      <Header />
      <HeroSection />
      <ProjectGallery />
      <AboutSection />
      <TestimonialsSection />
      <ContactSection />
      <Footer />
    </div>
  );
}

// Header Component
function Header() {
  return (
    <header className="sticky top-0 z-50 bg-white/80 dark:bg-slate-950/80 backdrop-blur-xl border-b border-slate-200 dark:border-slate-800">
      <div className="max-w-6xl mx-auto px-6 h-16 flex items-center justify-between">
        <Link href="/" className="text-xl font-bold text-slate-900 dark:text-white">
          Jane.Design
        </Link>
        <nav className="hidden md:flex items-center gap-8">
          {["Work", "About", "Services", "Contact"].map((item) => (
            <a
              key={item}
              href={`#${item.toLowerCase()}`}
              className="text-sm font-medium text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white transition-colors"
            >
              {item}
            </a>
          ))}
        </nav>
        <button className="px-4 py-2 bg-pink-600 hover:bg-pink-700 text-white text-sm font-medium rounded-lg transition-colors">
          Hire Me
        </button>
      </div>
    </header>
  );
}

// Hero Section
function HeroSection() {
  return (
    <section className="min-h-screen flex items-center justify-center relative overflow-hidden py-20 px-6">
      {/* Background elements */}
      <div className="absolute inset-0 bg-gradient-to-br from-pink-500/10 via-purple-500/10 to-indigo-500/10" />
      <div className="absolute top-20 left-20 w-72 h-72 bg-pink-500/20 rounded-full blur-3xl animate-float" />
      <div className="absolute bottom-20 right-20 w-96 h-96 bg-purple-500/20 rounded-full blur-3xl animate-float delay-300" />

      <div className="relative z-10 text-center max-w-4xl">
        <p className="text-pink-600 dark:text-pink-400 font-medium mb-4">
          Hello, I'm
        </p>
        <h1 className="text-5xl md:text-7xl font-bold text-slate-900 dark:text-white mb-6">
          Jane Designer
        </h1>
        <p className="text-xl text-slate-600 dark:text-slate-300 max-w-2xl mx-auto mb-8">
          A creative designer crafting beautiful digital experiences that delight users and drive business results.
        </p>
        <div className="flex gap-4 justify-center">
          <a
            href="#work"
            className="px-6 py-3 bg-pink-600 hover:bg-pink-700 text-white font-medium rounded-xl transition-colors"
          >
            View My Work
          </a>
          <a
            href="#contact"
            className="px-6 py-3 border border-slate-300 dark:border-slate-700 text-slate-900 dark:text-white font-medium rounded-xl hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors"
          >
            Get in Touch
          </a>
        </div>
      </div>
    </section>
  );
}

// Project Gallery with Filtering
function ProjectGallery() {
  const [filter, setFilter] = useState("all");

  const projects = [
    { id: 1, title: "Brand Identity", category: "branding", image: "/project1.jpg" },
    { id: 2, title: "Mobile App UI", category: "ui-design", image: "/project2.jpg" },
    { id: 3, title: "Website Redesign", category: "web", image: "/project3.jpg" },
    { id: 4, title: "Logo Collection", category: "branding", image: "/project4.jpg" },
    { id: 5, title: "Dashboard Design", category: "ui-design", image: "/project5.jpg" },
    { id: 6, title: "E-commerce Site", category: "web", image: "/project6.jpg" },
  ];

  const categories = ["all", "branding", "ui-design", "web"];
  const filteredProjects = filter === "all" ? projects : projects.filter(p => p.category === filter);

  return (
    <section id="work" className="py-20 px-6 bg-slate-50 dark:bg-slate-900/50">
      <div className="max-w-6xl mx-auto">
        <h2 className="text-3xl font-bold text-center text-slate-900 dark:text-white mb-4">
          Selected Work
        </h2>
        <p className="text-center text-slate-600 dark:text-slate-400 mb-12">
          A collection of projects I'm proud of
        </p>

        {/* Filter buttons */}
        <div className="flex flex-wrap justify-center gap-2 mb-12">
          {categories.map(cat => (
            <button
              key={cat}
              onClick={() => setFilter(cat)}
              className={`px-4 py-2 rounded-full text-sm font-medium transition-colors ${
                filter === cat
                  ? "bg-pink-600 text-white"
                  : "bg-white dark:bg-slate-800 text-slate-600 dark:text-slate-400 hover:bg-slate-100"
              }`}
            >
              {cat === "all" ? "All Work" : cat.replace("-", " ").replace(/\b\w/g, l => l.toUpperCase())}
            </button>
          ))}
        </div>

        {/* Project grid */}
        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
          {filteredProjects.map(project => (
            <Link key={project.id} href={`/projects/${project.id}`} className="group">
              <div className="aspect-[4/3] rounded-2xl overflow-hidden bg-slate-200 dark:bg-slate-800 relative">
                <img
                  src={project.image}
                  alt={project.title}
                  className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
                />
                <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity flex items-end p-6">
                  <div>
                    <h3 className="text-white font-semibold text-lg">{project.title}</h3>
                    <p className="text-white/80 text-sm capitalize">{project.category.replace("-", " ")}</p>
                  </div>
                </div>
              </div>
            </Link>
          ))}
        </div>
      </div>
    </section>
  );
}

// About Section
function AboutSection() {
  const stats = [
    { value: "8+", label: "Years Experience" },
    { value: "100+", label: "Projects Done" },
    { value: "50+", label: "Happy Clients" },
  ];

  return (
    <section id="about" className="py-20 px-6">
      <div className="max-w-5xl mx-auto grid md:grid-cols-2 gap-12 items-center">
        <div className="aspect-square rounded-2xl overflow-hidden">
          <img
            src="/about-photo.jpg"
            alt="Jane Designer"
            className="w-full h-full object-cover"
          />
        </div>
        <div>
          <h2 className="text-3xl font-bold text-slate-900 dark:text-white mb-4">About Me</h2>
          <p className="text-slate-600 dark:text-slate-300 mb-6">
            I'm a designer with 8+ years of experience creating digital products for startups
            and established brands. I believe great design is invisible – it just works.
          </p>
          <p className="text-slate-600 dark:text-slate-300 mb-8">
            My approach combines strategy, creativity, and technical expertise to create
            solutions that not only look beautiful but achieve business goals.
          </p>
          <div className="grid grid-cols-3 gap-6">
            {stats.map((stat) => (
              <div key={stat.label}>
                <div className="text-3xl font-bold text-pink-600">{stat.value}</div>
                <div className="text-sm text-slate-500">{stat.label}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// Testimonials
function TestimonialsSection() {
  const [current, setCurrent] = useState(0);
  const testimonials = [
    {
      quote: "Jane transformed our brand completely. Her attention to detail is remarkable.",
      author: "Sarah Johnson",
      role: "CEO, TechStart",
    },
    {
      quote: "Working with Jane was a dream. She understood our vision perfectly.",
      author: "Michael Chen",
      role: "Founder, DesignCo",
    },
  ];

  return (
    <section className="py-20 bg-slate-50 dark:bg-slate-900/50">
      <div className="max-w-4xl mx-auto px-6 text-center">
        <h2 className="text-3xl font-bold text-slate-900 dark:text-white mb-12">What Clients Say</h2>
        <blockquote className="text-2xl text-slate-700 dark:text-slate-300 mb-8">
          "{testimonials[current].quote}"
        </blockquote>
        <div>
          <p className="font-semibold text-slate-900 dark:text-white">{testimonials[current].author}</p>
          <p className="text-sm text-slate-500">{testimonials[current].role}</p>
        </div>
        <div className="flex justify-center gap-2 mt-8">
          {testimonials.map((_, i) => (
            <button
              key={i}
              onClick={() => setCurrent(i)}
              className={`w-2 h-2 rounded-full ${i === current ? "bg-pink-600" : "bg-slate-300 dark:bg-slate-700"}`}
            />
          ))}
        </div>
      </div>
    </section>
  );
}

// Contact Section
function ContactSection() {
  return (
    <section id="contact" className="py-20 px-6 bg-slate-900 text-white">
      <div className="max-w-xl mx-auto text-center">
        <h2 className="text-3xl font-bold mb-4">Let's Work Together</h2>
        <p className="text-slate-400 mb-8">Have a project in mind? I'd love to hear about it.</p>
        <form className="space-y-4 text-left">
          <div className="grid md:grid-cols-2 gap-4">
            <input
              type="text"
              placeholder="Name"
              className="px-4 py-3 bg-slate-800 rounded-xl focus:outline-none focus:ring-2 focus:ring-pink-500"
            />
            <input
              type="email"
              placeholder="Email"
              className="px-4 py-3 bg-slate-800 rounded-xl focus:outline-none focus:ring-2 focus:ring-pink-500"
            />
          </div>
          <textarea
            placeholder="Tell me about your project..."
            rows={6}
            className="w-full px-4 py-3 bg-slate-800 rounded-xl focus:outline-none focus:ring-2 focus:ring-pink-500 resize-none"
          />
          <button className="w-full py-3 bg-pink-600 hover:bg-pink-700 font-medium rounded-xl transition-colors">
            Send Message
          </button>
        </form>
      </div>
    </section>
  );
}

// Footer
function Footer() {
  return (
    <footer className="py-8 px-6 border-t border-slate-200 dark:border-slate-800">
      <div className="max-w-6xl mx-auto flex flex-col md:flex-row justify-between items-center gap-4">
        <p className="text-slate-500 text-sm">© 2024 Jane Designer. All rights reserved.</p>
        <div className="flex gap-4">
          {["Dribbble", "Behance", "LinkedIn", "Twitter"].map(social => (
            <a key={social} href="#" className="text-slate-500 hover:text-slate-900 dark:hover:text-white text-sm">
              {social}
            </a>
          ))}
        </div>
      </div>
    </footer>
  );
}

Customization Guide

Personal Branding

Update colors and fonts to match your personal brand.

customization.tsx
// tailwind.config.ts
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          primary: '#ec4899', // Pink
          secondary: '#8b5cf6', // Purple
        }
      },
      fontFamily: {
        display: ['Playfair Display', 'serif'],
        body: ['Inter', 'sans-serif'],
      }
    }
  }
}

Animation Styles

Customize scroll animations and transitions.

customization.tsx
// globals.css
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slide-up {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-float { animation: float 6s ease-in-out infinite; }
.animate-fade-in { animation: fade-in 0.6s ease-out forwards; }
.animate-slide-up { animation: slide-up 0.6s ease-out forwards; }

Project Categories

Define your own project categories and filters.

customization.tsx
const categories = [
  { id: "all", label: "All Work" },
  { id: "branding", label: "Branding" },
  { id: "ui-design", label: "UI Design" },
  { id: "web", label: "Web Development" },
  { id: "motion", label: "Motion Design" },
];

// Update project data
const projects = [
  {
    id: 1,
    title: "Project Name",
    category: "branding",
    image: "/images/project1.jpg",
    description: "Project description...",
    link: "/projects/project-name",
    year: 2024,
  },
  // ...more projects
];

Social Links

Add your social media and professional links.

customization.tsx
const socialLinks = [
  { name: "Dribbble", href: "https://dribbble.com/you", icon: DribbbleIcon },
  { name: "Behance", href: "https://behance.net/you", icon: BehanceIcon },
  { name: "LinkedIn", href: "https://linkedin.com/in/you", icon: LinkedInIcon },
  { name: "Twitter", href: "https://twitter.com/you", icon: TwitterIcon },
  { name: "GitHub", href: "https://github.com/you", icon: GitHubIcon },
];

// In footer or header
<div className="flex gap-4">
  {socialLinks.map(link => (
    <a
      key={link.name}
      href={link.href}
      target="_blank"
      rel="noopener noreferrer"
      className="p-2 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-lg"
    >
      <link.icon className="w-5 h-5" />
    </a>
  ))}
</div>

Ready to Showcase Your Work?

Copy this template, add your projects, and launch your professional portfolio today.

Explore BloxBrowse Components