├── .prettierignore
├── src
    ├── Services
    │   ├── index.ts
    │   └── GithubAPI.ts
    ├── setupTests.ts
    ├── Components
    │   ├── index.ts
    │   └── KnowledgeLevel.tsx
    ├── react-app-env.d.ts
    ├── Assets
    │   └── Background.jpg
    ├── index.tsx
    ├── global.css
    ├── App
    │   ├── useFetchGithubUser.ts
    │   └── index.tsx
    └── @types
    │   └── models.d.ts
├── .eslintignore
├── public
    ├── robots.txt
    ├── favicon.ico
    └── index.html
├── images
    └── Website.png
├── .vscode
    ├── tailwind.json
    └── settings.json
├── craco.config.js
├── .prettierrc.js
├── .editorconfig
├── .gitignore
├── tailwind.config.js
├── tsconfig.json
├── LICENSE
├── README.md
└── package.json


/.prettierignore:
--------------------------------------------------------------------------------
1 | /public
2 | /node_modules
3 | /.vscode


--------------------------------------------------------------------------------
/src/Services/index.ts:
--------------------------------------------------------------------------------
1 | export * from './GithubAPI'
2 | 


--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | /public
2 | /node_modules
3 | /.vscode
4 | 


--------------------------------------------------------------------------------
/src/setupTests.ts:
--------------------------------------------------------------------------------
1 | import '@testing-library/jest-dom'
2 | 


--------------------------------------------------------------------------------
/src/Components/index.ts:
--------------------------------------------------------------------------------
1 | export * from './KnowledgeLevel'
2 | 


--------------------------------------------------------------------------------
/src/react-app-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="react-scripts" />
2 | 


--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/images/Website.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/LuanEdCosta/react-tailwindcss-glassmorphism/HEAD/images/Website.png


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/LuanEdCosta/react-tailwindcss-glassmorphism/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/.vscode/tailwind.json:
--------------------------------------------------------------------------------
1 | {
2 |   "atDirectives": [
3 |     { "name": "@tailwind" },
4 |     { "name": "@layer" }
5 |   ]
6 | }
7 | 


--------------------------------------------------------------------------------
/src/Assets/Background.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/LuanEdCosta/react-tailwindcss-glassmorphism/HEAD/src/Assets/Background.jpg


--------------------------------------------------------------------------------
/src/Services/GithubAPI.ts:
--------------------------------------------------------------------------------
1 | import Axios from 'axios'
2 | 
3 | export const GitHubAPI = Axios.create({
4 |   baseURL: 'https://api.github.com',
5 | })
6 | 


--------------------------------------------------------------------------------
/craco.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   style: {
 3 |     postcss: {
 4 |       plugins: [
 5 |         require('tailwindcss'),
 6 |         require('autoprefixer'),
 7 |       ],
 8 |     },
 9 |   },
10 | }
11 | 


--------------------------------------------------------------------------------
/.prettierrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   bracketSpacing: true,
 3 |   jsxBracketSameLine: false,
 4 |   singleQuote: true,
 5 |   trailingComma: 'all',
 6 |   arrowParens: 'always',
 7 |   printWidth: 80,
 8 |   semi: false,
 9 |   endOfLine: 'crlf',
10 | }
11 | 


--------------------------------------------------------------------------------
/src/index.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import ReactDOM from 'react-dom'
 3 | 
 4 | import App from './App'
 5 | 
 6 | import './global.css'
 7 | 
 8 | ReactDOM.render(
 9 |   <React.StrictMode>
10 |     <App />
11 |   </React.StrictMode>,
12 |   document.getElementById('root'),
13 | )
14 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # EditorConfig is awesome: https://EditorConfig.org
 2 | 
 3 | # top-most EditorConfig file
 4 | root = true
 5 | 
 6 | [*]
 7 | indent_style = space
 8 | indent_size = 2
 9 | tab_width = 2
