Skip to content

Commit d019c85

Browse files
johnfkrausjohnfkraus
committed
css movifications
1 parent 9122cc4 commit d019c85

File tree

6 files changed

+33
-68
lines changed

6 files changed

+33
-68
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
# also, run this: git config --global core.excludesfile ~/.gitignore_global
12

23
.DS_Store
34
.idea

‎README.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,3 +16,10 @@ Configure SURGE_TOKEN as a Github secret.
1616

1717
Commiting changes to main updates the live website using Github actions.
1818

19+
Run in development mode:
20+
21+
npm run dev
22+
23+
Deploy:
24+
25+
npm

album-photos/script.sh renamed to album-photos/photo-renaming-script.sh

File renamed without changes.

‎src/index.css‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,11 @@ header {
1515
flex-flow: row wrap;
1616
align-items: baseline;
1717
justify-content: center;
18-
margin: 16px 8px;
18+
/*margin: 16px 8px;*/
19+
margin-top: 16px;
20+
margin-bottom: 4px;
21+
margin-right: 8px;
22+
margin-left: 8px;
1923
}
2024

2125
header h1 {

‎src/main.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import "./index.css";
77
ReactDOM.createRoot(document.getElementById("root")!).render(
88
<React.StrictMode>
99
<header>
10-
<h1>Your Photo Portfolio</h1>
10+
<h1>Photo Portfolio</h1>
1111
{/*<a href="https://github.com/igordanchenko/react-photo-album" target="_blank" rel="noreferrer noopener">*/}
1212
{/* GitHub*/}
1313
{/*</a>*/}

‎src/photos.ts‎

Lines changed: 19 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -1,90 +1,42 @@
11
import type { Photo } from "react-photo-album";
22

3-
const breakpoints = [1080, 640, 384, 256, 128, 96, 64, 48];
3+
// adapted from:
4+
// OPTIONAL:
5+
// const breakpoints = [1080, 640, 384, 256, 128, 96, 64, 48];
46

57
const bucket = "https://photo-album-22101.s3.us-east-1.amazonaws.com/photos/"
68

79
function imageLink(path: string, width: number, height: number, size: number, extension: string) {
8-
// console.log(`photos/${path}.${width}x${height}.${size}w.${extension}`);
9-
// console.log(`https://photo-album-22101.s3.us-east-1.amazonaws.com/photos/${path}.${width}x${height}.${size}w.${extension}`);
10-
console.log(`${bucket}${path}.${width}x${height}.${size}w.${extension}`);
1110
return `${bucket}${path}.${width}x${height}.${size}w.${extension}`;
12-
// return `https://photo-album-22101.s3.us-east-1.amazonaws.com/photos/${path}.${width}x${height}.${size}w.${extension}`;
13-
// return `https://images.react-photo-album.com/hiking/${path}.${width}x${height}.${size}w.${extension}`;
1411
}
1512

1613
const photos = [
1714
// see 'filenames.md' for tips on how to refer to photos in this list
1815

19-
{ src: "amery.3611.3024x4032.jpg", alt: "Weenie Beenie" },
20-
{ src: "annapolis.6702.3024x4032.jpg", alt: "Weenie Beenie" },
21-
{ src: "bronze.3623.1493x1613.jpg", alt: "Weenie Beenie" },
22-
{ src: "buffalo.7161.4032x3024.jpg", alt: "Weenie Beenie" },
23-
{ src: "dino-balloon.5224.3024x4032.jpg", alt: "Weenie Beenie" },
24-
{ src: "meeks-book.0776.4032x3024.jpg", alt: "Weenie Beenie" },
25-
{ src: "meeks.3684.3024x4032.jpg", alt: "Weenie Beenie" },
26-
{ src: "meeks.3A95.1141x642.jpg", alt: "Weenie Beenie" },
27-
{ src: "meeks.693245.3024x4032.jpg", alt: "Weenie Beenie" },
28-
{ src: "meeks.7597.3024x4032.jpg", alt: "Weenie Beenie" },
29-
{ src: "meeks.8237.3024x4032.jpg", alt: "Weenie Beenie" },
30-
{ src: "painted-stone.6872.4032x3024.jpg", alt: "Weenie Beenie" },
31-
16+
{ src: "amery.3611.3024x4032.jpg", alt: "Amery, Wisconsin, vase, 1987" },
17+
{ src: "annapolis.6702.3024x4032.jpg", alt: "Sailing on a schooner in Annapolis, Maryland" },
18+
{ src: "bronze.3623.1493x1613.jpg", alt: "Bronze figurines" },
19+
{ src: "buffalo.7161.4032x3024.jpg", alt: "South Dakota buffalo" },
20+
{ src: "dino-balloon.5224.3024x4032.jpg", alt: "Dinosaur balloon" },
21+
{ src: "meeks-book.0776.4032x3024.jpg", alt: "Meeks reading" },
22+
{ src: "meeks.3684.3024x4032.jpg", alt: "Meeks" },
23+
{ src: "meeks.3A95.1141x642.jpg", alt: "Meeks" },
24+
{ src: "meeks.693245.3024x4032.jpg", alt: "Meeks" },
25+
{ src: "meeks.7597.3024x4032.jpg", alt: "Meeks the Cat" },
26+
{ src: "meeks.8237.3024x4032.jpg", alt: "Meeks" },
27+
{ src: "painted-stone.6872.4032x3024.jpg", alt: "Painted stone" },
3228
{ src: "weenie-beenie.5954.4032x3024.jpg", alt: "Weenie Beenie" },
3329
{ src: "sea-turtle.333.5568x4176.jpg", alt: "Sea Turtle, Puerto Rico"},
3430
{ src: "meeks.8143.2400x3600.jpg", alt: "Meeks" },
3531
{ src: "dishes.8073.4032x3024.jpg", alt: "Dishes"},
3632
{ src: "birdhouse.7943.3024x4032.jpg", alt: "Birdhouse"},
37-
{ src: "palace.8004.4032x3024.jpg", alt: "Palace" },
38-
{ src: "hotel.8016.3024x4032.jpg", alt: "Munich hotel 1" },
39-
{ src: "wallocheese.7977.4032x3024.jpg", alt: "Wall O' Cheese, Munich 1" },
33+
{ src: "palace.8004.4032x3024.jpg", alt: "Nymphenburg Palace, Munich" },
34+
{ src: "hotel.8016.3024x4032.jpg", alt: "Munich hotel" },
4035
{ src: "frank-and-veronica.0001.1600x1200.jpeg", alt: "Frank and Veronica" },
4136
{ src: "emyla.7743.4032x3024.jpeg", alt: "Emyla" },
4237
{ src: "postcards.7742.3024x4032.jpg", alt: "Postcards" },
43-
{ src: "meeks.8143.2400x3600.jpg", alt: "Meeks 2" },
44-
{ src: "dishes.8073.4032x3024.jpg", alt: "Dishes"},
45-
{ src: "birdhouse.7943.3024x4032.jpg", alt: "Birdhouse 2" },
46-
{ src: "palace.8004.4032x3024.jpg", alt: "Palace" },
47-
{ src: "hotel.8016.3024x4032.jpg", alt: "Munich hotel 2" },
48-
{ src: "wallocheese.7977.4032x3024.jpg", alt: "Wall O' Cheese, Munich" },
49-
{ src: "meeks.8143.2400x3600.jpg", alt: "Meeks" },
5038
{ src: "dishes.8073.4032x3024.jpg", alt: "Dishes"},
51-
{ src: "postcards.7742.3024x4032.jpg", alt: "Postcards" },
52-
{ src: "palace.8004.4032x3024.jpg", alt: "Palace" },
53-
{ src: "birdhouse.7943.3024x4032.jpg", alt: "Birdhouse 3"},
54-
{ src: "hotel.8016.3024x4032.jpg", alt: "Munich hotel" },
55-
{ src: "meeks.8143.2400x3600.jpg", alt: "Meeks" },
56-
{ src: "dishes.8073.4032x3024.jpg", alt: "Dishes2"},
57-
{ src: "birdhouse.7943.3024x4032.jpg", alt: "Birdhouse Again"},
58-
{ src: "palace.8004.4032x3024.jpg", alt: "Palace 2" },
59-
// { src: "hotel.8016.3024x4032.jpg", alt: "Munich hotel" },
60-
// { src: "wallocheese.7977.4032x3024.jpg", alt: "Wall O' Cheese, Munich, Germany" },
61-
// { src: "postcards.7742.3024x4032.jpg", alt: "Postcards 2" },
62-
// { src: "image02.7561b5a4.2400x3600.jpg", alt: "Purple petaled flowers near a mountain" },
63-
// { src: "image03.334d8e07.2400x1600.jpg", alt: "A person pointing at a beige map" },
64-
// { src: "image04.635260bf.2400x1601.jpg", alt: "Two hikers walking toward a snow-covered mountain" },
65-
// { src: "image05.9962a853.2400x3600.jpg", alt: "A silver and black coffee mug on a brown wooden table" },
66-
// { src: "image06.607b0ab6.2400x1349.jpg", alt: "A worm's eye view of trees at night" },
67-
// { src: "image07.7a68edb7.2400x1350.jpg", alt: "A pine tree forest near a mountain at sunset" },
68-
// { src: "image08.2c9f5784.2400x1600.jpg", alt: "Silhouette photo of three hikers near tall trees" },
69-
// { src: "image09.6a8477e9.2400x3443.jpg", alt: "A person sitting near a bonfire surrounded by trees" },
70-
// { src: "image10.5536924a.2400x1600.jpg", alt: "Green moss on gray rocks in a river" },
71-
// { src: "image11.fddf96d5.2400x1543.jpg", alt: "Landscape photography of mountains" },
72-
// { src: "image12.761f839b.2400x3600.jpg", alt: "A pathway between green trees during daytime" },
73-
// {
74-
// src: "image13.5f09a6e5.2400x1600.jpg",
75-
// alt: "A man wearing a black jacket and backpack standing on a grass field during sunset",
76-
// },
77-
// { src: "image14.0341af8e.2400x3200.jpg", alt: "Green pine trees under white clouds during the daytime" },
78-
// { src: "image15.6a693017.2400x3600.jpg", alt: "A hiker sitting near the cliff" },
79-
// { src: "image16.38feb9dc.2400x1800.jpg", alt: "A tall mountain with a waterfall running down its side" },
80-
// { src: "image17.5010dd5c.2400x1322.jpg", alt: "Blue mountains" },
81-
// {
82-
// src: "image18.f533ed48.2400x356.jpg",
83-
// alt: "Green trees on a brown mountain under a blue sky during the daytime",
84-
// },
85-
// { src: "image19.7afeb6fd.2400x1800.jpg", alt: "A red flower on a green grass field during the daytime" },
86-
// { src: "image20.027297a5.2400x1600.jpg", alt: "A sign warning people not to disturb nature" },
87-
// { src: "image21.3b170653.2400x3200.jpg", alt: "A small creek in Yosemite National Park" },
39+
8840
].map(({ src, ...rest }) => {
8941
console.log('src = ' + src);
9042
const matcher = src.match(/^(.*)\.(\d+)x(\d+)\.(.*)$/)!;
@@ -98,6 +50,7 @@ const photos = [
9850
src: imageLink(path, width, height, width, extension),
9951
width,
10052
height,
53+
// OPTIONAL:
10154
// srcSet: breakpoints.map((breakpoint) => ({
10255
// src: imageLink(path, width, height, breakpoint, extension),
10356
// width: breakpoint,

0 commit comments

Comments
 (0)