modern-portfolio - GitLite

KO | EN

gitlite — search

#hacktoberfest #react #ai #golang #machine-learning #deep-learning #docker #nodejs #windows #cli #kubernetes #awesome-list #security #open-source

modern-portfolio

(★ 270)

Modern Portfolio using Next.js and Framer Motion.

파일 탐색기

최종 버전 다운로드 (.zip)

- - img1.png
  - img2.png
  - img3.png
  - img4.png
  - img_main.png
  - stats.svg
- - bug_report.md
  - config.yml
  - feature_request.md
- - update-readme.yml
- FUNDING.yml
- Avatar.jsx
- Bulb.jsx
- CardLeft.jsx
- CardRight.jsx
- Circles.jsx
- Header.jsx
- Layout.jsx
- Nav.jsx
- ParticlesContainer.jsx
- ProjectsBtn.jsx
- ServiceSlider.jsx
- Socials.jsx
- TestimonialSlider.jsx
- TopLeftImg.jsx
- Transition.jsx
- WorkSlider.jsx
- - index.jsx
- - index.jsx
- - index.jsx
- - index.jsx
- - index.jsx
- _app.jsx
- index.jsx
- __forms.html
- avatar.png
- bg-explosion.png
- bulb.png
- circle-star.svg
- circles.png
- favicon.ico
- logo.svg
- rounded-text.png
- site-bg.svg
- t-avt-1.png
- t-avt-2.png
- t-avt-3.png
- thumb1.jpg
- thumb2.jpg
- thumb3.jpg
- thumb4.jpg
- top-left-img.png
- globals.css
.eslintrc.json
.gitignore
CODE_OF_CONDUCT.md
CONTRIBUTING.md
LICENSE
netlify.toml
next.config.js
package-lock.json
package.json
postcss.config.js
README.md
SECURITY.md
tailwind.config.js
variants.js

# 설치 가이드

1. 코드 내려받기

git clone https://github.com/sanidhyy/modern-portfolio

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd modern-portfolio

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Node.js

쉬움 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

npm install

package.json에 명시된 라이브러리들을 내려받아 설치합니다.

npm start

개발/실행 서버를 켭니다.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<a name="readme-top"></a>

# Modern Portfolio using Next.js and Framer Motion

![Modern Portfolio using Next.js and Framer Motion](https://raw.githubusercontent.com/sanidhyy/modern-portfolio/main/.github/images/img_main.png "Modern Portfolio using Next.js and Framer Motion")

[![Ask Me Anything!](https://flat.badgen.net/static/Ask%20me/anything?icon=github&color=black&scale=1.01)](https://github.com/sanidhyy "Ask Me Anything!")
[![GitHub license](https://flat.badgen.net/github/license/sanidhyy/modern-portfolio?icon=github&color=black&scale=1.01)](https://github.com/sanidhyy/modern-portfolio/blob/main/LICENSE "GitHub license")
[![Maintenance](https://flat.badgen.net/static/Maintained/yes?icon=github&color=black&scale=1.01)](https://github.com/sanidhyy/modern-portfolio/commits/main "Maintenance")
[![GitHub branches](https://flat.badgen.net/github/branches/sanidhyy/modern-portfolio?icon=github&color=black&scale=1.01)](https://github.com/sanidhyy/modern-portfolio/branches "GitHub branches")
[![Github commits](https://flat.badgen.net/github/commits/sanidhyy/modern-portfolio?icon=github&color=black&scale=1.01)](https://github.com/sanidhyy/modern-portfolio/commits "Github commits")
[![Netlify Status](https://api.netlify.com/api/v1/badges/721491f5-0b0d-4120-96bd-6bd0480ef1e5/deploy-status)](https://awersome-portfolio.netlify.app/ "Netlify Status")
[![GitHub issues](https://flat.badgen.net/github/issues/sanidhyy/modern-portfolio?icon=github&color=black&scale=1.01)](https://github.com/sanidhyy/modern-portfolio/issues "GitHub issues")
[![GitHub pull requests](https://flat.badgen.net/github/prs/sanidhyy/modern-portfolio?icon=github&color=black&scale=1.01)](https://github.com/sanidhyy/modern-portfolio/pulls "GitHub pull requests")

<details>

<summary>

# :notebook_with_decorative_cover: Table of Contents

</summary>

- [Folder Structure](#bangbang-folder-structure)
- [Getting Started](#toolbox-getting-started)
- [Screenshots](#camera-screenshots)
- [Tech Stack](#gear-tech-stack)
- [Stats](#wrench-stats)
- [Contribute](#raised_hands-contribute)
- [Acknowledgements](#gem-acknowledgements)
- [Buy Me a Coffee](#coffee-buy-me-a-coffee)
- [Follow Me](#rocket-follow-me)
- [Learn More](#books-learn-more)
- [Deploy on Vercel](#page_with_curl-deploy-on-vercel)
- [Give A Star](#star-give-a-star)
- [Star History](#star2-star-history)
- [Give A Star](#star-give-a-star)

</details>

## :bangbang: Folder Structure

Here is the folder structure of this app.

```bash
modern-portfolio/
  |- components/
    |-- Avatar.jsx
    |-- Bulb.jsx
    |-- CardLeft.jsx
    |-- CardRight.jsx
    |-- Circles.jsx
    |-- Header.jsx
    |-- Layout.jsx
    |-- Nav.jsx
    |-- ParticlesContainer.jsx
    |-- ProjectsBtn.jsx
    |-- ServiceSlider.jsx
    |-- Socials.jsx
    |-- TestimonialSlider.jsx
    |-- TopLeftImg.jsx
    |-- Transition.jsx
    |-- WorkSlider.jsx
  |- pages/
    |-- about/
    |-- contact/
    |-- services/
    |-- testimonials/
    |-- work/
    |-- _app.jsx
    |-- index.jsx
  |- public/
  |- styles/
    |-- globals.css
  |- .eslintrc.json
  |- .gitignore
  |- netlify.toml
  |- next.config.js
  |- package-lock.json
  |- package.json
  |- postcss.config.js
  |- tailwind.config.js
  |- variants.js
```

<br />

## :toolbox: Getting Started

1. Make sure **Git** and **NodeJS** is installed.

2. Clone this repository to your local computer.

3. Open terminal in root directory. Run `npm install --legacy-peer-deps` or `yarn install --legacy-peer-deps`.

4. Now app is fully configured 👍 and you can start using this app using `npm run dev` or `yarn dev`.

## :camera: Screenshots:

![Modern UI/UX](https://raw.githubusercontent.com/sanidhyy/modern-portfolio/main/.github/images/img1.png "Modern UI/UX")

![Services](https://raw.githubusercontent.com/sanidhyy/modern-portfolio/main/.github/images/img2.png "Services")

![Showcase Projects](https://raw.githubusercontent.com/sanidhyy/modern-portfolio/main/.github/images/img3.png "Showcase Projects")

![Contact Form](https://raw.githubusercontent.com/sanidhyy/modern-portfolio/main/.github/images/img4.png "Contact Form")

## :gear: Tech Stack

[![React JS](https://skillicons.dev/icons?i=react "React JS")](https://react.dev/ "React JS") [![Next JS](https://skillicons.dev/icons?i=next "Next JS")](https://nextjs.org/ "Next JS") [![JavaScript](https://skillicons.dev/icons?i=js "JavaScript")](https://developer.mozilla.org/en-US/docs/Web/JavaScript "JavaScript") [![Tailwind CSS](https://skillicons.dev/icons?i=tailwind "Tailwind CSS")](https://tailwindcss.com/ "Tailwind CSS") [![Netlify](https://skillicons.dev/icons?i=netlify "Netlify")](https://netlify.app/ "Netlify")

## :wrench: Stats

[![Stats for Modern Portfolio](https://raw.githubusercontent.com/sanidhyy/modern-portfolio/main/.github/images/stats.svg "Stats for Modern Portfolio")](https://pagespeed.web.dev/analysis?url=https://awersome-portfolio.netlify.app/ "Stats for Modern Portfolio")

## :raised_hands: Contribute

You might encounter some bugs while using this app. You are more than welcome to contribute. Just submit changes via pull request and I will review them before merging. Make sure you follow community guidelines.

## :gem: Acknowledgements

Useful resources and dependencies that are used in Modern Portfolio.

- [@next/font](https://www.npmjs.com/package/@next/font): ^13.4.4
- [autoprefixer](https://www.npmjs.com/package/autoprefixer): ^10.4.14
- [eslint](https://www.npmjs.com/package/eslint): 8.41.0
- [eslint-config-next](https://www.npmjs.com/package/eslint-config-next): 13.4.3
- [framer-motion](https://www.npmjs.com/package/framer-motion): ^10.12.16
- [next](https://www.npmjs.com/package/next): 16.3.2
- [postcss](https://www.npmjs.com/package/postcss): ^8.5.23
- [react](https://www.npmjs.com/package/react): 18.2.0
- [react-countup](https://www.npmjs.com/package/react-countup): ^6.4.2
- [react-dom](https://www.npmjs.com/package/react-dom): 18.2.0
- [react-icons](https://www.npmjs.com/package/react-icons): ^4.8.0
- [react-tsparticles](https://www.npmjs.com/package/react-tsparticles): ^2.9.3
- [swiper](https://www.npmjs.com/package/swiper): ^12.1.2
- [tailwind-scrollbar](https://www.npmjs.com/package/tailwind-scrollbar): ^3.0.4
- [tailwindcss](https://www.npmjs.com/package/tailwindcss): ^3.3.2
- [tsparticles](https://www.npmjs.com/package/tsparticles): ^2.9.3

## :coffee: Buy Me a Coffee

[<img src="https://img.shields.io/badge/Buy_Me_A_Coffee-FFDD00?style=for-the-badge&logo=buy-me-a-coffee&logoColor=black" width="200" />](https://www.buymeacoffee.com/sanidhy "Buy me a Coffee")

## :rocket: Follow Me

[![GitHub followers](https://img.shields.io/github/followers/sanidhyy?style=social&label=Follow&maxAge=2592000)](https://github.com/sanidhyy "Follow Me")
[![Twitter](https://img.shields.io/twitter/url?style=social&url=https%3A%2F%2Fx.com%2F_sanidhyy)](https://x.com/intent/tweet?text=Wow:&url=https%3A%2F%2Fgithub.com%2Fsanidhyy%2Fmodern-portfolio "Tweet")

## :books: Learn More

To learn more about Next.js, take a look at the following resources:

- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.

You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!

## :page_with_curl: Deploy on Vercel

The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.

Check out [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

## :star: Give A Star

You can also give this repository a star to show more people and they can use this repository.

## :star2: Star History

<a href="https://star-history.com/#sanidhyy/modern-portfolio&Timeline">
<picture>
  <source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/svg?repos=sanidhyy/modern-portfolio&type=Timeline&theme=dark" />
  <source media="(prefers-color-scheme: light)" srcset="https://api.star-history.com/svg?repos=sanidhyy/modern-portfolio&type=Timeline" />
  <img alt="Star History Chart" src="https://api.star-history.com/svg?repos=sanidhyy/modern-portfolio&type=Timeline" />
</picture>
</a>

<br />
<p align="right">(<a href="#readme-top">back to top</a>)</p>