├── .eslintrc.cjs ├── .gitignore ├── README.md ├── index.html ├── package-lock.json ├── package.json ├── public ├── blogs.json ├── images │ ├── avatar-1.png │ ├── avatar-2.png │ ├── avatar-3.png │ ├── avatar-4.png │ ├── blog-1.jpg │ ├── blog-2.jpg │ ├── blog-3.jpg │ ├── blog-4.jpg │ ├── blog-5.jpg │ ├── blog-6.jpg │ ├── icon-app.svg │ ├── icon-design.svg │ ├── icon-dev.svg │ ├── icon-photo.svg │ ├── icon-quote.svg │ ├── logo-1-color.png │ ├── logo-2-color.png │ ├── logo-3-color.png │ ├── logo-4-color.png │ ├── logo-5-color.png │ ├── logo-6-color.png │ ├── logo.ico │ ├── logo.svg │ ├── mamun.jpg │ ├── my-avatar.png │ ├── project-1.jpg │ ├── project-2.png │ ├── project-3.jpg │ ├── project-4.png │ ├── project-5.png │ ├── project-6.png │ ├── project-7.png │ ├── project-8.jpg │ ├── project-9.png │ └── react.svg ├── projects.json ├── services.json ├── testimonials.json └── vite.svg ├── src ├── App.css ├── App.jsx ├── assets │ └── github-cover.png ├── components │ ├── Aside.jsx │ └── Navbar.jsx ├── index.css ├── main.jsx ├── pages │ ├── About │ │ ├── About.jsx │ │ ├── Service.jsx │ │ └── Testimonial.jsx │ ├── Blogs │ │ ├── BlogPost.jsx │ │ ├── Blogs.css │ │ └── Blogs.jsx │ ├── Contact │ │ └── Contact.jsx │ ├── Portfolio │ │ └── Portfolio.jsx │ └── Resume │ │ ├── Resume.jsx │ │ ├── SkillItem.jsx │ │ └── TimelineItem.jsx └── script.js └── vite.config.js /.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { browser: true, es2020: true }, 4 | extends: [ 5 | 'eslint:recommended', 6 | 'plugin:react/recommended', 7 | 'plugin:react/jsx-runtime', 8 | 'plugin:react-hooks/recommended', 9 | ], 10 | ignorePatterns: ['dist', '.eslintrc.cjs'], 11 | parserOptions: { ecmaVersion: 'latest', sourceType: 'module' }, 12 | settings: { react: { version: '18.2' } }, 13 | plugins: ['react-refresh'], 14 | rules: { 15 | 'react/jsx-no-target-blank': 'off', 16 | 'react-refresh/only-export-components': [ 17 | 'warn', 18 | { allowConstantExport: true }, 19 | ], 20 | 'react/prop-types': 0, 21 | 'no-unused-vars' : 0 22 | }, 23 | } 24 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | # build-portfolio-website-react-css 3 | ![](/src/assets/github-cover.png) 4 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Mamun | Portfolio Website using React JS 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "portfolio-website", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "react": "^18.2.0", 14 | "react-dom": "^18.2.0", 15 | "react-icons": "^5.0.1", 16 | "react-router-dom": "^6.22.2" 17 | }, 18 | "devDependencies": { 19 | "@types/react": "^18.2.56", 20 | "@types/react-dom": "^18.2.19", 21 | "@vitejs/plugin-react": "^4.2.1", 22 | "eslint": "^8.56.0", 23 | "eslint-plugin-react": "^7.33.2", 24 | "eslint-plugin-react-hooks": "^4.6.0", 25 | "eslint-plugin-react-refresh": "^0.4.5", 26 | "vite": "^5.1.4" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /public/blogs.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "title": "Design conferences in 2022", 4 | "category": "Design", 5 | "date": "Feb 23, 2022", 6 | "image": "/images/blog-1.jpg", 7 | "description": "Veritatis et quasi architecto beatae vitae dicta sunt, explicabo." 8 | }, 9 | { 10 | "title": "Best fonts every designer", 11 | "category": "Design", 12 | "date": "Feb 23, 2022", 13 | "image": "/images/blog-2.jpg", 14 | "description": "Sed ut perspiciatis, nam libero tempore, cum soluta nobis est eligendi." 15 | }, 16 | { 17 | "title": "Design digest #80", 18 | "category": "Design", 19 | "date": "Feb 23, 2022", 20 | "image": "/images/blog-3.jpg", 21 | "description": "Excepteur sint occaecat cupidatat no proident, quis nostrum exercitationem ullam corporis suscipit." 22 | }, 23 | { 24 | "title": "UI interactions of the week", 25 | "category": "Design", 26 | "date": "Feb 23, 2022", 27 | "image": "/images/blog-4.jpg", 28 | "description": "Enim ad minim veniam, consectetur adipiscing elit, quis nostrud exercitation ullamco laboris nisi." 29 | }, 30 | { 31 | "title": "The forgotten art of spacing", 32 | "category": "Design", 33 | "date": "Feb 23, 2022", 34 | "image": "/images/blog-5.jpg", 35 | "description": "Maxime placeat, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." 36 | }, 37 | { 38 | "title": "Design digest #79", 39 | "category": "Design", 40 | "date": "Feb 23, 2022", 41 | "image": "/images/blog-6.jpg", 42 | "description": "Optio cumque nihil impedit uo minus quod maxime placeat, velit esse cillum." 43 | } 44 | ] 45 | -------------------------------------------------------------------------------- /public/images/avatar-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdalmamunit427/build-portfolio-website-react-css/10a70e2343da1c13a15e53d98c094ca98487f85c/public/images/avatar-1.png -------------------------------------------------------------------------------- /public/images/avatar-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdalmamunit427/build-portfolio-website-react-css/10a70e2343da1c13a15e53d98c094ca98487f85c/public/images/avatar-2.png -------------------------------------------------------------------------------- /public/images/avatar-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdalmamunit427/build-portfolio-website-react-css/10a70e2343da1c13a15e53d98c094ca98487f85c/public/images/avatar-3.png -------------------------------------------------------------------------------- /public/images/avatar-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdalmamunit427/build-portfolio-website-react-css/10a70e2343da1c13a15e53d98c094ca98487f85c/public/images/avatar-4.png -------------------------------------------------------------------------------- /public/images/blog-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdalmamunit427/build-portfolio-website-react-css/10a70e2343da1c13a15e53d98c094ca98487f85c/public/images/blog-1.jpg -------------------------------------------------------------------------------- /public/images/blog-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdalmamunit427/build-portfolio-website-react-css/10a70e2343da1c13a15e53d98c094ca98487f85c/public/images/blog-2.jpg -------------------------------------------------------------------------------- /public/images/blog-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdalmamunit427/build-portfolio-website-react-css/10a70e2343da1c13a15e53d98c094ca98487f85c/public/images/blog-3.jpg -------------------------------------------------------------------------------- /public/images/blog-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdalmamunit427/build-portfolio-website-react-css/10a70e2343da1c13a15e53d98c094ca98487f85c/public/images/blog-4.jpg -------------------------------------------------------------------------------- /public/images/blog-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdalmamunit427/build-portfolio-website-react-css/10a70e2343da1c13a15e53d98c094ca98487f85c/public/images/blog-5.jpg -------------------------------------------------------------------------------- /public/images/blog-6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdalmamunit427/build-portfolio-website-react-css/10a70e2343da1c13a15e53d98c094ca98487f85c/public/images/blog-6.jpg -------------------------------------------------------------------------------- /public/images/icon-app.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /public/images/icon-design.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /public/images/icon-dev.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /public/images/icon-photo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /public/images/icon-quote.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /public/images/logo-1-color.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdalmamunit427/build-portfolio-website-react-css/10a70e2343da1c13a15e53d98c094ca98487f85c/public/images/logo-1-color.png -------------------------------------------------------------------------------- /public/images/logo-2-color.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdalmamunit427/build-portfolio-website-react-css/10a70e2343da1c13a15e53d98c094ca98487f85c/public/images/logo-2-color.png -------------------------------------------------------------------------------- /public/images/logo-3-color.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdalmamunit427/build-portfolio-website-react-css/10a70e2343da1c13a15e53d98c094ca98487f85c/public/images/logo-3-color.png -------------------------------------------------------------------------------- /public/images/logo-4-color.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdalmamunit427/build-portfolio-website-react-css/10a70e2343da1c13a15e53d98c094ca98487f85c/public/images/logo-4-color.png -------------------------------------------------------------------------------- /public/images/logo-5-color.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdalmamunit427/build-portfolio-website-react-css/10a70e2343da1c13a15e53d98c094ca98487f85c/public/images/logo-5-color.png -------------------------------------------------------------------------------- /public/images/logo-6-color.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdalmamunit427/build-portfolio-website-react-css/10a70e2343da1c13a15e53d98c094ca98487f85c/public/images/logo-6-color.png -------------------------------------------------------------------------------- /public/images/logo.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdalmamunit427/build-portfolio-website-react-css/10a70e2343da1c13a15e53d98c094ca98487f85c/public/images/logo.ico -------------------------------------------------------------------------------- /public/images/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /public/images/mamun.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdalmamunit427/build-portfolio-website-react-css/10a70e2343da1c13a15e53d98c094ca98487f85c/public/images/mamun.jpg -------------------------------------------------------------------------------- /public/images/my-avatar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdalmamunit427/build-portfolio-website-react-css/10a70e2343da1c13a15e53d98c094ca98487f85c/public/images/my-avatar.png -------------------------------------------------------------------------------- /public/images/project-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdalmamunit427/build-portfolio-website-react-css/10a70e2343da1c13a15e53d98c094ca98487f85c/public/images/project-1.jpg -------------------------------------------------------------------------------- /public/images/project-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdalmamunit427/build-portfolio-website-react-css/10a70e2343da1c13a15e53d98c094ca98487f85c/public/images/project-2.png -------------------------------------------------------------------------------- /public/images/project-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdalmamunit427/build-portfolio-website-react-css/10a70e2343da1c13a15e53d98c094ca98487f85c/public/images/project-3.jpg -------------------------------------------------------------------------------- /public/images/project-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdalmamunit427/build-portfolio-website-react-css/10a70e2343da1c13a15e53d98c094ca98487f85c/public/images/project-4.png -------------------------------------------------------------------------------- /public/images/project-5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdalmamunit427/build-portfolio-website-react-css/10a70e2343da1c13a15e53d98c094ca98487f85c/public/images/project-5.png -------------------------------------------------------------------------------- /public/images/project-6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdalmamunit427/build-portfolio-website-react-css/10a70e2343da1c13a15e53d98c094ca98487f85c/public/images/project-6.png -------------------------------------------------------------------------------- /public/images/project-7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdalmamunit427/build-portfolio-website-react-css/10a70e2343da1c13a15e53d98c094ca98487f85c/public/images/project-7.png -------------------------------------------------------------------------------- /public/images/project-8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdalmamunit427/build-portfolio-website-react-css/10a70e2343da1c13a15e53d98c094ca98487f85c/public/images/project-8.jpg -------------------------------------------------------------------------------- /public/images/project-9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdalmamunit427/build-portfolio-website-react-css/10a70e2343da1c13a15e53d98c094ca98487f85c/public/images/project-9.png -------------------------------------------------------------------------------- /public/images/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/projects.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "id": 1, 4 | "title": "Finance", 5 | "category": "Web development", 6 | "image": "images/project-1.jpg" 7 | }, 8 | { 9 | "id": 2, 10 | "title": "Orizon", 11 | "category": "Web development", 12 | "image": "images/project-2.png" 13 | }, 14 | { 15 | "id": 3, 16 | "title": "Fundo", 17 | "category": "Web design", 18 | "image": "images/project-3.jpg" 19 | }, 20 | { 21 | "id": 4, 22 | "title": "Brawlhalla", 23 | "category": "Applications", 24 | "image": "images/project-3.jpg" 25 | }, 26 | { 27 | "id": 5, 28 | "title": "DSM.", 29 | "category": "Web design", 30 | "image": "images/project-5.png" 31 | }, 32 | { 33 | "id": 6, 34 | "title": "MetaSpark", 35 | "category": "Web design", 36 | "image": "images/project-6.png" 37 | }, 38 | { 39 | "id": 7, 40 | "title": "Summary", 41 | "category": "Web development", 42 | "image": "images/project-7.png" 43 | }, 44 | { 45 | "id": 8, 46 | "title": "Task Manager", 47 | "category": "Applications", 48 | "image": "images/project-8.jpg" 49 | }, 50 | { 51 | "id": 9, 52 | "title": "Arrival", 53 | "category": "Web development", 54 | "image": "images/project-9.png" 55 | } 56 | ] 57 | -------------------------------------------------------------------------------- /public/services.json: -------------------------------------------------------------------------------- 1 | 2 | [ 3 | { 4 | "title": "Web design", 5 | "icon": "/images/icon-design.svg", 6 | "description": "The most modern and high-quality design made at a professional level." 7 | }, 8 | { 9 | "title": "Web development", 10 | "icon": "/images/icon-dev.svg", 11 | "description": "High-quality development of sites at the professional level." 12 | }, 13 | { 14 | "title": "Mobile apps", 15 | "icon": "/images/icon-app.svg", 16 | "description": "Professional development of applications for iOS and Android." 17 | }, 18 | { 19 | "title": "Photography", 20 | "icon": "/images/icon-photo.svg", 21 | "description": "I make high-quality photos of any category at a professional level." 22 | } 23 | ] 24 | -------------------------------------------------------------------------------- /public/testimonials.json: -------------------------------------------------------------------------------- 1 | 2 | [ 3 | { 4 | "name": "Daniel Lewis", 5 | "avatar": "/images/avatar-1.png", 6 | "testimonial": "Richard was hired to create a corporate identity. We were very pleased with the work done. She has a lot of experience and is very concerned about the needs of the client." 7 | }, 8 | { 9 | "name": "Jessica Miller", 10 | "avatar": "/images/avatar-2.png", 11 | "testimonial": "Richard was hired to create a corporate identity. We were very pleased with the work done. She has a lot of experience and is very concerned about the needs of the client." 12 | }, 13 | { 14 | "name": "Emily Evans", 15 | "avatar": "/images/avatar-3.png", 16 | "testimonial": "Richard was hired to create a corporate identity. We were very pleased with the work done. She has a lot of experience and is very concerned about the needs of the client." 17 | }, 18 | { 19 | "name": "Henry William", 20 | "avatar": "/images/avatar-4.png", 21 | "testimonial": "Richard was hired to create a corporate identity. We were very pleased with the work done. She has a lot of experience and is very concerned about the needs of the client." 22 | } 23 | ] 24 | -------------------------------------------------------------------------------- /public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | 2 | 3 | :root { 4 | 5 | /** 6 | * colors 7 | */ 8 | 9 | /* gradient */ 10 | 11 | --bg-gradient-onyx: linear-gradient( 12 | to bottom right, 13 | hsl(240, 1%, 25%) 3%, 14 | hsl(0, 0%, 19%) 97% 15 | ); 16 | --bg-gradient-jet: linear-gradient( 17 | to bottom right, 18 | hsla(240, 1%, 18%, 0.251) 0%, 19 | hsla(240, 2%, 11%, 0) 100% 20 | ), hsl(240, 2%, 13%); 21 | --bg-gradient-yellow-1: linear-gradient( 22 | to bottom right, 23 | hsl(45, 100%, 71%) 0%, 24 | hsla(36, 100%, 69%, 0) 50% 25 | ); 26 | --bg-gradient-yellow-2: linear-gradient( 27 | 135deg, 28 | hsla(45, 100%, 71%, 0.251) 0%, 29 | hsla(35, 100%, 68%, 0) 59.86% 30 | ), hsl(240, 2%, 13%); 31 | --border-gradient-onyx: linear-gradient( 32 | to bottom right, 33 | hsl(0, 0%, 25%) 0%, 34 | hsla(0, 0%, 25%, 0) 50% 35 | ); 36 | --text-gradient-yellow: linear-gradient( 37 | to right, 38 | rgb(56 189 248) 39 | ); 40 | 41 | /* solid */ 42 | 43 | --jet: hsl(0, 0%, 22%); 44 | --onyx: hsl(240, 1%, 17%); 45 | --eerie-black-1: hsl(240, 2%, 13%); 46 | /* --eerie-black-2: hsl(240, 2%, 12%); */ 47 | --eerie-black-2: rgb(11 17 32); 48 | /* --smoky-black: hsl(0, 0%, 7%); */ 49 | --smoky-black: rgb(15 23 42); 50 | --white-1: hsl(0, 0%, 100%); 51 | --white-2: hsl(0, 0%, 98%); 52 | /* --orange-yellow-crayola: hsl(45, 100%, 72%); */ 53 | --orange-yellow-crayola: rgb(56 189 248); 54 | --vegas-gold: hsl(45, 54%, 58%); 55 | --light-gray: hsl(0, 0%, 84%); 56 | --light-gray-70: hsla(0, 0%, 84%, 0.7); 57 | --bittersweet-shimmer: hsl(15, 100%, 50%); 58 | 59 | /** 60 | * typography 61 | */ 62 | 63 | /* font-family */ 64 | --ff-poppins: 'Poppins', sans-serif; 65 | 66 | /* font-size */ 67 | --fs-1: 24px; 68 | --fs-2: 18px; 69 | --fs-3: 17px; 70 | --fs-4: 16px; 71 | --fs-5: 15px; 72 | --fs-6: 14px; 73 | --fs-7: 13px; 74 | --fs-8: 11px; 75 | 76 | /* font-weight */ 77 | --fw-300: 300; 78 | --fw-400: 400; 79 | --fw-500: 500; 80 | --fw-600: 600; 81 | 82 | /** 83 | * shadow 84 | */ 85 | 86 | --shadow-1: -4px 8px 24px hsla(0, 0%, 0%, 0.25); 87 | --shadow-2: 0 16px 30px hsla(0, 0%, 0%, 0.25); 88 | --shadow-3: 0 16px 40px hsla(0, 0%, 0%, 0.25); 89 | --shadow-4: 0 25px 50px hsla(0, 0%, 0%, 0.15); 90 | --shadow-5: 0 24px 80px hsla(0, 0%, 0%, 0.25); 91 | 92 | /** 93 | * transition 94 | */ 95 | 96 | --transition-1: 0.25s ease; 97 | --transition-2: 0.5s ease-in-out; 98 | 99 | } 100 | 101 | 102 | 103 | 104 | 105 | /*-----------------------------------*\ 106 | #RESET 107 | \*-----------------------------------*/ 108 | 109 | *, *::before, *::after { 110 | margin: 0; 111 | padding: 0; 112 | box-sizing: border-box; 113 | } 114 | 115 | a { text-decoration: none; } 116 | 117 | li { list-style: none; } 118 | 119 | img, ion-icon, a, button, time, span { display: block; } 120 | 121 | button { 122 | font: inherit; 123 | background: none; 124 | border: none; 125 | text-align: left; 126 | cursor: pointer; 127 | } 128 | 129 | input, textarea { 130 | display: block; 131 | width: 100%; 132 | background: none; 133 | font: inherit; 134 | } 135 | 136 | ::selection { 137 | background: var(--orange-yellow-crayola); 138 | color: var(--smoky-black); 139 | } 140 | 141 | :focus { outline-color: var(--orange-yellow-crayola); } 142 | 143 | html { font-family: var(--ff-poppins); } 144 | 145 | body { background: var(--smoky-black); } 146 | 147 | 148 | 149 | 150 | 151 | /*-----------------------------------*\ 152 | #REUSED STYLE 153 | \*-----------------------------------*/ 154 | 155 | .sidebar, 156 | article { 157 | background: var(--eerie-black-2); 158 | /* border: 1px solid var(--jet); */ 159 | border-radius: 20px; 160 | padding: 15px; 161 | box-shadow: var(--shadow-1); 162 | z-index: 1; 163 | } 164 | 165 | section{ 166 | background: var(--eerie-black-2); 167 | /* border: 1px solid var(--jet); */ 168 | padding: 15px; 169 | border-radius: 20px; 170 | } 171 | 172 | .separator { 173 | width: 100%; 174 | height: 1px; 175 | background: var(--jet); 176 | margin: 16px 0; 177 | } 178 | 179 | .icon-box { 180 | position: relative; 181 | background: var(--border-gradient-onyx); 182 | width: 30px; 183 | height: 30px; 184 | border-radius: 8px; 185 | display: flex; 186 | justify-content: center; 187 | align-items: center; 188 | font-size: 16px; 189 | color: var(--orange-yellow-crayola); 190 | box-shadow: var(--shadow-1); 191 | z-index: 1; 192 | } 193 | 194 | .icon-box::before { 195 | content: ""; 196 | position: absolute; 197 | inset: 1px; 198 | background: var(--eerie-black-1); 199 | border-radius: inherit; 200 | z-index: -1; 201 | } 202 | 203 | .icon-box ion-icon { --ionicon-stroke-width: 35px; } 204 | 205 | article { display: none; } 206 | 207 | article.active { 208 | display: block; 209 | animation: fade 0.5s ease backwards; 210 | } 211 | 212 | @keyframes fade { 213 | 0% { opacity: 0; } 214 | 100% { opacity: 1; } 215 | } 216 | 217 | .h2, 218 | .h3, 219 | .h4, 220 | .h5 { 221 | color: var(--white-2); 222 | text-transform: capitalize; 223 | } 224 | 225 | .h2 { font-size: var(--fs-1); } 226 | 227 | .h3 { font-size: var(--fs-2); } 228 | 229 | .h4 { font-size: var(--fs-4); } 230 | 231 | .h5 { 232 | font-size: var(--fs-7); 233 | font-weight: var(--fw-500); 234 | } 235 | 236 | .article-title { 237 | position: relative; 238 | padding-bottom: 7px; 239 | } 240 | 241 | .article-title::after { 242 | content: ""; 243 | position: absolute; 244 | bottom: 0; 245 | left: 0; 246 | width: 30px; 247 | height: 3px; 248 | background: var(--text-gradient-yellow); 249 | border-radius: 3px; 250 | } 251 | 252 | .has-scrollbar::-webkit-scrollbar { 253 | width: 5px; /* for vertical scrollbar */ 254 | height: 5px; /* for horizontal scrollbar */ 255 | } 256 | 257 | .has-scrollbar::-webkit-scrollbar-track { 258 | background: var(--onyx); 259 | border-radius: 5px; 260 | } 261 | 262 | .has-scrollbar::-webkit-scrollbar-thumb { 263 | background: var(--orange-yellow-crayola); 264 | border-radius: 5px; 265 | } 266 | 267 | .has-scrollbar::-webkit-scrollbar-button { width: 20px; } 268 | 269 | .content-card { 270 | position: relative; 271 | background: var(--border-gradient-onyx); 272 | padding: 15px; 273 | padding-top: 45px; 274 | border-radius: 14px; 275 | box-shadow: var(--shadow-2); 276 | cursor: pointer; 277 | z-index: 1; 278 | } 279 | 280 | .content-card::before { 281 | content: ""; 282 | position: absolute; 283 | inset: 1px; 284 | background: var(--bg-gradient-jet); 285 | border-radius: inherit; 286 | z-index: -1; 287 | } 288 | 289 | 290 | 291 | 292 | 293 | /*-----------------------------------*\ 294 | #MAIN 295 | \*-----------------------------------*/ 296 | 297 | main { 298 | margin: 15px 12px; 299 | margin-bottom: 75px; 300 | min-width: 259px; 301 | } 302 | 303 | 304 | /*-----------------------------------*\ 305 | #SIDEBAR 306 | \*-----------------------------------*/ 307 | 308 | .sidebar { 309 | margin-bottom: 15px; 310 | max-height: 112px; 311 | overflow: hidden; 312 | transition: var(--transition-2); 313 | } 314 | 315 | .sidebar.active { max-height: 405px; } 316 | 317 | .sidebar-info { 318 | position: relative; 319 | display: flex; 320 | justify-content: flex-start; 321 | align-items: center; 322 | gap: 15px; 323 | } 324 | 325 | .avatar-box { 326 | background: var(--bg-gradient-onyx); 327 | border-radius: 20px; 328 | } 329 | 330 | .avatar-box img{ 331 | border-radius: 20px; 332 | } 333 | .info-content .name { 334 | color: var(--white-2); 335 | font-size: var(--fs-3); 336 | font-weight: var(--fw-500); 337 | letter-spacing: -0.25px; 338 | margin-bottom: 10px; 339 | } 340 | 341 | .info-content .title { 342 | color: var(--white-1); 343 | background: var(--onyx); 344 | font-size: var(--fs-8); 345 | font-weight: var(--fw-300); 346 | width: max-content; 347 | padding: 3px 12px; 348 | border-radius: 8px; 349 | } 350 | 351 | .info_more-btn { 352 | position: absolute; 353 | top: -15px; 354 | right: -15px; 355 | border-radius: 0 15px; 356 | font-size: 13px; 357 | color: var(--orange-yellow-crayola); 358 | background: var(--border-gradient-onyx); 359 | padding: 10px; 360 | box-shadow: var(--shadow-2); 361 | transition: var(--transition-1); 362 | z-index: 1; 363 | } 364 | 365 | .info_more-btn::before { 366 | content: ""; 367 | position: absolute; 368 | inset: 1px; 369 | border-radius: inherit; 370 | background: var(--bg-gradient-jet); 371 | transition: var(--transition-1); 372 | z-index: -1; 373 | } 374 | 375 | .info_more-btn:hover, 376 | .info_more-btn:focus { background: var(--bg-gradient-yellow-1); } 377 | 378 | .info_more-btn:hover::before, 379 | .info_more-btn:focus::before { background: var(--bg-gradient-yellow-2); } 380 | 381 | .info_more-btn span { display: none; } 382 | 383 | .sidebar-info_more { 384 | opacity: 0; 385 | visibility: hidden; 386 | transition: var(--transition-2); 387 | } 388 | 389 | .sidebar.active .sidebar-info_more { 390 | opacity: 1; 391 | visibility: visible; 392 | } 393 | 394 | .contacts-list { 395 | display: grid; 396 | grid-template-columns: 1fr; 397 | gap: 16px; 398 | } 399 | 400 | .contact-item { 401 | min-width: 100%; 402 | display: flex; 403 | align-items: center; 404 | gap: 16px; 405 | } 406 | 407 | .contact-info { 408 | max-width: calc(100% - 46px); 409 | width: calc(100% - 46px); 410 | } 411 | 412 | .contact-title { 413 | color: var(--light-gray-70); 414 | font-size: var(--fs-8); 415 | text-transform: uppercase; 416 | margin-bottom: 2px; 417 | } 418 | 419 | .contact-info :is(.contact-link, time, address) { 420 | color: var(--white-2); 421 | font-size: var(--fs-7); 422 | } 423 | 424 | .contact-info address { font-style: normal; } 425 | 426 | .social-list { 427 | display: flex; 428 | justify-content: flex-start; 429 | align-items: center; 430 | gap: 15px; 431 | padding-bottom: 4px; 432 | padding-left: 7px; 433 | } 434 | 435 | .social-item .social-link { 436 | color: var(--light-gray-70); 437 | font-size: 18px; 438 | } 439 | 440 | 441 | .social-item .social-link:hover { color: var(--light-gray); } 442 | 443 | 444 | 445 | 446 | 447 | /*-----------------------------------*\ 448 | #NAVBAR 449 | \*-----------------------------------*/ 450 | 451 | .navbar { 452 | position: fixed; 453 | bottom: 0; 454 | left: 0; 455 | width: 100%; 456 | background: hsla(240, 1%, 17%, 0.75); 457 | backdrop-filter: blur(10px); 458 | -webkit-backdrop-filter: blur(10px); 459 | border: 1px solid var(--jet); 460 | border-radius: 12px 12px 0 0; 461 | box-shadow: var(--shadow-2); 462 | z-index: 5; 463 | } 464 | 465 | .navbar-list { 466 | display: flex; 467 | flex-wrap: wrap; 468 | justify-content: center; 469 | align-items: center; 470 | padding: 0 10px; 471 | } 472 | 473 | .navbar-link { 474 | color: var(--light-gray); 475 | font-size: var(--fs-8); 476 | padding: 20px 7px; 477 | transition: color var(--transition-1); 478 | } 479 | 480 | .navbar-link:hover, 481 | .navbar-link:focus { color: var(--light-gray-70); } 482 | 483 | .navbar-link.active { color: var(--orange-yellow-crayola); } 484 | 485 | 486 | 487 | 488 | 489 | /*-----------------------------------*\ 490 | #ABOUT 491 | \*-----------------------------------*/ 492 | 493 | .about .article-title { margin-bottom: 15px; } 494 | 495 | .about-text { 496 | color: var(--light-gray); 497 | font-size: var(--fs-6); 498 | font-weight: var(--fw-300); 499 | line-height: 1.6; 500 | } 501 | 502 | .about-text p { margin-bottom: 15px; } 503 | 504 | 505 | 506 | /** 507 | * #service 508 | */ 509 | 510 | .service { margin-bottom: 35px; } 511 | 512 | .service-title { margin-bottom: 20px; } 513 | 514 | .service-list { 515 | display: grid; 516 | grid-template-columns: 1fr; 517 | gap: 20px; 518 | } 519 | 520 | .service-item { 521 | position: relative; 522 | background: var(--border-gradient-onyx); 523 | padding: 20px; 524 | border-radius: 14px; 525 | box-shadow: var(--shadow-2); 526 | z-index: 1; 527 | } 528 | 529 | .service-item::before { 530 | content: ""; 531 | position: absolute; 532 | inset: 1px; 533 | background: var(--bg-gradient-jet); 534 | border-radius: inherit; 535 | z-index: -1; 536 | } 537 | 538 | .service-icon-box { margin-bottom: 10px; } 539 | 540 | .service-icon-box img { margin: auto; } 541 | 542 | .service-content-box { text-align: center; } 543 | 544 | .service-item-title { margin-bottom: 7px; } 545 | 546 | .service-item-text { 547 | color: var(--light-gray); 548 | font-size: var(--fs-6); 549 | font-weight: var(--fw-3); 550 | line-height: 1.6; 551 | } 552 | 553 | 554 | /** 555 | * #testimonials 556 | */ 557 | 558 | .testimonials { margin-bottom: 30px; } 559 | 560 | .testimonials-title { margin-bottom: 20px; } 561 | 562 | .testimonials-list { 563 | display: flex; 564 | justify-content: flex-start; 565 | align-items: flex-start; 566 | gap: 15px; 567 | margin: 0 -15px; 568 | padding: 25px 15px; 569 | padding-bottom: 35px; 570 | overflow-x: auto; 571 | scroll-behavior: smooth; 572 | overscroll-behavior-inline: contain; 573 | scroll-snap-type: inline mandatory; 574 | } 575 | 576 | .testimonials-item { 577 | min-width: 100%; 578 | scroll-snap-align: center; 579 | } 580 | 581 | .testimonials-avatar-box { 582 | position: absolute; 583 | top: 0; 584 | left: 0; 585 | transform: translate(15px, -25px); 586 | background: var(--bg-gradient-onyx); 587 | border-radius: 14px; 588 | box-shadow: var(--shadow-1); 589 | } 590 | 591 | .testimonials-item-title { margin-bottom: 7px; } 592 | 593 | .testimonials-text { 594 | color: var(--light-gray); 595 | font-size: var(--fs-6); 596 | font-weight: var(--fw-300); 597 | line-height: 1.6; 598 | display: -webkit-box; 599 | line-clamp: 4; 600 | -webkit-line-clamp: 4; 601 | -webkit-box-orient: vertical; 602 | overflow: hidden; 603 | } 604 | 605 | 606 | /** 607 | * #testimonials-modal 608 | */ 609 | 610 | 611 | 612 | 613 | .overlay { 614 | position: fixed; 615 | top: 0; 616 | left: 0; 617 | width: 100%; 618 | height: 100vh; 619 | background: hsl(0, 0%, 5%); 620 | opacity: 0; 621 | visibility: hidden; 622 | pointer-events: none; 623 | z-index: 1; 624 | transition: var(--transition-1); 625 | } 626 | 627 | .overlay.active { 628 | opacity: 0.8; 629 | visibility: visible; 630 | pointer-events: all; 631 | } 632 | 633 | 634 | 635 | /** 636 | * #clients 637 | */ 638 | 639 | .clients { margin-bottom: 15px; } 640 | 641 | .clients-list { 642 | display: flex; 643 | justify-content: flex-start; 644 | align-items: flex-start; 645 | gap: 15px; 646 | margin: 0 -15px; 647 | padding: 25px; 648 | padding-bottom: 25px; 649 | overflow-x: auto; 650 | scroll-behavior: smooth; 651 | overscroll-behavior-inline: contain; 652 | scroll-snap-type: inline mandatory; 653 | scroll-padding-inline: 25px; 654 | } 655 | 656 | .clients-item { 657 | min-width: 50%; 658 | scroll-snap-align: start; 659 | } 660 | 661 | .clients-item img { 662 | width: 100%; 663 | filter: grayscale(1); 664 | transition: var(--transition-1); 665 | } 666 | 667 | .clients-item img:hover { filter: grayscale(0); } 668 | 669 | 670 | 671 | 672 | 673 | /*-----------------------------------*\ 674 | #RESUME 675 | \*-----------------------------------*/ 676 | 677 | .article-title { margin-bottom: 30px; } 678 | 679 | 680 | /** 681 | * education and experience 682 | */ 683 | 684 | .timeline { margin-bottom: 30px; } 685 | 686 | .timeline .title-wrapper { 687 | display: flex; 688 | align-items: center; 689 | gap: 15px; 690 | margin-bottom: 25px; 691 | } 692 | 693 | .timeline-list { 694 | font-size: var(--fs-6); 695 | margin-left: 45px; 696 | } 697 | 698 | .timeline-item { position: relative; } 699 | 700 | .timeline-item:not(:last-child) { margin-bottom: 20px; } 701 | 702 | .timeline-item-title { 703 | font-size: var(--fs-6); 704 | line-height: 1.3; 705 | margin-bottom: 7px; 706 | } 707 | 708 | .timeline-list span { 709 | color: var(--vegas-gold); 710 | font-weight: var(--fw-400); 711 | line-height: 1.6; 712 | } 713 | 714 | .timeline-item:not(:last-child)::before { 715 | content: ""; 716 | position: absolute; 717 | top: -25px; 718 | left: -30px; 719 | width: 1px; 720 | height: calc(100% + 50px); 721 | background: var(--jet); 722 | } 723 | 724 | .timeline-item::after { 725 | content: ""; 726 | position: absolute; 727 | top: 5px; 728 | left: -33px; 729 | height: 6px; 730 | width: 6px; 731 | background: var(--text-gradient-yellow); 732 | border-radius: 50%; 733 | box-shadow: 0 0 0 4px var(--jet); 734 | } 735 | 736 | .timeline-text { 737 | color: var(--light-gray); 738 | font-weight: var(--fw-300); 739 | line-height: 1.6; 740 | } 741 | 742 | 743 | /** 744 | * skills 745 | */ 746 | 747 | .skills-title { margin-bottom: 20px; } 748 | 749 | .skills-list { padding: 20px; } 750 | 751 | 752 | .skills-item:not(:last-child) { margin-bottom: 15px; } 753 | 754 | .skill .title-wrapper { 755 | display: flex; 756 | align-items: center; 757 | gap: 5px; 758 | margin-bottom: 8px; 759 | } 760 | 761 | .skill .title-wrapper data { 762 | color: var(--light-gray); 763 | font-size: var(--fs-7); 764 | font-weight: var(--fw-300); 765 | } 766 | 767 | .skill-progress-bg { 768 | background: var(--jet); 769 | width: 100%; 770 | height: 8px; 771 | border-radius: 10px; 772 | } 773 | 774 | .skill-progress-fill { 775 | background: rebeccapurple; 776 | height: 100%; 777 | border-radius: inherit; 778 | } 779 | 780 | 781 | 782 | 783 | 784 | /*-----------------------------------*\ 785 | #PORTFOLIO 786 | \*-----------------------------------*/ 787 | 788 | .filter-list { display: none; } 789 | 790 | .filter-select-box { 791 | position: relative; 792 | margin-bottom: 25px; 793 | } 794 | 795 | .filter-select { 796 | background: var(--eerie-black-2); 797 | color: var(--light-gray); 798 | display: flex; 799 | justify-content: space-between; 800 | align-items: center; 801 | width: 100%; 802 | padding: 12px 16px; 803 | border: 1px solid var(--jet); 804 | border-radius: 14px; 805 | font-size: var(--fs-6); 806 | font-weight: var(--fw-300); 807 | } 808 | 809 | .filter-select.active .select-icon { transform: rotate(0.5turn); } 810 | 811 | .select-list { 812 | background: var(--eerie-black-2); 813 | position: absolute; 814 | top: calc(100% + 6px); 815 | width: 100%; 816 | padding: 6px; 817 | border: 1px solid var(--jet); 818 | border-radius: 14px; 819 | z-index: 2; 820 | opacity: 0; 821 | visibility: hidden; 822 | pointer-events: none; 823 | transition: 0.15s ease-in-out; 824 | } 825 | 826 | .filter-select.active + .select-list { 827 | opacity: 1; 828 | visibility: visible; 829 | pointer-events: all; 830 | } 831 | 832 | .select-item button { 833 | background: var(--eerie-black-2); 834 | color: var(--light-gray); 835 | font-size: var(--fs-6); 836 | font-weight: var(--fw-300); 837 | text-transform: capitalize; 838 | width: 100%; 839 | padding: 8px 10px; 840 | border-radius: 8px; 841 | } 842 | 843 | .select-item button:hover { --eerie-black-2: hsl(240, 2%, 20%); } 844 | 845 | .project-list { 846 | display: grid; 847 | grid-template-columns: 1fr; 848 | gap: 30px; 849 | margin-bottom: 10px; 850 | } 851 | 852 | .project-item { display: none; } 853 | 854 | .project-item.active { 855 | display: block; 856 | animation: scaleUp 0.25s ease forwards; 857 | } 858 | 859 | @keyframes scaleUp { 860 | 0% { transform: scale(0.5); } 861 | 100% { transform: scale(1); } 862 | } 863 | 864 | .project-item > a { width: 100%; } 865 | 866 | .project-img { 867 | position: relative; 868 | width: 100%; 869 | height: 200px; 870 | border-radius: 16px; 871 | overflow: hidden; 872 | margin-bottom: 15px; 873 | } 874 | 875 | .project-img::before { 876 | content: ""; 877 | position: absolute; 878 | top: 0; 879 | left: 0; 880 | width: 100%; 881 | height: 100%; 882 | background: transparent; 883 | z-index: 1; 884 | transition: var(--transition-1); 885 | } 886 | 887 | .project-item > a:hover .project-img::before { background: hsla(0, 0%, 0%, 0.5); } 888 | 889 | .project-item-icon-box { 890 | --scale: 0.8; 891 | 892 | background: var(--jet); 893 | color: var(--orange-yellow-crayola); 894 | position: absolute; 895 | top: 50%; 896 | left: 50%; 897 | transform: translate(-50%, -50%) scale(var(--scale)); 898 | font-size: 20px; 899 | padding: 18px; 900 | border-radius: 12px; 901 | opacity: 0; 902 | z-index: 1; 903 | transition: var(--transition-1); 904 | } 905 | 906 | .project-item > a:hover .project-item-icon-box { 907 | --scale: 1; 908 | opacity: 1; 909 | } 910 | 911 | .project-item-icon-box ion-icon { --ionicon-stroke-width: 50px; } 912 | 913 | .project-img img { 914 | width: 100%; 915 | height: 100%; 916 | object-fit: cover; 917 | transition: var(--transition-1); 918 | } 919 | 920 | .project-item > a:hover img { transform: scale(1.1); } 921 | 922 | .project-title, 923 | .project-category { margin-left: 10px; } 924 | 925 | .project-title { 926 | color: var(--white-2); 927 | font-size: var(--fs-5); 928 | font-weight: var(--fw-400); 929 | text-transform: capitalize; 930 | line-height: 1.3; 931 | } 932 | 933 | .project-category { 934 | color: var(--light-gray-70); 935 | font-size: var(--fs-6); 936 | font-weight: var(--fw-300); 937 | } 938 | 939 | 940 | 941 | 942 | 943 | /*-----------------------------------*\ 944 | #BLOG 945 | \*-----------------------------------*/ 946 | 947 | .blog-posts { margin-bottom: 10px; } 948 | 949 | .blog-posts-list { 950 | display: grid; 951 | grid-template-columns: 1fr; 952 | gap: 20px; 953 | } 954 | 955 | .blog-post-item > a { 956 | position: relative; 957 | background: var(--border-gradient-onyx); 958 | height: 100%; 959 | box-shadow: var(--shadow-4); 960 | border-radius: 16px; 961 | z-index: 1; 962 | } 963 | 964 | .blog-post-item > a::before { 965 | content: ""; 966 | position: absolute; 967 | inset: 1px; 968 | border-radius: inherit; 969 | background: var(--eerie-black-1); 970 | z-index: -1; 971 | } 972 | 973 | .blog-banner-box { 974 | width: 100%; 975 | height: 200px; 976 | border-radius: 12px; 977 | overflow: hidden; 978 | } 979 | 980 | .blog-banner-box img { 981 | width: 100%; 982 | height: 100%; 983 | object-fit: cover; 984 | transition: var(--transition-1); 985 | } 986 | 987 | .blog-post-item > a:hover .blog-banner-box img { transform: scale(1.1); } 988 | 989 | .blog-content { padding: 15px; } 990 | 991 | .blog-meta { 992 | display: flex; 993 | justify-content: flex-start; 994 | align-items: center; 995 | gap: 7px; 996 | margin-bottom: 10px; 997 | } 998 | 999 | .blog-meta :is(.blog-category, time) { 1000 | color: var(--light-gray-70); 1001 | font-size: var(--fs-6); 1002 | font-weight: var(--fw-300); 1003 | } 1004 | 1005 | .blog-meta .dot { 1006 | background: var(--light-gray-70); 1007 | width: 4px; 1008 | height: 4px; 1009 | border-radius: 4px; 1010 | } 1011 | 1012 | .blog-item-title { 1013 | margin-bottom: 10px; 1014 | line-height: 1.3; 1015 | transition: var(--transition-1); 1016 | } 1017 | 1018 | .blog-post-item > a:hover .blog-item-title { color: var(--orange-yellow-crayola); } 1019 | 1020 | .blog-text { 1021 | color: var(--light-gray); 1022 | font-size: var(--fs-6); 1023 | font-weight: var(--fw-300); 1024 | line-height: 1.6; 1025 | } 1026 | 1027 | 1028 | 1029 | 1030 | 1031 | /*-----------------------------------*\ 1032 | #CONTACT 1033 | \*-----------------------------------*/ 1034 | 1035 | .mapbox { 1036 | position: relative; 1037 | height: 250px; 1038 | width: 100%; 1039 | border-radius: 16px; 1040 | margin-bottom: 30px; 1041 | border: 1px solid var(--jet); 1042 | overflow: hidden; 1043 | } 1044 | 1045 | .mapbox figure { height: 100%; } 1046 | 1047 | .mapbox iframe { 1048 | width: 100%; 1049 | height: 100%; 1050 | border: none; 1051 | filter: grayscale(1) invert(1); 1052 | } 1053 | 1054 | .contact-form { margin-bottom: 10px; } 1055 | 1056 | .form-title { margin-bottom: 20px; } 1057 | 1058 | .input-wrapper { 1059 | display: grid; 1060 | grid-template-columns: 1fr; 1061 | gap: 25px; 1062 | margin-bottom: 25px; 1063 | } 1064 | 1065 | .form-input { 1066 | color: var(--white-2); 1067 | font-size: var(--fs-6); 1068 | font-weight: var(--fw-400); 1069 | padding: 13px 20px; 1070 | border: 1px solid var(--jet); 1071 | border-radius: 14px; 1072 | outline: none; 1073 | } 1074 | 1075 | .form-input::placeholder { font-weight: var(--fw-500); } 1076 | 1077 | .form-input:focus { border-color: var(--orange-yellow-crayola); } 1078 | 1079 | textarea.form-input { 1080 | min-height: 100px; 1081 | height: 120px; 1082 | max-height: 200px; 1083 | resize: vertical; 1084 | margin-bottom: 25px; 1085 | } 1086 | 1087 | textarea.form-input::-webkit-resizer { display: none; } 1088 | 1089 | .form-input:focus:invalid { border-color: var(--bittersweet-shimmer); } 1090 | 1091 | .form-btn { 1092 | position: relative; 1093 | width: 100%; 1094 | background: var(--border-gradient-onyx); 1095 | color: var(--orange-yellow-crayola); 1096 | display: flex; 1097 | justify-content: center; 1098 | align-items: center; 1099 | gap: 10px; 1100 | padding: 13px 20px; 1101 | border-radius: 14px; 1102 | font-size: var(--fs-6); 1103 | text-transform: capitalize; 1104 | box-shadow: var(--shadow-3); 1105 | z-index: 1; 1106 | transition: var(--transition-1); 1107 | } 1108 | 1109 | .form-btn::before { 1110 | content: ""; 1111 | position: absolute; 1112 | inset: 1px; 1113 | background: var(--bg-gradient-jet); 1114 | border-radius: inherit; 1115 | z-index: -1; 1116 | transition: var(--transition-1); 1117 | } 1118 | 1119 | .form-btn ion-icon { font-size: 16px; } 1120 | 1121 | .form-btn:hover { background: var(--bg-gradient-yellow-1); } 1122 | 1123 | .form-btn:hover::before { background: var(--bg-gradient-yellow-2); } 1124 | 1125 | .form-btn:disabled { 1126 | opacity: 0.7; 1127 | cursor: not-allowed; 1128 | } 1129 | 1130 | .form-btn:disabled:hover { background: var(--border-gradient-onyx); } 1131 | 1132 | .form-btn:disabled:hover::before { background: var(--bg-gradient-jet); } 1133 | 1134 | 1135 | 1136 | 1137 | 1138 | /*-----------------------------------*\ 1139 | #RESPONSIVE 1140 | \*-----------------------------------*/ 1141 | 1142 | /** 1143 | * responsive larger than 450px screen 1144 | */ 1145 | 1146 | @media (min-width: 450px) { 1147 | 1148 | /** 1149 | * client 1150 | */ 1151 | 1152 | .clients-item { min-width: calc(33.33% - 10px); } 1153 | 1154 | 1155 | 1156 | /** 1157 | * #PORTFOLIO, BLOG 1158 | */ 1159 | 1160 | .project-img, 1161 | .blog-banner-box { height: auto; } 1162 | 1163 | } 1164 | 1165 | 1166 | 1167 | 1168 | 1169 | /** 1170 | * responsive larger than 580px screen 1171 | */ 1172 | 1173 | @media (min-width: 580px) { 1174 | 1175 | /** 1176 | * CUSTOM PROPERTY 1177 | */ 1178 | 1179 | :root { 1180 | 1181 | /** 1182 | * typography 1183 | */ 1184 | 1185 | --fs-1: 32px; 1186 | --fs-2: 24px; 1187 | --fs-3: 26px; 1188 | --fs-4: 18px; 1189 | --fs-6: 15px; 1190 | --fs-7: 15px; 1191 | --fs-8: 12px; 1192 | 1193 | } 1194 | 1195 | 1196 | 1197 | /** 1198 | * #REUSED STYLE 1199 | */ 1200 | 1201 | .sidebar, article { 1202 | width: 520px; 1203 | margin-inline: auto; 1204 | padding: 30px; 1205 | } 1206 | 1207 | .article-title { 1208 | font-weight: var(--fw-600); 1209 | padding-bottom: 15px; 1210 | } 1211 | 1212 | .article-title::after { 1213 | width: 40px; 1214 | height: 5px; 1215 | } 1216 | 1217 | .icon-box { 1218 | width: 48px; 1219 | height: 48px; 1220 | border-radius: 12px; 1221 | font-size: 18px; 1222 | } 1223 | 1224 | 1225 | 1226 | /** 1227 | * #MAIN 1228 | */ 1229 | 1230 | main { 1231 | margin-top: 60px; 1232 | margin-bottom: 100px; 1233 | } 1234 | 1235 | 1236 | 1237 | /** 1238 | * #SIDEBAR 1239 | */ 1240 | 1241 | .sidebar { 1242 | max-height: 180px; 1243 | margin-bottom: 30px; 1244 | } 1245 | 1246 | .sidebar.active { max-height: 584px; } 1247 | 1248 | .sidebar-info { gap: 25px; } 1249 | 1250 | .avatar-box { border-radius: 30px; } 1251 | 1252 | .avatar-box img { width: 120px; } 1253 | 1254 | .info-content .name { margin-bottom: 15px; } 1255 | 1256 | .info-content .title { padding: 5px 18px; } 1257 | 1258 | .info_more-btn { 1259 | top: -30px; 1260 | right: -30px; 1261 | padding: 10px 15px; 1262 | } 1263 | 1264 | .info_more-btn span { 1265 | display: block; 1266 | font-size: var(--fs-8); 1267 | } 1268 | 1269 | .info_more-btn ion-icon { display: none; } 1270 | 1271 | .separator { margin: 32px 0; } 1272 | 1273 | .contacts-list { gap: 20px; } 1274 | 1275 | .contact-info { 1276 | max-width: calc(100% - 64px); 1277 | width: calc(100% - 64px); 1278 | } 1279 | 1280 | 1281 | 1282 | /** 1283 | * #NAVBAR 1284 | */ 1285 | 1286 | .navbar { border-radius: 20px 20px 0 0; } 1287 | 1288 | .navbar-list { gap: 20px; } 1289 | 1290 | .navbar-link { --fs-8: 14px; } 1291 | 1292 | 1293 | 1294 | /** 1295 | * #ABOUT 1296 | */ 1297 | 1298 | .about .article-title { margin-bottom: 20px; } 1299 | 1300 | .about-text { margin-bottom: 40px; } 1301 | 1302 | /* service */ 1303 | 1304 | .service-item { 1305 | display: flex; 1306 | justify-content: flex-start; 1307 | align-items: flex-start; 1308 | gap: 18px; 1309 | padding: 30px; 1310 | } 1311 | 1312 | .service-icon-box { 1313 | margin-bottom: 0; 1314 | margin-top: 5px; 1315 | } 1316 | 1317 | .service-content-box { text-align: left; } 1318 | 1319 | /* testimonials */ 1320 | 1321 | .testimonials-title { margin-bottom: 25px; } 1322 | 1323 | .testimonials-list { 1324 | gap: 30px; 1325 | margin: 0 -30px; 1326 | padding: 30px; 1327 | padding-bottom: 35px; 1328 | } 1329 | 1330 | .content-card { 1331 | padding: 30px; 1332 | padding-top: 25px; 1333 | } 1334 | 1335 | .testimonials-avatar-box { 1336 | transform: translate(30px, -30px); 1337 | border-radius: 20px; 1338 | } 1339 | 1340 | .testimonials-avatar-box img { width: 80px; } 1341 | 1342 | .testimonials-item-title { 1343 | margin-bottom: 10px; 1344 | margin-left: 95px; 1345 | } 1346 | 1347 | .testimonials-text { 1348 | line-clamp: 2; 1349 | -webkit-line-clamp: 2; 1350 | } 1351 | 1352 | /* testimonials modal */ 1353 | 1354 | .modal-container { padding: 20px; } 1355 | 1356 | .testimonials-modal { 1357 | display: flex; 1358 | justify-content: flex-start; 1359 | align-items: stretch; 1360 | gap: 25px; 1361 | padding: 30px; 1362 | border-radius: 20px; 1363 | } 1364 | 1365 | .modal-img-wrapper { 1366 | display: flex; 1367 | flex-direction: column; 1368 | align-items: center; 1369 | } 1370 | 1371 | .modal-avatar-box { 1372 | border-radius: 18px; 1373 | margin-bottom: 0; 1374 | } 1375 | 1376 | .modal-avatar-box img { width: 65px; } 1377 | 1378 | .modal-img-wrapper > img { 1379 | display: block; 1380 | flex-grow: 1; 1381 | width: 35px; 1382 | } 1383 | 1384 | /* clients */ 1385 | 1386 | .clients-list { 1387 | gap: 50px; 1388 | margin: 0 -30px; 1389 | padding: 45px; 1390 | scroll-padding-inline: 45px; 1391 | } 1392 | 1393 | .clients-item { min-width: calc(33.33% - 35px); } 1394 | 1395 | 1396 | 1397 | /** 1398 | * #RESUME 1399 | */ 1400 | 1401 | .timeline-list { margin-left: 65px; } 1402 | 1403 | .timeline-item:not(:last-child)::before { left: -40px; } 1404 | 1405 | .timeline-item::after { 1406 | height: 8px; 1407 | width: 8px; 1408 | left: -43px; 1409 | } 1410 | 1411 | .skills-item:not(:last-child) { margin-bottom: 25px; } 1412 | 1413 | 1414 | 1415 | /** 1416 | * #PORTFOLIO, BLOG 1417 | */ 1418 | 1419 | .project-img, .blog-banner-box { border-radius: 16px; } 1420 | 1421 | .blog-posts-list { gap: 30px; } 1422 | 1423 | .blog-content { padding: 25px; } 1424 | 1425 | 1426 | 1427 | /** 1428 | * #CONTACT 1429 | */ 1430 | 1431 | .mapbox { 1432 | height: 380px; 1433 | border-radius: 18px; 1434 | } 1435 | 1436 | .input-wrapper { 1437 | gap: 30px; 1438 | margin-bottom: 30px; 1439 | } 1440 | 1441 | .form-input { padding: 15px 20px; } 1442 | 1443 | textarea.form-input { margin-bottom: 30px; } 1444 | 1445 | .form-btn { 1446 | --fs-6: 16px; 1447 | padding: 16px 20px; 1448 | } 1449 | 1450 | .form-btn ion-icon { font-size: 18px; } 1451 | 1452 | } 1453 | 1454 | 1455 | 1456 | 1457 | 1458 | /** 1459 | * responsive larger than 768px screen 1460 | */ 1461 | 1462 | @media (min-width: 768px) { 1463 | 1464 | /** 1465 | * REUSED STYLE 1466 | */ 1467 | 1468 | .sidebar, article { width: 700px; } 1469 | 1470 | .has-scrollbar::-webkit-scrollbar-button { width: 100px; } 1471 | 1472 | 1473 | 1474 | /** 1475 | * SIDEBAR 1476 | */ 1477 | 1478 | .contacts-list { 1479 | grid-template-columns: 1fr 1fr; 1480 | gap: 30px 15px; 1481 | } 1482 | 1483 | 1484 | 1485 | /** 1486 | * NAVBAR 1487 | */ 1488 | 1489 | .navbar-link { --fs-8: 15px; } 1490 | 1491 | 1492 | 1493 | /** 1494 | * ABOUT 1495 | */ 1496 | 1497 | /* testimonials modal */ 1498 | 1499 | .testimonials-modal { 1500 | gap: 35px; 1501 | max-width: 680px; 1502 | } 1503 | 1504 | .modal-avatar-box img { width: 80px; } 1505 | 1506 | 1507 | 1508 | /** 1509 | * PORTFOLIO 1510 | */ 1511 | 1512 | .article-title { padding-bottom: 20px; } 1513 | 1514 | .filter-select-box { display: none; } 1515 | 1516 | .filter-list { 1517 | display: flex; 1518 | justify-content: flex-start; 1519 | align-items: center; 1520 | gap: 25px; 1521 | padding-left: 5px; 1522 | margin-bottom: 30px; 1523 | } 1524 | 1525 | .filter-item button { 1526 | color: var(--light-gray); 1527 | font-size: var(--fs-5); 1528 | transition: var(--transition-1); 1529 | } 1530 | 1531 | .filter-item button:hover { color: var(--light-gray-70); } 1532 | 1533 | .filter-item button.active { color: var(--orange-yellow-crayola); } 1534 | 1535 | /* portfolio and blog grid */ 1536 | 1537 | .project-list, .blog-posts-list { grid-template-columns: 1fr 1fr; } 1538 | 1539 | 1540 | 1541 | /** 1542 | * CONTACT 1543 | */ 1544 | 1545 | .input-wrapper { grid-template-columns: 1fr 1fr; } 1546 | 1547 | .form-btn { 1548 | width: max-content; 1549 | margin-left: auto; 1550 | } 1551 | 1552 | } 1553 | 1554 | 1555 | 1556 | 1557 | 1558 | /** 1559 | * responsive larger than 1024px screen 1560 | */ 1561 | 1562 | @media (min-width: 1024px) { 1563 | 1564 | /** 1565 | * CUSTOM PROPERTY 1566 | */ 1567 | 1568 | :root { 1569 | 1570 | /** 1571 | * shadow 1572 | */ 1573 | 1574 | --shadow-1: -4px 8px 24px hsla(0, 0%, 0%, 0.125); 1575 | --shadow-2: 0 16px 30px hsla(0, 0%, 0%, 0.125); 1576 | --shadow-3: 0 16px 40px hsla(0, 0%, 0%, 0.125); 1577 | 1578 | } 1579 | 1580 | 1581 | 1582 | /** 1583 | * REUSED STYLE 1584 | */ 1585 | 1586 | .sidebar, article { 1587 | width: 950px; 1588 | box-shadow: var(--shadow-5); 1589 | } 1590 | 1591 | 1592 | 1593 | /** 1594 | * MAIN 1595 | */ 1596 | 1597 | main { margin-bottom: 60px; } 1598 | 1599 | .main-content { 1600 | position: relative; 1601 | width: max-content; 1602 | margin: auto; 1603 | } 1604 | 1605 | 1606 | 1607 | /** 1608 | * NAVBAR 1609 | */ 1610 | 1611 | .navbar { 1612 | position: absolute; 1613 | bottom: auto; 1614 | top: 0; 1615 | left: auto; 1616 | right: 0; 1617 | width: max-content; 1618 | border-radius: 0 20px; 1619 | padding: 0 20px; 1620 | box-shadow: none; 1621 | } 1622 | 1623 | .navbar-list { 1624 | gap: 30px; 1625 | padding: 0 20px; 1626 | } 1627 | 1628 | .navbar-link { font-weight: var(--fw-500); } 1629 | 1630 | 1631 | 1632 | /** 1633 | * ABOUT 1634 | */ 1635 | 1636 | /* service */ 1637 | 1638 | .service-list { 1639 | grid-template-columns: 1fr 1fr; 1640 | gap: 20px 25px; 1641 | } 1642 | 1643 | /* testimonials */ 1644 | 1645 | .testimonials-item { min-width: calc(50% - 15px); } 1646 | 1647 | /* clients */ 1648 | 1649 | .clients-item { min-width: calc(25% - 38px); } 1650 | 1651 | 1652 | 1653 | /** 1654 | * PORTFOLIO 1655 | */ 1656 | 1657 | .project-list { grid-template-columns: repeat(3, 1fr); } 1658 | 1659 | 1660 | 1661 | /** 1662 | * BLOG 1663 | */ 1664 | 1665 | .blog-banner-box { height: 230px; } 1666 | 1667 | } 1668 | 1669 | 1670 | 1671 | 1672 | 1673 | /** 1674 | * responsive larger than 1250px screen 1675 | */ 1676 | 1677 | @media (min-width: 1250px) { 1678 | 1679 | /** 1680 | * RESET 1681 | */ 1682 | 1683 | body::-webkit-scrollbar { width: 20px; } 1684 | 1685 | body::-webkit-scrollbar-track { background: var(--smoky-black); } 1686 | 1687 | body::-webkit-scrollbar-thumb { 1688 | border: 5px solid var(--smoky-black); 1689 | background: hsla(0, 0%, 100%, 0.1); 1690 | border-radius: 20px; 1691 | box-shadow: inset 1px 1px 0 hsla(0, 0%, 100%, 0.11), 1692 | inset -1px -1px 0 hsla(0, 0%, 100%, 0.11); 1693 | } 1694 | 1695 | body::-webkit-scrollbar-thumb:hover { background: hsla(0, 0%, 100%, 0.15); } 1696 | 1697 | body::-webkit-scrollbar-button { height: 60px; } 1698 | 1699 | 1700 | 1701 | /** 1702 | * REUSED STYLE 1703 | */ 1704 | 1705 | .sidebar, article { width: auto; } 1706 | 1707 | article { min-height: 100%; } 1708 | 1709 | 1710 | 1711 | /** 1712 | * MAIN 1713 | */ 1714 | 1715 | main { 1716 | max-width: 1200px; 1717 | margin-inline: auto; 1718 | display: flex; 1719 | justify-content: center; 1720 | align-items: stretch; 1721 | gap: 25px; 1722 | } 1723 | 1724 | .main-content { 1725 | min-width: 75%; 1726 | width: 75%; 1727 | margin: 0; 1728 | } 1729 | 1730 | 1731 | 1732 | /** 1733 | * SIDEBAR 1734 | */ 1735 | 1736 | .sidebar { 1737 | position: sticky; 1738 | top: 60px; 1739 | max-height: max-content; 1740 | height: 100%; 1741 | margin-bottom: 0; 1742 | padding-top: 60px; 1743 | z-index: 1; 1744 | } 1745 | 1746 | .sidebar-info { flex-direction: column; } 1747 | 1748 | .avatar-box img { width: 150px; } 1749 | 1750 | .info-content .name { 1751 | white-space: nowrap; 1752 | text-align: center; 1753 | } 1754 | 1755 | .info-content .title { margin: auto; } 1756 | 1757 | .info_more-btn { display: none; } 1758 | 1759 | .sidebar-info_more { 1760 | opacity: 1; 1761 | visibility: visible; 1762 | } 1763 | 1764 | .contacts-list { grid-template-columns: 1fr; } 1765 | 1766 | .contact-info :is(.contact-link) { 1767 | white-space: nowrap; 1768 | overflow: hidden; 1769 | text-overflow: ellipsis; 1770 | } 1771 | 1772 | .contact-info :is(.contact-link, time, address) { 1773 | --fs-7: 14px; 1774 | font-weight: var(--fw-300); 1775 | } 1776 | 1777 | .separator:last-of-type { 1778 | margin: 15px 0; 1779 | opacity: 0; 1780 | } 1781 | 1782 | .social-list { justify-content: center; } 1783 | 1784 | 1785 | 1786 | /** 1787 | * RESUME 1788 | */ 1789 | 1790 | .timeline-text { max-width: 700px; } 1791 | 1792 | } -------------------------------------------------------------------------------- /src/App.jsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/no-unescaped-entities */ 2 | 3 | import "./App.css"; 4 | 5 | 6 | import { Outlet } from "react-router-dom"; 7 | import Navbar from "./components/Navbar"; 8 | import Aside from "./components/Aside"; 9 | 10 | function App() { 11 | return ( 12 | <> 13 |