├── src
    ├── assets
    │   ├── alc.png
    │   ├── me.jpg
    │   ├── me2.png
    │   ├── fake.png
    │   ├── math.png
    │   ├── news.png
    │   ├── port.png
    │   ├── todo.png
    │   ├── linkedin.png
    │   ├── shelter.png
    │   ├── bg-texture.png
    │   ├── bookstore.png
    │   └── meri_gogichashvili_cv.pdf
    ├── index.js
    ├── components
    │   ├── header
    │   │   ├── CTA.jsx
    │   │   ├── Header.jsx
    │   │   ├── HeaderSocials.jsx
    │   │   └── header.css
    │   ├── topbar
    │   │   ├── topbar.css
    │   │   └── Topbar.jsx
    │   ├── portfolio
    │   │   ├── portfolio.css
    │   │   └── Portfolio.jsx
    │   ├── testimonials
    │   │   ├── testimonials.css
    │   │   └── Testimonials.jsx
    │   ├── footer
    │   │   ├── footer.css
    │   │   └── Footer.jsx
    │   ├── experience
    │   │   ├── experience.css
    │   │   └── Experience.jsx
    │   ├── contact
    │   │   ├── contact.css
    │   │   └── Contact.jsx
    │   └── intro
    │   │   ├── Intro.jsx
    │   │   └── intro.css
    ├── App.jsx
    └── index.css
├── .gitignore
├── public
    └── index.html
├── package.json
└── README.md


/src/assets/alc.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Meri-MG/portfolio---react/HEAD/src/assets/alc.png


--------------------------------------------------------------------------------
/src/assets/me.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Meri-MG/portfolio---react/HEAD/src/assets/me.jpg


--------------------------------------------------------------------------------
/src/assets/me2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Meri-MG/portfolio---react/HEAD/src/assets/me2.png


--------------------------------------------------------------------------------
/src/assets/fake.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Meri-MG/portfolio---react/HEAD/src/assets/fake.png


--------------------------------------------------------------------------------
/src/assets/math.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Meri-MG/portfolio---react/HEAD/src/assets/math.png


--------------------------------------------------------------------------------
/src/assets/news.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Meri-MG/portfolio---react/HEAD/src/assets/news.png


--------------------------------------------------------------------------------
/src/assets/port.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Meri-MG/portfolio---react/HEAD/src/assets/port.png


--------------------------------------------------------------------------------
/src/assets/todo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Meri-MG/portfolio---react/HEAD/src/assets/todo.png


--------------------------------------------------------------------------------
/src/assets/linkedin.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Meri-MG/portfolio---react/HEAD/src/assets/linkedin.png


--------------------------------------------------------------------------------
/src/assets/shelter.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Meri-MG/portfolio---react/HEAD/src/assets/shelter.png


--------------------------------------------------------------------------------
/src/assets/bg-texture.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Meri-MG/portfolio---react/HEAD/src/assets/bg-texture.png


--------------------------------------------------------------------------------
/src/assets/bookstore.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Meri-MG/portfolio---react/HEAD/src/assets/bookstore.png


--------------------------------------------------------------------------------
/src/assets/meri_gogichashvili_cv.pdf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Meri-MG/portfolio---react/HEAD/src/assets/meri_gogichashvili_cv.pdf


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom/client';
 3 | import App from './App';
 4 | import './index.css';
 5 | 
 6 | const root = ReactDOM.createRoot(document.getElementById('root'));
 7 | root.render(
 8 |   <React.StrictMode>
 9 |     <App />
10 |   </React.StrictMode>
11 | );
12 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | 
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | 


--------------------------------------------------------------------------------
/src/components/header/CTA.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import CV from '../../assets/meri_gogichashvili_cv.pdf';
 3 | 
 4 | const CTA = () => {
 5 |   return (
 6 |     <div className="cta">
 7 |       <a href={CV} download className="btn">
 8 |         Download CV
 9 |       </a>
10 |       <a href="#contact" className="btn btn-primary">
11 |         Let's talk
12 |       </a>
13 |     </div>
14 |   );
15 | };
16 | 
17 | export default CTA;
18 | 


--------------------------------------------------------------------------------
/src/components/header/Header.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import CTA from './CTA';
 3 | import HeaderSocials from './HeaderSocials';
 4 | import './header.css';
 5 | 
 6 | const Header = () => {
 7 |   return (
 8 |     <header id="home">
 9 |       <div className="container header__container">
10 |         <h5>Hello I'm</h5>
11 |         <h1>Meri Gogichashvili</h1>
12 |         <h5 className="text-light">Full-stack Developer</h5>
13 |         <CTA />
14 |         <a href="#contact" className="scroll__down">
15 |           Scroll Down
16 |         </a>
17 |         <HeaderSocials />
18 |       </div>
19 |     </header>
20 |   );
21 | };
22 | 
23 | export default Header;
24 | 


--------------------------------------------------------------------------------
/src/components/header/HeaderSocials.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { BsLinkedin } from 'react-icons/bs';
 3 | import { FaGithub } from 'react-icons/fa';
 4 | import { FaAngellist } from 'react-icons/fa'
 5 | 
 6 | const HeaderSocials = () => {
 7 |   return (
 8 |     <div className="header__socials">
 9 |       <a href="https://www.linkedin.com/in/meri-gogichashvili/" target="_blank" rel="noreferrer" ><BsLinkedin /></a>
10 |       <a href="https://github.com/Meri-MG" target="_blank" rel="noreferrer" ><FaGithub /></a>
11 |       <a href="https://angel.co/u/meri-gogichashvili" target="_blank" rel="noreferrer" ><FaAngellist /></a>
12 |     </div>
13 |   )
14 | }
15 | 
16 | export default HeaderSocials


