diff --git a/README.md b/README.md index c403366..9fd85ce 100644 --- a/README.md +++ b/README.md @@ -1,36 +1,163 @@ -This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). + -## Getting Started + +
+
+ + Logo + -First, run the development server: +

Bear29ers' Portfolio Website

-```bash -npm run dev -# or -yarn dev -# or -pnpm dev -# or -bun dev -``` +

+ A brand new portfolio website by Bear29ers. +
+ bear29ers.com ยป +
+
+

+
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. + +
+ Table of Contents +
    +
  1. + About The Project + +
    2. +
  2. + Getting Started + +
    3. +
  3. Contact
    4. +
+
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file. + -This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font. +## ๐Ÿ“™ About The Project -## 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. +

Bear29ers' Portfolio: A Showcase of Frontend Innovation

-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! +This portfolio is a dynamic platform where I, as a frontend engineer, experiment with cutting-edge technologies and showcase my projects. -## Deploy on Vercel +It serves as both a testing ground for new skills and a window into my development journey. -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. +Here, you'll find a collection of my work that demonstrates my passion for creating engaging user interfaces and robust web applications. -Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. +As I continue to grow and learn, this site will evolve, reflecting my latest technical achievements and creative solutions. + +I invite you to explore my projects and witness firsthand the results of my dedication to frontend development. + +

(back to top)

+ +## ๐Ÿ› ๏ธ Tech Stack + +Listed major frameworks/libraries and devtools used to boost this project. + +![NextJs] ![ReactJs] ![JavaScript] ![TypeScript] ![NodeJs]
+![Tailwind] ![HTML] ![CSS] ![Sass]
+![Eslint] ![Storybook] ![Jest] ![TestingLibrary]
+![Npm] ![Docker] ![Vercel] ![Neovim] ![WebStrom]
+![Git] ![Github] ![GithubActions] + +

(back to top)

+ + + +## ๐ŸŽฌ Getting Started + +### ๐ŸŽ’ Prerequisites + +- Node.js 20.0.0 or later +- Next.js 14.0 or later +- A basic understanding of TypeScript & React + +### ๐ŸŒฑ Installation + +1. Build with Dcoker + + ```bash + docker compose build + ``` + +2. Start the app (with Docker) + + ```bash + docker compose up (-d) + ``` + + The port will be 5050. + +3. Stop the app (with Docker) + + ```bash + docker compose down + ``` + +### ๐Ÿ’ป Available commands + +Running commands with npm `run [command]` + +| command | description | +| -------------- | -------------------------------------------------------------- | +| `dev` | starts a development instance of the app on local (not docker) | +| `build` | build the app | +| `eslint:fix` | run eslint with fix option | +| `prettier:fix` | run prettier with fix option | +| `test` | testing | +| `storybook` | open storybook | + +

(back to top)

+ + + +## โœ‰๏ธ Contact + +[![Gmail]](mailto:y.dream.nest@gmail.com)
+[![Instagram]](https://www.instagram.com/bear29ers/) + +

(back to top)

+ + + +[NextJs]: https://img.shields.io/badge/next.js-000000?style=for-the-badge&logo=nextdotjs&logoColor=white +[ReactJs]: https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB +[JavaScript]: https://img.shields.io/badge/JavaScript-323330?style=for-the-badge&logo=javascript&logoColor=F7DF1E +[TypeScript]: https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge&logo=typescript&logoColor=white +[NodeJs]: https://img.shields.io/badge/Node.js-43853D?style=for-the-badge&logo=node.js&logoColor=white +[HTML]: https://img.shields.io/badge/HTML5-E34F26?style=for-the-badge&logo=html5&logoColor=white +[CSS]: https://img.shields.io/badge/CSS3-1572B6?style=for-the-badge&logo=css3&logoColor=white +[Sass]: https://img.shields.io/badge/Sass-CC6699?style=for-the-badge&logo=sass&logoColor=white +[Tailwind]: https://img.shields.io/badge/Tailwind_CSS-38B2AC?style=for-the-badge&logo=tailwind-css&logoColor=white +[Eslint]: https://img.shields.io/badge/ESLint-4B3263?style=for-the-badge&logo=eslint&logoColor=white +[Storybook]: https://img.shields.io/badge/-Storybook-FF4785?style=for-the-badge&logo=storybook&logoColor=white +[Jest]: https://img.shields.io/badge/Jest-323330?style=for-the-badge&logo=Jest&logoColor=white +[TestingLibrary]: https://img.shields.io/badge/testing%20library-323330?style=for-the-badge&logo=testing-library&logoColor=red +[Npm]: https://img.shields.io/badge/NPM-%23CB3837.svg?style=for-the-badge&logo=npm&logoColor=white +[Docker]: https://img.shields.io/badge/docker-%230db7ed.svg?style=for-the-badge&logo=docker&logoColor=white +[Vercel]: https://img.shields.io/badge/vercel-%23000000.svg?style=for-the-badge&logo=vercel&logoColor=white +[Git]: https://img.shields.io/badge/git-%23F05033.svg?style=for-the-badge&logo=git&logoColor=white +[Github]: https://img.shields.io/badge/github-%23121011.svg?style=for-the-badge&logo=github&logoColor=white +[GithubActions]: https://img.shields.io/badge/github%20actions-%232671E5.svg?style=for-the-badge&logo=githubactions&logoColor=white +[Neovim]: https://img.shields.io/badge/NeoVim-%2357A143.svg?&style=for-the-badge&logo=neovim&logoColor=white +[WebStrom]: https://img.shields.io/badge/webstorm-143?style=for-the-badge&logo=webstorm&logoColor=white&color=black +[Gmail]: https://img.shields.io/badge/Gmail-D14836?style=for-the-badge&logo=gmail&logoColor=white +[Instagram]: https://img.shields.io/badge/Instagram-%23E4405F.svg?style=for-the-badge&logo=Instagram&logoColor=white