10 | end_of_line = crlf
11 | charset = utf-8
12 | trim_trailing_whitespace = true
13 | insert_final_newline = true
14 | 


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "editor.wordWrap": "wordWrapColumn",
 3 |   "css.customData": [".vscode/tailwind.json"],
 4 |   "cSpell.words": [
 5 |     "automations",
 6 |     "browserslist",
 7 |     "codeigniter",
 8 |     "compat",
 9 |     "craco",
10 |     "glassmorphism",
11 |     "linkedin",
12 |     "predeploy",
13 |     "repos",
14 |     "tailwind",
15 |     "tailwindcss"
16 |   ]
17 | }
18 | 


--------------------------------------------------------------------------------
/.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 | # production
12 | /build
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | 
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | 
25 | # Eslint
26 | .eslintcache
27 | 


--------------------------------------------------------------------------------
/src/global.css:
--------------------------------------------------------------------------------
 1 | @import url('https://fonts.googleapis.com/css2?family=Ubuntu&display=swap');
 2 | 
 3 | @tailwind base;
 4 | @tailwind components;
 5 | @tailwind utilities;
 6 | 
 7 | @layer base {
 8 |   *,
 9 |   *::before,
10 |   *::after {
11 |     -webkit-font-smoothing: antialiased;
12 |     -moz-osx-font-smoothing: grayscale;
13 |   }
14 | 
15 |   html,
16 |   body,
17 |   #root {
18 |     @apply h-full;
19 |   }
20 | 
21 |   svg {
22 |     overflow: initial;
23 |   }
24 | }
25 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | const defaultTheme = require('tailwindcss/defaultTheme')
 2 | 
 3 | module.exports = {
 4 |   purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
 5 |   darkMode: false,
 6 |   theme: {
 7 |     fontFamily: {
 8 |       sans: ['Ubuntu', ...defaultTheme.fontFamily.sans],
 9 |     },
10 |     extend: {
11 |       backgroundImage: () => ({
12 |         'app-background': "url('./Assets/Background.jpg')",
13 |       })
14 |     },
15 |   },
16 |   variants: {
17 |     extend: {},
18 |   },
19 |   plugins: [],
20 | }
21 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <title>React + Tailwind CSS + Glassmorphism</title>
 8 |     <meta
 9 |       name="description"
10 |       content="React + Tailwind CSS + Glassmorphism"
11 |     />
12 |   </head>
13 |   <body>
14 |     <noscript>You need to enable JavaScript to run this app.</noscript>
15 |     <div id="root"></div>
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "lib": ["dom", "dom.iterable", "esnext"],
 5 |     "allowJs": true,
 6 |     "skipLibCheck": true,
 7 |     "esModuleInterop": true,
 8 |     "allowSyntheticDefaultImports": true,
 9 |     "strict": true,
10 |     "forceConsistentCasingInFileNames": true,
11 |     "noFallthroughCasesInSwitch": true,
12 |     "module": "esnext",
13 |     "moduleResolution": "node",
14 |     "resolveJsonModule": true,
15 |     "isolatedModules": true,
16 |     "noEmit": true,
17 |     "jsx": "react-jsx",
18 |     "baseUrl": ".",
19 |     "removeComments": true,
20 |     "typeRoots": ["./node_modules/@types", "./src/@types"]
21 |   },
22 |   "include": ["src"],
23 |   "exclude": ["node_modules", "build"]
24 | }
25 | 


--------------------------------------------------------------------------------
/src/App/useFetchGithubUser.ts:
--------------------------------------------------------------------------------
 1 | import { AxiosResponse } from 'axios'
 2 | import { useLayoutEffect, useState } from 'react'
 3 | 
 4 | import { GitHubAPI } from 'src/Services'
 5 | 
 6 | type ResponseData = Partial<App.GithubUser>
 7 | 
 8 | const useFetchGithubUser = (userName: string) => {
 9 |   const [userData, setUserData] = useState<ResponseData>({})
10 |   const [isLoading, setIsLoading] = useState(true)
11 | 
12 |   useLayoutEffect(() => {
13 |     const fetchUser = async () => {
14 |       try {
15 |         const response: AxiosResponse<ResponseData> = await GitHubAPI.get(
16 |           `/users/${userName}`,
17 |         )
18 | 
19 |         setUserData(response.data)
20 |       } catch (e) {
21 |         setUserData({})
22 |       } finally {
23 |         setIsLoading(false)
24 |       }
25 |     }
26 | 
27 |     fetchUser()
28 |   }, [userName])
29 | 
30 |   return {
31 |     isLoading,
32 |     userData,
33 |   }
34 | }
35 | 
36 | export default useFetchGithubUser
37 | 


