├── src
    ├── assets
    │   ├── tours.png
    │   ├── birthday.png
    │   ├── reviews.png
    │   ├── questions.png
    │   ├── react.svg
    │   └── hero.svg
    ├── App.jsx
    ├── main.jsx
    ├── data.js
    ├── Hero.jsx
    ├── Projects.jsx
    ├── fetchProjects.jsx
    └── index.css
├── vite.config.js
├── .gitignore
├── README.md
├── index.html
├── package.json
└── public
    └── vite.svg


/src/assets/tours.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/john-smilga/react-vite-projects-16-contentful/HEAD/src/assets/tours.png


--------------------------------------------------------------------------------
/src/assets/birthday.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/john-smilga/react-vite-projects-16-contentful/HEAD/src/assets/birthday.png


--------------------------------------------------------------------------------
/src/assets/reviews.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/john-smilga/react-vite-projects-16-contentful/HEAD/src/assets/reviews.png


--------------------------------------------------------------------------------
/src/assets/questions.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/john-smilga/react-vite-projects-16-contentful/HEAD/src/assets/questions.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/App.jsx:
--------------------------------------------------------------------------------
 1 | import Hero from './Hero';
 2 | import Projects from './Projects';
 3 | 
 4 | const App = () => {
 5 |   return (
 6 |     <main>
 7 |       <Hero />
 8 |       <Projects />
 9 |     </main>
10 |   );
11 | };
12 | export default App;
13 | 


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


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


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ```js
 2 | const contentful = require('contentful');
 3 | 
 4 | const client = contentful.createClient({
 5 |   space: 'qz00uzgg3leh',
 6 |   environment: 'master', // defaults to 'master' if not set
 7 |   accessToken: 'your token',
 8 | });
 9 | 
10 | client
11 |   .getEntries()
12 |   .then((response) => console.log(response.items))
13 |   .catch(console.error);
14 | ```
15 | 


--------------------------------------------------------------------------------
/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>Contentful</title>
 8 |   </head>
 9 |   <body>
10 |     <div id="root"></div>
11 |     <script type="module" src="/src/main.jsx"></script>
12 |   </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "contentful",
 3 |   "private": true,
 4 |   "version": "0.0.0",
 5 |   "type": "module",
 6 |   "scripts": {
 7 |     "dev": "vite",
 8 |     "build": "vite build",
 9 |     "preview": "vite preview"
10 |   },
11 |   "dependencies": {
12 |     "contentful": "^9.3.5",
13 |     "react": "^18.2.0",
14 |     "react-dom": "^18.2.0"
15 |   },
16 |   "devDependencies": {
17 |     "@types/react": "^18.0.28",
18 |     "@types/react-dom": "^18.0.11",
19 |     "@vitejs/plugin-react": "^3.1.0",
20 |     "vite": "^4.2.0"
21 |   }
22 | }
23 | 


--------------------------------------------------------------------------------
/src/data.js:
--------------------------------------------------------------------------------
 1 | const projects = [
 2 |   {
 3 |     title: 'birthday buddy',
 4 |     url: 'https://react-vite-projects-1-birthday-buddy.netlify.app/',
 5 |     image: './assets/birthday.png',
 6 |   },
 7 |   {
 8 |     title: 'tours',
 9 |     url: 'https://react-vite-projects-2-tours.netlify.app/',
10 |     image: './assets/tours.png',
11 |   },
12 |   {
13 |     title: 'reviews',
14 |     url: 'https://react-vite-projects-3-reviews.netlify.app/',
15 |     image: './assets/reviews.png',
16 |   },
17 |   {
18 |     title: 'questions',
19 |     url: 'https://react-vite-projects-4-accordion.netlify.app/',
20 |     image: './assets/questions.png',
21 |   },
22 | ];
23 | 


