-
-
Save shricodev/285295e78ebc41db37d0b65277abbe09 to your computer and use it in GitHub Desktop.
Figma MCP with Sonnet 4.5 Cloning Figma Portfolio Template - Blog Demo
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @import "tailwindcss"; | |
| :root { | |
| /* Colors */ | |
| --bg-gray: #F9FAFF; | |
| --bg-white: #FFFFFF; | |
| --bg-line: #25282B; | |
| --brand-yellow: #FDC435; | |
| --font-high-emphasis: #25282B; | |
| --font-medium-emphasis: #828282; | |
| /* Fonts */ | |
| --font-comfortaa: var(--font-comfortaa); | |
| --font-playfair: var(--font-playfair); | |
| --font-raleway: var(--font-raleway); | |
| --font-nunito: var(--font-nunito); | |
| --font-roboto: var(--font-roboto); | |
| } | |
| @theme inline { | |
| /* Custom colors */ | |
| --color-bg-gray: #F9FAFF; | |
| --color-bg-white: #FFFFFF; | |
| --color-brand-yellow: #FDC435; | |
| --color-font-high: #25282B; | |
| --color-font-medium: #828282; | |
| /* Font families */ | |
| --font-comfortaa: var(--font-comfortaa); | |
| --font-playfair: var(--font-playfair); | |
| --font-raleway: var(--font-raleway); | |
| --font-nunito: var(--font-nunito); | |
| --font-roboto: var(--font-roboto); | |
| } | |
| body { | |
| background: var(--bg-gray); | |
| color: var(--font-high-emphasis); | |
| font-family: var(--font-nunito); | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 'use client'; | |
| import React from 'react'; | |
| import Link from 'next/link'; | |
| export default function Header() { | |
| const scrollToSection = (sectionId: string) => { | |
| const section = document.getElementById(sectionId); | |
| if (section) { | |
| section.scrollIntoView({ behavior: 'smooth' }); | |
| } | |
| }; | |
| return ( | |
| <header className="fixed top-0 left-0 right-0 bg-bg-gray z-50 h-14"> | |
| <div className="max-w-7xl mx-auto px-4 md:px-8 h-full flex items-center justify-between"> | |
| <Link href="/" className="font-comfortaa font-bold text-lg leading-[1.8em] text-font-high"> | |
| Madelyn Torff | |
| </Link> | |
| <nav className="flex gap-8 md:gap-12"> | |
| <button | |
| onClick={() => scrollToSection('about')} | |
| className="font-raleway font-medium text-lg leading-[1.56em] text-font-high hover:text-brand-yellow transition-colors" | |
| > | |
| About | |
| </button> | |
| <button | |
| onClick={() => scrollToSection('projects')} | |
| className="font-raleway font-medium text-lg leading-[1.56em] text-font-high hover:text-brand-yellow transition-colors" | |
| > | |
| Projects | |
| </button> | |
| <button | |
| onClick={() => scrollToSection('contacts')} | |
| className="font-raleway font-medium text-lg leading-[1.56em] text-font-high hover:text-brand-yellow transition-colors" | |
| > | |
| Contacts | |
| </button> | |
| </nav> | |
| </div> | |
| </header> | |
| ); | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React from 'react'; | |
| import Button from './Button'; | |
| export default function Hero() { | |
| return ( | |
| <section className="relative min-h-screen flex items-start pt-32 pb-20 px-4 md:px-8"> | |
| <div className="max-w-7xl mx-auto w-full flex flex-col md:flex-row items-start justify-between gap-12"> | |
| <div className="flex flex-col gap-3 max-w-[486px]"> | |
| <div className="font-nunito font-bold text-xl leading-[1.36em] uppercase text-brand-yellow"> | |
| UI/UX Designer | |
| </div> | |
| <div className="flex flex-col gap-8"> | |
| <h1 className="font-playfair font-bold text-5xl md:text-6xl leading-[1.2em] text-font-high"> | |
| Hello, my name is Madelyn Torff | |
| </h1> | |
| <div className="flex flex-col gap-3"> | |
| <p className="font-nunito text-xl md:text-2xl leading-[1.5em] text-font-medium"> | |
| Short text with details about you, what you do or your professional career. You can add more information on the about page. | |
| </p> | |
| </div> | |
| <div className="flex gap-3 flex-wrap"> | |
| <Button variant="primary" href="#projects"> | |
| Projects | |
| </Button> | |
| <Button variant="secondary" href="https://linkedin.com" className="border-2"> | |
| </Button> | |
| </div> | |
| </div> | |
| </div> | |
| <div className="hidden lg:block absolute right-0 top-0 w-[720px] h-[629px] pointer-events-none"> | |
| <div className="relative w-full h-full"> | |
| {/* Yellow decorative shape */} | |
| <div className="absolute left-0 top-0 w-[777px] h-[877px] -translate-y-[248px] bg-brand-yellow" /> | |
| {/* Decorative image */} | |
| <div className="absolute left-0 top-0 w-full h-full"> | |
| <img | |
| src="/images/hero-decoration-58b6e4.png" | |
| alt="Decorative" | |
| className="w-full h-full object-cover" | |
| /> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| ); | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import type { Metadata } from "next"; | |
| import { Comfortaa, Playfair_Display, Raleway, Nunito, Roboto } from "next/font/google"; | |
| import "./globals.css"; | |
| const comfortaa = Comfortaa({ | |
| variable: "--font-comfortaa", | |
| subsets: ["latin"], | |
| weight: ["700"], | |
| }); | |
| const playfairDisplay = Playfair_Display({ | |
| variable: "--font-playfair", | |
| subsets: ["latin"], | |
| weight: ["700"], | |
| }); | |
| const raleway = Raleway({ | |
| variable: "--font-raleway", | |
| subsets: ["latin"], | |
| weight: ["500"], | |
| }); | |
| const nunito = Nunito({ | |
| variable: "--font-nunito", | |
| subsets: ["latin"], | |
| weight: ["400", "700"], | |
| }); | |
| const roboto = Roboto({ | |
| variable: "--font-roboto", | |
| subsets: ["latin"], | |
| weight: ["500"], | |
| }); | |
| export const metadata: Metadata = { | |
| title: "Madelyn Torff - Portfolio", | |
| description: "UI/UX Designer Portfolio", | |
| }; | |
| export default function RootLayout({ | |
| children, | |
| }: Readonly<{ | |
| children: React.ReactNode; | |
| }>) { | |
| return ( | |
| <html lang="en"> | |
| <body | |
| className={`${comfortaa.variable} ${playfairDisplay.variable} ${raleway.variable} ${nunito.variable} ${roboto.variable} antialiased`} | |
| > | |
| {children} | |
| </body> | |
| </html> | |
| ); | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import Header from '@/components/Header'; | |
| import Hero from '@/components/Hero'; | |
| import Projects from '@/components/Projects'; | |
| import Footer from '@/components/Footer'; | |
| export default function Home() { | |
| return ( | |
| <div className="min-h-screen bg-bg-gray"> | |
| <Header /> | |
| <main> | |
| <Hero /> | |
| <Projects /> | |
| </main> | |
| <Footer /> | |
| </div> | |
| ); | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React from 'react'; | |
| import Image from 'next/image'; | |
| import Button from './Button'; | |
| interface ProjectCardProps { | |
| title: string; | |
| description: string; | |
| imageSrc: string; | |
| imageAlt: string; | |
| imagePosition?: 'left' | 'right'; | |
| className?: string; | |
| } | |
| export default function ProjectCard({ | |
| title, | |
| description, | |
| imageSrc, | |
| imageAlt, | |
| imagePosition = 'left', | |
| className = '' | |
| }: ProjectCardProps) { | |
| return ( | |
| <div className={`flex flex-col md:flex-row w-full max-w-[992px] rounded-3xl overflow-hidden shadow-[0_6px_64px_0_rgba(112,144,176,0.1)] ${className}`}> | |
| {imagePosition === 'left' && ( | |
| <div className="relative w-full md:w-1/2 h-64 md:h-auto min-h-[300px]"> | |
| <Image | |
| src={imageSrc} | |
| alt={imageAlt} | |
| fill | |
| className="object-cover" | |
| /> | |
| </div> | |
| )} | |
| <div className="flex flex-col justify-center bg-white w-full md:w-1/2 p-8 md:p-12 lg:p-16"> | |
| <div className="flex flex-col gap-6"> | |
| <h3 className="font-playfair font-bold text-3xl md:text-4xl leading-[1.5em] text-font-high"> | |
| {title} | |
| </h3> | |
| <p className="font-nunito text-base md:text-lg leading-[1.5em] text-font-medium"> | |
| {description} | |
| </p> | |
| <div className="mt-2"> | |
| <Button variant="secondary" href="#" className="w-full md:w-auto"> | |
| View Project | |
| </Button> | |
| </div> | |
| </div> | |
| </div> | |
| {imagePosition === 'right' && ( | |
| <div className="relative w-full md:w-1/2 h-64 md:h-auto min-h-[300px]"> | |
| <Image | |
| src={imageSrc} | |
| alt={imageAlt} | |
| fill | |
| className="object-cover" | |
| /> | |
| </div> | |
| )} | |
| </div> | |
| ); | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React from 'react'; | |
| import ProjectCard from './ProjectCard'; | |
| export default function Projects() { | |
| const projects = [ | |
| { | |
| title: "Project Name", | |
| description: "I created this personal project in order to show how to create an interface in Figma using a portfolio as an example.", | |
| imageSrc: "/images/project-1-427694.png", | |
| imageAlt: "Project 1", | |
| imagePosition: "left" as const | |
| }, | |
| { | |
| title: "Project Name", | |
| description: "What was your role, your deliverables, if the project was personal, freelancing.", | |
| imageSrc: "/images/project-2.png", | |
| imageAlt: "Project 2", | |
| imagePosition: "right" as const | |
| }, | |
| { | |
| title: "Project Name", | |
| description: "You can also add in this description the type of the project, if it was for web, mobile, electron.", | |
| imageSrc: "/images/project-3.png", | |
| imageAlt: "Project 3", | |
| imagePosition: "left" as const | |
| } | |
| ]; | |
| return ( | |
| <section id="projects" className="py-20 px-4 md:px-8"> | |
| <div className="max-w-7xl mx-auto"> | |
| <div className="flex flex-col items-center gap-20"> | |
| {/* Section Title */} | |
| <div className="flex flex-col items-center gap-1"> | |
| <h2 className="font-playfair font-bold text-4xl md:text-5xl leading-[1.5em] text-font-high text-center"> | |
| Projects | |
| </h2> | |
| <div className="w-[100px] h-1 bg-brand-yellow rounded" /> | |
| </div> | |
| {/* Project Cards */} | |
| <div className="flex flex-col items-center gap-20 w-full"> | |
| {projects.map((project, index) => ( | |
| <ProjectCard | |
| key={index} | |
| title={project.title} | |
| description={project.description} | |
| imageSrc={project.imageSrc} | |
| imageAlt={project.imageAlt} | |
| imagePosition={project.imagePosition} | |
| /> | |
| ))} | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| ); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment