├── src
    ├── index.css
    ├── assets
    │   └── github-cover.png
    ├── pages
    │   ├── Resume
    │   │   ├── TimelineItem.jsx
    │   │   ├── SkillItem.jsx
    │   │   └── Resume.jsx
    │   ├── About
    │   │   ├── Service.jsx
    │   │   ├── Testimonial.jsx
    │   │   └── About.jsx
    │   ├── Blogs
    │   │   ├── BlogPost.jsx
    │   │   ├── Blogs.css
    │   │   └── Blogs.jsx
    │   ├── Contact
    │   │   └── Contact.jsx
    │   └── Portfolio
    │   │   └── Portfolio.jsx
    ├── App.jsx
    ├── components
    │   ├── Navbar.jsx
    │   └── Aside.jsx
    ├── main.jsx
    ├── script.js
    └── App.css
├── README.md
├── public
    ├── images
    │   ├── logo.ico
    │   ├── blog-1.jpg
    │   ├── blog-2.jpg
    │   ├── blog-3.jpg
    │   ├── blog-4.jpg
    │   ├── blog-5.jpg
    │   ├── blog-6.jpg
    │   ├── mamun.jpg
    │   ├── avatar-1.png
    │   ├── avatar-2.png
    │   ├── avatar-3.png
    │   ├── avatar-4.png
    │   ├── 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
    │   ├── logo-1-color.png
    │   ├── logo-2-color.png
    │   ├── logo-3-color.png
    │   ├── logo-4-color.png
    │   ├── logo-5-color.png
    │   ├── logo-6-color.png
    │   ├── icon-quote.svg
    │   ├── icon-app.svg
    │   ├── react.svg
    │   ├── icon-photo.svg
    │   ├── logo.svg
    │   ├── icon-design.svg
    │   └── icon-dev.svg
    ├── services.json
    ├── testimonials.json
    ├── projects.json
    ├── vite.svg
    └── blogs.json
├── vite.config.js
├── .gitignore
├── index.html
├── .eslintrc.cjs
└── package.json


/src/index.css:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | 
2 | # build-portfolio-website-react-css
3 | ![](/src/assets/github-cover.png)
4 | 


--------------------------------------------------------------------------------
/public/images/logo.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdalmamunit427/build-portfolio-website-react-css/HEAD/public/images/logo.ico


--------------------------------------------------------------------------------
/public/images/blog-1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdalmamunit427/build-portfolio-website-react-css/HEAD/public/images/blog-1.jpg


--------------------------------------------------------------------------------
/public/images/blog-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdalmamunit427/build-portfolio-website-react-css/HEAD/public/images/blog-2.jpg


--------------------------------------------------------------------------------
/public/images/blog-3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdalmamunit427/build-portfolio-website-react-css/HEAD/public/images/blog-3.jpg


--------------------------------------------------------------------------------
/public/images/blog-4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdalmamunit427/build-portfolio-website-react-css/HEAD/public/images/blog-4.jpg


--------------------------------------------------------------------------------
/public/images/blog-5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdalmamunit427/build-portfolio-website-react-css/HEAD/public/images/blog-5.jpg


--------------------------------------------------------------------------------
/public/images/blog-6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdalmamunit427/build-portfolio-website-react-css/HEAD/public/images/blog-6.jpg


--------------------------------------------------------------------------------
/public/images/mamun.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdalmamunit427/build-portfolio-website-react-css/HEAD/public/images/mamun.jpg


--------------------------------------------------------------------------------
/public/images/avatar-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdalmamunit427/build-portfolio-website-react-css/HEAD/public/images/avatar-1.png


--------------------------------------------------------------------------------
/public/images/avatar-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdalmamunit427/build-portfolio-website-react-css/HEAD/public/images/avatar-2.png


--------------------------------------------------------------------------------
/public/images/avatar-3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdalmamunit427/build-portfolio-website-react-css/HEAD/public/images/avatar-3.png


--------------------------------------------------------------------------------
/public/images/avatar-4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdalmamunit427/build-portfolio-website-react-css/HEAD/public/images/avatar-4.png


--------------------------------------------------------------------------------
/public/images/my-avatar.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdalmamunit427/build-portfolio-website-react-css/HEAD/public/images/my-avatar.png


--------------------------------------------------------------------------------
/public/images/project-1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdalmamunit427/build-portfolio-website-react-css/HEAD/public/images/project-1.jpg


--------------------------------------------------------------------------------
/public/images/project-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdalmamunit427/build-portfolio-website-react-css/HEAD/public/images/project-2.png


--------------------------------------------------------------------------------
/public/images/project-3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdalmamunit427/build-portfolio-website-react-css/HEAD/public/images/project-3.jpg


--------------------------------------------------------------------------------
/public/images/project-4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdalmamunit427/build-portfolio-website-react-css/HEAD/public/images/project-4.png


--------------------------------------------------------------------------------
/public/images/project-5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdalmamunit427/build-portfolio-website-react-css/HEAD/public/images/project-5.png


--------------------------------------------------------------------------------
/public/images/project-6.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdalmamunit427/build-portfolio-website-react-css/HEAD/public/images/project-6.png


--------------------------------------------------------------------------------
/public/images/project-7.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdalmamunit427/build-portfolio-website-react-css/HEAD/public/images/project-7.png


--------------------------------------------------------------------------------
/public/images/project-8.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdalmamunit427/build-portfolio-website-react-css/HEAD/public/images/project-8.jpg


--------------------------------------------------------------------------------
/public/images/project-9.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdalmamunit427/build-portfolio-website-react-css/HEAD/public/images/project-9.png


--------------------------------------------------------------------------------
/src/assets/github-cover.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdalmamunit427/build-portfolio-website-react-css/HEAD/src/assets/github-cover.png


--------------------------------------------------------------------------------
/public/images/logo-1-color.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdalmamunit427/build-portfolio-website-react-css/HEAD/public/images/logo-1-color.png


--------------------------------------------------------------------------------
/public/images/logo-2-color.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdalmamunit427/build-portfolio-website-react-css/HEAD/public/images/logo-2-color.png


--------------------------------------------------------------------------------
/public/images/logo-3-color.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdalmamunit427/build-portfolio-website-react-css/HEAD/public/images/logo-3-color.png


--------------------------------------------------------------------------------
/public/images/logo-4-color.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdalmamunit427/build-portfolio-website-react-css/HEAD/public/images/logo-4-color.png


--------------------------------------------------------------------------------
/public/images/logo-5-color.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdalmamunit427/build-portfolio-website-react-css/HEAD/public/images/logo-5-color.png


--------------------------------------------------------------------------------
/public/images/logo-6-color.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdalmamunit427/build-portfolio-website-react-css/HEAD/public/images/logo-6-color.png


--------------------------------------------------------------------------------
/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react'
3 | 
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 |   plugins: [react()],
7 | })
8 | 


--------------------------------------------------------------------------------
/src/pages/Resume/TimelineItem.jsx:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | const TimelineItem = ({ title, date, description }) => {
 4 |   return (
 5 |     <li className="timeline-item">
 6 |       <h4 className="h4 timeline-item-title">{title}</h4>
 7 |       <span>{date}</span>
 8 |       <p className="timeline-text">{description}</p>
 9 |     </li>
10 |   );
11 | }
12 | 
13 | export default TimelineItem;


--------------------------------------------------------------------------------
/.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 | 


--------------------------------------------------------------------------------
/src/pages/Resume/SkillItem.jsx:
--------------------------------------------------------------------------------
 1 | 
 2 | const SkillItem = ({ title, value }) => {
 3 |   return (
 4 |     <li className="skills-item">
 5 |       <div className="title-wrapper">
 6 |         <h5 className="h5">{title}</h5>
 7 |         <data value={value}>{value}%</data>
 8 |       </div>
 9 |       <div className="skill-progress-bg">
10 |         <div className="skill-progress-fill" style={{ width: `${value}%` }}></div>
11 |       </div>
12 |     </li>
13 |   );
14 | }
15 | 
16 | export default SkillItem;
17 | 


--------------------------------------------------------------------------------
/src/pages/About/Service.jsx:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | const Service = ({ title, icon, description }) => {
 4 |   return (
 5 |     <li className="service-item">
 6 |       <div className="service-icon-box">
 7 |         <img src={icon} alt={`${title} icon`} width="40" />
 8 |       </div>
 9 |       <div className="service-content-box">
10 |         <h4 className="h4 service-item-title">{title}</h4>
11 |         <p className="service-item-text">{description}</p>
12 |       </div>
13 |     </li>
14 |   );
15 | }
16 | 
17 | export default Service;
18 | 


--------------------------------------------------------------------------------
/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 |       <Aside/>
14 |       <div className="main-content">
15 |        <Navbar/>
16 |         <section style={{
17 |           scrollBehavior: "smooth"
18 |         }}><Outlet/></section>
19 |       </div>
20 |     </>
21 |   );
22 | }
23 | 
24 | export default App;
25 | 


--------------------------------------------------------------------------------
/src/pages/About/Testimonial.jsx:
--------------------------------------------------------------------------------
 1 | 
 2 | const Testimonial = ({ name, avatar, testimonial }) => {
 3 |   return (
 4 |     <li className="testimonials-item">
 5 |       <div className="content-card" data-testimonials-item>
 6 |         <figure className="testimonials-avatar-box">
 7 |           <img src={avatar} alt={name} width="60" data-testimonials-avatar />
 8 |         </figure>
 9 |         <h4 className="h4 testimonials-item-title" data-testimonials-title>{name}</h4>
10 |         <div className="testimonials-text" data-testimonials-text>
11 |           <p>{testimonial}</p>
12 |         </div>
13 |       </div>
14 |     </li>
15 |   );
16 | }
17 | 
18 | export default Testimonial;


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Mamun | Portfolio Website using React JS</title>
 8 |     <link rel="preconnect" href="https://fonts.googleapis.com">
 9 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10 |     <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
11 |   </head>
12 |   <body>
13 |     <main id="root"></main>
14 |     <script type="module" src="/src/main.jsx"></script>
15 |   </body>
16 | </html>
17 | 


--------------------------------------------------------------------------------
/.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 | 


--------------------------------------------------------------------------------
/src/pages/Blogs/BlogPost.jsx:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | const BlogPost = ({ title, category, date, image, description }) => {
 4 |   return (
 5 |     <li className="blog-post-item">
 6 |       <a href="#">
 7 |         <figure className="blog-banner-box">
 8 |           <img src={image} alt={title} loading="lazy"/>
 9 |         </figure>
10 |         <div className="blog-content">
11 |           <div className="blog-meta">
12 |             <p className="blog-category">{category}</p>
13 |             <span className="dot"></span>
14 |             <time dateTime={date}>{date}</time>
15 |           </div>
16 |           <h3 className="h3 blog-item-title">{title}</h3>
17 |           <p className="blog-text">{description}</p>
18 |         </div>
19 |       </a>
20 |     </li>
21 |   );
22 | }
23 | 
24 | export default BlogPost;
25 | 


--------------------------------------------------------------------------------
/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 |   


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/src/pages/Blogs/Blogs.css:
--------------------------------------------------------------------------------
 1 | .pagination {
 2 |     margin-top: 40px;
 3 |     display: flex;
 4 |     flex-direction: row;
 5 |     color: white;
 6 |     list-style: none;
 7 |     padding: 0;
 8 |     justify-content: center;
 9 |   }
10 |   
11 |   .page-item {
12 |     margin: 0 5px;
13 |   }
14 |   
15 |   .page-link {
16 |     display: inline-block;
17 |     padding: 8px 16px;
18 |     background-color: #f0f0f0;
19 |     border: 1px solid #ddd;
20 |     border-radius: 4px;
21 |     color: #333;
22 |     cursor: pointer;
23 |     transition: background-color 0.3s ease;
24 |   }
25 |   
26 |   .page-link:hover {
27 |     background-color: #ddd;
28 |   }
29 |   
30 |   .page-item.disabled .page-link {
31 |     background-color: #ddd;
32 |     color: #999;
33 |     cursor: not-allowed;
34 |   }
35 |   
36 |   .page-item.active .page-link {
37 |     background-color: #007bff;
38 |     color: #fff;
39 |     border-color: #007bff;
40 |   }
41 |   


--------------------------------------------------------------------------------
/src/components/Navbar.jsx:
--------------------------------------------------------------------------------
 1 | import { NavLink } from "react-router-dom"
 2 | 
 3 | const Navbar = () => {
 4 |   return (
 5 |     <nav className="navbar">
 6 |     <ul className="navbar-list">
 7 |       <li className="navbar-item">
 8 |         <NavLink to="/" className="navbar-link" data-nav-link>
 9 |           About
10 |         </NavLink>
11 |       </li>
12 | 
13 |       <li className="navbar-item">
14 |         <NavLink to="/resume" className="navbar-link" data-nav-link>
15 |           Resume
16 |         </NavLink>
17 |       </li>
18 | 
19 |       <li className="navbar-item">
20 |         <NavLink to="/portfolio" className="navbar-link" data-nav-link>
21 |           Portfolio
22 |         </NavLink>
23 |       </li>
24 | 
25 |       <li className="navbar-item">
26 |         <NavLink to="/blogs" className="navbar-link" data-nav-link>
27 |           Blog
28 |         </NavLink>
29 |       </li>
30 | 
31 |       <li className="navbar-item">
32 |         <NavLink to="/contact" className="navbar-link" data-nav-link>
33 |           Contact
34 |         </NavLink>
35 |       </li>
36 |     </ul>
37 |   </nav>
38 |   )
39 | }
40 | 
41 | export default Navbar


--------------------------------------------------------------------------------
/public/images/icon-quote.svg:
--------------------------------------------------------------------------------
 1 | <svg width="34" height="23" viewBox="0 0 34 23" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <path fill-rule="evenodd" clip-rule="evenodd" d="M9.63091 0.144315L11.1066 1.03792C11.3675 1.19594 11.4272 1.54856 11.2349 1.78536C9.08005 4.43892 7.12216 7.31629 7.12195 10.8825C10.0635 10.8825 13.0949 13.3058 13.0949 16.4084C13.0949 20.7423 9.61052 23.4414 6.12633 22.939C2.64214 22.4367 0.58078 19.9249 0.153573 16.9107C-0.826125 9.99852 2.98637 3.77393 8.59945 0.151692C8.91222 -0.0501455 9.3125 -0.0485027 9.63091 0.144315ZM30.5361 0.144315L32.0117 1.03792C32.2727 1.19594 32.3323 1.54856 32.14 1.78536C29.9852 4.43892 28.0273 7.31629 28.0271 10.8825C30.9687 10.8825 34 13.3058 34 16.4084C34 20.7423 30.5157 23.4414 27.0315 22.939C23.5473 22.4367 21.4859 19.9249 21.0587 16.9107C20.079 9.99852 23.8915 3.77393 29.5046 0.151692C29.8174 -0.0501455 30.2177 -0.0485027 30.5361 0.144315Z" fill="url(#paint0_linear)"/>
 3 | <defs>
 4 | <linearGradient id="paint0_linear" x1="1.92667" y1="4.65138e-07" x2="19.7024" y2="29.0178" gradientUnits="userSpaceOnUse">
 5 | <stop offset="0.259336" stop-color="#FFDB6E"/>
 6 | <stop offset="1" stop-color="#FFBC5E"/>
 7 | </linearGradient>
 8 | </defs>
 9 | </svg>
10 | 


--------------------------------------------------------------------------------
/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 |   


--------------------------------------------------------------------------------
/src/main.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import ReactDOM from 'react-dom/client'
 3 | import App from './App.jsx'
 4 | import './index.css'
 5 | 
 6 | import {
 7 |   createBrowserRouter,
 8 |   RouterProvider,
 9 | } from "react-router-dom";
10 | import Portfolio from './pages/Portfolio/Portfolio.jsx';
11 | import Blogs from './pages/Blogs/Blogs.jsx';
12 | import Resume from './pages/Resume/Resume.jsx';
13 | import About from './pages/About/About.jsx';
14 | import Contact from './pages/Contact/Contact.jsx';
15 | 
16 | const router = createBrowserRouter([
17 |   {
18 |     path: "/",
19 |     element: <App/>,
20 |     children: [
21 |       {
22 |         path: "/",
23 |         element: <About/>,
24 |       },
25 |       {
26 |         path: "/resume",
27 |         element: <Resume/>,
28 |       },
29 |       {
30 |         path: "/portfolio",
31 |         element: <Portfolio/>,
32 |       },
33 |       {
34 |         path: "blogs",
35 |         element: <Blogs/>
36 |       },
37 |       {
38 |         path: "contact",
39 |         element: <Contact/>
40 |       }
41 |     ]
42 |   },
43 | ]);
44 | 
45 | ReactDOM.createRoot(document.getElementById('root')).render(
46 |   <React.StrictMode>
47 |     <RouterProvider router={router} />
48 |   </React.StrictMode>,
49 | )
50 | 


--------------------------------------------------------------------------------
/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/vite.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>


--------------------------------------------------------------------------------
/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 |   


--------------------------------------------------------------------------------
/src/pages/Contact/Contact.jsx:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | const Contact = () => {
 4 |   return (
 5 |     <section className="contact" data-page="contact">
 6 | 
 7 |       <header>
 8 |         <h2 className="h2 article-title">Contact</h2>
 9 |       </header>
10 | 
11 |       <section className="mapbox" data-mapbox>
12 |         <figure>
13 |           <iframe
14 |             src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d199666.5651251294!2d-121.58334177520186!3d38.56165006739519!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x809ac672b28397f9%3A0x921f6aaa74197fdb!2sSacramento%2C%20CA%2C%20USA!5e0!3m2!1sen!2sbd!4v1647608789441!5m2!1sen!2sbd"
15 |             width="400" height="300" loading="lazy" title="Google Map"></iframe>
16 |         </figure>
17 |       </section>
18 | 
19 |       <section className="contact-form">
20 | 
21 |         <h3 className="h3 form-title">Contact Form</h3>
22 | 
23 |         <form action="#" className="form" data-form>
24 | 
25 |           <div className="input-wrapper">
26 |             <input type="text" name="fullname" className="form-input" placeholder="Full name" required data-form-input />
27 | 
28 |             <input type="email" name="email" className="form-input" placeholder="Email address" required data-form-input />
29 |           </div>
30 | 
31 |           <textarea name="message" className="form-input" placeholder="Your Message" required data-form-input></textarea>
32 | 
33 |           <button className="form-btn" type="submit" data-form-btn>
34 |             <ion-icon name="paper-plane"></ion-icon>
35 |             <span>Send Message</span>
36 |           </button>
37 | 
38 |         </form>
39 | 
40 |       </section>
41 | 
42 |     </section>
43 |   );
44 | };
45 | 
46 | export default Contact;
47 | 


--------------------------------------------------------------------------------
/src/pages/Blogs/Blogs.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useEffect, useState } from 'react';
 2 | import BlogPost from './BlogPost';
 3 | import './Blogs.css'
 4 | 
 5 | const Blogs = () => {
 6 |   const [blogs, setBlogs] = useState([]);
 7 |   const [currentPage, setCurrentPage] = useState(1);
 8 |   const [postsPerPage] = useState(4); // Number of posts per page
 9 | 
10 |   useEffect(() => {
11 |     fetch('blogs.json')
12 |       .then(response => response.json())
13 |       .then(data => {
14 |         setBlogs(data);
15 |       })
16 |   }, []);
17 | 
18 |   // Get current posts
19 |   const indexOfLastPost = currentPage * postsPerPage;
20 |   const indexOfFirstPost = indexOfLastPost - postsPerPage;
21 |   const currentPosts = blogs.slice(indexOfFirstPost, indexOfLastPost);
22 | 
23 |   // Change page
24 |   const paginate = pageNumber => setCurrentPage(pageNumber);
25 | 
26 |   return (
27 |     <section className="blog" data-page="blog">
28 |       <header>
29 |         <h2 className="h2 article-title">Blog</h2>
30 |       </header>
31 |       <div className="blog-posts">
32 |         <ul className="blog-posts-list">
33 |           {currentPosts.map((post, index) => (
34 |             <BlogPost
35 |               key={index}
36 |               title={post.title}
37 |               category={post.category}
38 |               date={post.date}
39 |               image={post.image}
40 |               description={post.description}
41 |             />
42 |           ))}
43 |         </ul>
44 |       </div>
45 |       {/* Pagination */}
46 |       <nav>
47 |         <ul className="pagination">
48 |           <li className={`page-item ${currentPage === 1 ? 'disabled' : ''}`}>
49 |             <button onClick={() => paginate(currentPage - 1)} className="page-link">
50 |               Previous
51 |             </button>
52 |           </li>
53 |           {Array.from({ length: Math.ceil(blogs.length / postsPerPage) }, (_, index) => (
54 |             <li key={index} className={`page-item ${currentPage === index + 1 ? 'active' : ''}`}>
55 |               <button onClick={() => paginate(index + 1)} className="page-link">
56 |                 {index + 1}
57 |               </button>
58 |             </li>
59 |           ))}
60 |           <li className={`page-item ${currentPage === Math.ceil(blogs.length / postsPerPage) ? 'disabled' : ''}`}>
61 |             <button onClick={() => paginate(currentPage + 1)} className="page-link">
62 |               Next
63 |             </button>
64 |           </li>
65 |         </ul>
66 |       </nav>
67 |     </section>
68 |   );
69 | }
70 | 
71 | export default Blogs;
72 | 


--------------------------------------------------------------------------------
/public/images/icon-app.svg:
--------------------------------------------------------------------------------
 1 | <svg width="40" height="40" viewBox="0 0 22 40" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <path opacity="0.15" fill-rule="evenodd" clip-rule="evenodd" d="M3 1C1.89543 1 1 1.89543 1 3V37C1 38.1046 1.89543 39 3 39H18.9C20.0046 39 20.9 38.1046 20.9 37V3C20.9 1.89543 20.0046 1 18.9 1H15.6631V2H6.23676V1H3Z" fill="url(#paint0_linear)"/>
 3 | <path d="M8.50854 35.6745C8.13501 35.6745 7.83221 35.9773 7.83221 36.3508C7.83221 36.7243 8.13501 37.0271 8.50854 37.0271V35.6745ZM13.4633 37.0271C13.8368 37.0271 14.1396 36.7243 14.1396 36.3508C14.1396 35.9773 13.8368 35.6745 13.4633 35.6745V37.0271ZM0.400024 29.4141C0.400024 29.7876 0.702827 30.0904 1.07635 30.0904C1.44988 30.0904 1.75268 29.7876 1.75268 29.4141H0.400024ZM1.75268 32.387C1.75268 32.0134 1.44988 31.7106 1.07635 31.7106C0.702827 31.7106 0.400024 32.0134 0.400024 32.387H1.75268ZM20.2192 7.61303C20.2192 7.98656 20.522 8.28936 20.8955 8.28936C21.269 8.28936 21.5718 7.98656 21.5718 7.61303H20.2192ZM21.5718 10.5859C21.5718 10.2124 21.269 9.90956 20.8955 9.90956C20.522 9.90956 20.2192 10.2124 20.2192 10.5859H21.5718ZM18.48 38.6473H3.49181V40H18.48V38.6473ZM3.49181 1.35266H6.52662V0H3.49181V1.35266ZM5.8503 1.69206H7.20295V0.676328H5.8503V1.69206ZM7.49281 3.33457H14.4791V1.98191H7.49281V3.33457ZM6.52662 1.35266H15.4452V0H6.52662V1.35266ZM15.4452 1.35266H18.48V0H15.4452V1.35266ZM16.1216 1.69206V0.676328H14.7689V1.69206H16.1216ZM8.50854 37.0271H13.4633V35.6745H8.50854V37.0271ZM1.75268 29.4141V3.09179H0.400024V29.4141H1.75268ZM1.75268 36.9082V32.387H0.400024V36.9082H1.75268ZM20.2192 3.09179V7.61303H21.5718V3.09179H20.2192ZM20.2192 10.5859V36.9082H21.5718V10.5859H20.2192ZM14.4791 3.33457C15.3862 3.33457 16.1216 2.5992 16.1216 1.69206H14.7689C14.7689 1.85214 14.6392 1.98191 14.4791 1.98191V3.33457ZM3.49181 38.6473C2.53132 38.6473 1.75268 37.8687 1.75268 36.9082H0.400024C0.400024 38.6157 1.78427 40 3.49181 40V38.6473ZM18.48 40C20.1876 40 21.5718 38.6157 21.5718 36.9082H20.2192C20.2192 37.8687 19.4405 38.6473 18.48 38.6473V40ZM18.48 1.35266C19.4405 1.35266 20.2192 2.13129 20.2192 3.09179H21.5718C21.5718 1.38424 20.1876 0 18.48 0V1.35266ZM5.8503 1.69206C5.8503 2.5992 6.58567 3.33457 7.49281 3.33457V1.98191C7.33272 1.98191 7.20295 1.85214 7.20295 1.69206H5.8503ZM3.49181 0C1.78427 0 0.400024 1.38424 0.400024 3.09179H1.75268C1.75268 2.13129 2.53132 1.35266 3.49181 1.35266V0Z" fill="url(#paint1_linear)"/>
 4 | <defs>
 5 | <linearGradient id="paint0_linear" x1="2.12767" y1="1" x2="30.7018" y2="17.5237" gradientUnits="userSpaceOnUse">
 6 | <stop offset="0.259336" stop-color="#FFDB6E"/>
 7 | <stop offset="1" stop-color="#FFBC5E"/>
 8 | </linearGradient>
 9 | <linearGradient id="paint1_linear" x1="1.59976" y1="8.08974e-07" x2="31.8368" y2="17.6727" gradientUnits="userSpaceOnUse">