--------------------------------------------------------------------------------
/src/components/topbar/topbar.css:
--------------------------------------------------------------------------------
 1 | nav {
 2 |   background: rgba(0, 0, 0, 0.3);
 3 |   width: max-content;
 4 |   display: block;
 5 |   padding: 0.7rem 1.7rem;
 6 |   z-index: 2;
 7 |   position: fixed;
 8 |   left: 50%;
 9 |   transform: translateX(-50%);
10 |   bottom: 2rem;
11 |   display: flex;
12 |   gap: 0.8rem;
13 |   border-radius: 3rem;
14 |   backdrop-filter: blur(15px);
15 | }
16 | 
17 | nav a {
18 |   background: transparent;
19 |   padding: 0.9rem;
20 |   border-radius: 50%;
21 |   display: flex;
22 |   color: var(--color-light);
23 |   font-size: 1.1rem;
24 | }
25 | 
26 | nav a:hover {
27 |   background: rgba(0, 0, 0, 0.3);
28 | }
29 | 
30 | nav a.active {
31 |   background: var(--color-bg);
32 |   color: var(--color-white);
33 | }


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 6 |     <meta
 7 |       name="description"
 8 |       content="Web site created using create-react-app"
 9 |     />
10 |     <link
11 |       href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;500;700;900&display=swap"
12 |       rel="stylesheet"
13 |     />
14 |     <title>Meri-MG React-Portfolio</title>
15 |     <style>
16 |       * {
17 |         font-family: 'Roboto', sans-serif;
18 |         margin: 0;
19 |       }
20 |     </style>
21 |   </head>
22 |   <body>
23 |     <noscript>You need to enable JavaScript to run this app.</noscript>
24 |     <div id="root"></div>
25 |   </body>
26 | </html>
27 | 


--------------------------------------------------------------------------------
/src/App.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import Contact from './components/contact/Contact';
 3 | import Experience from './components/experience/Experience';
 4 | import Footer from './components/footer/Footer';
 5 | import Header from './components/header/Header';
 6 | import Intro from './components/intro/Intro';
 7 | import Portfolio from './components/portfolio/Portfolio';
 8 | import Testimonials from './components/testimonials/Testimonials';
 9 | import Topbar from './components/topbar/Topbar';
10 | 
11 | 
12 | const App = () => {
13 |   return (
14 |     <>
15 |       <Header />
16 |       <Topbar />
17 |       <Intro />
18 |       <Experience />
19 |       <Portfolio />
20 |       <Testimonials />
21 |       <Contact />
22 |       <Footer />
23 |     </>
24 |   )
25 | }
26 | 
27 | export default App
28 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "portfolio---react",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@emailjs/browser": "^3.6.2",
 7 |     "@testing-library/jest-dom": "^5.16.4",
 8 |     "@testing-library/react": "^13.3.0",
 9 |     "@testing-library/user-event": "^13.5.0",
10 |     "react": "^18.2.0",
11 |     "react-dom": "^18.2.0",
12 |     "react-icons": "^4.4.0",
13 |     "react-scripts": "5.0.1",
14 |     "swiper": "^8.2.4",
15 |     "web-vitals": "^2.1.4"
16 |   },
17 |   "scripts": {
18 |     "start": "react-scripts start",
19 |     "build": "react-scripts build",
20 |     "test": "react-scripts test",
21 |     "eject": "react-scripts eject"
22 |   },
23 |   "eslintConfig": {
24 |     "extends": [
25 |       "react-app",
26 |       "react-app/jest"
27 |     ]
28 |   },
29 |   "browserslist": {
30 |     "production": [
31 |       ">0.2%",
32 |       "not dead",
33 |       "not op_mini all"
34 |     ],
35 |     "development": [
36 |       "last 1 chrome version",
37 |       "last 1 firefox version",
38 |       "last 1 safari version"
39 |     ]
40 |   }
41 | }
42 | 


--------------------------------------------------------------------------------
/src/components/header/header.css:
--------------------------------------------------------------------------------
 1 | header {
 2 |   height: 100%;
 3 |   padding-top: 7rem;
 4 |   overflow: hidden;
 5 | }
 6 | 
 7 | .header__container {
 8 |   text-align: center;
 9 |   height: 100%;
10 |   position: relative;
11 | }
12 | 
13 | .cta {
14 |   display: flex;
15 |   justify-content: center;
16 |   gap: 1.2rem;
17 |   margin-top: 2.5rem;
18 | }
19 | 
20 | .header__socials {
21 |   display: flex;
22 |   flex-direction: column;
23 |   align-items: center;
24 |   gap: 0.8rem;
25 |   position: absolute;
26 |   left: 5rem;
27 |   bottom: 1rem;
28 | }
29 | 
30 | .header__socials::after {
31 |   content: '';
32 |   width: 1px;
33 |   height: 2rem;
34 |   background: var(--color-primary);
35 | }
36 | 
37 | .scroll__down {
38 |   position: absolute;
39 |   right: 5rem;
40 |   bottom: 5rem;
41 |   transform: rotate(90deg);
42 |   font-weight: 300;
43 |   font-size: 0.9rem;
44 | }
45 | 
46 | @media screen and (max-width: 1024px){
47 |   header {
48 |     padding-top: 3rem;
49 |   }
50 | 
51 |   section {
52 |     margin-top: 6rem;
53 |   }
54 | }
55 | 
56 | @media screen and (max-width: 600px){
57 | 
58 |   .header__socials,
59 |   .scroll__down {
60 |     display: none;
61 |   }
62 | }


--------------------------------------------------------------------------------
/src/components/topbar/Topbar.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useState } from 'react';
 2 | import { AiOutlineHome } from 'react-icons/ai';
 3 | import { AiOutlineUser } from 'react-icons/ai';
 4 | import { BiBook } from 'react-icons/bi';
 5 | import { RiServiceLine } from 'react-icons/ri';
 6 | import { BiMessageSquareDetail } from 'react-icons/bi';
 7 | 
 8 | 
 9 | import './topbar.css';
10 | 
11 | const Topbar = () => {
12 |   const [activeNav, setActiveNav] = useState('#home');
13 |   return (
14 |     <nav>
15 |       <a href="#home" onClick={()=> setActiveNav('#home')} className={activeNav === '#home' ? 'active' : ''}><AiOutlineHome /></a>
16 |       <a href="#about" onClick={()=> setActiveNav('#about')} className={activeNav === '#about' ? 'active' : ''}><AiOutlineUser /></a>
17 |       <a href="#experience" onClick={()=> setActiveNav('#experience')} className={activeNav === '#experience' ? 'active' : ''}><BiBook /></a>
18 |       <a href="#portfolio" onClick={()=> setActiveNav('#portfolio')} className={activeNav === '#portfolio' ? 'active' : ''}><RiServiceLine /></a>
19 |       <a href="#contact" onClick={()=> setActiveNav('#contact')} className={activeNav === '#contact' ? 'active' : ''}><BiMessageSquareDetail /></a>
20 |     </nav>
21 |   )
22 | }
23 | 
24 | export default Topbar;