--------------------------------------------------------------------------------
/src/Hero.jsx:
--------------------------------------------------------------------------------
 1 | import heroImg from './assets/hero.svg';
 2 | const Hero = () => {
 3 |   return (
 4 |     <section className='hero'>
 5 |       <div className='hero-center'>
 6 |         <div className='hero-title'>
 7 |           <h1>contentful CMS</h1>
 8 |           <p>
 9 |             Pitchfork schlitz tonx, coloring book celiac tousled succulents
10 |             ascot affogato cardigan jianbing crucifix seitan. Synth man braid
11 |             everyday carry try-hard pour-over keffiyeh slow-carb sriracha
12 |             chillwave banjo gochujang kinfolk small batch mustache.
13 |           </p>
14 |         </div>
15 |         <div className='img-container'>
16 |           <img src={heroImg} alt='woman and the browser' className='img' />
17 |         </div>
18 |       </div>
19 |     </section>
20 |   );
21 | };
22 | export default Hero;
23 | 


--------------------------------------------------------------------------------
/src/Projects.jsx:
--------------------------------------------------------------------------------
 1 | import useFetchProjects from './fetchProjects';
 2 | 
 3 | const Projects = () => {
 4 |   const { loading, projects } = useFetchProjects();
 5 | 
 6 |   if (loading) {
 7 |     return (
 8 |       <section className='projects'>
 9 |         <div className='projects-center'>
10 |           <h2>loading...</h2>
11 |         </div>
12 |       </section>
13 |     );
14 |   }
15 |   return (
16 |     <section className='projects'>
17 |       <div className='title'>
18 |         <h2>Projects</h2>
19 |         <div className='title-underline'></div>
20 |       </div>
21 |       <div className='projects-center'>
22 |         {projects.map((project) => {
23 |           const { id, img, url, title } = project;
24 |           return (
25 |             <a
26 |               key={id}
27 |               href={url}
28 |               target='_blank'
29 |               rel='noreferrer'
30 |               className='project'
31 |             >
32 |               <img src={img} alt='title' className='img' />
33 |               <h5>{title}</h5>
34 |             </a>
35 |           );
36 |         })}
37 |       </div>
38 |     </section>
39 |   );
40 | };
41 | export default Projects;
42 | 


--------------------------------------------------------------------------------
/src/fetchProjects.jsx:
--------------------------------------------------------------------------------
 1 | import { useEffect, useState } from 'react';
 2 | import { createClient } from 'contentful';
 3 | 
 4 | const client = createClient({
 5 |   space: 'qz00uzgg3leh',
 6 |   environment: 'master', // defaults to 'master' if not set
 7 |   accessToken: import.meta.env.VITE_API_KEY,
 8 | });
 9 | 
10 | const useFetchProjects = () => {
11 |   const [loading, setLoading] = useState(true);
12 |   const [projects, setProjects] = useState([]);
13 | 
14 |   const getData = async () => {
15 |     try {
16 |       const response = await client.getEntries({
17 |         content_type: 'projects',
18 |       });
19 |       const projects = response.items.map((item) => {
20 |         const { title, url, image } = item.fields;
21 |         const id = item.sys.id;
22 |         const img = image?.fields?.file?.url;
23 |         return { title, url, id, img };
24 |       });
25 |       setLoading(false);
26 |       setProjects(projects);
27 |     } catch (error) {
28 |       console.log(error);
29 |       setLoading(false);
30 |     }
31 |   };
32 | 
33 |   useEffect(() => {
34 |     getData();
35 |   }, []);
36 |   return { loading, projects };
37 | };
38 | 
39 | export default useFetchProjects;
40 | 


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