10 | <stop offset="0.259336" stop-color="#FFDB6E"/>
11 | <stop offset="1" stop-color="#FFBC5E"/>
12 | </linearGradient>
13 | </defs>
14 | </svg>
15 | 


--------------------------------------------------------------------------------
/src/pages/Portfolio/Portfolio.jsx:
--------------------------------------------------------------------------------
 1 | import  { useState, useEffect } from 'react';
 2 | import { FaRegEye } from 'react-icons/fa';
 3 | 
 4 | const Portfolio = () => {
 5 |   // State to store project data and filtered projects
 6 |   const [projects, setProjects] = useState([]);
 7 |   const [filteredProjects, setFilteredProjects] = useState([]);
 8 | 
 9 |   // State to store the selected category
10 |   const [selectedCategory, setSelectedCategory] = useState('All');
11 | 
12 |   // Load project data from projects.json
13 |   useEffect(() => {
14 |     fetch('/projects.json')
15 |       .then(response => response.json())
16 |       .then(data => {
17 |         setProjects(data);
18 |         setFilteredProjects(data);
19 |       })
20 |       .catch(error => console.error('Error loading project data:', error));
21 |   }, []);
22 | 
23 |   // Function to handle category filter selection
24 |   const handleFilterClick = (category) => {
25 |     setSelectedCategory(category);
26 |     if (category === 'All') {
27 |       setFilteredProjects(projects);
28 |     } else {
29 |       const filtered = projects.filter(project => project.category === category);
30 |       setFilteredProjects(filtered);
31 |     }
32 |   };
33 | 
34 |   return (
35 |     <section className="portfolio" data-page="portfolio">
36 |       <header>
37 |         <h2 className="h2 article-title">Portfolio</h2>
38 |       </header>
39 | 
40 |       {/* Filter buttons */}
41 |       <ul className="filter-list">
42 |         {['All', 'Web design', 'Applications', 'Web development'].map(category => (
43 |           <li className="filter-item" key={category}>
44 |             <button
45 |               className={category === selectedCategory ? 'active' : ''}
46 |               onClick={() => handleFilterClick(category)}
47 |               data-filter-btn
48 |             >
49 |               {category}
50 |             </button>
51 |           </li>
52 |         ))}
53 |       </ul>
54 | 
55 |       {/* Portfolio items */}
56 |       <section className="projects">
57 |         <ul className="project-list">
58 |           {filteredProjects.map(project => (
59 |             <li
60 |               className="project-item active"
61 |               data-filter-item
62 |               data-category={project.category}
63 |               key={project.id}
64 |             >
65 |               <a href="#">
66 |                 <figure className="project-img">
67 |                   <div className="project-item-icon-box">
68 |                     <FaRegEye />
69 |                   </div>
70 |                   <img src={project.image} alt={project.title} loading="lazy" />
71 |                 </figure>
72 |                 <h3 className="project-title">{project.title}</h3>
73 |                 <p className="project-category">{project.category}</p>
74 |               </a>
75 |             </li>
76 |           ))}
77 |         </ul>
78 |       </section>
79 |     </section>
80 |   );
81 | };
82 | 
83 | export default Portfolio;
84 | 


--------------------------------------------------------------------------------
/src/pages/Resume/Resume.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { FaBookReader, FaRegBookmark } from "react-icons/fa";
 3 | import TimelineItem from './TimelineItem';
 4 | import SkillItem from './SkillItem';
 5 | 
 6 | const Resume = () => {
 7 |   return (
 8 |     <section>
 9 |       <header>
10 |         <h2 className="h2 article-title">Resume</h2>
11 |       </header>
12 | 
13 |       <div className="timeline">
14 |         <div className="title-wrapper">
15 |           <div className="icon-box">
16 |             <FaBookReader />
17 |           </div>
18 |           <h3 className="h3">Education</h3>
19 |         </div>
20 |         <ol className="timeline-list">
21 |           <TimelineItem
22 |             title="University school of the arts"
23 |             date="2007 — 2008"
24 |             description="Nemo enims ipsam voluptatem, blanditiis praesentium voluptum delenit atque corrupti, quos dolores et quas molestias exceptur."
25 |           />
26 |           <TimelineItem
27 |             title="New york academy of art"
28 |             date="2006 — 2007"
29 |             description="Ratione voluptatem sequi nesciunt, facere quisquams facere menda ossimus, omnis voluptas assumenda est omnis."
30 |           />
31 |           <TimelineItem
32 |             title="High school of art and design"
33 |             date="2002 — 2004"
34 |             description="Duis aute irure dolor in reprehenderit in voluptate, quila voluptas mag odit aut fugit, sed consequuntur magni dolores eos."
35 |           />
36 |         </ol>
37 |       </div>
38 | 
39 |       <div className="timeline">
40 |         <div className="title-wrapper">
41 |           <div className="icon-box">
42 |             <FaRegBookmark />
43 |           </div>
44 |           <h3 className="h3">Experience</h3>
45 |         </div>
46 |         <ol className="timeline-list">
47 |           <TimelineItem
48 |             title="Creative director"
49 |             date="2015 — Present"
50 |             description="Nemo enim ipsam voluptatem blanditiis praesentium voluptum delenit atque corrupti, quos dolores et qvuas molestias exceptur."
51 |           />
52 |           <TimelineItem
53 |             title="Art director"
54 |             date="2013 — 2015"
55 |             description="Nemo enims ipsam voluptatem, blanditiis praesentium voluptum delenit atque corrupti, quos dolores et quas molestias exceptur."
56 |           />
57 |           <TimelineItem
58 |             title="Web designer"
59 |             date="2010 — 2013"
60 |             description="Nemo enims ipsam voluptatem, blanditiis praesentium voluptum delenit atque corrupti, quos dolores et quas molestias exceptur."
61 |           />
62 |         </ol>
63 |       </div>
64 | 
65 |       <div className="skill">
66 |         <h3 className="h3 skills-title">My skills</h3>
67 |         <ul className="skills-list content-card">
68 |           <SkillItem title="Web design" value={80} />
69 |           <SkillItem title="Graphic design" value={70} />
70 |           <SkillItem title="Branding" value={90} />
71 |           <SkillItem title="WordPress" value={50} />
72 |         </ul>
73 |       </div>
74 |     </section>
75 |   );
76 | };
77 | 
78 | export default Resume;
79 | 


--------------------------------------------------------------------------------
/src/components/Aside.jsx:
--------------------------------------------------------------------------------
  1 | import { GiCalendar, GiClawSlashes, GiMailbox, GiMayanPyramid, GiPhone } from "react-icons/gi";
  2 | 
  3 | const Aside = () => {
  4 |   return (
  5 |     <aside className="sidebar">
  6 |         <div className="sidebar-info">
  7 |           <figure className="avatar-box">
  8 |             <img
  9 |               src={"/images/mamun.jpg"}
 10 |               alt="Richard hanrick"
 11 |               width="80"
 12 |             />
 13 |           </figure>
 14 | 
 15 |           <div className="info-content">
 16 |             <h1 className="name" title="Richard hanrick">
 17 |               Md AL Mamun
 18 |             </h1>
 19 | 
 20 |             <p className="title">Web developer</p>
 21 |           </div>
 22 | 
 23 |           <button className="info_more-btn" data-sidebar-btn>
 24 |             <span>Show Contacts</span>
 25 | 
 26 |             <GiClawSlashes />
 27 |           </button>
 28 |         </div>
 29 | 
 30 |         <div className="sidebar-info_more">
 31 |           <div className="separator"></div>
 32 | 
 33 |           <ul className="contacts-list">
 34 |             <li className="contact-item">
 35 |               <div className="icon-box">
 36 |                 <GiMailbox/>
 37 |                 
 38 |               </div>
 39 | 
 40 |               <div className="contact-info">
 41 |                 <p className="contact-title">Email</p>
 42 | 
 43 |                 <a href="mailto:richard@example.com" className="contact-link">
 44 |                   richard@example.com
 45 |                 </a>
 46 |               </div>
 47 |             </li>
 48 | 
 49 |             <li className="contact-item">
 50 |               <div className="icon-box">
 51 |                 <GiPhone/>
 52 |               </div>
 53 | 
 54 |               <div className="contact-info">
 55 |                 <p className="contact-title">Phone</p>
 56 | 
 57 |                 <a href="tel:+12133522795" className="contact-link">
 58 |                   +1 (213) 352-2795
 59 |                 </a>
 60 |               </div>
 61 |             </li>
 62 | 
 63 |             <li className="contact-item">
 64 |               <div className="icon-box">
 65 |                 <GiCalendar/>
 66 |                
 67 |               </div>
 68 | 
 69 |               <div className="contact-info">
 70 |                 <p className="contact-title">Birthday</p>
 71 | 
 72 |                 <time dateTime="1982-06-23">June 23, 1982</time>
 73 |               </div>
 74 |             </li>
 75 | 
 76 |             <li className="contact-item">
 77 |               <div className="icon-box">
 78 |                 <GiMayanPyramid/>
 79 |                 <ion-icon name="location-outline"></ion-icon>
 80 |               </div>
 81 | 
 82 |               <div className="contact-info">
 83 |                 <p className="contact-title">Location</p>
 84 | 
 85 |                 <address>Sacramento, California, USA</address>
 86 |               </div>
 87 |             </li>
 88 |           </ul>
 89 | 
 90 |           <div className="separator"></div>
 91 | 
 92 |           <ul className="social-list">
 93 |             <li className="social-item">
 94 |               <a href="#" className="social-link">
 95 |                 <ion-icon name="logo-facebook"></ion-icon>
 96 |               </a>
 97 |             </li>
 98 | 
 99 |             <li className="social-item">
100 |               <a href="#" className="social-link">
101 |                 <ion-icon name="logo-twitter"></ion-icon>
102 |               </a>
103 |             </li>
104 | 
105 |             <li className="social-item">
106 |               <a href="#" className="social-link">
107 |                 <ion-icon name="logo-instagram"></ion-icon>
108 |               </a>
109 |             </li>
110 |           </ul>
111 |         </div>
112 |       </aside>
113 |   )
114 | }
115 | 
116 | export default Aside


--------------------------------------------------------------------------------
/public/images/react.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>