--------------------------------------------------------------------------------
/src/components/portfolio/portfolio.css:
--------------------------------------------------------------------------------
 1 | .portfolio__container {
 2 |     display: grid;
 3 |     grid-template-columns: repeat(3, 1fr);
 4 |     gap: 2.5rem;
 5 | }
 6 | 
 7 | .portfolio__item {
 8 |     background: var(--color-bg-variant);
 9 |     padding: 1.3rem;
10 |     border-radius: 2rem;
11 |     border: 1px solid transparent;
12 |     transition: var(--transition);
13 | }
14 | 
15 | .portfolio__item:hover {
16 |     border-color: var(--color-primary-variant);
17 |     background: transparent;
18 | }
19 | 
20 | .portfolio__item-image {
21 |     border-radius: 1.5rem;
22 |     overflow: hidden;
23 |     height: 30%;
24 | }
25 | 
26 | .portfolio__item h3 {
27 |     margin: 2rem 0;
28 | }
29 | 
30 | .portfolio__item p {
31 |     margin: 0 0 1.2rem 0;
32 |     font-size: 0.9rem;
33 | }
34 | 
35 | .portfolio__item-cta {
36 |     display: flex;
37 |     gap: 1rem;
38 |     margin-bottom: 2rem; 
39 | }
40 | 
41 | .portfolio__item-content {
42 |     height: 50%;
43 | }
44 | 
45 | @media screen and (max-width: 1024px){
46 |     .portfolio__container {
47 |         grid-template-columns: 1fr 1fr;
48 |         gap: 1.2rem;
49 |     }
50 | }
51 |   
52 | @media screen and (max-width: 600px){
53 |     .portfolio__container {
54 |         grid-template-columns: 1fr;
55 |         gap: 1rem;
56 |     }
57 | }


--------------------------------------------------------------------------------
/src/components/testimonials/testimonials.css:
--------------------------------------------------------------------------------
 1 | .container.testimonials__container {
 2 |     width: 40%;
 3 |     padding-bottom: 4rem;
 4 | }
 5 | 
 6 | .client__avatar {
 7 |     width: 4rem;
 8 |     aspect-ratio: 1/1;
 9 |     overflow: hidden;
10 |     border-radius: 50%;
11 |     margin: 0 auto 1rem;
12 |     display: flex;
13 |     justify-content: center;
14 |     align-content: center;
15 | }
16 | 
17 | .client__avatar a {
18 |     font-size: 40px;
19 |     aspect-ratio: 1/1;
20 | }
21 | 
22 | .testimonial {
23 |     background: var(--color-bg-variant);
24 |     text-align: center;
25 |     padding: 2rem;
26 |     border-radius: 2rem;
27 |     user-select: none;
28 | }
29 | 
30 | .client__review {
31 |     color: var(--color-light);
32 |     font-weight: 300;
33 |     display: block;
34 |     width: 90%;
35 |     margin: 0.8rem auto 0;
36 | }
37 | 
38 | .swiper-pagination-clickable .swiper-pagination-bullet {
39 |     background: var(--color-primary);
40 | }
41 | 
42 | @media screen and (max-width: 1024px){
43 |     .container.testimonials__container {
44 |         width: 60%;
45 |     }
46 | }
47 |   
48 | @media screen and (max-width: 600px){
49 |     .container.testimonials__container {
50 |         width: var(--container-width-sm);
51 |     }
52 | 
53 |     .client__review {
54 |         width: var(--container-width-sm);
55 |     }
56 | }


--------------------------------------------------------------------------------
/src/components/footer/footer.css:
--------------------------------------------------------------------------------
 1 | footer {
 2 |     background: var(--color-primary);
 3 |     padding: 3rem 0;
 4 |     text-align: center;
 5 |     font-size: 0.9rem;
 6 |     margin-top: 7rem;
 7 | }
 8 | 
 9 | footer a {
10 |     color: var(--color-bg);
11 | }
12 | 
13 | .footer__logo {
14 |     font-size: 2rem;
15 |     font-weight: 500;
16 |     margin-bottom: 2rem;
17 |     display: inline-block;
18 | }
19 | 
20 | .permalinks {
21 |     display: flex;
22 |     flex-wrap: wrap;
23 |     justify-content: center;
24 |     gap: 2rem;
25 |     margin: 0 auto 3rem;
26 | }
27 | 
28 | .footer__socials {
29 |     display: flex;
30 |     justify-content: center;
31 |     gap: 1rem;
32 |     margin-bottom: 4rem;
33 | }
34 | 
35 | .footer__socials a {
36 |     background: var(--color-bg);
37 |     color: var(--color-white);
38 |     padding: 0.8rem;
39 |     border-radius: 0.7rem;
40 |     display: flex;
41 |     border: 1px solid transparent;
42 | }
43 | 
44 | .footer__socials a:hover {
45 |     background: transparent;
46 |     color: var(--color-bg);
47 |     border-color: var(--color-bg);
48 | }
49 | 
50 | .footer__copyright {
51 |     margin-bottom: 4rem;
52 |     color: var(--color-bg);
53 | }
54 |   
55 | @media screen and (max-width: 600px){
56 |     .permalinks {
57 |         flex-direction: column;
58 |         gap: 1.5rem;
59 |     }
60 | 
61 |     .footer__socials {
62 |         margin-bottom: 2.6rem;
63 |     }
64 | }


