React.js로 Portfolio와 같은 VSCode를 만들었습니다.

라이브 데모

https://noworneverev.github.io/

프로젝트 정보

React.js로 연습하기 위해 pofolio와 같은 VSCode를 만들었습니다. 이 프로젝트는 Visual Studio Code 및 caglarturali.github.io 에서 영감을 받았습니다. 저는 마크다운을 사용하여 페이지를 만들었기 때문에 페이지를 수정하고 자신만의 콘텐츠를 작성하는 것이 매우 쉽습니다.

특징

마크다운으로 구동

어두운 모드 및 밝은 모드 사용 가능

닫을 수 있는 탭

접을 수 있는 탐색기

반응형 웹 디자인

Google 분석 지원됨

설치

1. 저장소 복제

git clone https://github.com/noworneverev/react-vscode-portfolio.git

2、 NPM 패키지 설치

npm install

3、 .env.development에 이름 입력

REACT_APP_NAME=<your_name>

4、 public/pages에 마크다운 페이지 추가
5、 src/app/pages/page.ts에 경로를 추가하고 페이지 이름이 마크다운 파일과 일치하는지 확인하십시오.

export const pages = [
  { index: 0, name: 'overview.md', route: '/overview' },
  { index: 1, name: 'skills.md', route: '/skills' },
  { index: 2, name: 'experience.md', route: '/experience' },
  { index: 3, name: 'education.md', route: '/education' },
  { index: 4, name: 'projects.md', route: '/projects' },  
  { index: 5, name: 'certificates.md', route: '/certificates' },
  { index: 6, name: 'accomplishments.md', route: '/accomplishments' },
];

6. src/app/pages/link.tsx에 소셜 링크를 추가하면 사이드바와 홈페이지에 모두 표시됩니다.

 export const links = [
  {
    index: 0,
    title: "Find me on Github",
    href: "https://github.com/noworneverev",
    icon: <FaGithub />,
  },
];

7、 개발 모드에서 앱 실행

npm start

8、 자신의 포트폴리오를 배포하려면 .env.production에서 Google Analytics 측정 ID를 변경하는 것을 잊지 마십시오.

REACT_APP_NAME=<your_name>
REACT_APP_MEASUREMENT_ID=<your_measurement_id>

Github 레포 링크

https://github.com/noworneverev/react-vscode-portfolio

모든 의견을 환영합니다. 고맙습니다!