--------------------------------------------------------------------------------
/src/pages/About/About.jsx:
--------------------------------------------------------------------------------
  1 | /* eslint-disable react/no-unescaped-entities */
  2 | 
  3 | import { useEffect, useState } from "react"
  4 | import Testimonial from "./Testimonial";
  5 | import Service from "./Service";
  6 | 
  7 | const servicesData = [
  8 |   {
  9 |     icon: "/images/icon-design.svg",
 10 |     title: "Web design",
 11 |     description: "The most modern and high-quality design made at a professional level."
 12 |   },
 13 |   {
 14 |     icon: "/images/icon-dev.svg",
 15 |     title: "Web development",
 16 |     description: "High-quality development of sites at the professional level."
 17 |   },
 18 |   {
 19 |     icon: "/images/icon-app.svg",
 20 |     title: "Mobile apps",
 21 |     description: "Professional development of applications for iOS and Android."
 22 |   },
 23 |   {
 24 |     icon: "/images/icon-photo.svg",
 25 |     title: "Photography",
 26 |     description: "I make high-quality photos of any category at a professional level."
 27 |   }
 28 | ];
 29 | 
 30 | 
 31 | const About = () => {
 32 |   const [testimonials , setTestimonials ] = useState([]);
 33 |   useEffect(()=> {
 34 |     fetch('testimonials.json').then(res => res.json()).then(data => {
 35 |       console.log(data)
 36 |       setTestimonials(data)
 37 |     });
 38 |   }, [])
 39 |   return (
 40 |     <article className="about  active" data-page="about">
 41 | 
 42 |     <header>
 43 |       <h2 className="h2 article-title">About me</h2>
 44 |     </header>
 45 | 
 46 |     <section className="about-text">
 47 |       <p>
 48 |         I'm Creative Director and UI/UX Designer from Sydney, Australia, working in web development and print media.
 49 |         I enjoy
 50 |         turning complex problems into simple, beautiful and intuitive designs.
 51 |       </p>
 52 | 
 53 |       <p>
 54 |         My job is to build your website so that it is functional and user-friendly but at the same time attractive.
 55 |         Moreover, I
 56 |         add personal touch to your product and make sure that is eye-catching and easy to use. My aim is to bring
 57 |         across your
 58 |         message and identity in the most creative way. I created web design for many famous brand companies.
 59 |       </p>
 60 |     </section>
 61 | 
 62 | 
 63 |     {/* <!--
 64 |       - service
 65 |     --> */}
 66 | 
 67 |     <section className="service">
 68 | 
 69 |       <h3 className="h3 service-title">What i'm doing</h3>
 70 | 
 71 |       <ul className="service-list">
 72 | 
 73 |       {servicesData.map((service, index) => (
 74 |             <Service
 75 |               key={index}
 76 |               icon={service.icon}
 77 |               title={service.title}
 78 |               description={service.description}
 79 |             />
 80 |           ))}
 81 | 
 82 |       </ul>
 83 | 
 84 |     </section>
 85 | 
 86 | 
 87 |     {/* <!--
 88 |       - testimonials
 89 |     --> */}
 90 | 
 91 |     <section className="testimonials">
 92 | 
 93 |       <h3 className="h3 testimonials-title">Testimonials</h3>
 94 | 
 95 |       <ul className="testimonials-list has-scrollbar">
 96 | 
 97 |       {testimonials.map((testimonial, index) => (
 98 |             <Testimonial
 99 |               key={index}
100 |               name={testimonial.name}
101 |               avatar={testimonial.avatar}
102 |               testimonial={testimonial.testimonial}
103 |             />
104 |           ))}
105 | 
106 |       </ul>
107 | 
108 |     </section>
109 | 
110 | 
111 |     {/* <!--
112 |       - clients
113 |     --> */}
114 | 
115 |     <section className="clients">
116 | 
117 |       <h3 className="h3 clients-title">Clients</h3>
118 | 
119 |       <ul className="clients-list has-scrollbar">
120 | 
121 |         <li className="clients-item">
122 |           <a href="#">
123 |             <img src="images/logo-1-color.png" alt="client logo"/>
124 |           </a>
125 |         </li>
126 | 
127 |         <li className="clients-item">
128 |           <a href="#">
129 |             <img src="images/logo-2-color.png" alt="client logo"/>
130 |           </a>
131 |         </li>
132 | 
133 |         <li className="clients-item">
134 |           <a href="#">
135 |             <img src="images/logo-3-color.png" alt="client logo"/>
136 |           </a>
137 |         </li>
138 | 
139 |         <li className="clients-item">
140 |           <a href="#">
141 |             <img src="images/logo-4-color.png" alt="client logo"/>
142 |           </a>
143 |         </li>
144 | 
145 |         <li className="clients-item">
146 |           <a href="#">
147 |             <img src="images/logo-5-color.png" alt="client logo"/>
148 |           </a>
149 |         </li>
150 | 
151 |         <li className="clients-item">
152 |           <a href="#">
153 |             <img src="images/logo-6-color.png"alt="client logo"/>
154 |           </a>
155 |         </li>
156 | 
157 |       </ul>
158 | 
159 |     </section>
160 | 
161 |   </article>
162 |   )
163 | }
164 | 
165 | export default About


--------------------------------------------------------------------------------
/src/script.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | 
  4 | 
  5 | // element toggle function
  6 | const elementToggleFunc = function (elem) { elem.classList.toggle("active"); }
  7 | 
  8 | 
  9 | 
 10 | // sidebar variables
 11 | const sidebar = document.querySelector("[data-sidebar]");
 12 | const sidebarBtn = document.querySelector("[data-sidebar-btn]");
 13 | 
 14 | // sidebar toggle functionality for mobile
 15 | sidebarBtn.addEventListener("click", function () { elementToggleFunc(sidebar); });
 16 | 
 17 | 
 18 | 
 19 | // testimonials variables
 20 | const testimonialsItem = document.querySelectorAll("[data-testimonials-item]");
 21 | const modalContainer = document.querySelector("[data-modal-container]");
 22 | const modalCloseBtn = document.querySelector("[data-modal-close-btn]");
 23 | const overlay = document.querySelector("[data-overlay]");
 24 | 
 25 | // modal variable
 26 | const modalImg = document.querySelector("[data-modal-img]");
 27 | const modalTitle = document.querySelector("[data-modal-title]");
 28 | const modalText = document.querySelector("[data-modal-text]");
 29 | 
 30 | // modal toggle function
 31 | const testimonialsModalFunc = function () {
 32 |   modalContainer.classList.toggle("active");
 33 |   overlay.classList.toggle("active");
 34 | }
 35 | 
 36 | // add click event to all modal items
 37 | for (let i = 0; i < testimonialsItem.length; i++) {
 38 | 
 39 |   testimonialsItem[i].addEventListener("click", function () {
 40 | 
 41 |     modalImg.src = this.querySelector("[data-testimonials-avatar]").src;
 42 |     modalImg.alt = this.querySelector("[data-testimonials-avatar]").alt;
 43 |     modalTitle.innerHTML = this.querySelector("[data-testimonials-title]").innerHTML;
 44 |     modalText.innerHTML = this.querySelector("[data-testimonials-text]").innerHTML;
 45 | 
 46 |     testimonialsModalFunc();
 47 | 
 48 |   });
 49 | 
 50 | }
 51 | 
 52 | // add click event to modal close button
 53 | modalCloseBtn.addEventListener("click", testimonialsModalFunc);
 54 | overlay.addEventListener("click", testimonialsModalFunc);
 55 | 
 56 | 
 57 | 
 58 | // custom select variables
 59 | const select = document.querySelector("[data-select]");
 60 | const selectItems = document.querySelectorAll("[data-select-item]");
 61 | const selectValue = document.querySelector("[data-selecct-value]");
 62 | const filterBtn = document.querySelectorAll("[data-filter-btn]");
 63 | 
 64 | select.addEventListener("click", function () { elementToggleFunc(this); });
 65 | 
 66 | // add event in all select items
 67 | for (let i = 0; i < selectItems.length; i++) {
 68 |   selectItems[i].addEventListener("click", function () {
 69 | 
 70 |     let selectedValue = this.innerText.toLowerCase();
 71 |     selectValue.innerText = this.innerText;
 72 |     elementToggleFunc(select);
 73 |     filterFunc(selectedValue);
 74 | 
 75 |   });
 76 | }
 77 | 
 78 | // filter variables
 79 | const filterItems = document.querySelectorAll("[data-filter-item]");
 80 | 
 81 | const filterFunc = function (selectedValue) {
 82 | 
 83 |   for (let i = 0; i < filterItems.length; i++) {
 84 | 
 85 |     if (selectedValue === "all") {
 86 |       filterItems[i].classList.add("active");
 87 |     } else if (selectedValue === filterItems[i].dataset.category) {
 88 |       filterItems[i].classList.add("active");
 89 |     } else {
 90 |       filterItems[i].classList.remove("active");
 91 |     }
 92 | 
 93 |   }
 94 | 
 95 | }
 96 | 
 97 | // add event in all filter button items for large screen
 98 | let lastClickedBtn = filterBtn[0];
 99 | 
100 | for (let i = 0; i < filterBtn.length; i++) {
101 | 
102 |   filterBtn[i].addEventListener("click", function () {
103 | 
104 |     let selectedValue = this.innerText.toLowerCase();
105 |     selectValue.innerText = this.innerText;
106 |     filterFunc(selectedValue);
107 | 
108 |     lastClickedBtn.classList.remove("active");
109 |     this.classList.add("active");
110 |     lastClickedBtn = this;
111 | 
112 |   });
113 | 
114 | }
115 | 
116 | 
117 | 
118 | // contact form variables
119 | const form = document.querySelector("[data-form]");
120 | const formInputs = document.querySelectorAll("[data-form-input]");
121 | const formBtn = document.querySelector("[data-form-btn]");
122 | 
123 | // add event to all form input field
124 | for (let i = 0; i < formInputs.length; i++) {
125 |   formInputs[i].addEventListener("input", function () {
126 | 
127 |     // check form validation
128 |     if (form.checkValidity()) {
129 |       formBtn.removeAttribute("disabled");
130 |     } else {
131 |       formBtn.setAttribute("disabled", "");
132 |     }
133 | 
134 |   });
135 | }
136 | 
137 | 
138 | 
139 | // page navigation variables
140 | const navigationLinks = document.querySelectorAll("[data-nav-link]");
141 | const pages = document.querySelectorAll("[data-page]");
142 | 
143 | // add event to all nav link
144 | for (let i = 0; i < navigationLinks.length; i++) {
145 |   navigationLinks[i].addEventListener("click", function () {
146 | 
147 |     for (let i = 0; i < pages.length; i++) {
148 |       if (this.innerHTML.toLowerCase() === pages[i].dataset.page) {
149 |         pages[i].classList.add("active");
150 |         navigationLinks[i].classList.add("active");
151 |         window.scrollTo(0, 0);
152 |       } else {
153 |         pages[i].classList.remove("active");
154 |         navigationLinks[i].classList.remove("active");
155 |       }
156 |     }
157 | 
158 |   });
159 | }