--------------------------------------------------------------------------------
/src/components/footer/Footer.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { BsLinkedin } from 'react-icons/bs';
 3 | import { FaGithub } from 'react-icons/fa';
 4 | import { FaAngellist } from 'react-icons/fa'
 5 | import './footer.css';
 6 | 
 7 | const Footer = () => {
 8 |   
 9 |   let getYear = () => {
10 |     let currentYear = new Date().getFullYear();
11 |     return currentYear;
12 |   };
13 |   
14 |   return (
15 |     <footer>
16 |       <a href="#home" className="footer__logo">Meri-MG</a>
17 |       <ul className="permalinks">
18 |         <li><a href="#home">Home</a></li>
19 |         <li><a href="#about">About</a></li>
20 |         <li><a href="#experience">Skills</a></li>
21 |         <li><a href="#portfolio">Portfolio</a></li>
22 |         <li><a href="#testimonials">Testimonials</a></li>
23 |         <li><a href="#contact">Contact</a></li>
24 |       </ul>
25 |       <div className="footer__socials">
26 |       <a href="https://www.linkedin.com/in/meri-gogichashvili/" target="_blank" rel="noreferrer" ><BsLinkedin /></a>
27 |       <a href="https://github.com/Meri-MG" target="_blank" rel="noreferrer" ><FaGithub /></a>
28 |       <a href="https://angel.co/u/meri-gogichashvili" target="_blank" rel="noreferrer" ><FaAngellist /></a>
29 |       </div>
30 |       <div className="footer__copyright">
31 |         <small>&copy; ET {getYear()}. All rights reserved.</small>
32 |       </div>
33 |     </footer>
34 |   )
35 | }
36 | 
37 | export default Footer
38 | 


