Speaker wrote the dashboard in JavaScript. It's a lot of just regular JavaScript HTML and CSS. Speaker wants people to check out the artist's website. They want them to become a fan. Speaker is looking forward to the new project. They will probably use it for projects and stuff.

Speaker has been doing a lot of laundry since they were travelling. They are also working on a new side project. Speaker wants to share their screen with the public. They created a project called " Chronicle " to document the trips they take.

Speaker wants to create a website with pictures they took while they were speaking at render ATL. They want to create a place where people can check out the different photos and videos they have. Speaker is working on a project to prepare a talk for render ATL.

Speaker has created a less complex version of their website to show their side projects. They want to try some new ways of bringing up the pictures. Dwayne posted a list of links. Speaker has added key keyboard events to the render ATL 2023. It loads the pictures from there. Speaker wants to know how to do the navigation on ATO 2023. Here are the instructions.

Speaker wants to make money with side projects. They want to create projects that people can deploy for themselves and pay them for the domain name. Speaker has created a website with basic HTML CSS JavaScript. They explain to their users what they need to do in order to create a website and how to post files to the cloud.

Speaker explains how to set up an upload preset, how to do it like with photos and how to integrate The View, transitions API into the application. They are working on a project that allows to categorize things by events, show things by location and to show things on the map.

Speaker wants to be able to show all the photos by name of a person and to timestamp the photos within certain times. They have been working on that a little bit, but they want to get other projects out first.

Andre thanks people for hanging out and seeing them around.

• pictures
• photo gallery
• github repo
• transitions

Welcome back your dreams were your ticket.

I welcome back that same old place for the night since you hung around but those dreams have remained, and they turn around.

Soyou.

Alright welcome back.

Give a stretch.

Oh yeah.

Oh yeah.

Oh yeah.

Alright how's everything going?

I have been doing a bunch like a mountain of laundry since I have been like out and traveling and so making a dent in that actually doing pretty well.

On my side project is trying to figure out some stuff but it's getting there.

So that's the most important thing.

And yeah.

So let me, so I am working on a new side project, and so I figured why not show the side product.

I just completed and let me share my screen here.

Okay, I want to show the entire screen, maybe some audio will see.

Okay, so it all started with this project that created Dwayne, .i in or doing stuff that I N.

So doing stuff in or Dwayne Diane, let me put the doing stuff that in link there.

So it's a project that I created to kind of Chronicle, the trips that I was able to take As my job allows me to do gives me an opportunity to, and so I get to go to places and go to conferences and do workshops and speak and do all sorts of cool things, right?

And so while I am in these places, I want to be able to like I take pictures and videos and stuff, the kind of like remind myself.

So I want to have a place that I could have store all those memories and things, so I figured why not make a website, right?

Because posting on social media and stuff, it may get lost.

So, like one of the most recent ones that opportunity, I got a chance to go speak at render ATL.

And so, with the site, you can actually check out some of the pictures and things I took.

So, I am a big fan of like 360 photos.

So I always take a 360 photo of the hotel room.

All right?

And so, Like, so I walk around also and take pictures of different things in around there.

Let me see here.

This place shots of the food shop.

Some really good food there.

And so yeah.

So the whole thing is I take these pictures I walk around stuff.

So I wanted to have a place that I would be to remember and reminisce pretty much right?

And so with that, so I have you can check out the different photos or some videos.

In there and I also have like descriptions to kind of like what was happening during that time.

All right?

And, so I have showed a few people this site, and they seem to like it and a couple even asked, like how could they also get their own, like gallery and so that always kind of stuck with me.

And I was like, you know what, let me see if I can make a version because this one that I have now is super complex and I kind of built on it over time.

As I wanted to add things like 360 video or just videos in general, like, trying to figure all that stuff, out and messing around with the dashboard and all these things and try like new stuff.

And I was like, I wonder if I can get one.

That's a little bit more like less complex and just kind of easier to manage and have it to be where it can be easily deployed just by filling out a few things.

And so it kind of worked because so as I was kind of working on it and it was time for me to like think of something for my talk for render ATL.