--------------------------------------------------------------------------------
/public/images/icon-photo.svg:
--------------------------------------------------------------------------------
 1 | <svg width="42" height="32" viewBox="0 0 42 32" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <path opacity="0.15" fill-rule="evenodd" clip-rule="evenodd" d="M1.5 6.89825C1.5 5.79369 2.39543 4.89825 3.5 4.89825H38.3C39.4046 4.89825 40.3 5.79369 40.3 6.89825V27.8871C40.3 28.9917 39.4046 29.8871 38.3 29.8871H24.2108C28.4393 28.5311 31.5 24.5686 31.5 19.8916C31.5 14.0952 26.799 9.39625 21 9.39625C15.201 9.39625 10.5 14.0952 10.5 19.8916C10.5 24.5686 13.5607 28.5311 17.7892 29.8871H3.5C2.39543 29.8871 1.5 28.9917 1.5 27.8871V6.89825ZM21 24.8894C23.7614 24.8894 26 22.6518 26 19.8916C26 17.1314 23.7614 14.8938 21 14.8938C18.2386 14.8938 16 17.1314 16 19.8916C16 22.6518 18.2386 24.8894 21 24.8894Z" fill="url(#paint0_linear)"/>
 3 | <path d="M2.04688 21.5655C2.04688 21.8199 1.84039 22.0263 1.58594 22.0263C1.33149 22.0263 1.125 21.8199 1.125 21.5655V19.1966C1.125 18.942 1.33145 18.7359 1.58594 18.7359C1.84043 18.7359 2.04688 18.942 2.04688 19.1966V21.5655Z" fill="url(#paint1_linear)" stroke="url(#paint2_linear)" stroke-width="0.25"/>
 4 | <path d="M38.7448 4.72371H36.3178V4.44734C36.3178 3.66461 35.6806 3.02738 34.8972 3.02738H34.6484V2.31999C34.6484 1.53695 34.0109 0.900024 33.2278 0.900024H30.4285C29.6454 0.900024 29.0079 1.53695 29.0079 2.31999V3.02738H28.7591C27.9758 3.02738 27.3386 3.6643 27.3386 4.44734V4.72371H18.9984V4.11363C18.9984 3.3309 18.3612 2.69366 17.5778 2.69366H16.448C15.6649 2.69366 15.0274 3.33059 15.0274 4.11363V4.72371H13.6566V3.27934C13.6566 2.49661 13.0194 1.85938 12.236 1.85938H6.09828C5.31519 1.85938 4.67768 2.49661 4.67768 3.27934V4.72371H3.25525C2.01166 4.72371 1 5.73523 1 6.97797V16.646C1 16.9696 1.26245 17.2316 1.58594 17.2316C1.90943 17.2316 2.17188 16.9696 2.17188 16.646V11.0838H5.37867C5.63654 12.0276 6.50172 12.7237 7.5265 12.7237C8.55159 12.7237 9.41646 12.0276 9.67433 11.0838H14.3277C11.6247 13.1148 9.87331 16.3458 9.87331 19.9782C9.87331 22.363 10.6283 24.5745 11.9116 26.3874H2.17188V24.1161C2.17188 23.7925 1.90943 23.5304 1.58594 23.5304C1.26245 23.5304 1 23.7925 1 24.1161V27.7796C1 29.0226 2.01166 30.0339 3.25525 30.0339H16.2491C17.6907 30.7172 19.3014 31.1 21 31.1C22.6993 31.1 24.3103 30.7169 25.7522 30.033C25.7568 30.0333 25.7611 30.0339 25.7657 30.0339H38.7448C39.9884 30.0339 41.0001 29.0226 41.0001 27.7796V6.97797C41.0001 5.73523 39.9884 4.72371 38.7448 4.72371ZM30.1797 2.31999C30.1797 2.18303 30.2914 2.07138 30.4288 2.07138H33.2278C33.3649 2.07138 33.4766 2.18272 33.4766 2.31999V3.02738H30.1801V2.31999H30.1797ZM28.5104 4.44734C28.5104 4.31038 28.6221 4.19873 28.7595 4.19873H34.8972C35.0342 4.19873 35.1459 4.31038 35.1459 4.44734V4.72371H28.5107V4.44734H28.5104ZM16.1993 4.11363C16.1993 3.97667 16.311 3.86502 16.448 3.86502H17.5778C17.7151 3.86502 17.8265 3.97667 17.8265 4.11363V4.72371H16.1993V4.11363ZM5.84956 3.27934C5.84956 3.14238 5.96125 3.03073 6.09828 3.03073H12.2363C12.3733 3.03073 12.485 3.14238 12.485 3.27934V4.72371H5.84956V3.27934ZM7.5265 11.5523C6.94514 11.5523 6.47181 11.0795 6.47181 10.4982C6.47181 9.91703 6.94514 9.44391 7.5265 9.44391C8.10817 9.44391 8.58119 9.91703 8.58119 10.4982C8.58119 11.0795 8.10817 11.5523 7.5265 11.5523ZM9.67433 9.91246C9.41646 8.96866 8.55159 8.27256 7.5265 8.27256C6.50141 8.27256 5.63654 8.96866 5.37867 9.91246H2.17188V6.97797C2.17188 6.381 2.65802 5.89507 3.25525 5.89507H38.7448C39.3421 5.89507 39.8282 6.381 39.8282 6.97797V9.91246H38.0844V7.78449C38.0844 7.46115 37.822 7.19882 37.4985 7.19882H32.0453C31.7218 7.19882 31.4594 7.46115 31.4594 7.78449V9.91246H25.7266C24.2627 9.22551 22.651 8.85671 21 8.85671C19.31 8.85671 17.7072 9.23587 16.2713 9.91246H9.67433ZM32.6312 9.91246V8.37017H36.9125V9.91246H32.6312ZM3.25525 28.8625C2.65802 28.8625 2.17188 28.3766 2.17188 27.7796V27.5588H12.8665C13.3099 28.034 13.7942 28.4705 14.3139 28.8625H3.25525ZM11.0452 19.9785C11.0452 14.4917 15.5111 10.0281 21 10.0281C23.847 10.0281 26.5637 11.2512 28.454 13.3838C28.6685 13.626 29.0387 13.6486 29.281 13.4339C29.5233 13.2194 29.5456 12.8494 29.3311 12.6071C28.8284 12.0401 28.273 11.5313 27.6761 11.0838H39.8282V26.3874H30.0885C30.9833 25.1233 31.6205 23.6652 31.9247 22.0897H33.4576C34.3219 22.0897 35.0253 21.3868 35.0253 20.5227V19.0637C35.0253 18.1995 34.3222 17.4967 33.4576 17.4967H31.8448C31.6318 16.5648 31.301 15.661 30.8569 14.816C30.7065 14.5296 30.3522 14.4191 30.0659 14.5699C29.7794 14.7202 29.6689 15.074 29.8193 15.3605C30.5621 16.7747 30.9549 18.3716 30.9549 19.9785C30.9549 25.4652 26.4892 29.9289 21 29.9289C15.5111 29.9289 11.0452 25.4649 11.0452 19.9785ZM32.0483 18.6678H33.4576C33.6758 18.6678 33.8535 18.8453 33.8535 19.0634V20.5227C33.8535 20.7408 33.6758 20.9184 33.4576 20.9184H32.0865C32.1127 20.6084 32.1268 20.2948 32.1268 19.9782C32.1268 19.5399 32.1002 19.1022 32.0483 18.6678ZM38.7448 28.8625H27.6861C28.2059 28.4705 28.6902 28.034 29.1336 27.5588H39.8282V27.7796C39.8282 28.3766 39.3421 28.8625 38.7448 28.8625Z" fill="url(#paint3_linear)" stroke="url(#paint4_linear)" stroke-width="0.25"/>
 5 | <path d="M13.2415 19.9785C13.2415 15.7022 16.7219 12.223 21.0001 12.223C25.2783 12.223 28.7587 15.7022 28.7587 19.9785C28.7587 24.2545 25.2783 27.7336 21.0001 27.7336C16.7219 27.7336 13.2415 24.2545 13.2415 19.9785ZM14.1633 19.9785C14.1633 23.7467 17.2302 26.8121 21.0001 26.8121C24.77 26.8121 27.8368 23.7467 27.8368 19.9785C27.8368 16.2103 24.77 13.1445 21.0001 13.1445C17.2302 13.1445 14.1633 16.2103 14.1633 19.9785Z" fill="url(#paint5_linear)" stroke="url(#paint6_linear)" stroke-width="0.25"/>
 6 | <path d="M15.6189 19.9785C15.6189 17.0126 18.033 14.5995 20.9999 14.5995C23.9671 14.5995 26.3812 17.0126 26.3812 19.9785C26.3812 22.9443 23.9671 25.3571 20.9999 25.3571C18.0327 25.3571 15.6189 22.9443 15.6189 19.9785ZM16.5408 19.9785C16.5408 22.4363 18.541 24.4356 20.9999 24.4356C23.4588 24.4356 25.4593 22.4363 25.4593 19.9785C25.4593 17.5204 23.4588 15.521 20.9999 15.521C18.541 15.521 16.5408 17.5204 16.5408 19.9785Z" fill="url(#paint7_linear)" stroke="url(#paint8_linear)" stroke-width="0.25"/>
 7 | <defs>
 8 | <linearGradient id="paint0_linear" x1="3.69867" y1="4.89825" x2="22.5688" y2="37.2522" gradientUnits="userSpaceOnUse">
 9 | <stop offset="0.259336" stop-color="#FFDB6E"/>
10 | <stop offset="1" stop-color="#FFBC5E"/>
11 | </linearGradient>
12 | <linearGradient id="paint1_linear" x1="1.17724" y1="18.7359" x2="2.78931" y2="19.2346" gradientUnits="userSpaceOnUse">
13 | <stop offset="0.259336" stop-color="#FFDB6E"/>
14 | <stop offset="1" stop-color="#FFBC5E"/>
15 | </linearGradient>
16 | <linearGradient id="paint2_linear" x1="1.17724" y1="18.7359" x2="2.78931" y2="19.2346" gradientUnits="userSpaceOnUse">
17 | <stop offset="0.259336" stop-color="#FFDB6E"/>
18 | <stop offset="1" stop-color="#FFBC5E"/>
19 | </linearGradient>
20 | <linearGradient id="paint3_linear" x1="3.26667" y1="0.900025" x2="27.6816" y2="36.6089" gradientUnits="userSpaceOnUse">
21 | <stop offset="0.259336" stop-color="#FFDB6E"/>
22 | <stop offset="1" stop-color="#FFBC5E"/>
23 | </linearGradient>
24 | <linearGradient id="paint4_linear" x1="3.26667" y1="0.900025" x2="27.6816" y2="36.6089" gradientUnits="userSpaceOnUse">
25 | <stop offset="0.259336" stop-color="#FFDB6E"/>
26 | <stop offset="1" stop-color="#FFBC5E"/>
27 | </linearGradient>
28 | <linearGradient id="paint5_linear" x1="14.1208" y1="12.223" x2="27.511" y2="27.0155" gradientUnits="userSpaceOnUse">
29 | <stop offset="0.259336" stop-color="#FFDB6E"/>
30 | <stop offset="1" stop-color="#FFBC5E"/>
31 | </linearGradient>
32 | <linearGradient id="paint6_linear" x1="14.1208" y1="12.223" x2="27.511" y2="27.0155" gradientUnits="userSpaceOnUse">
33 | <stop offset="0.259336" stop-color="#FFDB6E"/>
34 | <stop offset="1" stop-color="#FFBC5E"/>
35 | </linearGradient>
36 | <linearGradient id="paint7_linear" x1="16.2288" y1="14.5995" x2="25.5157" y2="24.8592" gradientUnits="userSpaceOnUse">
37 | <stop offset="0.259336" stop-color="#FFDB6E"/>
38 | <stop offset="1" stop-color="#FFBC5E"/>
39 | </linearGradient>
40 | <linearGradient id="paint8_linear" x1="16.2288" y1="14.5995" x2="25.5157" y2="24.8592" gradientUnits="userSpaceOnUse">
41 | <stop offset="0.259336" stop-color="#FFDB6E"/>
42 | <stop offset="1" stop-color="#FFBC5E"/>
43 | </linearGradient>
44 | </defs>
45 | </svg>
46 | 