--------------------------------------------------------------------------------
/src/@types/models.d.ts:
--------------------------------------------------------------------------------
 1 | /* eslint-disable @typescript-eslint/no-unused-vars */
 2 | 
 3 | namespace App {
 4 |   interface GithubUser {
 5 |     avatar_url: string
 6 |     bio: string
 7 |     blog: string
 8 |     company: string
 9 |     created_at: string
10 |     email: string
11 |     events_url: string
12 |     followers: number
13 |     followers_url: string
14 |     following: number
15 |     following_url: string
16 |     gists_url: string
17 |     gravatar_id: string
18 |     hireable: boolean
19 |     html_url: string
20 |     id: number
21 |     location: string
22 |     login: string
23 |     name: string
24 |     node_id: string
25 |     organizations_url: string
26 |     public_gists: number
27 |     public_repos: number
28 |     received_events_url: string
29 |     repos_url: string
30 |     site_admin: boolean
31 |     starred_url: string
32 |     subscriptions_url: string
33 |     twitter_username: string
34 |     type: string
35 |     updated_at: string
36 |     url: string
37 |   }
38 | }
39 | 


--------------------------------------------------------------------------------
/src/Components/KnowledgeLevel.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | export interface KnowledgeLevelProps {
 4 |   className?: string
 5 |   style?: React.CSSProperties
 6 |   iconComponent: React.ReactNode
 7 |   languageName: string
 8 |   experience: string
 9 | }
