├── .eslintrc.json ├── .gitignore ├── README.md ├── next-env.d.ts ├── next.config.js ├── package.json ├── public ├── artem-riasnianskyi.jpg ├── favicon.ico ├── thumbnail.png └── vercel.svg ├── src ├── components │ ├── Card │ │ ├── index.tsx │ │ └── styles.module.scss │ ├── Footer │ │ ├── index.tsx │ │ └── styles.module.scss │ ├── Header │ │ ├── icon.tsx │ │ ├── index.tsx │ │ └── styles.module.scss │ └── Layout.tsx ├── pages │ ├── _app.tsx │ └── index.tsx └── styles │ ├── globals.scss │ └── variables.scss ├── tsconfig.json └── yarn.lock /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | 27 | # local env files 28 | .env.local 29 | .env.development.local 30 | .env.test.local 31 | .env.production.local 32 | 33 | # vercel 34 | .vercel 35 | 36 | # typescript 37 | *.tsbuildinfo 38 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 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). 2 | 3 | ## Getting Started 4 | 5 | First, run the development server: 6 | 7 | ```bash 8 | npm run dev 9 | # or 10 | yarn dev 11 | ``` 12 | 13 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. 14 | 15 | You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file. 16 | 17 | [API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`. 18 | 19 | The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages. 20 | 21 | ## Learn More 22 | 23 | To learn more about Next.js, take a look at the following resources: 24 | 25 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. 26 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. 27 | 28 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! 29 | 30 | ## Deploy on Vercel 31 | 32 | 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. 33 | 34 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. 35 | -------------------------------------------------------------------------------- /next-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | /// 4 | 5 | // NOTE: This file should not be edited 6 | // see https://nextjs.org/docs/basic-features/typescript for more information. 7 | -------------------------------------------------------------------------------- /next.config.js: -------------------------------------------------------------------------------- 1 | const path = require("path"); 2 | const withSass = require("@zeit/next-sass"); 3 | 4 | module.exports = withSass({ 5 | cssModules: true, 6 | }); 7 | 8 | module.exports = { 9 | /* Adicione sua pasta padrão de SCSS aqui! */ 10 | sassOptions: { 11 | includePaths: [path.join(__dirname, "styles")], 12 | }, 13 | }; 14 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "mportfolio", 3 | "private": true, 4 | "scripts": { 5 | "dev": "next dev", 6 | "build": "next build", 7 | "start": "next start", 8 | "lint": "next lint" 9 | }, 10 | "dependencies": { 11 | "@zeit/next-sass": "^1.0.1", 12 | "next": "12.0.4", 13 | "next-seo": "^4.28.1", 14 | "node-sass": "^6.0.1", 15 | "react": "17.0.2", 16 | "react-dom": "17.0.2" 17 | }, 18 | "devDependencies": { 19 | "@types/node": "16.11.11", 20 | "@types/react": "17.0.37", 21 | "eslint": "7", 22 | "eslint-config-next": "12.0.4", 23 | "typescript": "4.5.2" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /public/artem-riasnianskyi.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Rychillie/mPortfolio/5c7f018d0e7234ae62d836cb2ef0e4820308b033/public/artem-riasnianskyi.jpg -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Rychillie/mPortfolio/5c7f018d0e7234ae62d836cb2ef0e4820308b033/public/favicon.ico -------------------------------------------------------------------------------- /public/thumbnail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Rychillie/mPortfolio/5c7f018d0e7234ae62d836cb2ef0e4820308b033/public/thumbnail.png -------------------------------------------------------------------------------- /public/vercel.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/Card/index.tsx: -------------------------------------------------------------------------------- 1 | import Image from "next/image"; 2 | import styles from "./styles.module.scss"; 3 | 4 | const Card = () => { 5 | return ( 6 |

7 |

8 |

9 |

01 / PROJECT NAME

10 | 11 |

12 | Goblin concept digital sculpture with human-like skin. Learned a lot 13 | of quick tips and look development. 14 |

15 | 16 |

17 | Sculpted in ZBrush, Retopologized and UVs done in Maya, Textured in 18 | Mari, Rendered using Arnold. 19 |

20 |

21 | 22 | 23 | More shots from this project ↗ 24 | 25 |

26 | 27 |

28 |

39 |

40 |