--------------------------------------------------------------------------------
/public/images/logo.svg:
--------------------------------------------------------------------------------
 1 | <svg width="185" height="185" viewBox="0 0 185 185" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <path d="M0 92.5C0 41.4137 41.4137 0 92.5 0H135C162.614 0 185 22.3858 185 50V92.5C185 143.586 143.586 185 92.5 185V185C41.4137 185 0 143.586 0 92.5V92.5Z" fill="url(#paint0_linear_13_13)"/>
 3 | <path d="M137.109 88.3594C137.109 88.3594 137.156 88.4766 137.25 88.7109V88.9922C137.25 89.1797 137.25 89.3672 137.25 89.5547C137.25 89.7422 137.203 89.8359 137.109 89.8359H136.828C136.828 89.9297 136.781 90.0234 136.688 90.1172C136.5 90.1172 136.336 90.2812 136.195 90.6094C136.102 90.9375 135.961 91.3594 135.773 91.875C135.305 92.625 134.859 93.6797 134.438 95.0391C134.016 96.3516 133.453 97.875 132.75 99.6094C131.391 103.078 129.82 107.414 128.039 112.617C127.852 113.367 127.617 114.023 127.336 114.586C127.102 115.148 126.891 115.828 126.703 116.625C126.328 117.188 126.023 117.844 125.789 118.594C125.555 119.297 125.297 120.07 125.016 120.914C124.828 121.477 124.547 122.133 124.172 122.883C123.844 123.586 123.539 124.383 123.258 125.273C122.883 125.836 122.555 126.492 122.273 127.242C121.992 127.945 121.641 128.719 121.219 129.562L120.234 131.602C120.047 132.07 119.789 132.492 119.461 132.867C119.133 133.242 118.875 133.594 118.688 133.922C118.5 134.109 118.312 134.297 118.125 134.484C117.984 134.672 117.82 134.859 117.633 135.047L117.352 135.609H116.93C116.93 135.703 116.883 135.797 116.789 135.891H116.508C116.414 135.891 116.367 136.078 116.367 136.453H116.086H115.945H115.664H115.453H115.172H114.75H114.609H114.188C114 136.453 113.906 136.359 113.906 136.172C113.906 135.984 113.859 135.891 113.766 135.891C113.578 135.891 113.438 135.844 113.344 135.75C113.25 135.656 113.109 135.609 112.922 135.609L112.148 134.203C112.148 134.016 112.125 133.898 112.078 133.852C112.031 133.805 111.914 133.617 111.727 133.289C111.727 133.102 111.703 132.914 111.656 132.727C111.609 132.539 111.586 132.352 111.586 132.164C111.398 132.164 111.305 131.977 111.305 131.602V131.32C111.211 131.32 111.164 131.227 111.164 131.039V130.758C111.164 130.289 111.164 130.008 111.164 129.914C111.164 129.867 111.07 129.75 110.883 129.562V129V128.719V125.555V123.797C111.07 123.234 111.164 122.625 111.164 121.969C111.164 121.266 111.211 120.633 111.305 120.07C111.492 118.898 111.609 117.797 111.656 116.766C111.703 115.688 111.82 114.586 112.008 113.461C112.383 109.148 112.969 104.812 113.766 100.453C113.953 98.25 114.188 96.0469 114.469 93.8438C114.75 91.6406 115.078 89.4375 115.453 87.2344C115.641 85.0312 115.875 82.7812 116.156 80.4844C116.484 78.1875 116.742 75.9375 116.93 73.7344C117.117 71.4375 117.281 69.1875 117.422 66.9844C117.562 64.7344 117.633 62.3672 117.633 59.8828C117.633 57.6797 117.562 55.5703 117.422 53.5547C117.281 51.5391 117.07 49.8047 116.789 48.3516C116.602 47.5078 116.391 46.7344 116.156 46.0312C115.922 45.2812 115.594 44.625 115.172 44.0625C114.609 43.2188 113.766 42.3516 112.641 41.4609H111.727C111.727 41.2734 111.703 41.1797 111.656 41.1797C111.609 41.1797 111.586 41.1328 111.586 41.0391V40.8984H111.164H110.32H109.406H108.562H107.438C107.344 40.8984 107.227 40.9922 107.086 41.1797C106.945 41.3672 106.781 41.4609 106.594 41.4609C106.312 41.4609 106.008 41.5547 105.68 41.7422H104.836C104.742 42.0234 104.625 42.1875 104.484 42.2344C104.344 42.2813 104.18 42.3984 103.992 42.5859C103.617 42.5859 103.312 42.7734 103.078 43.1484C102.984 43.1484 102.867 43.1953 102.727 43.2891C102.586 43.3828 102.422 43.4297 102.234 43.4297C101.953 43.7109 101.695 43.9688 101.461 44.2031C101.227 44.3906 100.922 44.625 100.547 44.9062C100.266 45.0938 99.9844 45.3516 99.7031 45.6797C99.4688 46.0078 99.1641 46.3359 98.7891 46.6641C97.7109 47.7422 96.6328 48.8438 95.5547 49.9688C94.5234 51.0938 93.5391 52.3828 92.6016 53.8359C91.5234 55.1953 90.5391 56.6719 89.6484 58.2656C88.8047 59.8125 87.9609 61.4062 87.1172 63.0469C86.2734 64.5 85.4062 66.0469 84.5156 67.6875C83.6719 69.2812 82.8047 70.8984 81.9141 72.5391C81.1641 73.9922 80.3906 75.5156 79.5938 77.1094C78.8438 78.6562 78.0469 80.1094 77.2031 81.4688C76.4531 83.1094 75.7031 84.6094 74.9531 85.9688C74.25 87.2812 73.5 88.6641 72.7031 90.1172C71.9531 91.4766 71.1797 92.7891 70.3828 94.0547C69.6328 95.2734 68.8828 96.4688 68.1328 97.6406C66.6797 100.406 65.3203 102.797 64.0547 104.812C63.6797 105.281 63.3516 105.82 63.0703 106.43C62.7891 106.992 62.4609 107.508 62.0859 107.977C61.8984 108.539 61.6406 109.078 61.3125 109.594C61.0312 110.062 60.7031 110.672 60.3281 111.422C59.1562 113.344 58.0781 115.125 57.0938 116.766C56.1094 118.406 55.125 119.883 54.1406 121.195C53.2969 122.836 52.5703 124.172 51.9609 125.203C51.3047 126.188 50.7422 127.078 50.2734 127.875C49.8984 128.344 49.6406 128.672 49.5 128.859C49.3125 129.047 49.125 129.281 48.9375 129.562L48.6562 129.844C48.4688 130.594 48.2812 130.594 48.0938 129.844V129V128.859C48.0938 128.766 48.1172 128.672 48.1641 128.578C48.2109 128.484 48.2344 128.344 48.2344 128.156C48.3281 128.062 48.6094 127.195 49.0781 125.555C49.4531 124.711 49.875 123.562 50.3438 122.109C50.7656 120.656 51.3047 118.922 51.9609 116.906C52.6172 115.172 53.3438 113.25 54.1406 111.141C54.9844 109.031 55.8984 106.828 56.8828 104.531C57.0703 103.781 57.3281 103.125 57.6562 102.562C57.9844 101.953 58.2422 101.25 58.4297 100.453L59.3438 98.7656C59.4375 98.2969 59.5547 97.9688 59.6953 97.7812C59.8359 97.5469 60 97.1953 60.1875 96.7266C61.125 94.1484 62.4141 91.5703 64.0547 88.9922C64.7109 87.3516 65.3438 85.8516 65.9531 84.4922C66.6094 83.1328 67.3359 81.75 68.1328 80.3438C68.8828 78.9844 69.6797 77.6016 70.5234 76.1953C71.4141 74.7422 72.2812 73.3359 73.125 71.9766C73.9688 70.5234 74.8594 69.1641 75.7969 67.8984C76.7344 66.5859 77.7188 65.25 78.75 63.8906C79.6875 62.7188 80.6719 61.5234 81.7031 60.3047C82.7344 59.0391 83.7656 57.75 84.7969 56.4375C85.875 55.3594 86.9531 54.2344 88.0312 53.0625C89.1562 51.8438 90.2344 50.6719 91.2656 49.5469C92.3438 48.1875 93.4219 46.9922 94.5 45.9609C95.625 44.8828 96.7734 43.7578 97.9453 42.5859C99.0234 41.2266 100.148 40.0547 101.32 39.0703C102.492 38.0859 103.758 37.1484 105.117 36.2578C105.211 36.2578 105.328 36.1641 105.469 35.9766C105.609 35.7891 105.773 35.6953 105.961 35.6953C106.148 35.6953 106.312 35.6484 106.453 35.5547C106.641 35.4609 106.828 35.4141 107.016 35.4141C107.203 35.0391 107.484 34.8516 107.859 34.8516C108.141 34.6641 108.516 34.5703 108.984 34.5703C109.266 34.1953 109.617 33.9844 110.039 33.9375L111.164 33.6562H111.305H111.586H112.008H113.344C114 33.6562 114.703 33.8672 115.453 34.2891C116.25 34.6641 117.023 35.1328 117.773 35.6953C118.43 36.5391 119.109 37.5938 119.812 38.8594C120.094 39.4219 120.398 40.0547 120.727 40.7578C121.055 41.4141 121.336 42.0234 121.57 42.5859C121.758 43.3359 121.945 44.0391 122.133 44.6953C122.32 45.3047 122.461 46.0547 122.555 46.9453C122.742 47.6953 122.906 48.375 123.047 48.9844C123.188 49.5469 123.305 50.2031 123.398 50.9531C123.586 52.4063 123.75 53.8828 123.891 55.3828C124.031 56.8359 124.102 58.2422 124.102 59.6016C124.195 61.0547 124.242 62.4375 124.242 63.75C124.242 65.0156 124.242 66.3281 124.242 67.6875C124.148 69.0469 124.102 70.3359 124.102 71.5547C124.102 72.7734 124.008 74.0625 123.82 75.4219C123.727 78 123.586 80.5781 123.398 83.1562C123.211 85.6875 123.023 88.1953 122.836 90.6797C122.648 92.9766 122.391 95.3203 122.062 97.7109C121.734 100.055 121.453 102.328 121.219 104.531C120.938 106.453 120.68 108.281 120.445 110.016C120.211 111.75 120 113.461 119.812 115.148C120 114.211 120.328 113.555 120.797 113.18C121.453 111.82 122.062 110.602 122.625 109.523C123.234 108.398 123.891 107.297 124.594 106.219C125.672 104.203 126.727 102.328 127.758 100.594C128.789 98.8125 129.75 97.2422 130.641 95.8828C131.484 94.2422 132.258 92.9297 132.961 91.9453C133.711 90.9141 134.367 90.0234 134.93 89.2734C135.211 89.0859 135.469 88.8984 135.703 88.7109C135.938 88.4766 136.148 88.3594 136.336 88.3594H136.688H136.828H137.109ZM115.031 122.672H114.75H115.031ZM114.75 122.672H114.609H114.75Z" fill="black" fill-opacity="0.86"/>
 4 | <defs>
 5 | <linearGradient id="paint0_linear_13_13" x1="0" y1="92" x2="185" y2="92" gradientUnits="userSpaceOnUse">
 6 | <stop stop-color="#FFDB6E"/>
 7 | <stop offset="1" stop-color="#FFBC5E"/>
 8 | </linearGradient>
 9 | </defs>
10 | </svg>
11 | 


