Подключение Data.ts

./app/hero.tsx

import { info, main, stats } from "@/data/hero"
import { projects } from "@/data/projects"
import { allSkills } from "@/data/skills"

export default async function Hero() {
  return (
    // Single
    <div>
      <h1>{main.heading.l1}</h1>
      <h1>{main.heading.l1}</h1>

      <Image
        src={main.image.src}
        alt={main.image.alt}
        width={640}
        height={640}
        className="w-[320px]"
        priority
      />
    </div>

    // Map
    <div>
      {projects.map((project, index) => (
        <div key={index}>
          <div>
            {project.title}
            {project.category}
            {project.img}
          />
        </div>
      ))}
    </div>

    // tsx
    <div>
    {
      allSkills.map((skill, index) => (
        <SkillCard
          key={index}
          icon={skill.icon}
          title={skill.title}
          skills={skill.skills}
        />
      ))
    }
    </div>
  )
}

Single data

./data/hero.ts

export const info = {
  bio: {
    description: "Hi, I'm Mukesh a DevOps Engineer based in New Delhi. I'm a creative problem solving enthusiast, with a constantly growing love for technology.",
  },
  contact: {
    l1: "Kingsway Camp, Hudson Lane",
    l2: "New Delhi, India",
    l3: "+91 981 000 0000",
  },
  services: {
    l1: "DevOps Implementation",
    l2: "FullStack Development",
    l3: "Business Analyst",
  },
};

export const main = {
  heading: {
    l1: "Hi, I'm Mukesh",
    l2: [
        'DevOps Engineer',
        'FullStack Developer',
        'Business Analyst',
        'BPA Consultant',
        'Freelancer',
    ],
    l3: "based in Delhi",
  },
  image: {
    src: "/unsplash/unsplash.jpg",
    alt: "Mukesh Singh",
  },
};

export const stats = {
  experience: "05+",
  projects: "25+",
  clients: "04+",
};

Map data

./data/projects.ts

export const projects = [
  {
    title: "Modern Website 1",
    category: "Web",
    img: "/img/project1.jpg",
  },
  {
    title: "E-commerce Store 2",
    category: "Web",
    img: "/img/project2.jpg",
  },
  {
    title: "Application Design 3",
    category: "Design",
    img: "/img/project3.jpg",
  },
  {
    title: "Animation Prototype 4",
    category: "Animation",
    img: "/img/project4.jpg",
  },
];

TSX Data

./data/skills.ts

import {
    CircleStackIcon,
    CodeBracketIcon,
    CogIcon,
    CubeTransparentIcon,
    PresentationChartBarIcon,
} from "@heroicons/react/24/outline";

export const allSkills = [
  {
    title: "DevOps",
    icon: <CubeTransparentIcon className="w-4 h-4 stroke-[3px]" />,
    skills: [
      {
        name: "Kubernetes",
        level: "Basic",
        logo: "/img/skills/kubernetes.svg",
      },
      {
        name: "Docker",
        level: "Advanced",
        logo: "/img/skills/docker.svg",
      },
    ],
  },
  {
    title: "DevOps",
    icon: <CubeTransparentIcon className="w-4 h-4 stroke-[3px]" />,
    skills: [
      {
        name: "Kubernetes",
        level: "Basic",
        logo: "/img/skills/kubernetes.svg",
      },
      {
        name: "Docker",
        level: "Advanced",
        logo: "/img/skills/docker.svg",
      },
    ],
  },
];