10 | 
11 | export const KnowledgeLevel: React.FC<KnowledgeLevelProps> = (props) => {
12 |   const { className, style, iconComponent, languageName, experience } = props
13 | 
14 |   return (
15 |     <div
16 |       className={`rounded-2xl bg-white bg-opacity-20 p-4 flex flex-col relative ${className}`}
17 |       style={{
18 |         backdropFilter: 'blur(10px)',
19 |         ...(style || {}),
20 |       }}
21 |     >
22 |       <div className="font-black text-white text-5xl absolute top-2 right-2">
23 |         {iconComponent}
24 |       </div>
25 | 
26 |       <div className="text-white text-lg font-bold mb-2 mt-4">
27 |         {languageName}
28 |       </div>
29 | 
30 |       <div className="text-white">{experience}</div>
31 |     </div>
32 |   )
33 | }
34 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2021 Luan Eduardo da Costa
 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 | # :heart: React + Tailwind CSS + Glassmorphism
 2 | 
 3 | This project uses Tailwind CSS to design a glassmorphism based portfolio website.
 4 | 
 5 | :point_right: [CLICK HERE TO SEE IN YOUR BROWSER](https://luanedcosta.github.io/react-tailwindcss-glassmorphism/) :point_left:
 6 | 
 7 | <img src="./images/Website.png" alt="An image of the website" />
 8 | 
 9 | ## :astonished: What is Tailwind CSS And Glassmorphism?
10 | 
11 | - **Tailwind CSS**
12 |   - Is a utility-first CSS framework packed with classes that can be composed to build any design, directly in the markup. [Click here to learn more](https://tailwindcss.com/).
13 | 
14 | - **Glassmorphism**
15 |   - That's a UI trend that has been steadily growing in popularity over the last year. The general idea is to have a background-blur on an object, giving the impression of a frosted glass, but the premise of this style isn't new in itself. It has been used in Windows VISTA, iOS 7 and many other styles. [Click here to learn more](https://hype4.com/blog/glassmorphism).
16 | 
17 | ## :link: Useful links to Learn
18 | 
19 | - https://hype4.com/blog/glassmorphism
20 | - https://dribbble.com/tags/glassmorphism
21 | - https://tailwindcss.com
22 | - https://tailwindcss.com/docs/guides/create-react-app
23 | - https://glassmorphism.com
24 | 
25 | ## :man: Author
26 | 
27 | Luan Eduardo da Costa | [Follow me on Linkedin](https://www.linkedin.com/in/luaneducosta/)
28 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-tailwindcss-glassmorphism",
 3 |   "description": "React + Tailwind CSS + Glassmorphism | Learning Tailwind and Glassmorphism",
 4 |   "version": "0.1.0",
 5 |   "private": false,
 6 |   "license": "MIT",
 7 |   "author": "Luan Eduardo da Costa",
 8 |   "homepage": "https://luanedcosta.github.io/react-tailwindcss-glassmorphism/",
 9 |   "dependencies": {
10 |     "@craco/craco": "^6.1.0",
11 |     "@tailwindcss/postcss7-compat": "^2.0.2",
12 |     "@testing-library/jest-dom": "^5.11.4",
13 |     "@testing-library/react": "^11.1.0",
14 |     "@testing-library/user-event": "^12.1.10",
15 |     "@types/jest": "^26.0.15",
16 |     "@types/node": "^12.0.0",
17 |     "@types/react": "^16.9.53",
18 |     "@types/react-dom": "^16.9.8",
19 |     "autoprefixer": "9",
20 |     "axios": "^0.21.1",
21 |     "gh-pages": "^3.1.0",
22 |     "postcss": "7",
23 |     "react": "^17.0.1",
24 |     "react-dom": "^17.0.1",
25 |     "react-icons": "^4.1.0",
26 |     "react-scripts": "4.0.1",
27 |     "tailwindcss": "npm:@tailwindcss/postcss7-compat",
28 |     "typescript": "^4.0.3",
29 |     "web-vitals": "^0.2.4"
30 |   },
31 |   "scripts": {
32 |     "predeploy": "yarn run build",
33 |     "deploy": "gh-pages -d build",
34 |     "start": "craco start",
35 |     "build": "craco build",
36 |     "test": "craco test",
37 |     "eject": "react-scripts eject"
38 |   },
39 |   "eslintConfig": {
40 |     "extends": [
41 |       "react-app",
42 |       "react-app/jest"
43 |     ]
44 |   },
45 |   "browserslist": {
46 |     "production": [
47 |       ">0.2%",
48 |       "not dead",
49 |       "not op_mini all"
50 |     ],
51 |     "development": [
52 |       "last 1 chrome version",
53 |       "last 1 firefox version",
54 |       "last 1 safari version"
55 |     ]
56 |   }
57 | }
58 | 


--------------------------------------------------------------------------------
/src/App/index.tsx:
--------------------------------------------------------------------------------
  1 | import React from 'react'
  2 | import { SiJavascript, SiPhp, SiJava, SiPython } from 'react-icons/si'
  3 | import {
  4 |   FiCode,
  5 |   FiGithub,
  6 |   FiLinkedin,
  7 |   FiMessageSquare,
  8 |   FiUser,
  9 | } from 'react-icons/fi'
 10 | 
 11 | import { KnowledgeLevel } from 'src/Components'
 12 | 
 13 | import useFetchGithubUser from './useFetchGithubUser'
 14 | 
 15 | const App: React.FC = () => {
 16 |   const { userData, isLoading } = useFetchGithubUser('LuanEdCosta')
 17 | 
 18 |   return (
 19 |     <div className="flex flex-row justify-center items-center min-h-full bg-app-background bg-center bg-no-repeat bg-cover">
 20 |       {!isLoading && (
 21 |         <main
 22 |           className="flex flex-col lg:flex-row bg-white bg-opacity-10 rounded-3xl overflow-hidden w-full max-w-5xl shadow-lg m-4 lg:m-6"
 23 |           style={{
 24 |             backdropFilter: 'blur(10px)',
 25 |           }}
 26 |         >
 27 |           <div
 28 |             className="py-8 px-4 lg:px-6 bg-white bg-opacity-10 flex flex-col w-full lg:w-auto lg:max-w-xs"
 29 |             style={{
 30 |               backdropFilter: 'blur(10px)',
 31 |             }}
 32 |           >
 33 |             <img
 34 |               className="rounded-full shadow-sm w-40 h-40 mb-4 border-2 border-white select-none mx-auto"
 35 |               src={userData.avatar_url}
 36 |               alt={userData?.name}
 37 |               draggable={false}
 38 |             />
 39 | 
 40 |             <div className="text-white text-lg font-black flex items-center mb-2">
 41 |               <FiUser />
 42 |               <span className="ml-4">{userData?.name}</span>
 43 |             </div>
 44 | 
 45 |             {!!userData?.bio && (
 46 |               <div className="text-white flex items-center">
 47 |                 <FiMessageSquare />
 48 |                 <span className="ml-4">{userData?.bio}</span>
 49 |               </div>
 50 |             )}
 51 | 
 52 |             <div className="flex flex-row flex-wrap justify-center mt-auto">
 53 |               <a
 54 |                 target="_blank"
 55 |                 rel="noopener noreferrer"
 56 |                 href="https://github.com/LuanEdCosta"
 57 |                 className="rounded-full w-14 h-14 flex flex-row justify-center items-center bg-white bg-opacity-10 hover:bg-opacity-20 text-white mt-4 mx-2"
 58 |               >
 59 |                 <FiGithub />
 60 |               </a>
 61 | 
 62 |               <a
 63 |                 target="_blank"
 64 |                 rel="noopener noreferrer"
 65 |                 href="https://www.linkedin.com/in/luan-eduardo-costa-aaab591a7/"
 66 |                 className="rounded-full w-14 h-14 flex flex-row justify-center items-center bg-white bg-opacity-10 hover:bg-opacity-20 text-white mt-4 mx-2"
 67 |               >
 68 |                 <FiLinkedin />
 69 |               </a>
 70 |             </div>
 71 |           </div>
 72 | 
 73 |           <div className="flex-1 p-4 lg:p-6">
 74 |             <div className="text-lg text-white font-black mb-8 flex items-center">
 75 |               <FiCode />
 76 |               <div className="ml-4">Programming Languages</div>
 77 |             </div>
 78 | 
 79 |             <div className="grid grid-rows-4 grid-cols-1 gap-4 md:grid-rows-2 md:grid-cols-2">
 80 |               <KnowledgeLevel
 81 |                 iconComponent={<SiJavascript />}
 82 |                 languageName="JavaScript"
 83 |                 experience="My favorite programming language. I already created many websites using React, Vue and even mobile apps with React Native."
 84 |               />
 85 | 
 86 |               <KnowledgeLevel
 87 |                 iconComponent={<SiPhp />}
 88 |                 languageName="PHP"
 89 |                 experience="I learned PHP in Senai technical course and already created two websites using the Codeigniter framework and a website with just PHP."
 90 |               />
 91 | 
 92 |               <KnowledgeLevel
 93 |                 iconComponent={<SiJava />}
 94 |                 languageName="Java"
 95 |                 experience="Java is an awesome language. I used Java to create native Android apps, Desktop apps and in programming competitions."
 96 |               />
 97 | 
 98 |               <KnowledgeLevel
 99 |                 iconComponent={<SiPython />}
100 |                 languageName="Python"
101 |                 experience="I don't have experience with Python, but know that is one of the best languages to work with machine learning, big data and automations."
102 |               />
103 |             </div>
104 |           </div>
105 |         </main>
106 |       )}
107 |     </div>
108 |   )
109 | }
110 | 
111 | export default App
112 | 


--------------------------------------------------------------------------------