--------------------------------------------------------------------------------
/public/images/icon-design.svg:
--------------------------------------------------------------------------------
 1 | <svg width="42" height="42" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <path opacity="0.15" fill-rule="evenodd" clip-rule="evenodd" d="M40.6377 19.814C40.4183 19.7228 40.1658 19.7732 39.9978 19.9416L38.2394 21.7057V9.71161C38.2394 9.38628 37.9766 9.12261 37.6523 9.12261H33.1413L34.7788 7.47985L34.7795 7.47906L36.3573 5.89617C36.6954 5.55704 36.8816 5.10591 36.8816 4.62624C36.8816 4.14658 36.6954 3.6956 36.3573 3.35631L34.5328 1.52591C34.1948 1.18677 33.7451 1 33.2669 1C32.7888 1 32.3392 1.18677 32.0011 1.52591L30.4225 3.10958L28.515 5.02322L24.4288 9.12254H6.2047V3.29564C6.2047 2.9703 5.94181 2.70665 5.61759 2.70665C3.07149 2.70681 1 4.7848 1 7.33924V32.3559C1 32.3994 1.005 32.4417 1.01391 32.4825C1.095 33.5664 1.56242 34.5734 2.3436 35.3379C3.1786 36.1549 4.28087 36.6048 5.44743 36.6048H23.3879L20.0091 39.9946C19.8412 40.163 19.791 40.4162 19.8818 40.6364C19.9727 40.8565 20.1868 41 20.4243 41H40.413C40.7372 41 41.0001 40.7364 41.0001 40.411V20.3582C41.0001 20.12 40.857 19.9052 40.6377 19.814ZM32.8315 2.35897C33.0715 2.11804 33.4626 2.11804 33.7026 2.35897L35.5272 4.18945C35.7673 4.4303 35.7673 4.82242 35.5272 5.06335L34.3638 6.23053L31.668 3.52615L32.8315 2.35897ZM30.8377 4.35913L33.5334 7.06343L32.4562 8.14417L29.7606 5.43987L30.8377 4.35913ZM18.3967 21.76L16.715 22.3556L15.5945 21.2315L16.1882 19.5444L18.3967 21.76ZM35.8293 30.1707L30.1707 35.8293C30.1077 35.8923 30.1523 36 30.2414 36H36V30.2414C36 30.1523 35.8923 30.1077 35.8293 30.1707ZM16 18.5L19.5 22L32.5 9L29 5.5L16 18.5Z" fill="url(#paint0_linear)"/>
 3 | <path d="M36.3998 29.2549C36.1804 29.1637 35.9279 29.2141 35.76 29.3825L29.3439 35.8193C29.176 35.9878 29.1257 36.2411 29.2167 36.4612C29.3075 36.6814 29.5217 36.8248 29.7591 36.8248H36.1752C36.4995 36.8248 36.7623 36.5611 36.7623 36.2358V29.799C36.7622 29.5609 36.6192 29.3461 36.3998 29.2549ZM31.1763 35.6469L35.5879 31.221V35.6469H31.1763Z" fill="url(#paint1_linear)" stroke="url(#paint2_linear)" stroke-width="0.25"/>
 4 | <path d="M40.6377 19.814C40.4183 19.7228 40.1658 19.7732 39.9978 19.9416L38.2394 21.7057V9.71161C38.2394 9.38628 37.9766 9.12261 37.6523 9.12261H33.1413L34.7788 7.47985C34.7791 7.47962 34.7793 7.47929 34.7795 7.47906L36.3573 5.89617C36.6954 5.55704 36.8816 5.10591 36.8816 4.62624C36.8816 4.14658 36.6954 3.6956 36.3573 3.35631L34.5328 1.52591C34.1948 1.18677 33.7451 1 33.2669 1C32.7888 1 32.3392 1.18677 32.0011 1.52591L30.4225 3.10958L28.515 5.02322L24.4288 9.12254H6.2047V3.29564C6.2047 2.9703 5.94181 2.70665 5.61759 2.70665C3.07149 2.70681 1 4.7848 1 7.33924V32.3559C1 32.3994 1.005 32.4417 1.01391 32.4825C1.095 33.5664 1.56242 34.5734 2.3436 35.3379C3.1786 36.1549 4.28087 36.6048 5.44743 36.6048H23.3879L20.0091 39.9946C19.8412 40.163 19.791 40.4162 19.8818 40.6364C19.9727 40.8565 20.1868 41 20.4243 41H40.413C40.7372 41 41.0001 40.7364 41.0001 40.411V20.3582C41.0001 20.12 40.857 19.9052 40.6377 19.814ZM32.8315 2.35897C33.0715 2.11804 33.4626 2.11804 33.7026 2.35897L35.5272 4.18945C35.7673 4.4303 35.7673 4.82242 35.5272 5.06335L34.3638 6.23053L31.668 3.52615L32.8315 2.35897ZM30.8377 4.35913L33.5334 7.06343L32.4562 8.14417L29.7606 5.43987L30.8377 4.35913ZM39.826 26.9764H38.7428C38.4185 26.9764 38.1557 27.2401 38.1557 27.5654C38.1557 27.8908 38.4185 28.1544 38.7428 28.1544H39.826V29.9293H38.7428C38.4185 29.9293 38.1557 30.1931 38.1557 30.5184C38.1557 30.8437 38.4185 31.1074 38.7428 31.1074H39.826V32.8822H38.7428C38.4185 32.8822 38.1557 33.1458 38.1557 33.4712C38.1557 33.7965 38.4185 34.0602 38.7428 34.0602H39.826V35.8351H38.7428C38.4185 35.8351 38.1557 36.0988 38.1557 36.4241C38.1557 36.7495 38.4185 37.0131 38.7428 37.0131H39.826V39.8222H21.8416L27.7719 33.873C28.0012 33.6428 28.0012 33.27 27.7719 33.04C27.7456 33.0135 27.7173 32.9906 27.6877 32.9703C27.4591 32.8133 27.1446 32.8363 26.9415 33.04L24.5622 35.427H5.44751C3.66688 35.427 2.23344 34.0324 2.17703 32.2493C2.18039 32.1373 2.18906 32.0263 2.20297 31.9166C2.20305 31.916 2.20313 31.9154 2.20321 31.9147C2.20977 31.8626 2.21766 31.8107 2.22664 31.7592C2.22766 31.7533 2.22875 31.7473 2.22977 31.7415C2.23797 31.6955 2.24719 31.6497 2.25727 31.6041C2.26008 31.5914 2.26305 31.5787 2.26602 31.5661C2.27492 31.5275 2.28453 31.4892 2.29485 31.451C2.30047 31.4303 2.30633 31.4099 2.31235 31.3893C2.32094 31.3593 2.32985 31.3295 2.3393 31.2999C2.34875 31.2704 2.35883 31.2411 2.36907 31.2119C2.37617 31.1915 2.38321 31.171 2.39086 31.1507C2.40516 31.1121 2.42032 31.074 2.43594 31.0361C2.44039 31.0252 2.44477 31.0142 2.44938 31.0033C2.46946 30.9562 2.49032 30.9098 2.51235 30.8638C2.51328 30.8619 2.51414 30.8599 2.51508 30.858C2.9743 29.9046 3.85751 29.1938 4.91743 28.9732C4.9204 28.9726 4.92337 28.9719 4.92634 28.9712C4.97493 28.9613 5.02399 28.9528 5.07337 28.9449C5.08157 28.9436 5.08977 28.9418 5.09813 28.9406C5.14274 28.9338 5.18782 28.9285 5.2329 28.9234C5.24556 28.922 5.25813 28.92 5.27087 28.9188C5.31438 28.9144 5.35829 28.9115 5.4022 28.9087C5.4161 28.9078 5.43001 28.9064 5.44392 28.9057C5.50142 28.9028 5.55938 28.9013 5.61759 28.9013C5.94181 28.9013 6.2047 28.6377 6.2047 28.3123V24.0416C6.2047 23.7163 5.94181 23.4527 5.61759 23.4527C5.29337 23.4527 5.03048 23.7163 5.03048 24.0416V27.7604C4.03907 27.8862 3.11883 28.3298 2.39321 29.0407C2.31688 29.1154 2.24453 29.1932 2.17406 29.2722V7.33924C2.17406 5.63526 3.41047 4.21531 5.0304 3.93488V21.6858C5.0304 22.011 5.29329 22.2748 5.61751 22.2748C5.94173 22.2748 6.20462 22.011 6.20462 21.6858V10.3006H23.2547L20.009 13.5567C19.7797 13.7868 19.7797 14.1597 20.009 14.3897C20.2383 14.6196 20.61 14.6196 20.8393 14.3897L25.0872 10.1281C25.0873 10.128 25.0874 10.1278 25.0875 10.1277L28.9301 6.27278L31.6257 8.97715L31.3094 9.29441C31.3092 9.29465 31.3089 9.29488 31.3087 9.29513L19.4705 21.1715L16.7749 18.4672L19.1083 16.1263C19.3376 15.8961 19.3376 15.5233 19.1083 15.2933C18.879 15.0634 18.5073 15.0634 18.2781 15.2933L15.5294 18.0507C15.5147 18.0655 15.501 18.081 15.4881 18.097C15.4838 18.1024 15.48 18.1081 15.4759 18.1136C15.4676 18.1247 15.4595 18.1358 15.4519 18.1474C15.4476 18.1542 15.4437 18.1611 15.4396 18.168C15.4332 18.179 15.4269 18.1902 15.4212 18.2015C15.4175 18.2088 15.4141 18.2164 15.4107 18.224C15.4054 18.2355 15.4006 18.2473 15.3961 18.259C15.3946 18.2632 15.3925 18.2671 15.391 18.2712L14.2472 21.522L13.4674 23.7384C13.4571 23.7678 13.4496 23.7978 13.4441 23.828H11.4916C11.1674 23.828 10.9045 24.0916 10.9045 24.4169C10.9045 24.7423 11.1674 25.0059 11.4916 25.0059H27.7505C28.0748 25.0059 28.3376 24.7423 28.3376 24.4169C28.3376 24.0916 28.0748 23.828 27.7505 23.828H16.0854L19.6659 22.5599C19.6689 22.5589 19.6717 22.5574 19.6746 22.5563C19.6886 22.5511 19.7022 22.5452 19.7157 22.5391C19.7211 22.5366 19.7265 22.5342 19.7318 22.5316C19.7458 22.5246 19.7596 22.5168 19.7732 22.5085C19.7776 22.5058 19.7821 22.5034 19.7864 22.5007C19.8006 22.4916 19.8143 22.4816 19.8279 22.4711C19.8312 22.4686 19.8347 22.4663 19.838 22.4636C19.8543 22.4504 19.8703 22.4363 19.8855 22.421L31.9671 10.3007H37.0652V22.8837L28.667 31.3089C28.4377 31.5391 28.4377 31.9119 28.667 32.1419C28.6813 32.1563 28.6962 32.1698 28.7116 32.1823C28.8193 32.2704 28.9508 32.3145 29.0822 32.3145C29.2136 32.3145 29.3451 32.2704 29.4527 32.1823C29.4681 32.1698 29.483 32.1563 29.4973 32.1419L29.4976 32.1417L39.826 21.7799V26.9764ZM18.3967 21.76L16.715 22.3556L15.5945 21.2315L16.1882 19.5444L18.3967 21.76Z" fill="url(#paint3_linear)" stroke="url(#paint4_linear)" stroke-width="0.25"/>
 5 | <defs>
 6 | <linearGradient id="paint0_linear" x1="3.26667" y1="1" x2="37.8" y2="39.1334" gradientUnits="userSpaceOnUse">
 7 | <stop offset="0.259336" stop-color="#FFDB6E"/>
 8 | <stop offset="1" stop-color="#FFBC5E"/>
 9 | </linearGradient>
10 | <linearGradient id="paint1_linear" x1="29.602" y1="29.21" x2="36.1781" y2="36.4484" gradientUnits="userSpaceOnUse">
11 | <stop offset="0.259336" stop-color="#FFDB6E"/>
12 | <stop offset="1" stop-color="#FFBC5E"/>
13 | </linearGradient>
14 | <linearGradient id="paint2_linear" x1="29.602" y1="29.21" x2="36.1781" y2="36.4484" gradientUnits="userSpaceOnUse">
15 | <stop offset="0.259336" stop-color="#FFDB6E"/>
16 | <stop offset="1" stop-color="#FFBC5E"/>
17 | </linearGradient>
18 | <linearGradient id="paint3_linear" x1="3.26667" y1="1" x2="37.8" y2="39.1334" gradientUnits="userSpaceOnUse">
19 | <stop offset="0.259336" stop-color="#FFDB6E"/>
20 | <stop offset="1" stop-color="#FFBC5E"/>
21 | </linearGradient>
22 | <linearGradient id="paint4_linear" x1="3.26667" y1="1" x2="37.8" y2="39.1334" gradientUnits="userSpaceOnUse">
23 | <stop offset="0.259336" stop-color="#FFDB6E"/>
24 | <stop offset="1" stop-color="#FFBC5E"/>
25 | </linearGradient>
26 | </defs>
27 | </svg>
28 | 


