diff --git a/.env b/.env index 186dbc3d..31ddcccf 100644 --- a/.env +++ b/.env @@ -1 +1 @@ -BASENAME=/rebwill.github.io/ +BASENAME= diff --git a/.gitignore b/.gitignore index 5d0e7b3c..d11635aa 100755 --- a/.gitignore +++ b/.gitignore @@ -59,4 +59,6 @@ public/ !.gitpod.yml !.htaccess !.eslintrc -!.env \ No newline at end of file +!.env +# Local Netlify folder +.netlify \ No newline at end of file diff --git a/README.md b/README.md index 4d0ca77a..c026660c 100755 --- a/README.md +++ b/README.md @@ -1,12 +1,30 @@ +## rebwill.github.io + +## GIT PUSH INSTRUCTIONS + +git push origin dev + +## DEPLOY INSTRUCTIONS + +1. npm run build +2. npm run deploy + +--- + +## 4Geeks instructions + # WebApp boilerplate with React and Cloud 9 + # this is what react-hello-webapp deploys here [![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io#https://github.com/4GeeksAcademy/react-hello-webapp.git) ### Requirements: + - Make sure you are using node version 8 ##### Install the packages: + ``` $ npm install ``` @@ -14,19 +32,24 @@ $ npm install ## Start coding! Start the webpack server with live reload: + - `$ npm run start` for windows, mac, linux or Gitpod. - `$ npm run c9` for Cloud 9 Users. ### Styles + You can update the `styles/index.scss` or create new `.scss` files inside `styles/` and import them into your current scss or js files depending on your needs. ### Components + Add more files into your `./src/js/components` or styles folder as you need them and import them into your current files as needed. ### Views (Components) + Add more files into your `./src/js/views` and import them in `./src/js/layout.jsx`. ### Context + This boilerplate comes with a centralized general Context API. The file `./src/js/store/flux.js` has a base structure for the store, we encourage you to change it and adapt it to your needs. React Context [docs](https://reactjs.org/docs/context.html) @@ -37,7 +60,9 @@ The `Context.Provider` is already set, you can use the `Context.Consumer` to get This boilerplate is 100% compatible with the free github pages hosting. To publish your website you need to push your code to your github repository and run the following command after: + ```sh $ npm run deploy ``` + Note: You will need to [configure github pages for the branch gh-pages](https://help.github.com/articles/configuring-a-publishing-source-for-github-pages/#enabling-github-pages-to-publish-your-site-from-master-or-gh-pages) diff --git a/docs/src/js/layout.js b/docs/src/js/layout.js index 3449055d..815f2745 100755 --- a/docs/src/js/layout.js +++ b/docs/src/js/layout.js @@ -22,7 +22,7 @@ export class Layout extends React.Component { const basename = process.env.BASENAME || ""; return ( -
+
diff --git a/docs/src/styles/index.scss b/docs/src/styles/index.scss index c35c20ad..6f3fd60f 100755 --- a/docs/src/styles/index.scss +++ b/docs/src/styles/index.scss @@ -1,14 +1,22 @@ /* General Styles */ +.html-tag { + width: 100%; +} body { font-family: 'Roboto', sans-serif; + width: 100vw; } h1 { font-size: 3rem; font-weight: bold; } +.top-div-layout { + width: 100vw; +} + /* -------------- Navbar ------------- */ .navbar-transparent{ background-color: transparent; diff --git a/package-lock.json b/package-lock.json index a3380508..7f5de636 100755 --- a/package-lock.json +++ b/package-lock.json @@ -56,13 +56,15 @@ "version": "0.3.2", "resolved": "https://registry.npmjs.org/array-unique/-/array-unique-0.3.2.tgz", "integrity": "sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg=", - "dev": true + "dev": true, + "optional": true }, "braces": { "version": "2.3.2", "resolved": "https://registry.npmjs.org/braces/-/braces-2.3.2.tgz", "integrity": "sha512-aNdbnj9P8PjdXU4ybaWLK2IF3jc/EoDYbC7AazW6to3TRsfXxscC9UXOB5iDiEQrkyIbWp2SLQda4+QAa7nc3w==", "dev": true, + "optional": true, "requires": { "arr-flatten": "^1.1.0", "array-unique": "^0.3.2", @@ -81,6 +83,7 @@ "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz", "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=", "dev": true, + "optional": true, "requires": { "is-extendable": "^0.1.0" } @@ -253,6 +256,7 @@ "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz", "integrity": "sha1-1USBHUKPmOsGpj3EAtJAPDKMOPc=", "dev": true, + "optional": true, "requires": { "extend-shallow": "^2.0.1", "is-number": "^3.0.0", @@ -265,6 +269,7 @@ "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz", "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=", "dev": true, + "optional": true, "requires": { "is-extendable": "^0.1.0" } @@ -313,12 +318,14 @@ "balanced-match": { "version": "1.0.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, "dev": true, + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -339,7 +346,8 @@ "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", @@ -490,6 +498,7 @@ "version": "3.0.4", "bundled": true, "dev": true, + "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -497,12 +506,14 @@ "minimist": { "version": "0.0.8", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "minipass": { "version": "2.3.5", "bundled": true, "dev": true, + "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -521,6 +532,7 @@ "version": "0.5.1", "bundled": true, "dev": true, + "optional": true, "requires": { "minimist": "0.0.8" } @@ -700,7 +712,8 @@ "safe-buffer": { "version": "5.1.2", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "safer-buffer": { "version": "2.1.2", @@ -800,12 +813,14 @@ "wrappy": { "version": "1.0.2", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "yallist": { "version": "3.0.3", "bundled": true, - "dev": true + "dev": true, + "optional": true } } }, @@ -868,7 +883,8 @@ "version": "2.1.1", "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=", - "dev": true + "dev": true, + "optional": true }, "is-glob": { "version": "4.0.1", @@ -885,6 +901,7 @@ "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz", "integrity": "sha1-JP1iAaR4LPUFYcgQJ2r8fRLXEZU=", "dev": true, + "optional": true, "requires": { "kind-of": "^3.0.2" }, @@ -894,6 +911,7 @@ "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz", "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=", "dev": true, + "optional": true, "requires": { "is-buffer": "^1.1.5" } @@ -904,13 +922,15 @@ "version": "3.0.1", "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz", "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=", - "dev": true + "dev": true, + "optional": true }, "kind-of": { "version": "6.0.2", "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.2.tgz", "integrity": "sha512-s5kLOcnH0XqDO+FvuaLX8DDjZ18CGFk7VygH40QoKPUQhW4e2rvM0rwUq0t8IQDOwYSeLK01U90OjzBTme2QqA==", - "dev": true + "dev": true, + "optional": true }, "micromatch": { "version": "3.1.10", @@ -3401,7 +3421,8 @@ "ansi-regex": { "version": "2.1.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "aproba": { "version": "1.2.0", @@ -3444,7 +3465,8 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "concat-map": { "version": "0.0.1", @@ -3455,7 +3477,8 @@ "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -3572,7 +3595,8 @@ "inherits": { "version": "2.0.3", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -3584,6 +3608,7 @@ "version": "1.0.0", "bundled": true, "dev": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -3606,12 +3631,14 @@ "minimist": { "version": "0.0.8", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "minipass": { "version": "2.3.5", "bundled": true, "dev": true, + "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -3630,6 +3657,7 @@ "version": "0.5.1", "bundled": true, "dev": true, + "optional": true, "requires": { "minimist": "0.0.8" } @@ -3710,7 +3738,8 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "object-assign": { "version": "4.1.1", @@ -3722,6 +3751,7 @@ "version": "1.4.0", "bundled": true, "dev": true, + "optional": true, "requires": { "wrappy": "1" } @@ -3807,7 +3837,8 @@ "safe-buffer": { "version": "5.1.2", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "safer-buffer": { "version": "2.1.2", @@ -3843,6 +3874,7 @@ "version": "1.0.2", "bundled": true, "dev": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -3862,6 +3894,7 @@ "version": "3.0.1", "bundled": true, "dev": true, + "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -3905,12 +3938,14 @@ "wrappy": { "version": "1.0.2", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "yallist": { "version": "3.0.3", "bundled": true, - "dev": true + "dev": true, + "optional": true } } }, @@ -6360,7 +6395,8 @@ "ansi-regex": { "version": "2.1.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "aproba": { "version": "1.2.0", @@ -6403,7 +6439,8 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "concat-map": { "version": "0.0.1", @@ -6414,7 +6451,8 @@ "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -6531,7 +6569,8 @@ "inherits": { "version": "2.0.3", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -6543,6 +6582,7 @@ "version": "1.0.0", "bundled": true, "dev": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -6572,6 +6612,7 @@ "version": "2.2.4", "bundled": true, "dev": true, + "optional": true, "requires": { "safe-buffer": "^5.1.1", "yallist": "^3.0.0" @@ -6590,6 +6631,7 @@ "version": "0.5.1", "bundled": true, "dev": true, + "optional": true, "requires": { "minimist": "0.0.8" } @@ -6683,6 +6725,7 @@ "version": "1.4.0", "bundled": true, "dev": true, + "optional": true, "requires": { "wrappy": "1" } @@ -6768,7 +6811,8 @@ "safe-buffer": { "version": "5.1.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "safer-buffer": { "version": "2.1.2", @@ -6804,6 +6848,7 @@ "version": "1.0.2", "bundled": true, "dev": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -6823,6 +6868,7 @@ "version": "3.0.1", "bundled": true, "dev": true, + "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -6866,12 +6912,14 @@ "wrappy": { "version": "1.0.2", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "yallist": { "version": "3.0.2", "bundled": true, - "dev": true + "dev": true, + "optional": true } } }, @@ -8436,6 +8484,11 @@ "integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=", "dev": true }, + "jquery": { + "version": "3.4.1", + "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.4.1.tgz", + "integrity": "sha512-36+AdBzCL+y6qjw5Tx7HgzeGCzC81MDDgaUP8ld2zhx58HdqXGoBd+tHdrBMiyjGQs0Hxs/MLZTu/eHNJJuWPw==" + }, "js-base64": { "version": "2.5.1", "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.5.1.tgz", @@ -14243,7 +14296,8 @@ "ansi-regex": { "version": "2.1.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "aproba": { "version": "1.2.0", @@ -14286,7 +14340,8 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "concat-map": { "version": "0.0.1", @@ -14297,7 +14352,8 @@ "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -14414,7 +14470,8 @@ "inherits": { "version": "2.0.3", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -14426,6 +14483,7 @@ "version": "1.0.0", "bundled": true, "dev": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -14448,12 +14506,14 @@ "minimist": { "version": "0.0.8", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "minipass": { "version": "2.3.5", "bundled": true, "dev": true, + "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -14472,6 +14532,7 @@ "version": "0.5.1", "bundled": true, "dev": true, + "optional": true, "requires": { "minimist": "0.0.8" } @@ -14552,7 +14613,8 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "object-assign": { "version": "4.1.1", @@ -14564,6 +14626,7 @@ "version": "1.4.0", "bundled": true, "dev": true, + "optional": true, "requires": { "wrappy": "1" } @@ -14649,7 +14712,8 @@ "safe-buffer": { "version": "5.1.2", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "safer-buffer": { "version": "2.1.2", @@ -14685,6 +14749,7 @@ "version": "1.0.2", "bundled": true, "dev": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -14704,6 +14769,7 @@ "version": "3.0.1", "bundled": true, "dev": true, + "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -14747,12 +14813,14 @@ "wrappy": { "version": "1.0.2", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "yallist": { "version": "3.0.3", "bundled": true, - "dev": true + "dev": true, + "optional": true } } }, diff --git a/package.json b/package.json index 4870fae7..5fc16d7e 100755 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "homepage": "https://rebwill.github.io", - "name": "react-hello-webapp", + "name": "react-hello-webapp", "version": "1.0.1", "description": "", "main": "index.js", @@ -9,7 +9,7 @@ "start": "webpack-dev-server --config webpack.dev.js --hot", "gitpod": "webpack-dev-server --config webpack.dev.js --host 0.0.0.0 --port 3000", "build": "webpack --config webpack.prod.js", - "deploy": "node deploy-to-github.js" + "deploy": "gh-pages -b master -d public" }, "author": { "name": "Alejandro Sanchez", @@ -71,6 +71,7 @@ }, "dependencies": { "bootstrap": "^4.3.1", + "jquery": "^3.4.1", "prop-types": "^15.6.1", "react": "^16.8.4", "react-bootstrap": "^1.0.0-beta.12", diff --git a/src/img/getInspiredPreview.png b/src/img/getInspiredPreview.png new file mode 100644 index 00000000..817c6fda Binary files /dev/null and b/src/img/getInspiredPreview.png differ diff --git a/src/img/meetupPreviewNEW.png b/src/img/meetupPreviewNEW.png new file mode 100644 index 00000000..b1769113 Binary files /dev/null and b/src/img/meetupPreviewNEW.png differ diff --git a/src/img/miarecyclingPreview.png b/src/img/miarecyclingPreview.png new file mode 100644 index 00000000..d5968217 Binary files /dev/null and b/src/img/miarecyclingPreview.png differ diff --git a/src/img/rebeccascuba.jpg b/src/img/rebeccascuba.jpg new file mode 100644 index 00000000..bd59db27 Binary files /dev/null and b/src/img/rebeccascuba.jpg differ diff --git a/src/img/veganbrunchPreview.png b/src/img/veganbrunchPreview.png new file mode 100644 index 00000000..8ad135b3 Binary files /dev/null and b/src/img/veganbrunchPreview.png differ diff --git a/src/img/whatstheweatherPreview.png b/src/img/whatstheweatherPreview.png new file mode 100644 index 00000000..5668e88e Binary files /dev/null and b/src/img/whatstheweatherPreview.png differ diff --git a/src/img/whatthefishPreview.png b/src/img/whatthefishPreview.png new file mode 100644 index 00000000..9761a618 Binary files /dev/null and b/src/img/whatthefishPreview.png differ diff --git a/src/js/component/navbar.js b/src/js/component/navbar.js index 9baa9f99..4cdf634e 100755 --- a/src/js/component/navbar.js +++ b/src/js/component/navbar.js @@ -1,5 +1,4 @@ import React from "react"; -import { Link } from "react-router-dom"; export class Navbar extends React.Component { constructor(props) { @@ -8,45 +7,103 @@ export class Navbar extends React.Component { state = { isTop: true, - navCSS: "navbar-transparent" + navCSS: "navbar-white" }; - componentDidMount() { - window.addEventListener("scroll", this.measureScroll); - } + // componentDidMount() { + // window.addEventListener("scroll", this.measureScroll); + // } - measureScroll = e => { - var pageOffset = window.scrollY; - if (pageOffset <= 600) { - console.log("you're at the top, setting isTop to true"); - this.setState({ - isTop: true - }); - } - if (pageOffset > 600) { - console.log("you're going down; setting isTop to false"); - this.setState({ - isTop: false - }); - } - var navTog = this.state.isTop; - console.log("this.state.isTop: " + navTog); - if (this.state.isTop == true) { - this.setState({ - navCSS: "navbar-transparent" - }); - } - if (this.state.isTop == false) { - this.setState({ - navCSS: "navbar-white" - }); - } - }; + // measureScroll = e => { + // var pageOffset = window.scrollY; + + // Desktop + // if (window.matchMedia("(min-width: 769px)").matches) { + // if (pageOffset <= 620) { + // this.setState({ + // isTop: true + // }); + // } + // if (pageOffset > 620) { + // this.setState({ + // isTop: false + // }); + // } + // // var navTog = this.state.isTop; + + // // set CSS + // if (this.state.isTop == true) { + // this.setState({ + // navCSS: "navbar-transparent" + // }); + // } + // if (this.state.isTop == false) { + // this.setState({ + // navCSS: "navbar-white" + // }); + // } + // } + + // Mobile + // if (window.matchMedia("(max-width: 768px)").matches) { + // this.setState({ + // isTop: false, + // navCSS: "navbar-white" + // }); + // } + + // LG+ For screens 992px and up + // if (window.matchMedia("(min-width: 992px)").matches) { + // if (pageOffset <= 620) { + // this.setState({ + // isTop: true + // }); + // } + // if (pageOffset > 620) { + // this.setState({ + // isTop: false + // }); + // } + // var navTog = this.state.isTop; + // if (this.state.isTop == true) { + // this.setState({ + // navCSS: "navbar-transparent" + // }); + // } + // if (this.state.isTop == false) { + // this.setState({ + // navCSS: "navbar-white" + // }); + // } + // } + // // MD - for screens btwn 768-991px + // else if (window.matchMedia("(min-width: 768px) and (max-width: 991px)").matches) { + // if (pageOffset <= 1000) { + // this.setState({ + // isTop: true + // }); + // } + // if (pageOffset > 1000) { + // this.setState({ + // isTop: false + // }); + // } + // var navTog = this.state.isTop; + // if (this.state.isTop == true) { + // this.setState({ + // navCSS: "navbar-transparent" + // }); + // } + // if (this.state.isTop == false) { + // this.setState({ + // navCSS: "navbar-white" + // }); + // } + // } render() { return ( -
-
-
+ + {/* PROJECTS Section */} + +
+

Recent Work

+
- ... + ...
-
Coral Guardians
+
MIA Recycling

- Allows ocean lovers to discover and donate to organizations working in coral - restoration all over the world. Built with HTML, CSS, Javascript, React, React - Router, React Context API, and Google Maps API. + Learn what materials can and cannot be recycled in Miami Dade County (but most + importantly, try to reduce the amount of waste you create in the first place!). + Built with MongoDB, Node, and Express on the back end, and React on the front + end, including React Router and Hooks, Material UI, and React Bootstrap.

- - See more + + View project + + + View on Github
+
- ... + ... +
+
What the Fish?!
+

+ Learn more about your seafood by selecting a type of fish and reading about its + population, source, and challenges its species faces. Built with a + Node.js/Express backend and a React front end, and deployed on Heroku. Data from + fishwatch.gov. +

+ + View project + + + View on Github + +
+
+
+ +
+
+ ... +
+
Get Inspired
+

+ My first exploration into Vue (which I learned and built this app in 4 days for + a coding challenge!). It's a Vue app that generates a random inspirational + quote, and allows the user to save (or remove) quotes from their device's + local storage. Built with Vue and BootstrapVue and deployed on Heroku. +

+ + View project + + + View on Github + +
+
+
+ +
+
+ ... +
+
What's the Weather
+

+ A React app that displays the current weather in the requested location. Built + with React, WeatherAPI.com's RESTful API, and React Router. Deployed on + Heroku. +

+ + View project + + + View on Github + +
+
+
+ +
+
+ ... +
+
Vegan Brunch Society
+

+ A collection of recipes for our monthly gathering of friends in which we cook a + decadent vegan brunch together. Built with Node.js, HTML, and CSS. Deployed on + Heroku. +

+ + View project + + + View on Github + +
+
+
+ +
+
+ ...
Meetup Clone

- A simple re-creation of Meetup.com, displaying meetup groups and associated - events using HTML, CSS, Javascript, React, React Router and React Context API. + A re-creation of Meetup.com, displaying meetup groups and associated events + using HTML, CSS, Javascript, React, React Router and React Context API. Deployed + on Netlify.

- - See more + + View project + + + View on Github + {/*
Coming soon!
*/}
+
... @@ -78,43 +258,200 @@ export class Home extends React.Component {

Add, delete, or complete tasks on your to-do list. Unfortunately does not include any fixes for procrastination. Built with HTML, CSS, Javascript, and - React. + React. Deployed via GitHub Pages.

- - See more + + View project + + + View on Github
+ + {/*
+
+ ... +
+
Coral Guardians
+

+ Allows ocean lovers to discover and donate to organizations working in coral + restoration all over the world. Built with HTML, CSS, Javascript, React, React + Router, React Context API, and Google Maps API. +

+ {/* + See more + */} + {/*
Coming soon!
+
+
+
*/} +
+
+ + {/* ABOUT Section */} + +
+
+
+ +
+
+

About Me

+

+ My professional career has covered a lot of ground throughout the worlds of tech, + startups, and social entrepreneurship in the US and Latin America. After leading + BUILDING.co, Miami's premier coworking space for tech companies, for two years as + the General Manager, I decided to finally take the leap towards the logical and creative + challenge I had been craving: I began my coding journey with 4Geeks Academy's full + stack web development bootcamp. +
+
+ I'm now seeking a junior full stack or front end role in the Miami area. I've + worked the most with HTML, CSS, Javascript, React, Node.js, Express, RESTful APIs, and + most recently, Vue. I am excited to deepen my expertise in these technologies and + continue adding new tools to my belt. +
+
I also hold an MBA from the Universidad de Palermo in Buenos Aires, Argentina, and + am an active member of the Miami startup and tech community. I'm an organizer of + our local{" "} + + 1 Million Cups + {" "} + chapter; I teach occasional workshops at{" "} + the Idea Center of Miami Dade College on rapid + prototyping for business model validation; and I'm a member of the Global Shapers{" "} + + Miami hub. + +
+
+ I'm also passionate about environmental sustainability. I host monthly vegan + brunches and quarterly clothing swaps to inspire friends to eat a more plant-based diet + and reduce their consumption of fast fashion, and I volunteer as a diver with the Coral + Restoration Foundation in Key Largo, growing and planting coral throughout the Keys. As + GM of BUILDING.co, I also switched our kitchen supply purchasing to be plastic-free! +

+
+
+ +
+
+
+ +

Knowledge Areas

+ +
+
+ +
+
+
+

+ Proficient: +

+
    +
  • HTML
    • +
  • CSS
    • +
  • Bootstrap
    • +
  • Javascript
    • +
  • React
    • +
  • Vue
    • +
  • Node.js
    • +
  • Express
    • +
  • REST APIs
    • +
  • MongoDB
    • +
+
+
+ +
+
+
+

Education

+
+
+ +
+
+
+

+ Full Stack Web Development Bootcamp +
+ 4Geeks Academy +
+ Miami, FL +
+

+
+

+ MBA +
+ Universidad de Palermo +
+ Buenos Aires, Argentina +
+

+
+

+ BA in International Affairs and Anthropology +
+ Northeastern University +
+ Boston, MA +
+

+
+
+
+
+ {/* end of about-container */} + +
+
+
+ +
+
+

Don't be shy. What can I help you with?

+

+
+ You can reach me via email at willett.rebecca at gmail.com.
+
+ Alternatively, you can also connect with me on{" "} + + LinkedIn + + ,{" "} + + Twitter + + , or{" "} + + GitHub + + . +

+
+ {/* end of contact-container */}
); } } - -{ - /*
-

Escape is not his plan. I must face him, alone.

-

- I have traced the Rebel spies to her. Now she is my only link to finding their secret base. - Partially, but it also obeys your commands. The Force is strong with this one. I have you now. - Look, I can take you as far as Anchorhead. You can get a transport there to Mos Eisley or - wherever youre going. Im surprised you had the courage to take the responsibility yourself. - Partially, but it also obeys your commands. She must have hidden the plans in the escape pod. - Send a detachment down to retrieve them, and see to it personally, Commander. got a lot of - spirit. I know, what do you think? Escape is not his plan. I must face him, alone. In my - experience, there is no such thing as luck. A tremor in the Force. The last time I felt it was - in the presence of my old master. Red Five standing by. -
I have traced the Rebel spies to her. Now she is my only link to finding their secret - base. Partially, but it also obeys your commands. The Force is strong with this one. I have you - now. Look, I can take you as far as Anchorhead. You can get a transport there to Mos Eisley or - wherever youre going. Im surprised you had the courage to take the responsibility yourself. - Partially, but it also obeys your commands. She must have hidden the plans in the escape pod. - Send a detachment down to retrieve them, and see to it personally, Commander. got a lot of - spirit. I know, what do you think? Escape is not his plan. I must face him, alone. In my - experience, there is no such thing as luck. A tremor in the Force. The last time I felt it was - in the presence of my old master. Red Five standing by. -

-
*/ -} diff --git a/src/styles/home.scss b/src/styles/home.scss index 9066bf54..7129abc7 100755 --- a/src/styles/home.scss +++ b/src/styles/home.scss @@ -1,75 +1,123 @@ body { - font-family: 'Roboto', sans-serif; + font-family: "Roboto", sans-serif; + width: 100%; + overflow-x: hidden; +} + +.image-container { + width: 100%; } -.home-hero-image { - background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url("https://images.pexels.com/photos/2450294/pexels-photo-2450294.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"); - height: 95vh; - background-position: center; - background-repeat: no-repeat; - background-size: cover; - position: relative; - clip-path: polygon(0 0, 100% 0, 100% 85vh, 50% 95vh, 0 85vh); +.home-hero-image { + background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), + url("https://images.pexels.com/photos/2450294/pexels-photo-2450294.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"); + height: 95vh; + background-position: center; + background-repeat: no-repeat; + background-size: cover; + position: relative; + clip-path: polygon(0 0, 100% 0, 100% 85vh, 50% 95vh, 0 85vh); } + .home-hero-text { - text-align: center; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - color: white; + text-align: center; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + color: white; + margin-top: 20px; + @media only screen and (max-width: 768px) { + margin-top: 2.5rem; + } } + .see-work-btn { - color:black; - background-color: white; - margin: 15px; - box-shadow: 0 5px 10px rgba(0,0,0,.2); + color: black; + background-color: white; + margin-top: 15px; + margin-right: 10px; + box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); } + .see-work-btn:hover { - background-color: black; - color: white; - box-shadow: 0 3px 7px rgba(0,0,0,.3); + background-color: black; + color: white; + box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); } + .see-work-btn:hover .nav-link { - color:white; + color: white; } + .lorem-ipsum { - padding: 45px; + padding: 45px; } + .white-btn { - color: black; - background-color: white; + color: black; + background-color: white; } + .project-section { - margin-top: 50px; - padding: 16px; + margin-top: 3rem; + padding: 1rem 3rem; + @media only screen and (max-width: 768px) { + margin-top: 2rem; + padding: 1rem 1rem; + } +} + +.project-section-title { + @media only screen and (max-width: 768px) { + text-align: center; + } } .card-img-top { - width: 100%; + width: 100%; } + .card { - margin: 35px; - padding: 25px; - background-image: linear-gradient(to right bottom,#CFCDCD, #EBD8D8, #CFCDCD); - border: none; - box-shadow: 5px 10px 15px rgba(0,0,0,.2); + margin: 2rem 1rem; + background-image: linear-gradient(to right bottom, #cfcdcd, #ebd8d8, #cfcdcd); + border: none; + // box-shadow: 5px 10px 15px rgba(0, 0, 0, 0.2); + box-shadow: 3px 1px 15px rgba(0, 0, 0, 0.7); + border-radius: 1rem; } + .card-body { - padding-top: 1.25rem; + padding-top: 1.25rem; + @media only screen and (max-width: 768px) { + padding-left: 1.5rem; + padding-right: 1.5rem; + } } + .card:hover { - background-image: linear-gradient( - to right bottom,#CFCDCD, #C0CFCD, #CFCDCD); - background-color:rgba(104,162,153,0.5); - box-shadow: 5px 7px 10px rgba(0,0,0,.3); - transform: translateY(4px); - transition: all .3s; + background-image: linear-gradient(to right bottom, #cfcdcd, #c0cfcd, #cfcdcd); + background-color: rgba(104, 162, 153, 0.5); + box-shadow: 5px 7px 10px rgba(0, 0, 0, 0.3); + transform: translateY(4px); + transition: all 0.3s; } + .card:hover .seafoam-btn { - background-color: white; - color: #686868; + background-color: white; + color: #686868; +} + +.card-title { + font-weight: 600; } + .seafoam-btn { - background-color: rgba(104,162,153,0.5); + background-color: rgba(104, 162, 153, 0.5); +} + +.coming-soon { + font-family: "Permanent Marker", cursive; + color: #99463d; + font-size: 1.5rem; } diff --git a/src/styles/index.scss b/src/styles/index.scss index 5530c3e4..e98d4170 100755 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,112 +1,214 @@ -/* - General Styles -*/ +/* General Styles */ + body { - font-family: 'Roboto', sans-serif; - // display: flex; - // flex-direction: column; + font-family: "Roboto", sans-serif; } + h1 { - font-size: 3rem; - font-weight: bold; + font-size: 3rem; + font-weight: bold; + @media only screen and (max-width: 768px) { + font-size: 2.5rem; + } } /* -------------- Navbar ------------- */ -.navbar-transparent{ - background-color: transparent; -} -.navbar-white{ +@media only screen and (max-width: 768px) { + .right-column-mobile { + padding-left: 0; + padding-right: 0; + } + .navbar-transparent { + background-color: white; + } + .navbar-white { background-color: white; + } +} + +// Toggles with page scroll + +.navbar-transparent { + background-color: transparent; } + +.navbar-white { + background-color: white; +} + +// + .navbar-brand { - color: black; + color: black; } + .navbar-h1 { - text-decoration: none; - line-height: 3rem; - font-weight: bold; - font-size: 3.5rem; + text-decoration: none; + line-height: 3rem; + font-weight: bold; + font-size: 3.5rem; + @media only screen and (max-width: 768px) { + font-size: 2.5rem; + line-height: 2.5rem; + } } + .semi-trans-white-btn { - margin-left: 10px; - margin-right: 10px; - background: rgba(255,255,255,0.5); - border: none; + margin-left: 10px; + margin-right: 10px; + background: rgba(255, 255, 255, 0.5); + border: none; + font-family: "Roboto", sans-serif; + font-weight: bold; +} + +.nav-item { + text-align: right; } /* -------------- Home page ------------- */ .nav-link { - padding: 0; - color: black; + padding: 0; + color: black; } .nav-link:hover { - color: white; + color: white; } /* -------------- Footer ------------- */ .footer { - background-color: #68a299; - margin-top: 15px; - // position: fixed; - // left: 0; - // bottom: 0; - // width: 100%; + background-color: #68a299; + margin-top: 15px; } + .footer-p { - padding-top: 1rem; - padding-bottom: 1rem; - padding-left: 16px; - margin: 0; - font-size: 1.5rem; - display: inline; - color: white; + padding-top: 1rem; + padding-bottom: 1rem; + padding-left: 16px; + margin: 0; + font-size: 1.5rem; + display: inline; + color: white; } + .footer-link { - color: black; + color: black; } + .footer-icon { - font-size: 2rem; - margin-left: 10px; - margin-right: 10px; - color: white; + font-size: 2rem; + margin-left: 10px; + margin-right: 10px; + color: white; } + .footer-icon:hover { - color: black; + color: black; +} + +/* -------------- About - separate view ------------- */ + +body { + margin-top: 150px; +} + +.about-box { + // background-color: #68a299; + background-color: #cfe6e3; + // background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), + // url("https://images.pexels.com/photos/2450294/pexels-photo-2450294.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"); + margin-left: 100px; + margin-right: 400px; + padding: 30px; + @media only screen and (max-width: 768px) { + margin-left: 20px; + margin-right: 20px; + padding: 20px; + } } -/* -------------- About ------------- */ +/* -------------- About - on home page ------------- */ + +@media only screen and (max-width: 768px) { + .right-column { + padding-left: 0; + padding-right: 0; + } + .about-text { + padding-top: 15px; + } +} + +@media only screen and (min-width: 769px) { + .right-column { + padding-left: 50px; + padding-right: 50px; + } +} .about-container { - margin-top: 175px; - margin-bottom: 50px; + margin-top: 75px; + margin-bottom: 50px; + background-color: #cfe6e3; + padding-top: 75px; + padding-bottom: 40px; } -.about-row-1, .about-row-2, .about-row-3, .about-row-4, .about-row-5 { - margin-right: 30px; - margin-left: 30px; - margin-bottom: 20px; + +.about-row-1, +.about-row-2, +.about-row-3, +.about-row-4, +.about-row-5, +.about-row-6, +.about-row-7 { + margin-right: 30px; + margin-left: 30px; } + .about-row-1 { - margin-bottom: 20px; + margin-bottom: 30px; } + .about-row-2 { - margin-bottom: 7px; + margin-bottom: 7px; } -.about-row-3{ - margin-bottom: 40px; + +.about-row-3 { + margin-bottom: 40px; } -.rebeccaheadshot { - margin-left: 16px; - margin-right: 16px; - object-fit: cover; + +.about-row-4 { + margin-bottom: 7px; } -.right-column { - padding-left: 50px; - padding-right: 50px; +.about-row-5 { + margin-bottom: 40px; +} + +.about-row-6 { + margin-bottom: 7px; +} + +.rebeccaheadshot { + margin-left: 16px; + margin-right: 16px; + object-fit: cover; } + .badge { - font-size: 16px; - margin: 5px; + font-size: 16px; + margin: 5px; +} + +.skill-badge { + display: inline-block; +} + +/* -------------- Contact ------------- */ + +.contact-container { + padding-top: 50px; + padding-bottom: 70px; } diff --git a/template.html b/template.html index 4a82d865..ca91b29f 100755 --- a/template.html +++ b/template.html @@ -1,13 +1,17 @@ - + Rebecca Willett, full stack web developer +
+ + +