I was like I wonder if I can get this project done so that I can present it at there.

So the whole talk is about side projects and how they got me to where I am, right?

And, so I wanted to have a side project to kind of show.

So I created posted pics.

And it's basically like I was saying before a less complex version of my site.

So it's more like a photo gallery where you can like upload pictures from like your phone or from your computer and like have a place where you can go back and check them out.

All right so if you go to posted that picks it has like pretty much everything that you need there.

So I talked about my other side project and then here's like a demo.

So this is what it looks like.

Let me refresh it so you can check out the animation that comes up.

I always kind of liked that most, I wanted to have like kind of Animation that loads and it kind of like shows like a cool way of bringing up the pictures, right?

And so here're some pictures.

So Dwayne that posted that picks, let me add this list of to the list of links as well, if you can point to check it out.

All right.

And so, what's kind of cool is also this gave me the opportunity to try some new stuff also, right?

And, so I wanted to kind of play around with how you scroll through the pictures.

And you kind of see like, there's the same way they load it in, it's kind of like the opposite of way.

They, you kind of scroll through the pictures and I also added key keyboard what?

You call it like, keyboard events.

So you can use those to navigate and you can like select any of these here.

So if you go here, So there's the image there, and we got like the details here and like where it is the event.

All those things like that.

And you can also Click to scroll through that also, right?

And so you can go back.

And so, like I said, you can click anywhere, so you click that one, I saw this cool Spider-Man thing there.

And again, with the details, okay, then there's also I have it to where you can group them by events.

And so you can say like, hey, Dwayne posted pics act and then you can click here.

So this is the event.

I went to render ATL 2023.

And it loads the pictures from there.

And yeah.

So pretty much the same thing.

All right, kind of like it, kind of dig it.

And so, with all that, I think my internet might be kind of jacked up.

Oh yeah, my internet's jacked up.

Okay, hold on you fresh.

There we go.

That is so weird.

I don't know.

It's a I don't know that's the first time I have seen that and you can see up here that it also you can go back to let us say you want to go back to the render, ATO 2023 part, You cannot show those.

Or if you want to go back to the at there it is.

And then you want to go back to the homepage.

So I kind of wanted to have a cool way of doing the navigation there as well.

All right.

And so with that here are the instructions, like, here're the codes because again, the whole point of it is that you're able to deploy yourself if you want to check it out.

And I am also creating these side projects, make a little bit of money to see if I can with side projects.

And the thing is that I don't want any customers but I want to make money, right?

So the plan is, and what I am going to try is to create these projects that people can deploy for themselves, but they want a cool domain name then they would pay me like two dollars a month for your name dot the site.

So, for example, Dwayne dot posted Pics then you'd pay me for that right?

And works a little bit cheaper than if you were to actually pay for the domain a year.

And I, if you notice that this repo is titled, posting hyphen pics, that's because I own the domain name.

Posting dot pictures posting that pictures and I saw that you could get other domain.

Like, there's dot picks dot photos, but those were already taken.

And so, it was actually like the week of the conference that I woke up in the middle of the night in the hotel, early in the morning.

And I was like, yo, What I do, I search for this other one and it was available.

So I got posted that pics posted that pictures and posted that photos.

So just in case, if your username that you want, or the name that you wanted was taken, when one domain will have to other domains.

So we will see how that works.

So that is the point.

I want to be able to create what I think are cool projects.

If other people think they're cool they can deploy themselves play around with it.

You can eat also like modify it yourself because It's all pretty much this basic HTML CSS JavaScript, unless there's like a dashboard or something that I created, I use.

I use felt because that's my preferred framework, but you see here.

So, I got some pictures stuff here.

And so here again, little bit of the readme and I talked about the things that you need.

And then here are the steps to deploy it.

So you just click the deploy, the net with Phi.

Then you set up the login, click the dashboard, through certain things.

So I go through that.

So you add like GitHub as a way of being able to login.

Then there's also you need to get some environment variables.

That's how you can kind of like able to post.

I also use cloud and Airy and so that's how you're able to post your photos to your cloud in dairy cow.

And so you need like, API key and secret, and the cloud, and every name, and then.

