Building a Portfolio Site: Claude Code 활용 가이드

ポートフォリオサイトをClaude Code로作る

エンジニアやデザイナーにとって、ポートフォリオサイトは自分のスキルを示す最高のツールです。Claude Code를 활용하면 デザイン性の高いポートフォリオを短시간で구축할 수 있습니다。

セクション구성を指示する

> Astro + Tailwind CSSでポートフォリオサイトを作って。
> Hero、About、Skills、Projects、Contact の5セクション구성で。
> ダークモード대응と스크롤애니메이션も入れて。

Heroセクションの구현

// src/components/Hero.tsx
import { motion } from 'framer-motion';

export function Hero() {
  return (
    <section className="min-h-screen flex items-center justify-center relative overflow-hidden">
      <div className="absolute inset-0 bg-gradient-to-br from-blue-600 to-purple-700 dark:from-gray-900 dark:to-blue-900" />
      <motion.div
        initial={{ opacity: 0, y: 30 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.8 }}
        className="relative z-10 text-center text-white px-4"
      >
        <h1 className="text-5xl md:text-7xl font-bold mb-4">
          田中 太郎
        </h1>
        <p className="text-xl md:text-2xl text-blue-100 mb-8">
          フルスタックエンジニア
        </p>
        <div className="flex gap-4 justify-center">
          <a href="#projects" className="bg-white text-blue-600 px-8 py-3 rounded-full font-medium hover:bg-blue-50 transition">
            作品を見る
          </a>
          <a href="#contact" className="border-2 border-white px-8 py-3 rounded-full font-medium hover:bg-white/10 transition">
            お問い合わせ
          </a>
        </div>
      </motion.div>
    </section>
  );
}

프로젝트カード컴포넌트

// src/components/ProjectCard.tsx
import { motion } from 'framer-motion';

interface Project {
  title: string;
  description: string;
  image: string;
  tags: string[];
  demoUrl?: string;
  githubUrl?: string;
}

export function ProjectCard({ project, index }: { project: Project; index: number }) {
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      whileInView={{ opacity: 1, y: 0 }}
      transition={{ delay: index * 0.1 }}
      viewport={{ once: true }}
      className="bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition-shadow"
    >
      <div className="relative aspect-video">
        <img src={project.image} alt={project.title} className="object-cover w-full h-full" />
      </div>
      <div className="p-6">
        <h3 className="text-xl font-bold mb-2 dark:text-white">{project.title}</h3>
        <p className="text-gray-600 dark:text-gray-300 mb-4">{project.description}</p>
        <div className="flex flex-wrap gap-2 mb-4">
          {project.tags.map((tag) => (
            <span key={tag} className="text-xs bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 px-2 py-1 rounded">
              {tag}
            </span>
          ))}
        </div>
        <div className="flex gap-3">
          {project.demoUrl && (
            <a href={project.demoUrl} className="text-blue-600 hover:underline text-sm" target="_blank" rel="noopener noreferrer">
              デモ →
            </a>
          )}
          {project.githubUrl && (
            <a href={project.githubUrl} className="text-gray-600 hover:underline text-sm" target="_blank" rel="noopener noreferrer">
              GitHub →
            </a>
          )}
        </div>
      </div>
    </motion.div>
  );
}

スキルセクション

// src/components/Skills.tsx
const skills = [
  { name: 'TypeScript', level: 90 },
  { name: 'React', level: 85 },
  { name: 'Node.js', level: 80 },
  { name: 'Python', level: 75 },
  { name: 'AWS', level: 70 },
];

export function Skills() {
  return (
    <section id="skills" className="py-20 px-4 max-w-4xl mx-auto">
      <h2 className="text-3xl font-bold text-center mb-12 dark:text-white">Skills</h2>
      <div className="space-y-6">
        {skills.map((skill) => (
          <div key={skill.name}>
            <div className="flex justify-between mb-1">
              <span className="font-medium dark:text-white">{skill.name}</span>
              <span className="text-gray-500">{skill.level}%</span>
            </div>
            <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-3">
              <motion.div
                className="bg-blue-600 h-3 rounded-full"
                initial={{ width: 0 }}
                whileInView={{ width: `${skill.level}%` }}
                transition={{ duration: 1 }}
                viewport={{ once: true }}
              />
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

성능とSEOの최적화

Claude Code에이미지최적화やメタタグの설정を추가で依頼すると、Lighthouse スコアの高いサイトに仕上がります。이미지はWebP形式での配信、폰트はサブセット化を行うのがポイントです。

関連글

デザイン面では반응형デザインの구현、애니메이션의 상세 정보는애니메이션구현가이드が参考になります。또한ダークモード구현の글도 함께 확인하세요.

ポートフォリオ用のデザインインスピレーションはDribbbleで探すのもおすすめです。