--------------------------------------------------------------------------------
/src/components/experience/experience.css:
--------------------------------------------------------------------------------
 1 | .experience__container {
 2 |     display: grid;
 3 |     grid-template-columns: 1fr 1fr;
 4 |     gap: 2rem;
 5 | }
 6 | 
 7 | .experience__container > div {
 8 |     background: var(--color-bg-variant);
 9 |     padding: 2.4rem 5rem;
10 |     border-radius: 2rem;
11 |     border: 1px solid transparent;
12 |     transition: var(--transition);
13 | }
14 | 
15 | .experience__container > div:hover {
16 |     background: transparent;
17 |     border-color: var(--color-primary-variant);
18 |     cursor: default;
19 | }
20 | 
21 | .experience__container > div h3 {
22 |     text-align: center;
23 |     margin-bottom: 2rem;
24 |     color: var(--color-primary);
25 | }
26 | 
27 | .experience__content {
28 |     display: grid;
29 |     grid-template-columns: 1fr 1fr;
30 |     row-gap: 2rem;
31 | }
32 | 
33 | .experience__details {
34 |     display: flex;
35 |     gap: 1rem;
36 | }
37 | 
38 | .experience__details-icon {
39 |     margin-top: 6px;
40 |     color: var(--color-primary);
41 | }
42 | 
43 | @media screen and (max-width: 1024px){
44 |     .experience__container {
45 |         grid-template-columns: 1fr;
46 |     }
47 | 
48 |     .experience__container > div {
49 |         width: 80%;
50 |         margin: 0 auto;
51 |         padding: 2rem;
52 |     }
53 | 
54 |     .experience__content p {
55 |         padding: 1rem;
56 |     }
57 | }
58 |   
59 | @media screen and (max-width: 600px){
60 |     .experience__container {
61 |         gap: 1rem;
62 |     }
63 | 
64 |     .experience__container > div {
65 |         width: 100%;
66 |         padding: 2rem 1rem;
67 |     }
68 | }


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Personal-Portfolio
 2 | > This is personal portfolio website.
 3 | 
 4 | ![Portfolio](https://raw.github.com/Meri-MG/portfolio---react/master/src/assets/port.png)
 5 | 
 6 | ## Built With
 7 | 
 8 | - React
 9 | - CSS
10 | - VS code
11 | 
12 | ## Live Demo
13 | 
14 | - [Live Demo](https://meri-mg-portfolio.netlify.app/)
15 | 
16 | 
17 | # Getting Started
18 | ## Prerequisites:
19 | 
20 | 
21 | - Create an account on github
22 | 
23 | - Install gitbash or use git on the command line.
24 | 
25 | - Use an IDE of your preference such as VScode.
26 | 
27 | ## Steps to follow:
28 | 
29 | - Choose a folder in your local machine where you want this repository to be copied
30 | 
31 | - Clone this [repository](https://github.com/Meri-MG/portfolio---react) to your local machine 
32 | - ```
33 |   git clone git@github.com:Meri-MG/portfolio---react.git
34 |   ```
35 | 
36 | - Navigate to `cd portfolio---react`  directory.
37 | 
38 | - To install all the app dependencies on the command line run
39 | - ```
40 |   npm install
41 |   ``` 
42 | - To run app in the development mode run 
43 | - ```
44 |   npm start
45 |   ```
46 | 
47 | 
48 | ## Author
49 | 
50 | :woman: **Meri Gogichashvili**
51 | 
52 | - [GitHub](https://github.com/Meri-MG)
53 | - [LinkedIn](https://www.linkedin.com/in/meri-gogichashvili/)
54 | 
55 | ## 🤝 Contributing
56 | - Contributions, issues, and feature requests are welcome!
57 | - Feel free to check the [issues page](https://github.com/Meri-MG/portfolio---react/issues).
58 | 
59 | # Show your support
60 | Give a ⭐ if you like this project!
61 | 
62 | # Acknowledgments
63 | Thanks to [EGATOR](https://www.youtube.com/watch?v=G-Cr00UYokU&list=WL&index=55&t=1845s) tutorial!
64 | 


--------------------------------------------------------------------------------
/src/components/contact/contact.css:
--------------------------------------------------------------------------------
 1 | .container.contact__container {
 2 |     width: 58%;
 3 |     display: grid;
 4 |     grid-template-columns: 30% 58%;
 5 |     gap: 12%;
 6 | } 
 7 | 
 8 | .contact__options {
 9 |     display: flex;
10 |     flex-direction: column;
11 |     justify-content: center;
12 |     gap: 1.2rem;
13 | }
14 | 
15 | .contact__option {
16 |     background: var(--color-bg-variant);
17 |     padding: 1.2rem;
18 |     border-radius: 1.2rem;
19 |     text-align: center;
20 |     border: 1px solid transparent;
21 |     transition: var(--transition);
22 | }
23 | 
24 | .contact__option:hover {
25 |     background: transparent;
26 |     border-color: var(--color-primary-variant);
27 | }
28 | 
29 | .contact__option-icon {
30 |     font-size: 1.5rem;
31 |     margin-bottom: 0.5rem;
32 | }
33 | 
34 | .contact__option a {
35 |     margin-top: 0.7rem;
36 |     display: inline-block;
37 |     font-size: 0.8rem;
38 | }
39 | 
40 | .contact__option h5 {
41 |     color: var(--color-light);
42 | }
43 | 
44 | .contact__option h4 {
45 |     font-weight: 500;
46 | }
47 | 
48 | form span {
49 |     font-size: 0.8rem;
50 | }
51 | 
52 | form {
53 |     display: flex;
54 |     flex-direction: column;
55 |     gap: 1.2rem;
56 | }
57 | 
58 | input,
59 | textarea {
60 |     width: 100%;
61 |     padding: 1.5rem;
62 |     border-radius: 0.5rem;
63 |     background: transparent;
64 |     border: 2px solid var(--color-primary-variant);
65 |     resize: none;
66 |     color: var(--color-white);
67 | }
68 | 
69 | @media screen and (max-width: 1024px){
70 |     .container.contact__container {
71 |         grid-template-columns: 1fr;
72 |         gap: 2rem;
73 |     }
74 | }
75 |   
76 | @media screen and (max-width: 600px){
77 |     .container.contact__container {
78 |         width: var(--container-width-sm);
79 |     }
80 | }


--------------------------------------------------------------------------------
/src/components/intro/Intro.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { FaAward } from 'react-icons/fa';
 3 | import { VscFolderLibrary } from 'react-icons/vsc';
 4 | import ME from '../../assets/me.jpg';
 5 | import './intro.css';
 6 | 
 7 | const Intro = () => {
 8 |   return (
 9 |     <section id="about">
10 |       <h5>Get to know</h5>
11 |       <h2>About Me</h2>
12 |       <div className="container about__container">
13 |         <div className="about__me">
14 |           <div className="about__me-image">
15 |             <img src={ME} alt="me" />
16 |           </div>
17 |         </div>
18 |         <div className="about__content">
19 |           <div className="about__cards">
20 |             <article className="about__card">
21 |               <FaAward className="about__icon" />
22 |               <h5>Experience</h5>
23 |               <small>1+ year</small>
24 |             </article>
25 |             <article className="about__card">
26 |               <VscFolderLibrary className="about__icon" />
27 |               <h5>Projects</h5>
28 |               <small>20+ Completed Projects</small>
29 |             </article>
30 |           </div>
31 |           <p>I’ve spent the last several months in a remote environment, working with HTML, CSS, JavaScript, building everything from landing pages to APIs. My experience as a teacher in an international school helped me collaborate with fellow developers from all over the world. Additionally, working with kids isn’t an easy task, however, it has helped me become efficient, productive, and fast even in a very stressful environment, which is an important skill in the tech industry.</p>
32 |           <a href="#contact" className="btn btn-primary">Let's Talk</a>
33 |         </div>
34 |       </div>
35 |     </section>
36 |   )
37 | }
38 | 
39 | export default Intro


--------------------------------------------------------------------------------
/src/components/contact/Contact.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useRef, useState } from 'react';
 2 | import emailjs from '@emailjs/browser';
 3 | import { MdOutlineEmail } from 'react-icons/md';
 4 | import './contact.css';
 5 | 
 6 | const Contact = () => {
 7 |   const [message, setMessage] = useState(false);
 8 |   const formRef = useRef();
 9 |   const handleSubmit = (e) => {
10 |     e.preventDefault();
11 |     setMessage(true);
12 |     emailjs
13 |       .sendForm(
14 |         'service_k2qawqh',
15 |         'template_c6rkpn6',
16 |         formRef.current,
17 |         'X7K7ebhIeOy3YwHki'
18 |       )
19 |       .then(
20 |         (result) => {
21 |           console.log(result.text);
22 |         },
23 |         (error) => {
24 |           console.log(error.text);
25 |         }
26 |       );
27 | 
28 |     e.target.reset();
29 |   };
30 |   return (
31 |     <section id="contact">
32 |       <h5>Get In Touch</h5>
33 |       <h2>Contact Me</h2>
34 |       <div className="container contact__container">
35 |         <div className="contact__options">
36 |           <article className="contact__option">
37 |             <MdOutlineEmail className="contact__option-icon" />
38 |             <h4>Email</h4>
39 |             <h5>merigogichashvili13@gmail.com</h5>
40 |             <a href="mailto:merigogichashvili13@gmail.com">Send a message</a>
41 |           </article>
42 |         </div>
43 |         <form ref={formRef} onSubmit={handleSubmit}>
44 |           <input
45 |             type="text"
46 |             placeholder="Your Full Name"
47 |             name="user_name"
48 |             required
49 |           />
50 |           <input
51 |             type="text"
52 |             placeholder="Your Email"
53 |             name="user_email"
54 |             required
55 |           />
56 |           <textarea
57 |             placeholder="Your message"
58 |             rows="7"
59 |             name="message"
60 |             required
61 |           ></textarea>
62 |           <button type="submit" className="btn btn-primary">
63 |             Send Message
64 |           </button>
65 |           {message && <span>Thanks, I'll reply ASAP :)</span>}
66 |         </form>
67 |       </div>
68 |     </section>
69 |   );
70 | };
71 | 
72 | export default Contact;
73 | 


--------------------------------------------------------------------------------
/src/components/intro/intro.css:
--------------------------------------------------------------------------------
  1 | .about__container {
  2 |     display: grid;
  3 |     grid-template-columns: 35% 50%;
  4 |     gap: 15%;
  5 | }
  6 | 
  7 | .about__me {
  8 |     width: 100%;
  9 |     aspect-ratio: 1/1;
 10 |     border-radius: 2rem;
 11 |     background: linear-gradient(45deg, transparent, var(--color-primary), transparent);
 12 |     display: grid;
 13 |     place-items: center;
 14 | }
 15 | 
 16 | .about__me-image {
 17 |     border-radius: 2rem;
 18 |     overflow: hidden;
 19 |     transform: rotate(10deg);
 20 |     transition: var(--transition);
 21 | }
 22 | 
 23 | .about__me-image:hover {
 24 |     transform: rotate(0);
 25 | }
 26 | 
 27 | .about__cards {
 28 |     display: grid;
 29 |     grid-template-columns: repeat(2, 1fr);
 30 |     gap: 1.5rem;
 31 | }
 32 | 
 33 | .about__card {
 34 |     background: var(--color-bg-variant);
 35 |     border: 1px solid transparent;
 36 |     border-radius: 1rem;
 37 |     padding: 2rem;
 38 |     text-align: center;
 39 |     transition: var(--transition);
 40 | }
 41 | 
 42 | .about__card:hover {
 43 |     background: transparent;
 44 |     border-color: var(--color-primary-variant);
 45 |     cursor: default;
 46 | }
 47 | 
 48 | .about__icon {
 49 |     color: var(--color-primary);
 50 |     font-size: 1.5rem;
 51 |     margin-bottom: 1rem;
 52 | }
 53 | 
 54 | .about__card h5 {
 55 |     font-size: 1rem;
 56 | }
 57 | 
 58 | .about__card small {
 59 |     font-size: 0.9rem;
 60 |     color: var(--color-light);
 61 | }
 62 | 
 63 | .about__content p {
 64 |     margin: 2rem 0 2.6rem;
 65 |     color: var(--color-light);
 66 | }
 67 | 
 68 | @media screen and (max-width: 1024px){
 69 |     .about__container {
 70 |         grid-template-columns: 1fr;
 71 |         gap: 0;
 72 |     }
 73 | 
 74 |     .about__me {
 75 |         width: 50%;
 76 |         margin: 2rem auto 4rem; 
 77 |     }
 78 | 
 79 |     .about__content p {
 80 |         margin: 1rem 0 1.5rem;
 81 |     }
 82 | }
 83 |   
 84 | @media screen and (max-width: 600px){
 85 |     .about__me {
 86 |         width: 65%;
 87 |         margin: 0rem auto 3rem; 
 88 |     }
 89 | 
 90 |     .about__cards {
 91 |         grid-template-columns: 1fr 1fr;
 92 |         gap: 1rem;
 93 |     }
 94 | 
 95 |     .about__content {
 96 |         text-align: center;
 97 |     }
 98 | 
 99 |     .about__content p {
100 |         margin: 1.5rem 0;
101 |     }
102 | }


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&family=Roboto:wght@100;300;700;900&display=swap');
  2 | 
  3 | * {
  4 |   margin: 0;
  5 |   padding: 0;
  6 |   border: 0;
  7 |   outline: 0;
  8 |   box-sizing: border-box;
  9 |   list-style: none;
 10 |   text-decoration: none;
 11 | }
 12 | 
 13 | :root {
 14 |   --color-bg: #1f1f38;
 15 |   --color-bg-variant: #2c2c6c;
 16 |   --color-primary: #4db5ff;
 17 |   --color-primary-variant: rgba(77, 181, 255, 0.4);
 18 |   --color-white: #fff;
 19 |   --color-light: rgba(255, 255, 255, 0.6);
 20 | 
 21 |   --transition: all 400ms ease;
 22 | 
 23 |   --container-width-lg: 75%;
 24 |   --container-width-md: 86%;
 25 |   --container-width-sm: 90%;
 26 | }
 27 | 
 28 | html {
 29 |   scroll-behavior: smooth;
 30 | }
 31 | 
 32 | ::-webkit-scrollbar {
 33 |   display: none;
 34 | }
 35 | 
 36 | body {
 37 |   font-family: 'Poppins', sans-serif;
 38 |   background-color: var(--color-bg);
 39 |   color: var(--color-white);
 40 |   line-height: 1.7;
 41 |   background-image: url(../src/assets/bg-texture.png);
 42 | }
 43 | 
 44 | .container {
 45 |   width: var(--container-width-lg);
 46 |   margin: 0 auto;
 47 | }
 48 | 
 49 | h1,
 50 | h2,
 51 | h3,
 52 | h4,
 53 | h5,
 54 | h6 {
 55 |   font-weight: 500;
 56 | }
 57 | 
 58 | h1 {
 59 |   font-size: 2.5rem;
 60 | }
 61 | 
 62 | section {
 63 |   margin-top: 8rem;
 64 | }
 65 | 
 66 | section > h2,
 67 | section > h5 {
 68 |   color: var(--color-light);
 69 |   text-align: center;
 70 | }
 71 | 
 72 | section > h2 {
 73 |   color: var(--color-primary);
 74 |   margin-bottom: 3rem;
 75 | }
 76 | 
 77 | .text-light {
 78 |   color: var(--color-primary)
 79 | }
 80 | 
 81 | a {
 82 |   transition: var(--transition);
 83 |   color: var(--color-primary)
 84 | }
 85 | 
 86 | a:hover {
 87 |   color: var(--color-white);
 88 | }
 89 | 
 90 | .btn {
 91 |   width: max-content;
 92 |   display: inline-block;
 93 |   color: var(--color-primary);
 94 |   padding: 0.75rem 1.2rem;
 95 |   border-radius: 0.4rem;
 96 |   cursor: pointer;
 97 |   border: 1px solid var(--color-primary);
 98 |   transition: var(--transition);
 99 | }
100 | 
101 | .btn:hover {
102 |   background-color: var(--color-white);
103 |   color: var(--color-bg);
104 |   border-color: transparent;
105 | }
106 | 
107 | .btn-primary {
108 |   background-color: var(--color-primary);
109 |   color: var(--color-bg);
110 | }
111 | 
112 | img {
113 |   display: block;
114 |   width: 100%;
115 |   object-fit: cover;
116 | }
117 | 
118 | @media screen and (max-width: 1024px){
119 |   .container {
120 |     width: var(--container-width-md);
121 |   }
122 | 
123 |   section {
124 |     margin-top: 6rem;
125 |   }
126 | }
127 | 
128 | @media screen and (max-width: 600px){
129 |   .container {
130 |     width: var(--container-width-sm);
131 |   }
132 | 
133 |   section > h2 {
134 |     margin-bottom: 2rem;
135 |   }
136 | }


--------------------------------------------------------------------------------
/src/components/experience/Experience.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { BsFillPatchCheckFill } from 'react-icons/bs';
 3 | import './experience.css';
 4 | 
 5 | const Experience = () => {
 6 |   return (
 7 |     <section id="experience">
 8 |       <h5>The Skills I Have</h5>
 9 |       <h2>Skills</h2>
10 |       <div className="container experience__container">
11 |         <div className="experience__frontend">
12 |           <h3>Front-end Development</h3>
13 |           <div className="experience__content">
14 |           <article className="experience__details">
15 |               <BsFillPatchCheckFill className="experience__details-icon" />
16 |               <h4>HTML</h4>
17 |             </article>
18 |             <article className="experience__details">
19 |               <BsFillPatchCheckFill className="experience__details-icon" />
20 |               <h4>CSS</h4>
21 |             </article>
22 |             <article className="experience__details">
23 |               <BsFillPatchCheckFill className="experience__details-icon" />
24 |               <h4>JavaScript</h4>
25 |             </article>
26 |             <article className="experience__details">
27 |               <BsFillPatchCheckFill className="experience__details-icon" />
28 |               <h4>React</h4>
29 |             </article>
30 |             <article className="experience__details">
31 |               <BsFillPatchCheckFill className="experience__details-icon" />
32 |               <h4>Redux</h4>
33 |             </article>
34 |             <article className="experience__details">
35 |               <BsFillPatchCheckFill className="experience__details-icon" />
36 |               <h4>SCSS</h4>
37 |             </article>
38 |             <article className="experience__details">
39 |               <BsFillPatchCheckFill className="experience__details-icon" />
40 |               <h4>Tailwind</h4>
41 |             </article>
42 |           </div>
43 |         </div>
44 |         <div className="experience__backend">
45 |           <h3>Back-end Development</h3>
46 |           <div className="experience__content">
47 |           <article className="experience__details">
48 |               <BsFillPatchCheckFill className="experience__details-icon" />
49 |               <h4>Ruby</h4>
50 |             </article>
51 |             <article className="experience__details">
52 |               <BsFillPatchCheckFill className="experience__details-icon" />
53 |               <h4>Ruby on Rails</h4>
54 |             </article>
55 |             <article className="experience__details">
56 |               <BsFillPatchCheckFill className="experience__details-icon" />
57 |               <h4>PostgreSQL</h4>
58 |             </article>
59 |             <article className="experience__details">
60 |               <BsFillPatchCheckFill className="experience__details-icon" />
61 |               <h4>Swagger</h4>
62 |             </article>
63 |             <article className="experience__details">
64 |               <BsFillPatchCheckFill className="experience__details-icon" />
65 |               <h4>RSpec</h4>
66 |             </article>
67 |             <article className="experience__details">
68 |               <BsFillPatchCheckFill className="experience__details-icon" />
69 |               <h4>Git/GitHub</h4>
70 |             </article>
71 |           </div>
72 |         </div>
73 |       </div>
74 |     </section>
75 |   )
76 | }
77 | 
78 | export default Experience


--------------------------------------------------------------------------------
/src/components/portfolio/Portfolio.jsx:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import IMG1 from '../../assets/alc.png';
  3 | import IMG2 from '../../assets/todo.png';
  4 | import IMG3 from '../../assets/shelter.png';
  5 | import IMG4 from '../../assets/fake.png';
  6 | import IMG5 from '../../assets/news.png';
  7 | import IMG6 from '../../assets/math.png';
  8 | 
  9 | import './portfolio.css';
 10 | 
 11 | const Portfolio = () => {
 12 |   const soloProjects = [
 13 |     {
 14 |       id: 1,
 15 |       title: 'Adventist Learning Center',
 16 |       img: IMG1,
 17 |       description:
 18 |         'Adventist Learning Center provides quality education to Syrian and Kurdish Refugees living in Beirut, Lebanon. This simple website was built to reach a bigger audience and ease the process of gathering donations for the ALC students.',
 19 |       technologies: 'Ruby on Rails | SCSS',
 20 |       link: 'https://adventistlearningcenter-257375ab1970.herokuapp.com/',
 21 |       github: 'https://github.com/Meri-MG/school',
 22 |     },
 23 |     {
 24 |       id: 2,
 25 |       title: 'FakeStore',
 26 |       img: IMG4,
 27 |       description:
 28 |         'FakeStore app that provides information about available products and their details',
 29 |       technologies: 'React | Redux',
 30 |       link: 'https://fakestore-metrics.netlify.app/',
 31 |       github: 'https://github.com/Meri-MG/Fakestore---react',
 32 |     },
 33 |     {
 34 |       id: 3,
 35 |       title: 'To-Do App',
 36 |       img: IMG2,
 37 |       description: 'User friendly app to plan your day and manage tasks',
 38 |       technologies: 'JavaScript | Webpack',
 39 |       link: 'https://meri-mg.github.io/To-Do-List/dist/',
 40 |       github: 'https://github.com/Meri-MG/To-Do-List',
 41 |     },
 42 |     {
 43 |       id: 4,
 44 |       title: 'Shelter',
 45 |       img: IMG3,
 46 |       description:
 47 |         'Fully responsive interactive website built based on Figma design',
 48 |       technologies: 'JavaScript | CSS',
 49 |       link: 'https://meri-mg.github.io/shelter/pages/main/index.html',
 50 |       github: 'https://github.com/Meri-MG/shelter',
 51 |     },
 52 |     {
 53 |       id: 5,
 54 |       title: 'World News',
 55 |       img: IMG5,
 56 |       description:
 57 |         'Fully responsive interactive website built based on Adobe XD design',
 58 |       technologies: 'JavaScript | CSS',
 59 |       link: 'https://meri-mg.github.io/Unilab-world-news/',
 60 |       github: 'https://github.com/Meri-MG/Unilab-world-news',
 61 |     },
 62 |     {
 63 |       id: 6,
 64 |       title: 'Math Resource',
 65 |       img: IMG6,
 66 |       description:
 67 |         'Real-world group project which is still in progress and will provide educational platform for future young developers',
 68 |       technologies: 'JavaScript | Scss | Python',
 69 |       link: 'https://lukinoo.github.io/math-resource/',
 70 |       github: 'https://github.com/lukinoo/math-resource',
 71 |     },
 72 |   ];
 73 | 
 74 |   return (
 75 |     <section id="portfolio">
 76 |       <h5>My Recent Work</h5>
 77 |       <h2>Portfolio</h2>
 78 | 
 79 |       <div className="container portfolio__container">
 80 |         {soloProjects.map((pro) => (
 81 |           <article className="portfolio__item" key={pro.id}>
 82 |             <div className="portfolio__item-image">
 83 |               <img src={pro.img} alt={pro.title} />
 84 |             </div>
 85 |             <div className="portfolio__item-content">
 86 |               <h3>{pro.title}</h3>
 87 |               <p>{pro.description}</p>
 88 |               <p>{pro.technologies}</p>
 89 |             </div>
 90 |             <div className="portfolio__item-cta">
 91 |               <a
 92 |                 href={pro.github}
 93 |                 target="_blank"
 94 |                 className="btn"
 95 |                 rel="noreferrer"
 96 |               >
 97 |                 GitHub
 98 |               </a>
 99 |               <a
100 |                 href={pro.link}
101 |                 target="_blank"
102 |                 className="btn btn-primary"
103 |                 rel="noreferrer"
104 |               >
105 |                 Visit Website
106 |               </a>
107 |             </div>
108 |           </article>
109 |         ))}
110 |       </div>
111 |     </section>
112 |   );
113 | };
114 | 
115 | export default Portfolio;
116 | 


--------------------------------------------------------------------------------
/src/components/testimonials/Testimonials.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { BsLinkedin } from 'react-icons/bs';
 3 | import { Pagination } from 'swiper';
 4 | 
 5 | import { Swiper, SwiperSlide } from 'swiper/react';
 6 | 
 7 | // Import Swiper styles
 8 | import 'swiper/css';
 9 | import 'swiper/css/navigation';
10 | import 'swiper/css/pagination';
11 | import 'swiper/css/scrollbar';
12 | import './testimonials.css';
13 | 
14 | const Testimonials = () => {
15 |   const testimonials = [
16 |     {
17 |       id: 1,
18 |       link: 'https://www.linkedin.com/in/uzairali19/',
19 |       name: 'Uzair Ali',
20 |       role: 'Full-Stack Web Developer. JavaScript | Rails | React | Redux. Improving open-source projects, one commit at a time.',
21 |       test: 'As a developer and a problem solver, I think Meri is a great collaborative partner to have. I met Meri in some basic javascript & react projects and since then she has drastically progressed in her understanding of the development process. She always has a professional environment and has good audio and video quality which makes it easier to communicate with her.',
22 |     },
23 |     {
24 |       id: 2,
25 |       link: 'https://www.linkedin.com/in/yishak-wesego/',
26 |       name: 'Yishak Wesego',
27 |       role: 'Full-stack developer | Technical Support Engineer at Microverse',
28 |       test: "It was a pleasure collaborating with Meri on different projects. One of the things that I think is special about her is that she never settles, even after completing the projects she finds other resources and strengthens her knowledge. Collaborating with her is easy and comfortable, it's like working with someone you've known for a long period of time.",
29 |     },
30 |     {
31 |       id: 3,
32 |       link: 'https://www.linkedin.com/in/akuu-khan/',
33 |       name: 'akbar (Aku) Khan',
34 |       role: 'Full Stack Developer| Ruby on Rails | PostgreSQL | JavaScript | React | Redux | Html&Css | Python.',
35 |       test: 'I worked with Meri in the same team and her communication skills are very strong. Her programming skill is one of the bests, given the time frame in the field. She is a good team player.  She will probably fit in most of the companies not only because she\'s a good team worker, but also because she has very good skills and I know she has much more potential to be shown.',
36 |     },
37 |     {
38 |       id: 4,
39 |       link: 'https://www.linkedin.com/in/isaicespedes/',
40 |       name: 'Isai Céspedes',
41 |       role: 'Full-Stack Web Developer. JavaScript | Rails | React | Redux.',
42 |       test: "I mentored Meri some months ago, and I can say that she is one of those people that you love to work with. She was always interested in what I was trying to teach her, paying attention and always asking questions if something was not clear. When it comes to professional skills, she is really committed to work, always doing her best and going beyond the requirements of the project she's building.",
43 |     },
44 |     {
45 |       id: 5,
46 |       link: 'https://www.linkedin.com/in/hamzaalitarar/',
47 |       name: 'Hamza Tarar',
48 |       role: 'Software Developer',
49 |       test: "Throughout all our collaborations, Meri has always conducted herself politely and kindly. She comes across as someone that's always willing to help and puts the team ahead of herself. But beneath this, I see a strength and determination to distinguish herself. She's not only someone I highly recommend but is also someone I greatly respect.",
50 |     },
51 |     {
52 |       id: 6,
53 |       link: 'https://www.linkedin.com/in/rex9/',
54 |       name: 'Htet (Rex) Naing',
55 |       role: 'Full Stack Developer | Mindful Mentor | Cheerful Team Player',
56 |       test: "Meri is really cheerful and supportive person. I know her when she reviewed my resume. Her feedback was so crystal clear and super effective for me. After that, even though she has no responsibility of reviewing my resume again. She helped me patiently when I ask her again and again. Meri is gifted in reviewing the work and giving advice to others. I feel really lucky to have her as the reviewer of my resume.",
57 |     },
58 |   ];
59 |   return (
60 |     <section id="testmonials">
61 |       <h5>Feedback from my peers</h5>
62 |       <h2>Testimonials</h2>
63 |       <Swiper 
64 |         className="container testimonials__container"
65 |         modules={[Pagination]}
66 |         spaceBetween={40}
67 |         slidesPerView={1}
68 |         pagination={{ clickable: true }}
69 |         >
70 |         {testimonials.map((test) => (
71 |           <SwiperSlide className="testimonial" key={test.id}>
72 |           <div className="client__avatar">
73 |             <a href={test.link}>
74 |               <BsLinkedin />
75 |             </a>
76 |           </div>
77 |           <h5 className='client__name'>{test.name}</h5>
78 |           <small className="client__review">{test.test}</small>
79 |         </SwiperSlide>
80 |         ))}
81 |       </Swiper>
82 |     </section>
83 |   )
84 | }
85 | 
86 | export default Testimonials


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