41 | ); 42 | }; 43 | 44 | export default Card; 45 | -------------------------------------------------------------------------------- /src/components/Card/styles.module.scss: -------------------------------------------------------------------------------- 1 | @import "../../styles/variables.scss"; 2 | 3 | .card { 4 | display: flex; 5 | flex-direction: row; 6 | align-items: stretch; 7 | justify-content: space-between; 8 | padding-bottom: 100px; 9 | margin-bottom: 100px; 10 | border-bottom: 1.5px solid $mainGray; 11 | 12 | .cardContent { 13 | display: flex; 14 | flex-direction: column; 15 | justify-content: space-between; 16 | align-items: stretch; 17 | max-width: 356px; 18 | 19 | a { 20 | margin-top: auto; 21 | color: $mainBlack; 22 | @include link; 23 | 24 | &:hover { 25 | color: $mainGray; 26 | } 27 | } 28 | 29 | .contentTop { 30 | h2 { 31 | color: $mainBlack; 32 | @include body; 33 | font-weight: 500; 34 | margin-bottom: 25px; 35 | } 36 | 37 | p { 38 | color: $mainGray; 39 | @include subText; 40 | 41 | &.subtitle { 42 | color: $mainBlack; 43 | @include body; 44 | margin-bottom: 35px; 45 | } 46 | } 47 | } 48 | } 49 | 50 | .containerImage { 51 | max-width: 640px; 52 | width: 100%; 53 | height: auto; 54 | overflow: hidden; 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /src/components/Footer/index.tsx: -------------------------------------------------------------------------------- 1 | import Link from "next/link"; 2 | import styles from "./styles.module.scss"; 3 | 4 | const Footer = () => { 5 | return ( 6 | 27 | ); 28 | }; 29 | 30 | export default Footer; 31 | -------------------------------------------------------------------------------- /src/components/Footer/styles.module.scss: -------------------------------------------------------------------------------- 1 | @import "../../styles/variables.scss"; 2 | 3 | .footer { 4 | display: flex; 5 | flex-direction: row; 6 | justify-content: space-between; 7 | align-items: center; 8 | padding-top: 72px; 9 | padding-bottom: 72px; 10 | margin-top: 196px; 11 | 12 | @extend .container; 13 | 14 | a { 15 | text-decoration: none; 16 | padding: 0.5rem 1rem; 17 | color: $mainBlack; 18 | 19 | &:hover { 20 | color: $mainGray; 21 | } 22 | } 23 | 24 | ul { 25 | display: flex; 26 | align-items: center; 27 | justify-content: space-between; 28 | flex-direction: row; 29 | list-style-type: none; 30 | padding: 0; 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /src/components/Header/icon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | export const IconDown = () => ( 4 | 16 | ); 17 | -------------------------------------------------------------------------------- /src/components/Header/index.tsx: -------------------------------------------------------------------------------- 1 | import Link from "next/link"; 2 | import { IconDown } from "./icon"; 3 | import styles from "./styles.module.scss"; 4 | 5 | type Props = { 6 | isHome?: boolean; 7 | }; 8 | 9 | const Header = ({ isHome }: Props) => { 10 | return ( 11 |

12 | 37 | 38 | {isHome === true ? ( 39 | <> 40 |

41 |

Hello, I`m Rychillie

42 | 43 |

44 | A senior front-end developer specializing in open 45 | source. 46 |

47 |

48 | 49 | 50 | ) : null} 51 |

52 | ); 53 | }; 54 | 55 | export default Header; 56 | -------------------------------------------------------------------------------- /src/components/Header/styles.module.scss: -------------------------------------------------------------------------------- 1 | @import "../../styles/variables.scss"; 2 | 3 | .navTop { 4 | display: flex; 5 | justify-content: space-between; 6 | align-items: center; 7 | padding: 100px 0; 8 | margin-bottom: 120px; 9 | 10 | a { 11 | text-decoration: none; 12 | padding: 0.5rem 1rem; 13 | color: $mainBlack; 14 | 15 | &:hover { 16 | color: $mainGray; 17 | } 18 | } 19 | 20 | ul { 21 | display: flex; 22 | align-items: center; 23 | justify-content: space-between; 24 | flex-direction: row; 25 | list-style-type: none; 26 | padding: 0; 27 | } 28 | } 29 | 30 | .content { 31 | display: flex; 32 | flex-direction: row; 33 | justify-content: space-between; 34 | align-items: flex-end; 35 | 36 | h1 { 37 | color: $mainBlack; 38 | max-width: 360px; 39 | 40 | @include heading1; 41 | } 42 | 43 | p { 44 | color: $mainGray; 45 | max-width: 580px; 46 | 47 | @include heading2; 48 | } 49 | 50 | & + svg { 51 | margin-top: 72px; 52 | margin-bottom: 320px; 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /src/components/Layout.tsx: -------------------------------------------------------------------------------- 1 | import Header from "./Header"; 2 | import Footer from "./Footer"; 3 | 4 | type Props = { 5 | children: React.ReactNode; 6 | isHome?: boolean; 7 | }; 8 | 9 | const Layout = ({ children, isHome }: Props) => { 10 | return ( 11 | <> 12 |

13 | 14 |

{children}

15 | 16 |