In order to, like interact with GitHub, I need your, I need a GitHub personal access token, and the same thing for net.

Le fi you need a personal access token in order to be able to make changes to, like the GitHub repo to save things and never fight to be able to pull certain information in the back end, all sorts of stuff like that.

So Yeah, and then I kind of like walk through everything and so like here is the different.

So not only do I say hey you need these things but I walk you through each individual one.

So I declared in their API key, the secret and the name, I tell you how to do it like with photos like where you need to go stuff like that, right?

Then there's as well.

The GitHub personal access token and the net Le fi.

So I kind of walk you through all that.

And then how to set up an upload preset.

That makes it a bit easier to do stuff.

And then talking about the dashboard and shows you all this other stuff you get like an error kind of like trigger deploy again but I have had somebody else do it, they didn't have any issues so at least I know someone else was able to follow these instructions and get it working.

And then yeah, that talk about some of the upcoming features that I want to get work done.

So, for example, I want to integrate The View, transitions API and I created, I think I have shown it here before, but I created a sample app, showing the view transition stuff, but for whatever reason, when I try to put it into the actual application, I ran into some issues.

So I had to do something like trickery, the kind of make it work.

So I am going to wait until the view transitions API is fully baked in to the browsers before.

I actually go and put into this project.

And then also the same way that you can kind of like Categorize things by events, like the photos by events.

I also want to be able to do it by location and to show things on the map.

And then some of the other stuff is you can add keywords to the photos because in the future I want to be able to search.

So by like maybe like by name of a person and you be able to show all the pictures of that person, may be of a place or what have you?

I want to be able to show like within certain times because you can like, timestamp the photos.

And so saying, Hey I want all the photos from this start time to this Endtime.

Show me all the photos so those are things are coming in the future, and so I have been kind of working on that a little bit, but I won't work on it cause I want to get other projects out.

So when if, if the like need in the want is there then I will go back and add these things.

Otherwise, there's other project, I kind of want to just get them out of my brain, put them out there and then work on them as you know if other people I want something.

I will add it.

You know, I mean and then other people can update their projects if they want.

And so like I said, I use Astro as like kind of like the scaffolding for everything.

Cuz I am a big fan of the way it puts things together and also for the fact that it supports like lit view, react reacts knowledge, a yes, and a bunch more and so that way.

If you like I said, I wrote the dashboard in svelte, if you want to use any other framework, or language or whatever, you'd be able to do that as well, because Astro would understand it, right?

Then necessary language is all JavaScript, but you know what I mean?

At least for now it's all JavaScript and so you have to do that and if you wanted to kind of modify the actual photo gallery itself.

Like I said, it's just a lot of just regular JavaScript HTML and CSS.

So it's probably even like a good project to kind of learn the foundations and stuff.

So, I kind of wanted to also be not just, hey, you get this application and you're good to go, but kind of like, mess around and tweak it and be able to play around with it and stuff.

So, that is also like a hope that folks will do, and that's pretty much everything.

So, yeah, so you can check it out if you want.

Again, the links will be wherever you're watching the recording of this video on the site and be able to check them out.

And I think that's going to be it.

Yes, cool.

So let me stop sharing the screen.

My get you all back to Work.

And again, thanks for hanging out.

I will see you 15 minutes after hour for the final break session, which will take a look at an artist's website and go through it and check it out.

Maybe with some subtract, any watching videos, may become a fan.

Alright, so again, thanks for hanging out.

Get you all back to work and let me share my screen here.

So you know, let me know if you try it.

If you want to get the username you know your own unique URL or what have you and yeah, thanks again, I am looking forward to liking this new project is kind of different, but I think it'd be something I want to use.

Whereas with the photo gallery kind of like had a photo gallery but this one I am probably going to actually use it myself for like projects and stuff.

So I think it's should be cool, so we will see.

Alright, so again thanks for hanging out.

Traveling music.

To get you all back to work.

Is nujabes featuring a Pawnee?

Be the track is called.

Thank you.

All right again, thanks for hanging out and see you around.

Y'all be easy.

And here we go.

Peace.

It's a lie.