- Updated color scheme.

- Updated logo. - Updated services. - Changed room ordering.
GabbyJ · Sep 11, 2020 · 5ce8d46 · 5ce8d46
1 parent fea044e
commit 5ce8d46
Show file tree

Hide file tree

Showing 8 changed files with 49 additions and 16 deletions.
diff --git a/README.md b/README.md
@@ -1,3 +1,21 @@
+<p>As I was learning React while building my portfolio site, I decided to create a separate project focusing on concepts I didn't focus on in my portfolio. The new concepts in this site that I learned as I went are react routes, react hooks, and using a headless CMS. I need more practice on hooks.</p>
+<p>I really wanted to make sure I used CSS grid and flexbox to replace most media queries and keep my layouts smooth, because I certainly haven't used those as much as I should. </p>
+<p>I created the "Island Resort" logo myself. I know it's not much, but it's cute enough to get the job done.</p>
+
+<p>View the live site for the <a href="https://island-resort-cms.netlify.app" target="_blank">Island Resorts here</a></p>
+
+<p>Created Using:</p>
+<ul>
+<li>React (Hooks)</li>
+<li>Vanilla Javascript</li>
+<li>JSON</li>
+<li>CSS (Grid and Flexbox)</li>
+<li>Contentful headless CMS</li>
+</ul>
+
+<details>
+<summary>Create React App npm commands</summary>
+<br>
 This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
 
 ## Available Scripts
@@ -66,3 +84,6 @@ This section has moved here: https://facebook.github.io/create-react-app/docs/de
 ### `npm run build` fails to minify
 
 This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify
+
+
+</details>
diff --git a/public/index.html b/public/index.html
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>Resorts</title>
+    <title>Island Resort</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/App.css b/src/App.css
@@ -4,12 +4,13 @@
   box-sizing: border-box;
 }
 :root {
-  --primaryColor: #af9a7d;
+  --primaryColor: #E9D59C /*#af9a7d*/;
   --mainWhite: #fff;
-  --offWhite: #f7f7f7;
+  --offWhite: #EAE6DF /*#f7f7f7*/;
   --mainBlack: #222;
   --mainGrey: #ececec;
   --darkGrey: #cfcfcf;
+  --turquoise: #64B8B1;
   --mainTransition: all 0.3s linear;
   --mainSpacing: 3px;
   --lightShadow: 2px 5px 3px 0px rgba(0, 0, 0, 0.5);
@@ -88,13 +89,17 @@ h6 {
 }
 /* end of globals */
 /* Navbar */
+.logo{
+  width: 250px;
+}
 .navbar {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   padding: 0.75rem 2rem;
   background: var(--offWhite);
+  /* border-bottom: 1px solid var(--mainBlack); */
   z-index: 1;
 }
 .nav-header {
@@ -109,7 +114,7 @@ h6 {
 }
 .nav-icon {
   font-size: 1.5rem;
-  color: var(--primaryColor);
+  color: var(--turquoise);
 }
 .nav-links {
   height: 0;
@@ -129,7 +134,7 @@ h6 {
   letter-spacing: var(--mainSpacing);
 }
 .nav-links a:hover {
-  color: var(--primaryColor);
+  color: var(--turquoise);
 }
 
 .show-nav {
@@ -143,6 +148,7 @@ h6 {
     max-width: 1170px;
     margin: 0 auto;
     display: flex;
+    justify-content: space-between;
   }
   .nav-links {
     height: auto;
@@ -233,7 +239,7 @@ h6 {
   padding: 5rem 0;
 }
 .services {
-  background: var(--darkGrey);
+  /* background: var(--offWhite); */
   text-align: center;
 }
 .services-center {
@@ -275,6 +281,7 @@ h6 {
 
 .featured-rooms {
   padding: 5rem 0;
+  background-color: var(--offWhite);
 }
 .featured-rooms-center {
   width: 80vw;
@@ -352,7 +359,7 @@ h6 {
   transform: translate(-50%, -50%) scale(1);
 }
 .room-info {
-  background: var(--darkGrey);
+  background: var(--turquoise);
   text-transform: capitalize;
   padding: 0.5rem 0;
   text-align: center;

diff --git a/src/Components/Navbar.jsx b/src/Components/Navbar.jsx
@@ -1,5 +1,5 @@
 import React, {Component} from "react";
-import logo from '../images/logo.svg';
+import logo from '../images/logo2.svg';
 import {FaAlignRight} from 'react-icons/fa';
 import {Link} from 'react-router-dom';
 
@@ -16,7 +16,7 @@ export default class Navbar extends Component {
             <div className="nav-center">
                 <div className="nav-header">
                     <Link to="/">
-                        <img src={logo} alt="Resorts" />
+                        <img src={logo} alt="Resorts" className="logo" />
                     </Link>
                     <button type="button" className="nav-btn" onClick={this.handleToggle}>
                         <FaAlignRight className="nav-icon"/>

diff --git a/src/Components/Services.jsx b/src/Components/Services.jsx
@@ -1,10 +1,16 @@
 import React, {Component} from "react";
 import {FaCocktail, FaHiking, FaShuttleVan, FaBeer} from "react-icons/fa"
+import {MdPool} from "react-icons/md"
 import Title from "./Title";
 
 export default class Services extends Component {
     state={
         services:[
+            {
+                icon:<MdPool/>,
+                title:"amazing swimming",
+                info:"Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni, corporis!"
+            },
             {
                 icon:<FaCocktail/>,
                 title:"free cocktails",
@@ -20,11 +26,7 @@ export default class Services extends Component {
                 title:"free shuttle",
                 info:"Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni, corporis!"
             },
-            {
-                icon:<FaBeer/>,
-                title:"strongest beer",
-                info:"Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni, corporis!"
-            }
+
         ]
     }
 

diff --git a/src/Context.jsx b/src/Context.jsx
@@ -27,7 +27,7 @@ class RoomProvider extends Component{
             let response = await Client.getEntries({
                 content_type: "islandResort", //narrow down what items to show
                 //order: 'sys.createdAt' //order items by publish date
-                order: "fields.type" //order items by multiple parameters
+                order: "fields.capacity" //order items by multiple parameters
             });
 
         let rooms = this.formatData(response.items); //items to response.items for contentful api to work instead of just local data

diff --git a/src/data.js b/src/data.js
@@ -423,7 +423,7 @@ export default [
       name: "double deluxe",
       slug: "double-deluxe",
       type: "double",
-      price: 400,
+      price: 600,
       size: 500,
       capacity: 2,
       pets: true,

diff --git a/src/images/logo2.svg b/src/images/logo2.svg