first commit

.gitignore

@@ -0,0 +1,4 @@
+.cache
+node_modules
+public
+package-lock.json

package.json

@@ -0,0 +1,17 @@
+{
+  "name": "ruta",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "gatsby": "^2.31.1",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1"
+  }
+}

src/components/Portada.js

@@ -0,0 +1,13 @@
+import React from 'react'
+
+const Portada = ({children, parametro}) => {
+    return (
+        <div className={parametro}>
+            <div className="filtro">
+                {children}
+            </div>
+        </div>
+    )
+}
+
+export default Portada

src/pages/contacto.js

@@ -0,0 +1,20 @@
+import React from 'react'
+import Portada from '../components/Portada'
+import { Link } from 'gatsby'
+import '../styles/main.css'
+
+const Contacto = () => {
+    return (
+        <Portada
+            parametro="portada2"
+        >
+            <Link to="/">
+                <h2>
+                    Ir a Inicio
+                </h2>
+            </Link>
+        </Portada>
+    )
+}
+
+export default Contacto

src/pages/index.js

@@ -0,0 +1,22 @@
+import React from 'react'
+import Portada from '../components/Portada'
+import { Link } from 'gatsby'
+import '../styles/main.css'
+
+const Home = () => {
+    return (
+        <div>
+            <Portada
+                parametro="portada"
+            >
+                <Link to="/contacto">
+                    <h2>
+                        Ir a Contacto
+                    </h2>
+                </Link>
+            </Portada>
+        </div>
+    )
+}
+
+export default Home

src/styles/main.css

@@ -0,0 +1,42 @@
+body {
+    margin: 0;
+    padding: 0;
+    font-family: sans-serif;
+}
+
+* {
+    margin: 0;
+    padding: 0;   
+}
+
+.portada {
+    background-image: url("https://source.unsplash.com/random/600x600");
+    height: 100vh;
+    background-position: center;
+    background-size: cover;
+    background-repeat: no-repeat;
+}
+
+.portada2 {
+    background-image: url("https://source.unsplash.com/random/600x601");
+    height: 100vh;
+    background-position: center;
+    background-size: cover;
+    background-repeat: no-repeat;
+}
+
+
+.filtro {
+    height: 100%;
+    background-color: rgba(0,0,0,0.8);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 2rem;
+    color: white;
+}
+
+a {
+    color: white;
+    text-decoration: none;
+}