There is a story behind every capture.
And each story is shared through the website.
Note: 🏗️ Under Construction! Check back later for an awesome portfolio of mobile photography.
- 🚀 AstroJs: Static site generator with island architecture.
- 🎨 TailwindCSS: Utility-first CSS framework.
- ⚛️ ReactJs: JavaScript library for building user interfaces.
- 🖼️ react-photo-album: Responsive photo gallery component for React.
Make two folders: gallery
and caption
.
Rename photos with date-name.jpg
format and move to gallery
. For example 2023-01-01-test-image.jpg
.
Note the use of -
in date and instead of space
in name.
For each photo on gallery
make a .md
file in caption
with the same name. For example 2023-01-01-test-image.md
.
Each .md
file will contain details of the image like height, width, caption etc.
In .md
file, provide details of the corresponding photo in format below:
---
title:
height:
width:
---
Write a detailed caption here.
For example, the file 2023-01-01-test-image.md
might look like this,
---
title: This is Test Title
height: 300
width: 300
---
Ac feugiat sed lectus vestibulum. Orci nulla pellentesque dignissim enim sit amet. Et sollicitudin ac orci phasellus egestas tellus rutrum tellus pellentesque. Tortor dignissim convallis aenean et tortor at. Facilisi etiam dignissim diam quis enim.
Now you are all set for uploading contents. 😎