jr/jakesphotos
1
0
Fork 0
mirror of https://github.com/runyanjake/jakesphotos.git synced 2025-10-04 15:37:30 -07:00
Code Issues Packages Projects Releases Wiki Activity

Change the helmet for the page

Browse Source
This commit is contained in:
Jake Runyan 2024-12-28 14:51:39 -10:00
parent a8d2c3d518
commit ad704fc2bb
7 changed files with 51 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

@ -11,6 +11,7 @@ npx create-react-app portfolio
npm install web-vitals npm install web-vitals
npm install react-router-dom npm install react-router-dom
npm install masonry-layout npm install masonry-layout
npm install react-helmet
``` ```
3. Test changes/fixes with 3. Test changes/fixes with
``` ```

31
package-lock.json generated
View File

@ -12,6 +12,7 @@
"masonry-layout": "^4.2.2", "masonry-layout": "^4.2.2",
"react": "^19.0.0", "react": "^19.0.0",
"react-dom": "^19.0.0", "react-dom": "^19.0.0",
"react-helmet": "^6.1.0",
"react-router-dom": "^7.1.1", "react-router-dom": "^7.1.1",
"react-scripts": "5.0.1", "react-scripts": "5.0.1",
"web-vitals": "^4.2.4" "web-vitals": "^4.2.4"
@ -13709,6 +13710,36 @@
"integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==", "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==",
"license": "MIT" "license": "MIT"
}, },
"node_modules/react-fast-compare": {
"version": "3.2.2",
"resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz",
"integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==",
"license": "MIT"
},
"node_modules/react-helmet": {
"version": "6.1.0",
"resolved": "https://registry.npmjs.org/react-helmet/-/react-helmet-6.1.0.tgz",
"integrity": "sha512-4uMzEY9nlDlgxr61NL3XbKRy1hEkXmKNXhjbAIOVw5vcFrsdYbH2FEwcNyWvWinl103nXgzYNlns9ca+8kFiWw==",
"license": "MIT",
"dependencies": {
"object-assign": "^4.1.1",
"prop-types": "^15.7.2",
"react-fast-compare": "^3.1.1",
"react-side-effect": "^2.1.0"
},
"peerDependencies": {
"react": ">=16.3.0"
}
},
"node_modules/react-helmet/node_modules/react-side-effect": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.2.tgz",
"integrity": "sha512-PVjOcvVOyIILrYoyGEpDN3vmYNLdy1CajSFNt4TDsVQC5KpTijDvWVoR+/7Rz2xT978D8/ZtFceXxzsPwZEDvw==",
"license": "MIT",
"peerDependencies": {
"react": "^16.3.0 || ^17.0.0 || ^18.0.0"
}
},
"node_modules/react-is": { "node_modules/react-is": {
"version": "17.0.2", "version": "17.0.2",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",

1
package.json
View File

@ -7,6 +7,7 @@
"masonry-layout": "^4.2.2", "masonry-layout": "^4.2.2",
"react": "^19.0.0", "react": "^19.0.0",
"react-dom": "^19.0.0", "react-dom": "^19.0.0",
"react-helmet": "^6.1.0",
"react-router-dom": "^7.1.1", "react-router-dom": "^7.1.1",
"react-scripts": "5.0.1", "react-scripts": "5.0.1",
"web-vitals": "^4.2.4" "web-vitals": "^4.2.4"

38
src/App.css
View File

@ -1,38 +0,0 @@
.App {
text-align: center;
}
.App-logo {
height: 40vmin;
pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}
.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
.App-link {
color: #61dafb;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

2
src/components/Contact.js
View File

@ -1,8 +1,10 @@
import React from 'react'; import React from 'react';
import { Helmet } from 'react-helmet';
const Contact = () => { const Contact = () => {
return ( return (
<div className="contact"> <div className="contact">
<Helmet><title>Contact</title></Helmet>
<h1>Contact Me</h1> <h1>Contact Me</h1>
<p>Email: jake@runyan.dev</p> <p>Email: jake@runyan.dev</p>
</div> </div>

2
src/components/Home.js
View File

@ -1,6 +1,7 @@
import React, { useEffect, useRef } from 'react'; import React, { useEffect, useRef } from 'react';
import Masonry from 'masonry-layout'; import Masonry from 'masonry-layout';
import images from '../data/Images'; // Import the image URLs import images from '../data/Images'; // Import the image URLs
import { Helmet } from 'react-helmet';
import './Home.css'; // Ensure you have your CSS for styling import './Home.css'; // Ensure you have your CSS for styling
// Shuffle function to randomize the array // Shuffle function to randomize the array
@ -45,6 +46,7 @@ const Home = () => {
return ( return (
<div className="gallery" ref={masonryRef}> <div className="gallery" ref={masonryRef}>
<Helmet><title>Jake Runyan Photography</title></Helmet>
{shuffledImages.map((image, index) => ( {shuffledImages.map((image, index) => (
<img key={index} src={image} alt={`© Jake Runyan ${index + 1}`} className="gallery-photo" /> <img key={index} src={image} alt={`© Jake Runyan ${index + 1}`} className="gallery-photo" />
))} ))}

14
src/index.html Normal file
View File

@ -0,0 +1,14 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>Jake Runyan Photography</title> <!-- Set your desired title here -->
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div> <!-- This is where your React app will be rendered -->
</body>
</html>