--------------------------------------------------------------------------------
/src/assets/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/index.css:
--------------------------------------------------------------------------------
  1 | /* ============= GLOBAL CSS =============== */
  2 | 
  3 | *,
  4 | ::after,
  5 | ::before {
  6 |   margin: 0;
  7 |   padding: 0;
  8 |   box-sizing: border-box;
  9 | }
 10 | 
 11 | html {
 12 |   font-size: 100%;
 13 | } /*16px*/
 14 | 
 15 | :root {
 16 |   /* colors */
 17 |   --primary-100: #e2e0ff;
 18 |   --primary-200: #c1beff;
 19 |   --primary-300: #a29dff;
 20 |   --primary-400: #837dff;
 21 |   --primary-500: #645cff;
 22 |   --primary-600: #504acc;
 23 |   --primary-700: #3c3799;
 24 |   --primary-800: #282566;
 25 |   --primary-900: #141233;
 26 | 
 27 |   /* grey */
 28 |   --grey-50: #f8fafc;
 29 |   --grey-100: #f1f5f9;
 30 |   --grey-200: #e2e8f0;
 31 |   --grey-300: #cbd5e1;
 32 |   --grey-400: #94a3b8;
 33 |   --grey-500: #64748b;
 34 |   --grey-600: #475569;
 35 |   --grey-700: #334155;
 36 |   --grey-800: #1e293b;
 37 |   --grey-900: #0f172a;
 38 |   /* rest of the colors */
 39 |   --black: #222;
 40 |   --white: #fff;
 41 |   --red-light: #f8d7da;
 42 |   --red-dark: #842029;
 43 |   --green-light: #d1e7dd;
 44 |   --green-dark: #0f5132;
 45 | 
 46 |   --small-text: 0.875rem;
 47 |   --extra-small-text: 0.7em;
 48 |   /* rest of the vars */
 49 |   --backgroundColor: var(--grey-50);
 50 |   --textColor: var(--grey-900);
 51 |   --borderRadius: 0.25rem;
 52 |   --letterSpacing: 1px;
 53 |   --transition: 0.3s ease-in-out all;
 54 |   --max-width: 1120px;
 55 |   --fixed-width: 600px;
 56 |   --view-width: 90vw;
 57 |   /* box shadow*/
 58 |   --shadow-1: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
 59 |   --shadow-2: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
 60 |     0 2px 4px -1px rgba(0, 0, 0, 0.06);
 61 |   --shadow-3: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
 62 |     0 4px 6px -2px rgba(0, 0, 0, 0.05);
 63 |   --shadow-4: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
 64 |     0 10px 10px -5px rgba(0, 0, 0, 0.04);
 65 | }
 66 | 
 67 | body {
 68 |   background: var(--backgroundColor);
 69 |   font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
 70 |     Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 71 |   font-weight: 400;
 72 |   line-height: 1;
 73 |   color: var(--textColor);
 74 | }
 75 | p {
 76 |   margin: 0;
 77 | }
 78 | h1,
 79 | h2,
 80 | h3,
 81 | h4,
 82 | h5 {
 83 |   margin: 0;
 84 |   font-family: var(--headingFont);
 85 |   font-weight: 400;
 86 |   line-height: 1;
 87 |   text-transform: capitalize;
 88 |   letter-spacing: var(--letterSpacing);
 89 | }
 90 | 
 91 | h1 {
 92 |   font-size: clamp(2rem, 5vw, 5rem); /* Large heading */
 93 | }
 94 | 
 95 | h2 {
 96 |   font-size: clamp(1.5rem, 3vw, 3rem); /* Medium heading */
 97 | }
 98 | 
 99 | h3 {
100 |   font-size: clamp(1.25rem, 2.5vw, 2.5rem); /* Small heading */
101 | }
102 | 
103 | h4 {
104 |   font-size: clamp(1rem, 2vw, 2rem); /* Extra small heading */
105 | }
106 | 
107 | h5 {
108 |   font-size: clamp(0.875rem, 1.5vw, 1.5rem); /* Tiny heading */
109 | }
110 | 
111 | /* BIGGER FONTS */
112 | /* h1 {
113 |   font-size: clamp(3rem, 6vw, 6rem);
114 | }
115 | 
116 | h2 {
117 |   font-size: clamp(2.5rem, 5vw, 5rem);
118 | }
119 | 
120 | h3 {
121 |   font-size: clamp(2rem, 4vw, 4rem);
122 | }
123 | 
124 | h4 {
125 |   font-size: clamp(1.5rem, 3vw, 3rem);
126 | }
127 | 
128 | h5 {
129 |   font-size: clamp(1rem, 2vw, 2rem);
130 | }
131 |  */
132 | 
133 | .text {
134 |   margin-bottom: 1.5rem;
135 |   max-width: 40em;
136 | }
137 | 
138 | small,
139 | .text-small {
140 |   font-size: var(--small-text);
141 | }
142 | 
143 | a {
144 |   text-decoration: none;
145 | }
146 | ul {
147 |   list-style-type: none;
148 |   padding: 0;
149 | }
150 | 
151 | .img {
152 |   width: 100%;
153 |   display: block;
154 |   object-fit: cover;
155 | }
156 | /* buttons */
157 | 
158 | .btn {
159 |   cursor: pointer;
160 |   color: var(--white);
161 |   background: var(--primary-500);
162 |   border: transparent;
163 |   border-radius: var(--borderRadius);
164 |   letter-spacing: var(--letterSpacing);
165 |   padding: 0.375rem 0.75rem;
166 |   box-shadow: var(--shadow-1);
167 |   transition: var(--transition);
168 |   text-transform: capitalize;
169 |   display: inline-block;
170 | }
171 | .btn:hover {
172 |   background: var(--primary-700);
173 |   box-shadow: var(--shadow-3);
174 | }
175 | .btn-hipster {
176 |   color: var(--primary-500);
177 |   background: var(--primary-200);
178 | }
179 | .btn-hipster:hover {
180 |   color: var(--primary-200);
181 |   background: var(--primary-700);
182 | }
183 | .btn-block {
184 |   width: 100%;
185 | }
186 | 
187 | /* alerts */
188 | .alert {
189 |   padding: 0.375rem 0.75rem;
190 |   margin-bottom: 1rem;
191 |   border-color: transparent;
192 |   border-radius: var(--borderRadius);
193 | }
194 | 
195 | .alert-danger {
196 |   color: var(--red-dark);
197 |   background: var(--red-light);
198 | }
199 | .alert-success {
200 |   color: var(--green-dark);
201 |   background: var(--green-light);
202 | }
203 | /* form */
204 | 
205 | .form {
206 |   width: 90vw;
207 |   max-width: var(--fixed-width);
208 |   background: var(--white);
209 |   border-radius: var(--borderRadius);
210 |   box-shadow: var(--shadow-2);
211 |   padding: 2rem 2.5rem;
212 |   margin: 3rem auto;
213 | }
214 | .form-label {
215 |   display: block;
216 |   font-size: var(--small-text);
217 |   margin-bottom: 0.5rem;
218 |   text-transform: capitalize;
219 |   letter-spacing: var(--letterSpacing);
220 | }
221 | .form-input,
222 | .form-textarea {
223 |   width: 100%;
224 |   padding: 0.375rem 0.75rem;
225 |   border-radius: var(--borderRadius);
226 |   background: var(--backgroundColor);
227 |   border: 1px solid var(--grey-200);
228 | }
229 | 
230 | .form-row {
231 |   margin-bottom: 1rem;
232 | }
233 | 
234 | .form-textarea {
235 |   height: 7rem;
236 | }
237 | ::placeholder {
238 |   font-family: inherit;
239 |   color: var(--grey-400);
240 | }
241 | .form-alert {
242 |   color: var(--red-dark);
243 |   letter-spacing: var(--letterSpacing);
244 |   text-transform: capitalize;
245 | }
246 | /* alert */
247 | 
248 | @keyframes spinner {
249 |   to {
250 |     transform: rotate(360deg);
251 |   }
252 | }
253 | 
254 | .loading {
255 |   width: 6rem;
256 |   height: 6rem;
257 |   border: 5px solid var(--grey-400);
258 |   border-radius: 50%;
259 |   border-top-color: var(--primary-500);
260 |   animation: spinner 0.6s linear infinite;
261 |   margin: 0 auto;
262 | }
263 | 
264 | /* title */
265 | 
266 | .title {
267 |   text-align: center;
268 | }
269 | 
270 | .title-underline {
271 |   background: var(--primary-500);
272 |   width: 4rem;
273 |   height: 0.25rem;
274 |   margin: 0 auto;
275 |   margin-top: 1rem;
276 | }
277 | 
278 | /* 
279 | ============= 
280 | PROJECT CSS
281 | =============
282 | */
283 | 
284 | body {
285 |   background: var(--grey-200);
286 | }
287 | .hero {
288 |   min-height: 40vh;
289 |   background: var(--white);
290 |   display: flex;
291 |   align-items: center;
292 |   justify-content: center;
293 |   padding: 5rem 0;
294 | }
295 | 
296 | .img-container {
297 |   display: none;
298 | }
299 | 
300 | .hero-center {
301 |   width: 90vw;
302 |   max-width: var(--max-width);
303 | }
304 | 
305 | .hero-title h1 {
306 |   margin-bottom: 2rem;
307 |   font-weight: 700;
308 | }
309 | .hero-title p {
310 |   line-height: 2;
311 |   max-width: 35em;
312 |   color: var(--grey-600);
313 | }
314 | 
315 | @media screen and (min-width: 992px) {
316 |   .hero-center {
317 |     display: grid;
318 |     grid-template-columns: 2fr 1fr;
319 |     place-items: center;
320 |     gap: 4rem;
321 |   }
322 |   .img-container {
323 |     display: block;
324 |   }
325 | }
326 | /* 
327 | ============= 
328 | PROJECTS 
329 | =============
330 | */
331 | 
332 | .projects {
333 |   padding: 5rem 0;
334 | }
335 | .projects-center {
336 |   margin: 0 auto;
337 |   margin-top: 3rem;
338 |   width: 90vw;
339 |   max-width: var(--max-width);
340 |   display: grid;
341 |   gap: 2rem;
342 | }
343 | .project {
344 |   background: var(--white);
345 |   display: block;
346 |   border-radius: var(--borderRadius);
347 |   box-shadow: var(--shadow-1);
348 |   transition: var(--transition);
349 | }
350 | .project:hover {
351 |   transform: scale(1.05);
352 |   box-shadow: var(--shadow-2);
353 | }
354 | .project .img {
355 |   height: 15rem;
356 |   border-top-right-radius: var(--borderRadius);
357 |   border-top-left-radius: var(--borderRadius);
358 | }
359 | .project h5 {
360 |   text-align: center;
361 |   padding: 1rem 0;
362 |   color: var(--grey-700);
363 | }
364 | 
365 | @media screen and (min-width: 768px) {
366 |   .projects-center {
367 |     grid-template-columns: 1fr 1fr;
368 |   }
369 | }
370 | @media screen and (min-width: 992px) {
371 |   .projects-center {
372 |     grid-template-columns: 1fr 1fr 1fr;
373 |   }
374 | }
375 | 


