├── .env.development.template ├── .github ├── FUNDING.YML └── ISSUE_TEMPLATE │ ├── bug_report.md │ └── feature_request.md ├── .gitignore ├── .nvmrc ├── .vscode └── settings.json ├── LICENSE.md ├── README.md ├── api └── contact.js ├── gatsby-browser.js ├── gatsby-config.js ├── gatsby-node.js ├── gatsby-ssr.js ├── jsconfig.json ├── package.json ├── powered-by-vercel.svg ├── src ├── assets │ ├── icons │ │ ├── moon.svg │ │ └── sun.svg │ ├── illustrations │ │ ├── contact-overlay.svg │ │ ├── contact.svg │ │ ├── details.svg │ │ ├── dev.svg │ │ ├── footer.svg │ │ ├── overlay.svg │ │ └── skills.svg │ └── thumbnail │ │ └── thumbnail.png ├── components │ ├── common │ │ ├── Button │ │ │ └── index.js │ │ ├── Card │ │ │ └── index.js │ │ ├── Container │ │ │ └── index.js │ │ ├── Icons │ │ │ ├── Fork.js │ │ │ └── Star.js │ │ ├── Input │ │ │ └── index.js │ │ ├── Layout │ │ │ ├── fonts.css │ │ │ ├── fonts │ │ │ │ ├── roboto-v18-latin-700.eot │ │ │ │ ├── roboto-v18-latin-700.svg │ │ │ │ ├── roboto-v18-latin-700.ttf │ │ │ │ ├── roboto-v18-latin-700.woff │ │ │ │ ├── roboto-v18-latin-700.woff2 │ │ │ │ ├── roboto-v18-latin-regular.eot │ │ │ │ ├── roboto-v18-latin-regular.svg │ │ │ │ ├── roboto-v18-latin-regular.ttf │ │ │ │ ├── roboto-v18-latin-regular.woff │ │ │ │ └── roboto-v18-latin-regular.woff2 │ │ │ ├── index.jsx │ │ │ └── styles.js │ │ ├── Seo │ │ │ └── index.jsx │ │ └── index.js │ ├── landing │ │ ├── Contact │ │ │ ├── ContactForm │ │ │ │ ├── index.jsx │ │ │ │ └── styles.js │ │ │ ├── index.jsx │ │ │ └── styles.js │ │ ├── Intro │ │ │ ├── index.jsx │ │ │ └── styles.js │ │ ├── Projects │ │ │ ├── index.jsx │ │ │ └── styles.js │ │ ├── Skills │ │ │ ├── index.jsx │ │ │ └── styles.js │ │ └── index.js │ └── theme │ │ ├── Footer │ │ ├── index.jsx │ │ ├── social.json │ │ └── styles.js │ │ ├── Header │ │ ├── Hamburger │ │ │ ├── index.jsx │ │ │ └── styles.js │ │ ├── Navbar │ │ │ ├── index.jsx │ │ │ └── styles.js │ │ ├── NavbarLinks │ │ │ ├── index.jsx │ │ │ └── styles.js │ │ ├── Sidebar │ │ │ ├── index.jsx │ │ │ └── styles.js │ │ ├── ToggleTheme │ │ │ ├── index.jsx │ │ │ └── styles.js │ │ ├── index.jsx │ │ └── styles.js │ │ └── index.js ├── data │ └── config.js ├── hooks │ ├── useDarkMode.js │ └── useMedia.js ├── pages │ ├── 404.js │ └── index.js └── providers │ └── ThemeProvider.jsx └── static ├── _redirects ├── favicon └── favicon-512.png └── icons ├── github.svg ├── stackoverflow.svg ├── telegram.svg └── twitter.svg /.env.development.template: -------------------------------------------------------------------------------- 1 | PORTFOLIO_GITHUB_TOKEN= 2 | PORTFOLIO_FORMIUM_ENDPOINT= 3 | GATSBY_PORTFOLIO_RECAPTCHA_KEY= -------------------------------------------------------------------------------- /.github/FUNDING.YML: -------------------------------------------------------------------------------- 1 | # repo: https://github.com/shinevue/gatsby-portfolio-dev 2 | # filename: FUNDING.YML 3 | 4 | github: shinevue 5 | patreon: shinevue 6 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | title: "" 5 | labels: bug 6 | assignees: shinevue 7 | --- 8 | 9 | **Describe the bug** 10 | A clear and concise description of what the bug is. 11 | 12 | **To Reproduce** 13 | Steps to reproduce the behavior: 14 | 15 | 1. Go to '...' 16 | 2. Click on '....' 17 | 3. Scroll down to '....' 18 | 4. See error 19 | 20 | **Expected behavior** 21 | A clear and concise description of what you expected to happen. 22 | 23 | **Screenshots** 24 | If applicable, add screenshots to help explain your problem. 25 | 26 | **(please complete the following information):** 27 | 28 | - OS: [e.g. iOS] 29 | - Browser [e.g. chrome, safari] 30 | - Version [e.g. 22] 31 | 32 | **Additional context** 33 | Add any other context about the problem here. 34 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | title: "" 5 | labels: enhancement 6 | assignees: shinevue 7 | --- 8 | 9 | **Is your feature request related to a problem? Please describe.** 10 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] 11 | 12 | **Describe the solution you'd like** 13 | A clear and concise description of what you want to happen. 14 | 15 | **Describe alternatives you've considered** 16 | A clear and concise description of any alternative solutions or features you've considered. 17 | 18 | **Additional context** 19 | Add any other context or screenshots about the feature request here. 20 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | *.pid.lock 13 | 14 | # Directory for instrumented libs generated by jscoverage/JSCover 15 | lib-cov 16 | 17 | # Coverage directory used by tools like istanbul 18 | coverage 19 | 20 | # nyc test coverage 21 | .nyc_output 22 | 23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 24 | .grunt 25 | 26 | # Bower dependency directory (https://bower.io/) 27 | bower_components 28 | 29 | # node-waf configuration 30 | .lock-wscript 31 | 32 | # Compiled binary addons (http://nodejs.org/api/addons.html) 33 | build/Release 34 | 35 | # Dependency directories 36 | node_modules/ 37 | jspm_packages/ 38 | 39 | # Typescript v1 declaration files 40 | typings/ 41 | 42 | # Optional npm cache directory 43 | .npm 44 | package-lock.json 45 | 46 | # Optional eslint cache 47 | .eslintcache 48 | 49 | # Optional REPL history 50 | .node_repl_history 51 | 52 | # Output of 'npm pack' 53 | *.tgz 54 | 55 | # dotenv environment variables file 56 | .env 57 | .env.development 58 | .env.production 59 | 60 | # gatsby files 61 | .cache/ 62 | public 63 | 64 | # Mac files 65 | .DS_Store 66 | 67 | # Yarn 68 | yarn-error.log 69 | .pnp/ 70 | .pnp.js 71 | # Yarn Integrity file 72 | .yarn-integrity 73 | 74 | .now 75 | -------------------------------------------------------------------------------- /.nvmrc: -------------------------------------------------------------------------------- 1 | v12.13.0 2 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "editor.formatOnSave": true, 3 | // turn it off for JS and JSX, we will do this via eslint 4 | "[javascript]": { 5 | "editor.formatOnSave": true 6 | }, 7 | "[javascriptreact]": { 8 | "editor.formatOnSave": true 9 | }, 10 | // tell the ESLint plugin to run on save 11 | "editor.codeActionsOnSave": { 12 | "source.fixAll.eslint": "explicit" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 gatsbyjs 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Portfolio for developers 2 | 3 | [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https%3A%2F%2Fgithub.com%2Fsmakosh%2Fgatsby-portfolio-dev&env=PORTFOLIO_GITHUB_TOKEN,PORTFOLIO_FORMIUM_ENDPOINT,GATSBY_PORTFOLIO_RECAPTCHA_KEY&envDescription=All%20env%20variables%20are%20required%20to%20deploy%20the%20project&envLink=https%3A%2F%2Fgithub.com%2Fsmakosh%2Fgatsby-portfolio-dev%2Fblob%2Fmaster%2F.env.development.template&project-name=my-portfolio&repo-name=my-portfolio&demo-title=Portfolio%20demo&demo-description=A%20simple%20portfolio%20for%20developers&demo-url=https%3A%2F%2Fportfolio.smakosh.com&demo-image=https%3A%2F%2Fportfolio.smakosh.com%2Fstatic%2Fthumbnail-16a70559ab07712f83d3ce412dfbb5a6.png) 4 | 5 | [![Powered by Vercel](./powered-by-vercel.svg)](https://vercel.com?utm_source=smakosh&utm_campaign=oss) 6 | 7 | ## Next js version? 8 | 9 | [There you go](https://github.com/smakosh/next-portfolio-dev) 10 | 11 | ## Theme 12 | 13 | [Gatsby-theme-portfolio](https://github.com/smakosh/gatsby-theme-portfolio) 14 | 15 | ## Features 16 | 17 | - Eslint/Prettier configured 18 | - Scores 100% on a11y / Performance / PWA / SEO 19 | - PWA (desktop & mobile) 20 | - Easy to customize 21 | - Nice project structure 22 | - Amazing illustrations by [Undraw.co](https://undraw.co) 23 | - Tablet & mobile friendly 24 | - Continuous deployment with [Vercel](https://vercel.com/?utm_source=smakosh) 25 | - Or with Netlify, check [Netlify branch](https://github.com/smakosh/gatsby-portfolio-dev/tree/netlify) 26 | - A contact form protected by Google Recaptcha 27 | - Can be deployed with one click 28 | - Functional components with ~~Recompose~~ React Hooks! ~~ready to migrate to React hooks!~~ 29 | - Fetches your Github pinned projects with most stars (You could customize this if you wish) 30 | - One click deployment to Vercel 31 | 32 | ## Design 33 | 34 | Project on [Behance](https://www.behance.net/gallery/74172961/Free-Gatsby-portfolio-for-developers) 35 | 36 | ## Structure 37 | 38 | ```bash 39 | . 40 | ├── data 41 | │ └── config # SEO related tags 42 | ├── src 43 | │ └── assets # Assets 44 | │ │ │── icons # icons 45 | │ │ │── illustrations # illustrations from (undraw.co) 46 | │ │ └── thumbnail # cover of your website when it's shared to social media 47 | │ ├── components # Components 48 | │ │ │── common # Common components 49 | │ │ │── landing # Components used on the landing page 50 | │ │ └── theme # Header & Footer 51 | │ └── pages # Pages 52 | └── static # favicon & Netlify redirects 53 | ``` 54 | 55 | ## Prerequisites 56 | 57 | ### Online 58 | 59 | 1. Create an account at [Formium](https://formium.io/?utm_source=smakosh) and grab your form endpoint url 60 | 2. Grab a Google recaptcha key from [Google Recaptcha](https://www.google.com/recaptcha/admin) 61 | > Make sure to select V2 checkbox 62 | 4. Grab your Github token from [GitHub](https://github.com/settings/tokens/new?scopes=repo&description=portfolio-dev) 63 | 5. Click [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https%3A%2F%2Fgithub.com%2Fsmakosh%2Fgatsby-portfolio-dev&env=PORTFOLIO_GITHUB_TOKEN,PORTFOLIO_FORMIUM_ENDPOINT,GATSBY_PORTFOLIO_RECAPTCHA_KEY&envDescription=All%20env%20variables%20are%20required%20to%20deploy%20the%20project&envLink=https%3A%2F%2Fgithub.com%2Fsmakosh%2Fgatsby-portfolio-dev%2Fblob%2Fmaster%2F.env.development.template&project-name=my-portfolio&repo-name=my-portfolio&demo-title=Portfolio%20demo&demo-description=A%20simple%20portfolio%20for%20developers&demo-url=https%3A%2F%2Fportfolio.smakosh.com&demo-image=https%3A%2F%2Fportfolio.smakosh.com%2Fstatic%2Fthumbnail-16a70559ab07712f83d3ce412dfbb5a6.png) and pass in your: 64 | 65 | - Formium form endpoint 66 | - Google recaptcha public key 67 | - Github token 68 | 69 | To Env variables section. 70 | 71 | > For the contact form to work, you will need to update the `url` in [here](https://github.com/smakosh/gatsby-portfolio-dev/blob/master/src/data/config.js#L5) 72 | 73 | ### Locally 74 | 75 | 1. Create an account at [Formium](https://formium.io/?utm_source=smakosh) 76 | 2. Grab a Google recaptcha key from [Google Recaptcha](https://www.google.com/recaptcha/admin) 77 | 3. Grab your Github token from GitHub 78 | 4. Run `cp .env.development.template .env.development` 79 | 5. Run `npm i && npm start` 80 | 81 | > You could run `vercel env pull` to get your env variables from Vercel. 82 | 83 | ### Deploying locally to Vercel 84 | 85 | I highly recommend that you push to GitHub/GitLab and deploy your repository to Vercel instead or just hit the Deploy button. 86 | 87 | ### Clean the cache 88 | 89 | This removes the `.cache/` & `public/` folders 90 | 91 | ```bash 92 | yarn reset 93 | ``` 94 | 95 | ## Built with 96 | 97 | - Adobe XD 98 | - Gatsby 99 | - React & GraphQL 100 | - Formium 101 | - Google recaptcha 102 | - VSCode 103 | - And these useful of JavaScript libraries & Gatsby plugins [package.json](package.json) 104 | 105 | ## License 106 | 107 | This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for more details 108 | 109 | ## Contributors 110 | 111 | - [Ajay NS](https://github.com/ajayns) https://github.com/smakosh/gatsby-portfolio-dev/pull/3 112 | - [Ryan Lee](https://github.com/drdgvhbh) https://github.com/smakosh/gatsby-portfolio-dev/pull/6 113 | - [David](https://github.com/davidavz) https://github.com/smakosh/gatsby-portfolio-dev/pull/8 114 | - [Léu Almeida](https://github.com/LeuAlmeida) https://github.com/smakosh/gatsby-portfolio-dev/pull/21 115 | - [Kudakwashe Mupeni](https://github.com/2wce) https://github.com/smakosh/gatsby-portfolio-dev/pull/20 116 | - [sasannnn](https://github.com/sasannnn) https://github.com/smakosh/gatsby-portfolio-dev/pull/22 117 | - [Michael Seifarth](https://github.com/Kageetai) https://github.com/smakosh/gatsby-portfolio-dev/pull/27 118 | - [Hugo](https://github.com/Kronicom) https://github.com/smakosh/gatsby-portfolio-dev/pull/34 https://github.com/smakosh/gatsby-portfolio-dev/pull/35 119 | - [manula thejan](https://github.com/manula2004) https://github.com/smakosh/gatsby-portfolio-dev/pull/38 120 | - [Benjamin Lo](https://github.com/benji011) https://github.com/smakosh/gatsby-portfolio-dev/pull/40 121 | - [Yassine Rais](https://github.com/yassinrais) https://github.com/smakosh/gatsby-portfolio-dev/pull/41 122 | - [Juan Manuel Combetto](https://github.com/omniwired) https://github.com/smakosh/gatsby-portfolio-dev/pull/54 123 | - [Smakosh](https://smakosh.com) 124 | 125 | ## Support 126 | 127 | If you love this Gatsby template and want to support me, you can do so through my GitHub profile. 128 | -------------------------------------------------------------------------------- /api/contact.js: -------------------------------------------------------------------------------- 1 | import axios from "axios"; 2 | import * as Yup from "yup"; 3 | 4 | const schema = Yup.object().shape({ 5 | name: Yup.string().required(), 6 | email: Yup.string().email(), 7 | message: Yup.string().required(), 8 | }); 9 | 10 | export default async (req, res) => { 11 | try { 12 | const data = await schema.validate(req.body); 13 | 14 | await axios({ 15 | method: "POST", 16 | url: `${process.env.PORTFOLIO_FORMIUM_ENDPOINT}`, 17 | headers: { 18 | "Content-Type": "application/json", 19 | }, 20 | data, 21 | }); 22 | 23 | res.status(200).json({ message: "Submission has been sent successfully" }); 24 | } catch (err) { 25 | console.log(err); 26 | res.status(400).json({ message: "Submission has failed" }); 27 | } 28 | }; 29 | -------------------------------------------------------------------------------- /gatsby-browser.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ThemeProvider from 'providers/ThemeProvider'; 3 | 4 | export const onServiceWorkerUpdateReady = () => window.location.reload(true); 5 | 6 | export const wrapRootElement = ({ element }) => {element}; 7 | -------------------------------------------------------------------------------- /gatsby-config.js: -------------------------------------------------------------------------------- 1 | const config = require("./src/data/config"); 2 | 3 | require("dotenv").config({ 4 | path: `.env`, 5 | }); 6 | 7 | module.exports = { 8 | siteMetadata: { 9 | title: config.defaultTitle, 10 | description: config.defaultDescription, 11 | author: config.author, 12 | }, 13 | plugins: [ 14 | "gatsby-plugin-react-helmet", 15 | "gatsby-plugin-styled-components", 16 | { 17 | resolve: `gatsby-plugin-canonical-urls`, 18 | options: { 19 | siteUrl: config.url, 20 | }, 21 | }, 22 | { 23 | resolve: "gatsby-source-graphql", 24 | options: { 25 | typeName: "GitHub", 26 | fieldName: "github", 27 | url: "https://api.github.com/graphql", 28 | headers: { 29 | Authorization: `bearer ${process.env.PORTFOLIO_GITHUB_TOKEN}`, 30 | }, 31 | fetchOptions: {}, 32 | }, 33 | }, 34 | { 35 | resolve: "gatsby-plugin-nprogress", 36 | options: { 37 | color: config.themeColor, 38 | showSpinner: false, 39 | }, 40 | }, 41 | { 42 | resolve: "gatsby-plugin-google-analytics", 43 | options: { 44 | trackingId: config.googleAnalyticsID, 45 | head: true, 46 | }, 47 | }, 48 | { 49 | resolve: "gatsby-plugin-manifest", 50 | options: { 51 | name: config.defaultTitle, 52 | short_name: "starter", 53 | start_url: "/", 54 | background_color: config.backgroundColor, 55 | theme_color: config.themeColor, 56 | display: "minimal-ui", 57 | icon: "./static/favicon/favicon-512.png", 58 | }, 59 | }, 60 | "gatsby-plugin-offline", 61 | ], 62 | }; 63 | -------------------------------------------------------------------------------- /gatsby-node.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | 3 | exports.onCreateWebpackConfig = ({ actions }) => { 4 | actions.setWebpackConfig({ 5 | resolve: { 6 | modules: [path.resolve(__dirname, 'src'), 'node_modules'], 7 | }, 8 | }); 9 | }; 10 | -------------------------------------------------------------------------------- /gatsby-ssr.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ThemeProvider from 'providers/ThemeProvider'; 3 | 4 | export const wrapRootElement = ({ element }) => {element}; 5 | -------------------------------------------------------------------------------- /jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES6", 4 | "module": "commonjs", 5 | "baseUrl": "src", 6 | "experimentalDecorators": true, 7 | "allowSyntheticDefaultImports": true, 8 | "jsx": "react" 9 | }, 10 | "include": ["src/**/*"] 11 | } 12 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "portfolio", 3 | "private": true, 4 | "description": "A simple portfolio for developers", 5 | "version": "0.1.2", 6 | "author": "Shine ", 7 | "dependencies": { 8 | "axios": "^0.21.1", 9 | "dotenv": "^10.0.0", 10 | "formik": "^2.1.4", 11 | "gatsby": "^3.6.1", 12 | "gatsby-plugin-canonical-urls": "^3.6.0", 13 | "gatsby-plugin-google-analytics": "^3.6.0", 14 | "gatsby-plugin-manifest": "^3.6.0", 15 | "gatsby-plugin-nprogress": "^3.6.0", 16 | "gatsby-plugin-offline": "^4.6.0", 17 | "gatsby-plugin-react-helmet": "^4.6.0", 18 | "gatsby-plugin-sitemap": "^4.2.0", 19 | "gatsby-plugin-styled-components": "^4.6.0", 20 | "gatsby-source-graphql": "^3.6.0", 21 | "prop-types": "^15.6.2", 22 | "react": "^17.0.2", 23 | "react-anchor-link-smooth-scroll": "^1.0.12", 24 | "react-dom": "^17.0.2", 25 | "react-google-recaptcha": "^2.1.0", 26 | "react-helmet": "^6.1.0", 27 | "styled-components": "^5.3.0", 28 | "yup": "^0.32.9" 29 | }, 30 | "keywords": [ 31 | "gatsby", 32 | "portfolio", 33 | "developer" 34 | ], 35 | "license": "MIT", 36 | "scripts": { 37 | "build": "gatsby build", 38 | "start": "npx vercel dev && gatsby develop -o", 39 | "reset": "rm -rf .cache/ public/", 40 | "test": "echo \"Write tests! -> https://gatsby.app/unit-testing\"" 41 | }, 42 | "devDependencies": { 43 | "babel-eslint": "^10.1.0", 44 | "babel-plugin-styled-components": "^1.10.6", 45 | "eslint": "^7.27.0" 46 | }, 47 | "repository": { 48 | "type": "git", 49 | "url": "https://github.com/shinevue/next-portfolio" 50 | }, 51 | "bugs": { 52 | "url": "https://github.com/shinevue/next-portfolio/issues" 53 | }, 54 | "resolutions": { 55 | "graphql": "^15.4.0", 56 | "graphql-compose": "^7.25.0", 57 | "webpack": "^5.24.2", 58 | "formik/deepmerge": "4.2.2" 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /powered-by-vercel.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /src/assets/icons/moon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/icons/sun.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/assets/illustrations/contact-overlay.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /src/assets/illustrations/details.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /src/assets/illustrations/dev.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/illustrations/footer.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /src/assets/illustrations/overlay.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/illustrations/skills.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | 218 | 219 | 220 | 221 | 222 | 223 | 224 | 225 | 226 | 227 | 228 | 229 | 230 | 231 | 232 | 233 | 234 | 235 | 236 | 237 | 238 | -------------------------------------------------------------------------------- /src/assets/thumbnail/thumbnail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shinevue/next-portfolio/005eb14a489ceb5260499e6927999dd7ee88bdda/src/assets/thumbnail/thumbnail.png -------------------------------------------------------------------------------- /src/components/common/Button/index.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Button = styled.button` 4 | cursor: pointer; 5 | border-radius: 3px; 6 | padding: 0.7rem 2.5rem; 7 | border: none; 8 | -webkit-appearance: none; 9 | -webkit-touch-callout: none; 10 | -webkit-user-select: none; 11 | -khtml-user-select: none; 12 | -moz-user-select: none; 13 | -ms-user-select: none; 14 | user-select: none; 15 | color: #fff; 16 | background: #0074d9; 17 | 18 | &:focus { 19 | outline: none; 20 | } 21 | 22 | &:disabled { 23 | background: gray; 24 | } 25 | 26 | ${({ secondary }) => 27 | secondary && 28 | ` 29 | background: #001F3F; 30 | `} 31 | `; 32 | -------------------------------------------------------------------------------- /src/components/common/Card/index.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Card = styled.div` 4 | padding: 1rem; 5 | background: ${({ theme }) => (theme === 'light' ? '#fff' : '#181717')}; 6 | height: 100%; 7 | `; 8 | 9 | export const TitleWrap = styled.div` 10 | display: flex; 11 | flex-direction: row; 12 | justify-content: space-between; 13 | `; 14 | -------------------------------------------------------------------------------- /src/components/common/Container/index.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Container = styled.div` 4 | max-width: 1280px; 5 | margin: 0 auto; 6 | width: 90%; 7 | 8 | @media (min-width: 601px) { 9 | width: 90%; 10 | } 11 | 12 | @media (min-width: 993px) { 13 | width: 80%; 14 | } 15 | `; 16 | -------------------------------------------------------------------------------- /src/components/common/Icons/Fork.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const Fork = ({ width = 16, height = 16, color = '#000' }) => ( 4 | 5 | 10 | 15 | 16 | 17 | ); 18 | 19 | export default Fork; 20 | -------------------------------------------------------------------------------- /src/components/common/Icons/Star.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const Star = ({ width = 16, height = 16, color = '#000' }) => ( 4 | 5 | 10 | 11 | ); 12 | 13 | export default Star; 14 | -------------------------------------------------------------------------------- /src/components/common/Input/index.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Input = styled.input` 4 | width: 100%; 5 | box-sizing: border-box; 6 | border: 2px solid #6c63ff; 7 | padding: 0.8rem 1rem; 8 | border-radius: 7px; 9 | margin-bottom: 0.5rem; 10 | transition: 0.3s; 11 | 12 | ${({ error }) => 13 | error && 14 | ` 15 | border-color: #ff4136; 16 | `} 17 | 18 | &::placeholder { 19 | color: #a7a7a7; 20 | } 21 | `; 22 | -------------------------------------------------------------------------------- /src/components/common/Layout/fonts.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'Roboto'; 3 | font-style: normal; 4 | font-display: fallback; 5 | font-weight: 400; 6 | src: url('./fonts/roboto-v18-latin-regular.eot'); 7 | src: local('Roboto'), local('Roboto-Regular'), 8 | url('./fonts/roboto-v18-latin-regular.eot?#iefix') 9 | format('embedded-opentype'), 10 | url('./fonts/roboto-v18-latin-regular.woff2') format('woff2'), 11 | url('./fonts/roboto-v18-latin-regular.woff') format('woff'), 12 | url('./fonts/roboto-v18-latin-regular.ttf') format('truetype'), 13 | url('./fonts/roboto-v18-latin-regular.svg#Roboto') format('svg'); 14 | } 15 | 16 | @font-face { 17 | font-family: 'Roboto'; 18 | font-style: normal; 19 | font-display: fallback; 20 | font-weight: 700; 21 | src: url('./fonts/roboto-v18-latin-700.eot'); 22 | src: local('Roboto Bold'), local('Roboto-Bold'), 23 | url('./fonts/roboto-v18-latin-700.eot?#iefix') format('embedded-opentype'), 24 | url('./fonts/roboto-v18-latin-700.woff2') format('woff2'), 25 | url('./fonts/roboto-v18-latin-700.woff') format('woff'), 26 | url('./fonts/roboto-v18-latin-700.ttf') format('truetype'), 27 | url('./fonts/roboto-v18-latin-700.svg#Roboto') format('svg'); 28 | } 29 | -------------------------------------------------------------------------------- /src/components/common/Layout/fonts/roboto-v18-latin-700.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shinevue/next-portfolio/005eb14a489ceb5260499e6927999dd7ee88bdda/src/components/common/Layout/fonts/roboto-v18-latin-700.eot -------------------------------------------------------------------------------- /src/components/common/Layout/fonts/roboto-v18-latin-700.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shinevue/next-portfolio/005eb14a489ceb5260499e6927999dd7ee88bdda/src/components/common/Layout/fonts/roboto-v18-latin-700.ttf -------------------------------------------------------------------------------- /src/components/common/Layout/fonts/roboto-v18-latin-700.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shinevue/next-portfolio/005eb14a489ceb5260499e6927999dd7ee88bdda/src/components/common/Layout/fonts/roboto-v18-latin-700.woff -------------------------------------------------------------------------------- /src/components/common/Layout/fonts/roboto-v18-latin-700.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shinevue/next-portfolio/005eb14a489ceb5260499e6927999dd7ee88bdda/src/components/common/Layout/fonts/roboto-v18-latin-700.woff2 -------------------------------------------------------------------------------- /src/components/common/Layout/fonts/roboto-v18-latin-regular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shinevue/next-portfolio/005eb14a489ceb5260499e6927999dd7ee88bdda/src/components/common/Layout/fonts/roboto-v18-latin-regular.eot -------------------------------------------------------------------------------- /src/components/common/Layout/fonts/roboto-v18-latin-regular.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 12 | 13 | 14 | 15 | 16 | 18 | 21 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 35 | 36 | 37 | 39 | 40 | 42 | 44 | 45 | 47 | 49 | 50 | 51 | 52 | 53 | 54 | 56 | 59 | 60 | 62 | 64 | 65 | 66 | 67 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 78 | 79 | 81 | 82 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 99 | 100 | 102 | 103 | 105 | 106 | 108 | 109 | 110 | 111 | 112 | 113 | 115 | 116 | 118 | 120 | 122 | 123 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 140 | 142 | 144 | 145 | 146 | 149 | 150 | 153 | 155 | 156 | 157 | 158 | 161 | 162 | 164 | 165 | 166 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 176 | 177 | 178 | 180 | 183 | 185 | 186 | 187 | 188 | 190 | 192 | 194 | 195 | 197 | 198 | 199 | 200 | 202 | 203 | 204 | 205 | 206 | 207 | 209 | 211 | 213 | 215 | 218 | 221 | 222 | 224 | 225 | 226 | 228 | 230 | 231 | 232 | 234 | 236 | 238 | 240 | 243 | 246 | 249 | 252 | 254 | 256 | 258 | 260 | 262 | 263 | 264 | 265 | 266 | 268 | 270 | 272 | 274 | 276 | 279 | 281 | 283 | 285 | 286 | 287 | 288 | 290 | 291 | 293 | 295 | 296 | 297 | 298 | 299 | 300 | 301 | 302 | 303 | 304 | 305 | 306 | 307 | 308 | 309 | -------------------------------------------------------------------------------- /src/components/common/Layout/fonts/roboto-v18-latin-regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shinevue/next-portfolio/005eb14a489ceb5260499e6927999dd7ee88bdda/src/components/common/Layout/fonts/roboto-v18-latin-regular.ttf -------------------------------------------------------------------------------- /src/components/common/Layout/fonts/roboto-v18-latin-regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shinevue/next-portfolio/005eb14a489ceb5260499e6927999dd7ee88bdda/src/components/common/Layout/fonts/roboto-v18-latin-regular.woff -------------------------------------------------------------------------------- /src/components/common/Layout/fonts/roboto-v18-latin-regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shinevue/next-portfolio/005eb14a489ceb5260499e6927999dd7ee88bdda/src/components/common/Layout/fonts/roboto-v18-latin-regular.woff2 -------------------------------------------------------------------------------- /src/components/common/Layout/index.jsx: -------------------------------------------------------------------------------- 1 | import React, { useContext } from 'react'; 2 | import { ThemeContext } from 'providers/ThemeProvider'; 3 | import { Footer } from 'components/theme'; 4 | import { Global } from './styles'; 5 | import './fonts.css'; 6 | 7 | export const Layout = ({ children }) => { 8 | const { theme } = useContext(ThemeContext); 9 | 10 | return ( 11 | <> 12 | 13 | {children} 14 |