--------------------------------------------------------------------------------
/public/images/icon-dev.svg:
--------------------------------------------------------------------------------
 1 | <svg width="40" height="32" viewBox="0 0 40 32" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <path opacity="0.15" fill-rule="evenodd" clip-rule="evenodd" d="M3 1C1.89543 1 1 1.89543 1 3V28C1 29.1046 1.89543 30 3 30H37C38.1046 30 39 29.1046 39 28V3C39 1.89543 38.1046 1 37 1H3ZM36 9H4V28H36V9Z" fill="url(#paint0_linear)"/>
 3 | <path d="M37.6172 0.375H2.38281C1.06903 0.375 0 1.44403 0 2.75781V29.2422C0 30.556 1.06903 31.625 2.38281 31.625H37.6172C38.931 31.625 40 30.556 40 29.2422V2.75781C40 1.44403 38.931 0.375 37.6172 0.375ZM38.4375 29.2422C38.4375 29.6945 38.0695 30.0625 37.6172 30.0625H2.38281C1.93054 30.0625 1.5625 29.6945 1.5625 29.2422V2.75781C1.5625 2.30554 1.93054 1.9375 2.38281 1.9375H37.6172C38.0695 1.9375 38.4375 2.30554 38.4375 2.75781V29.2422Z" fill="url(#paint1_linear)"/>
 4 | <path d="M14.9219 5.79156H35.0781C35.5096 5.79156 35.8594 5.44183 35.8594 5.01031C35.8594 4.5791 35.5096 4.22906 35.0781 4.22906H14.9219C14.4904 4.22906 14.1406 4.5791 14.1406 5.01031C14.1406 5.44183 14.4904 5.79156 14.9219 5.79156Z" fill="url(#paint2_linear)"/>
 5 | <path d="M3.99231 5.3094C4.01184 5.3564 4.03595 5.40157 4.06403 5.44368C4.0921 5.48671 4.12506 5.52669 4.16107 5.56239C4.30634 5.70857 4.50775 5.79158 4.71313 5.79158C4.76471 5.79158 4.81567 5.7867 4.86633 5.77663C4.91638 5.76656 4.96552 5.7516 5.01251 5.73207C5.05951 5.71254 5.10468 5.68843 5.14679 5.66035C5.18982 5.63136 5.2298 5.5984 5.2655 5.5627C5.30243 5.52669 5.33447 5.48671 5.36316 5.44398C5.39154 5.40157 5.41565 5.3564 5.43518 5.3094C5.45471 5.2618 5.46967 5.21266 5.47974 5.16322C5.48981 5.11256 5.49438 5.06099 5.49438 5.01033C5.49438 4.95937 5.48981 4.90779 5.47974 4.85805C5.46967 4.808 5.45471 4.75856 5.43518 4.71187C5.41565 4.66426 5.39154 4.61879 5.36316 4.57668C5.33447 4.53365 5.30243 4.49397 5.2655 4.45796C5.2298 4.42195 5.18982 4.3893 5.14679 4.36092C5.10468 4.33284 5.05951 4.30873 5.01251 4.2892C4.96552 4.26967 4.91638 4.25471 4.86633 4.24464C4.76563 4.2242 4.66187 4.2242 4.56085 4.24464C4.5108 4.25471 4.46167 4.26967 4.41498 4.2892C4.36707 4.30873 4.3219 4.33284 4.27979 4.36092C4.23676 4.3893 4.19678 4.42195 4.16107 4.45796C4.12506 4.49397 4.0921 4.53365 4.06403 4.57668C4.03595 4.61879 4.01184 4.66426 3.99231 4.71187C3.97278 4.75856 3.95782 4.808 3.94775 4.85805C3.93738 4.90779 3.93188 4.95937 3.93188 5.01033C3.93188 5.06099 3.93738 5.11256 3.94775 5.16322C3.95782 5.21266 3.97278 5.2618 3.99231 5.3094Z" fill="url(#paint3_linear)"/>
 6 | <path d="M7.11731 5.3094C7.13684 5.3564 7.16095 5.40157 7.18903 5.44368C7.2171 5.48671 7.25006 5.52669 7.28607 5.56239C7.43134 5.70857 7.63275 5.79158 7.83813 5.79158C7.88971 5.79158 7.94067 5.7867 7.99133 5.77663C8.04138 5.76656 8.09052 5.7516 8.13751 5.73207C8.18451 5.71254 8.22968 5.68843 8.27179 5.66035C8.31482 5.63136 8.3548 5.5984 8.39142 5.5627C8.42743 5.52669 8.45947 5.48671 8.48816 5.44398C8.51654 5.40157 8.54065 5.3564 8.56018 5.3094C8.57971 5.2618 8.59467 5.21266 8.60474 5.16322C8.61481 5.11256 8.61938 5.06099 8.61938 5.01033C8.61938 4.95937 8.61481 4.90779 8.60474 4.85805C8.59467 4.808 8.57971 4.75856 8.56018 4.71187C8.54065 4.66426 8.51654 4.61879 8.48816 4.57668C8.45947 4.53365 8.42743 4.49397 8.39142 4.45796C8.3548 4.42195 8.31482 4.3893 8.27179 4.36092C8.22968 4.33284 8.18451 4.30873 8.13751 4.2892C8.09052 4.26967 8.04138 4.25471 7.99133 4.24464C7.89063 4.2242 7.78687 4.2242 7.68585 4.24464C7.6358 4.25471 7.58667 4.26967 7.53998 4.2892C7.49207 4.30873 7.4469 4.33284 7.40479 4.36092C7.36176 4.3893 7.32178 4.42195 7.28607 4.45796C7.25006 4.49397 7.2171 4.53365 7.18903 4.57668C7.16095 4.61879 7.13684 4.66426 7.11731 4.71187C7.09778 4.75856 7.08282 4.808 7.07275 4.85805C7.06238 4.90779 7.05688 4.95937 7.05688 5.01033C7.05688 5.06099 7.06238 5.11256 7.07275 5.16322C7.08282 5.21266 7.09778 5.2618 7.11731 5.3094Z" fill="url(#paint4_linear)"/>
 7 | <path d="M10.2423 5.3094C10.2618 5.3564 10.2859 5.40157 10.314 5.44368C10.3421 5.48671 10.3751 5.52669 10.4111 5.56239C10.4468 5.5984 10.4868 5.63136 10.5298 5.66005C10.5719 5.68843 10.6171 5.71254 10.665 5.73207C10.7117 5.7516 10.7608 5.76656 10.8109 5.77663C10.8609 5.7867 10.9125 5.79128 10.9631 5.79128C11.0147 5.79128 11.0657 5.7867 11.1163 5.77663C11.1664 5.76656 11.2155 5.7516 11.2625 5.73207C11.3095 5.71254 11.3547 5.68843 11.3977 5.66005C11.4398 5.63136 11.4798 5.5984 11.5164 5.56239C11.5524 5.52669 11.5845 5.48671 11.6132 5.44368C11.6415 5.40157 11.6656 5.3564 11.6852 5.3094C11.7047 5.2618 11.7197 5.21266 11.7297 5.16322C11.7398 5.11256 11.7444 5.06099 11.7444 5.01003C11.7444 4.95937 11.7398 4.90779 11.7297 4.85774C11.7197 4.80769 11.7047 4.75856 11.6852 4.71187C11.6656 4.66396 11.6415 4.61879 11.6132 4.57668C11.5845 4.53365 11.5524 4.49367 11.5164 4.45796C11.4798 4.42195 11.4398 4.38899 11.3977 4.36092C11.3547 4.33284 11.3095 4.30873 11.2625 4.2892C11.2155 4.26967 11.1664 4.25471 11.1163 4.24464C11.0156 4.2242 10.9119 4.2242 10.8109 4.24464C10.7608 4.25471 10.7117 4.26967 10.665 4.2892C10.6171 4.30873 10.5719 4.33284 10.5298 4.36092C10.4868 4.38899 10.4468 4.42195 10.4111 4.45796C10.3751 4.49367 10.3421 4.53365 10.314 4.57668C10.2859 4.61879 10.2618 4.66396 10.2423 4.71187C10.2228 4.75856 10.2078 4.80769 10.1978 4.85774C10.1874 4.90779 10.1819 4.95937 10.1819 5.01003C10.1819 5.06099 10.1874 5.11256 10.1978 5.16322C10.2078 5.21266 10.2228 5.2618 10.2423 5.3094Z" fill="url(#paint5_linear)"/>
 8 | <path d="M22.7154 13.739C22.344 13.5192 21.8649 13.6425 21.6452 14.0139L17.0099 21.8524C16.7901 22.2238 16.9131 22.7029 17.2845 22.9223C17.4093 22.9962 17.5464 23.0316 17.6816 23.0316C17.9486 23.0316 18.2089 22.8942 18.3548 22.6477L22.9901 14.8092C23.2098 14.4378 23.0868 13.9587 22.7154 13.739Z" fill="url(#paint6_linear)"/>
 9 | <path d="M12.9769 16.0351V15.2462C12.9769 14.8095 13.3321 14.454 13.7688 14.454H13.7798C14.2113 14.454 14.561 14.1042 14.561 13.6727C14.561 13.2415 14.2113 12.8915 13.7798 12.8915H13.7688C12.4706 12.8915 11.4144 13.948 11.4144 15.2462V16.0351C11.4144 16.3192 11.2978 16.5963 11.0946 16.795L10.0823 17.7853C9.93305 17.9312 9.84852 18.1307 9.8473 18.3395C9.84638 18.5482 9.92878 18.7487 10.0765 18.8964L11.108 19.9276C11.307 20.1263 11.4174 20.3906 11.4196 20.6719L11.4251 21.4907C11.4342 22.7801 12.4904 23.8293 13.7798 23.8293C14.2113 23.8293 14.561 23.4792 14.561 23.048C14.561 22.6165 14.2113 22.2668 13.7798 22.2668C13.3458 22.2668 12.9906 21.9137 12.9876 21.48L12.9821 20.6613C12.9772 19.9664 12.7037 19.3133 12.2127 18.8226L11.7397 18.3499L12.1874 17.9119C12.6891 17.4209 12.9769 16.737 12.9769 16.0351Z" fill="url(#paint7_linear)"/>
10 | <path d="M27.023 20.6857V21.4745C27.023 21.9113 26.6678 22.2668 26.2311 22.2668H26.2201C25.7886 22.2668 25.4388 22.6165 25.4388 23.048C25.4388 23.4792 25.7886 23.8293 26.2201 23.8293H26.2311C27.5293 23.8293 28.5855 22.7728 28.5855 21.4745V20.6857C28.5855 20.4016 28.7021 20.1245 28.9053 19.9258L29.9176 18.9355C30.0668 18.7896 30.1514 18.59 30.1523 18.3813C30.1535 18.1725 30.0711 17.972 29.9234 17.8243L28.8919 16.7932C28.6929 16.5945 28.5821 16.3299 28.5803 16.0488L28.5745 15.23C28.5657 13.9407 27.5095 12.8918 26.2201 12.8918C25.7886 12.8918 25.4388 13.2415 25.4388 13.673C25.4388 14.1042 25.7886 14.4543 26.2201 14.4543C26.6537 14.4543 27.0093 14.8071 27.012 15.2407L27.0178 16.0595C27.0227 16.7541 27.2958 17.4072 27.7872 17.8982L28.2602 18.3709L27.8125 18.8088C27.3108 19.2996 27.023 19.9838 27.023 20.6857Z" fill="url(#paint8_linear)"/>
11 | <path d="M36.0443 8.13531H3.95569C3.52417 8.13531 3.17444 8.48535 3.17444 8.91656V27.6666C3.17444 28.0981 3.52417 28.4478 3.95569 28.4478H13.2553C13.6868 28.4478 14.0366 28.0981 14.0366 27.6666C14.0366 27.2354 13.6868 26.8853 13.2553 26.8853H4.73694V9.69781H35.2631V26.8853H19.5312C19.0997 26.8853 18.75 27.2354 18.75 27.6666C18.75 28.0981 19.0997 28.4478 19.5312 28.4478H36.0443C36.4758 28.4478 36.8256 28.0981 36.8256 27.6666V8.91656C36.8256 8.48535 36.4758 8.13531 36.0443 8.13531Z" fill="url(#paint9_linear)"/>
12 | <defs>
13 | <linearGradient id="paint0_linear" x1="3.15333" y1="1" x2="26.6886" y2="35.0542" gradientUnits="userSpaceOnUse">
14 | <stop offset="0.259336" stop-color="#FFDB6E"/>
15 | <stop offset="1" stop-color="#FFBC5E"/>
16 | </linearGradient>
17 | <linearGradient id="paint1_linear" x1="2.26667" y1="0.375001" x2="27.8327" y2="36.511" gradientUnits="userSpaceOnUse">
18 | <stop offset="0.259336" stop-color="#FFDB6E"/>
19 | <stop offset="1" stop-color="#FFBC5E"/>
20 | </linearGradient>
21 | <linearGradient id="paint2_linear" x1="15.3714" y1="4.22906" x2="15.5472" y2="6.9288" gradientUnits="userSpaceOnUse">
22 | <stop offset="0.259336" stop-color="#FFDB6E"/>
23 | <stop offset="1" stop-color="#FFBC5E"/>
24 | </linearGradient>
25 | <linearGradient id="paint3_linear" x1="4.02043" y1="4.22931" x2="5.36917" y2="5.71887" gradientUnits="userSpaceOnUse">
26 | <stop offset="0.259336" stop-color="#FFDB6E"/>
27 | <stop offset="1" stop-color="#FFBC5E"/>
28 | </linearGradient>
29 | <linearGradient id="paint4_linear" x1="7.14543" y1="4.22931" x2="8.49417" y2="5.71887" gradientUnits="userSpaceOnUse">
30 | <stop offset="0.259336" stop-color="#FFDB6E"/>
31 | <stop offset="1" stop-color="#FFBC5E"/>
32 | </linearGradient>
33 | <linearGradient id="paint5_linear" x1="10.2704" y1="4.22931" x2="11.6189" y2="5.71884" gradientUnits="userSpaceOnUse">
34 | <stop offset="0.259336" stop-color="#FFDB6E"/>
35 | <stop offset="1" stop-color="#FFBC5E"/>
36 | </linearGradient>
37 | <linearGradient id="paint6_linear" x1="17.2521" y1="13.6301" x2="25.0143" y2="19.281" gradientUnits="userSpaceOnUse">
38 | <stop offset="0.259336" stop-color="#FFDB6E"/>
39 | <stop offset="1" stop-color="#FFBC5E"/>
40 | </linearGradient>
41 | <linearGradient id="paint7_linear" x1="10.1144" y1="12.8915" x2="17.4785" y2="16.3959" gradientUnits="userSpaceOnUse">
42 | <stop offset="0.259336" stop-color="#FFDB6E"/>
43 | <stop offset="1" stop-color="#FFBC5E"/>
44 | </linearGradient>
45 | <linearGradient id="paint8_linear" x1="25.7059" y1="12.8918" x2="33.0696" y2="16.3959" gradientUnits="userSpaceOnUse">
46 | <stop offset="0.259336" stop-color="#FFDB6E"/>
47 | <stop offset="1" stop-color="#FFBC5E"/>
48 | </linearGradient>
49 | <linearGradient id="paint9_linear" x1="5.08133" y1="8.13532" x2="19.9152" y2="35.2721" gradientUnits="userSpaceOnUse">
50 | <stop offset="0.259336" stop-color="#FFDB6E"/>
51 | <stop offset="1" stop-color="#FFBC5E"/>
52 | </linearGradient>
53 | </defs>
54 | </svg>
55 | 


--------------------------------------------------------------------------------
/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 | }


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