--------------------------------------------------------------------------------
/src/assets/hero.svg:
--------------------------------------------------------------------------------
1 | <svg id="b20bc320-2fc8-4403-a458-9220829d6284" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="645.2965" height="564.50774" viewBox="0 0 645.2965 564.50774"><title>Load_more</title><rect x="229.16609" y="256.36275" width="393.53455" height="201.56648" fill="#60dbfb"/><circle cx="487.25679" cy="204.16855" r="36.41465" fill="#ff6584"/><rect x="347.95965" y="377.15642" width="1.1903" height="66.05518" fill="#3f3d56"/><circle cx="348.55465" cy="377.15668" r="9.34108" fill="#3f3d56"/><path d="M625.9064,585.61372s-1.33444-28.701-28.69046-25.36486" transform="translate(-277.35175 -167.74613)" fill="#3f3d56"/><rect x="479.54286" y="223.34723" width="1.1903" height="220.32758" fill="#3f3d56"/><circle cx="480.13784" cy="223.24272" r="9.34108" fill="#3f3d56"/><circle cx="451.44739" cy="382.65095" r="9.34108" fill="#3f3d56"/><path d="M757.4896,438.70353s-1.33444-28.701-28.69046-25.36486" transform="translate(-277.35175 -167.74613)" fill="#3f3d56"/><path d="M757.4896,520.06751s-1.33444-28.701-28.69046-25.36487" transform="translate(-277.35175 -167.74613)" fill="#3f3d56"/><path d="M758.08142,608.91713l-1.18332-.12787c.03487-.32256,3.31168-32.44842-10.14253-48.63485a25.05081,25.05081,0,0,0-18.00211-9.16379l.09183-1.18681a26.20081,26.20081,0,0,1,18.82683,9.59155C761.44773,575.9712,758.11687,608.58933,758.08142,608.91713Z" transform="translate(-277.35175 -167.74613)" fill="#3f3d56"/><circle cx="508.83239" cy="382.65095" r="9.34108" fill="#3f3d56"/><path d="M756.90216,608.91713c-.03545-.3278-3.36631-32.94593,10.4093-49.52177a26.20083,26.20083,0,0,1,18.82683-9.59155l.09183,1.18681a25.04767,25.04767,0,0,0-18.00326,9.16553c-13.45712,16.19283-10.17624,48.31055-10.14137,48.63311Z" transform="translate(-277.35175 -167.74613)" fill="#3f3d56"/><circle cx="509.40137" cy="295.02821" r="9.34108" fill="#3f3d56"/><path d="M757.47174,518.32192c-.03487-.30222-3.28494-30.41073,9.87867-46.34725a26.80627,26.80627,0,0,1,19.35688-9.79381l.09183,1.18682a25.657,25.657,0,0,0-18.531,9.36488c-12.84511,15.55118-9.64793,45.15753-9.61422,45.45453Z" transform="translate(-277.35175 -167.74613)" fill="#3f3d56"/><rect x="417.65779" y="308.87408" width="1.1903" height="134.49037" fill="#3f3d56"/><circle cx="418.2527" cy="308.87404" r="9.34108" fill="#3f3d56"/><path d="M695.60446,514.66221s-1.33444-28.701-28.69046-25.36486" transform="translate(-277.35175 -167.74613)" fill="#3f3d56"/><path d="M696.19636,608.60735l-1.18333-.129c.03429-.31733,3.29483-31.93929-10.03965-48.00018a25.17078,25.17078,0,0,0-18.10556-9.20331l.09183-1.18681a26.32024,26.32024,0,0,1,18.93144,9.63223C699.547,576.17113,696.23123,608.28478,696.19636,608.60735Z" transform="translate(-277.35175 -167.74613)" fill="#3f3d56"/><circle cx="389.56225" cy="382.93544" r="9.34108" fill="#3f3d56"/><rect x="315.20145" y="442.63969" width="192.82837" height="1.1903" fill="#3f3d56"/><path d="M922.64825,692.85941H473.12237V167.74613H922.64825Zm-447.52588-2H920.64825V169.74613H475.12237Z" transform="translate(-277.35175 -167.74613)" fill="#3f3d56"/><rect x="196.77062" y="45.16553" width="447.52588" height="2" fill="#3f3d56"/><circle cx="623.89945" cy="23.79628" r="7.7987" fill="#fff"/><path d="M901.25079,199.84134a8.29883,8.29883,0,1,1,8.29883-8.29883A8.30778,8.30778,0,0,1,901.25079,199.84134Zm0-15.59765a7.29883,7.29883,0,1,0,7.29883,7.29882A7.30647,7.30647,0,0,0,901.25079,184.24369Z" transform="translate(-277.35175 -167.74613)"/><line x1="620.39003" y1="20.28686" x2="627.40886" y2="27.30569" fill="#fff"/><rect x="900.75133" y="186.57923" width="0.99989" height="9.92608" transform="translate(-148.83966 525.60931) rotate(-44.99801)"/><line x1="627.40886" y1="20.28686" x2="620.39003" y2="27.30569" fill="#fff"/><rect x="896.28824" y="191.04232" width="9.92608" height="0.99989" transform="translate(-148.8222 525.63619) rotate(-45)"/><circle cx="623.89945" cy="23.79628" r="7.7987" fill="none" stroke="#3f3d56" stroke-miterlimit="10" stroke-width="2"/><path d="M901.25079,199.84134a8.29883,8.29883,0,1,1,8.29883-8.29883A8.30778,8.30778,0,0,1,901.25079,199.84134Zm0-15.59765a7.29883,7.29883,0,1,0,7.29883,7.29882A7.30647,7.30647,0,0,0,901.25079,184.24369Z" transform="translate(-277.35175 -167.74613)" fill="none" stroke="#3f3d56" stroke-miterlimit="10" stroke-width="2"/><line x1="620.39003" y1="20.28686" x2="627.40886" y2="27.30569" fill="none" stroke="#3f3d56" stroke-miterlimit="10" stroke-width="2"/><rect x="900.75133" y="186.57923" width="0.99989" height="9.92608" transform="translate(-148.83966 525.60931) rotate(-44.99801)" fill="none" stroke="#3f3d56" stroke-miterlimit="10" stroke-width="2"/><line x1="627.40886" y1="20.28686" x2="620.39003" y2="27.30569" fill="none" stroke="#3f3d56" stroke-miterlimit="10" stroke-width="2"/><rect x="896.28824" y="191.04232" width="9.92608" height="0.99989" transform="translate(-148.8222 525.63619) rotate(-45)" fill="none" stroke="#3f3d56" stroke-miterlimit="10" stroke-width="2"/><rect x="229.1651" y="18.99707" width="69.58843" height="9.5984" fill="#3f3d56"/><rect x="350.34494" y="18.99707" width="69.58843" height="9.5984" fill="#3f3d56"/><rect x="471.52479" y="18.99707" width="69.58843" height="9.5984" fill="#3f3d56"/><rect x="298.75352" y="116.18091" width="242.35969" height="28.79521" fill="#3f3d56"/><circle cx="403.13616" cy="496.51766" r="5.999" fill="#3f3d56"/><circle cx="419.93337" cy="496.51766" r="5.999" fill="#3f3d56"/><circle cx="436.73057" cy="496.51766" r="5.999" fill="#3f3d56"/><rect x="136.49414" y="181.08605" width="71.11658" height="77.12643" fill="#f2f2f2"/><path d="M494.742,421.3721H421.6253V342.24515H494.742Zm-71.1167-2H492.742V344.24515H423.6253Z" transform="translate(-277.35175 -167.74613)" fill="#3f3d56"/><circle cx="167.30969" cy="214.56317" r="5.00821" fill="#60dbfb"/><circle cx="181.33268" cy="214.56317" r="5.00821" fill="#60dbfb"/><circle cx="195.35567" cy="214.56317" r="5.00821" fill="#60dbfb"/><path d="M337.74555,705.04143s36.5313,19.93471,35.04033,26.13565c-.80886,3.364-20.45023-1.66108-38.9294-8.06844-15.58348-5.40333,8.64684-3.01128,6.70753-6.17838C336.325,710.00753,337.74555,705.04143,337.74555,705.04143Z" transform="translate(-277.35175 -167.74613)" fill="#2f2e41"/><path d="M425.56257,699.21065s40.17933,10.842,40.17933,17.21972-68.87886,0-74.61876-5.73991S425.56257,699.21065,425.56257,699.21065Z" transform="translate(-277.35175 -167.74613)" fill="#2f2e41"/><path d="M356.68371,418.59308l17.21972,28.69953s28.69952,74.61876,34.43942,120.538,40.17934,126.2779,28.69953,137.75771-68.87886,12.11758-68.87886,0V470.25223Z" transform="translate(-277.35175 -167.74613)" fill="#2f2e41"/><path d="M356.68371,418.59308l17.21972,28.69953s28.69952,74.61876,34.43942,120.538,40.17934,126.2779,28.69953,137.75771-68.87886,12.11758-68.87886,0V470.25223Z" transform="translate(-277.35175 -167.74613)" opacity="0.1"/><path d="M310.76447,395.63346v22.95962c0,5.73991,34.43943,5.73991,34.43943,5.73991V401.37337Z" transform="translate(-277.35175 -167.74613)" fill="#a0616a"/><path d="M327.98419,407.11327l-16.90083,5.421s-17.5386,33.48278-11.7987,51.34026,22.95962,115.43587,22.95962,115.43587v63.139s-34.43943,57.399-17.21971,68.87886,51.65914,23.59739,57.39905,17.21971S373.90343,481.732,373.90343,481.732V447.29261l-5.73991-45.91924Z" transform="translate(-277.35175 -167.74613)" fill="#2f2e41"/><circle cx="80.47269" cy="82.68551" r="33.61758" fill="#2f2e41"/><circle cx="44.05366" cy="38.42237" r="33.61758" fill="#2f2e41"/><path d="M292.40845,234.006a33.6194,33.6194,0,0,0,51.91444-17.652,33.61943,33.61943,0,1,1-65.57883-13.78632A33.607,33.607,0,0,0,292.40845,234.006Z" transform="translate(-277.35175 -167.74613)" fill="#2f2e41"/><ellipse cx="92.23885" cy="79.04359" rx="21.85142" ry="17.08893" fill="#2f2e41"/><circle cx="85.39075" cy="89.81074" r="28.38064" fill="#a0616a"/><path d="M345.2039,275.09546s5.73991,11.47981-5.7399,17.21972,22.95962,28.69952,22.95962,28.69952l11.47981-40.17933Z" transform="translate(-277.35175 -167.74613)" fill="#a0616a"/><path d="M350.94381,298.05508s-11.47981-17.21971-17.21972-5.7399-34.43943,45.91923-34.43943,80.35866,0,34.43943,5.73991,34.43943,22.95962-5.7399,28.69952,0,28.69953,0,28.69953,0l5.7399-51.65914s5.73991-28.69953,0-34.43943S350.94381,298.05508,350.94381,298.05508Z" transform="translate(-277.35175 -167.74613)" fill="#60dbfb"/><path d="M322.24428,321.0147s-17.21971,86.09857,0,91.83848,68.87886,28.06175,68.87886,22.32185,5.7399-11.47981,5.7399-11.47981,5.73991,5.7399,5.73991,0v-10.842L345.2039,389.89356v-57.399s11.47981-28.69952,0-28.69952S322.24428,321.0147,322.24428,321.0147Z" transform="translate(-277.35175 -167.74613)" fill="#60dbfb"/><path d="M396.863,412.85318s39.54157,0,40.17934,11.47981-40.17934-.63777-40.17934-.63777Z" transform="translate(-277.35175 -167.74613)" fill="#a0616a"/><ellipse cx="359.23478" cy="238.74273" rx="25.82957" ry="14.34976" transform="translate(-332.48599 -48.77832) rotate(-17.48536)" fill="#2f2e41"/></svg>


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