Portfolio Leonie Bosshard

Repository

I developed this professional portfolio for Leonie Bosshard, a photographer and graphic designer, to showcase her diverse body of work with high visual fidelity. Built with Next.js and TypeScript, the platform features a dynamic project management system, custom-built UI components for skill visualization, and a highly responsive design that prioritizes her artistic content. This project was an exercise in delivering a 'production-ready' product with a focus on client-specific branding and UX.

Dynamic Project Engine

The portfolio uses a strongly typed project engine to generate interactive project cards. By centralizing the project metadata in a projects array, the frontend can dynamically render diverse categories—from Graphic Design to Photography—using a unified ProjectCard component. This architecture allows for effortless updates and ensures that new work can be added to the portfolio by simply updating a single configuration file.

1// Centralized project metadata
2export const projects: ProjectCardProps[] = [
3  {
4    coverImage: projectImages.graphicDesign[0].src,
5    name: "Poster Design",
6    category: "Graphic Design",
7    url: "/projects/graphic-design/#posters",
8  },
9  {
10    coverImage: projectImages.mora[0].src,
11    name: "Brand Concept: mora",
12    category: "Graphic Design",
13    url: "/projects/graphic-design/#brand-concept",
14  },
15  {
16    coverImage: projectImages.redentApp[0].src,
17    name: "Re:Dent App",
18    category: "UX / UI Interface",
19    url: "/projects/ui-ux-interface/#redent-app",
20  },
21];

Custom Skill Visualization

To display the client's proficiency in various tools, I built a custom SkillIndicator component. Instead of using standard progress bars, I designed a circular "speedometer" using SVG and CSS transitions. The component calculates the stroke-dashoffset based on the skill level (0-100), creating a smooth animated fill effect. It also includes an intelligent icon renderer that supports both standard images and custom SVG icons like Figma or Adobe branding.

1const SkillIndicator: React.FC<Props> = ({ icon, skill }) => {
2  const radius = 40;
3  const circumference = 2 * Math.PI * radius;
4  // Calculate visual offset based on skill percentage
5  const offset = circumference - (skill / 100) * circumference;
6
7  return (
8    <div className="skill-indicator flex flex-col items-center">
9      <div className="relative w-24 h-24">
10        <svg className="w-full h-full" viewBox="0 0 100 100">
11          <circle className="stroke-neutral-800" strokeWidth="8" r={radius} cx="50" cy="50" />
12          <circle className="stroke-primary-accent" strokeWidth="8"
13                  strokeDasharray={circumference} strokeDashoffset={offset}
14                  strokeLinecap="round" transform="rotate(-90 50 50)" />
15        </svg>
16        <div className="absolute inset-0 flex items-center justify-center">{renderIcon(icon)}</div>
17      </div>
18      <span className="mt-2 text-primary-accent font-bold">{skill}%</span>
19    </div>
20  );
21};

Modular and Responsive UI Components

The site features a library of reusable UI components, such as the Headshot component, which leverages the Tailwind cn utility for dynamic styling. By passing parameters for corner roundness and additional classes, the component can adapt its appearance across different pages while maintaining a consistent base style. This modular approach significantly reduced code duplication and ensured a cohesive visual language throughout the entire application.

1const Headshot = ({ topLeft, topRight, bottomLeft, bottomRight, className }: Props) => {
2  return (
3    <div className={cn(
4        "relative overflow-hidden",
5        topLeft ? "rounded-tl-full" : "rounded-tl-xl",
6        topRight ? "rounded-tr-full" : "rounded-tr-xl",
7        className // Merged with component defaults
8      )}>
9      <Image src="/images/headshot.avif" alt="Leonie Bosshard" fill priority className="object-cover" />
10    </div>
11  );
12};

Technical Implementation Details

The project utilizes Next.js's image optimization for fast loading times and Framer Motion for subtle entrance animations. By strictly typing all components and data structures with TypeScript, I ensured a highly stable codebase that was easy to hand over to the client. The final product is a high-performance, SEO-friendly portfolio that effectively bridges the gap between artistic expression and technical excellence.

Live Demo

You can explore the live portfolio to see her professional photography and design work in action.