🎂 Birthday Webpage

Stop writing cards or posting content on social media to say "Happy Birthday!"
Programmers should celebrate important days in their lives in a "programmer's way."

This is a birthday SPA (Single-Page-Application) using Vue.js.

I made this website for my girlfriend's birthday and thought that this might help out some frontend boys and girls! I modified some content to make it more general and easy to configure.

Feel free to contact me for more information or custom designs.

💻 Prerequisites

You will need Node.js version 6.0 or greater installed on your system.

🔧 Setup

Get the code by either cloning this repository using git

> git clone https://github.com/amoossssss/birthday_webpage

... or downloading source code code as a zip archive.

Once downloaded, open the terminal in the project directory, and continue with:

npm install

Compiles and hot-reloads for development

npm run serve

Now the website will be running on port 8080:

http://localhost:8080

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

📝 Customize configuration

Find all the TODO tags in the code to configure this webpage.

Including :

1. Landing page's content
2. Messages page's content and images
3. Video page's YouTube video
4. Stories behind page's content

Reminder :
  * You have to add a onLoad function to every image added in the Messages page to make the page loader work.
  * There are some dummy imgaes in the page to display the loader functionality and transition effect.
  * Just copy @load="onImgLoad" and paste it to the el-image tags you added.
  * Also be careful of the totalImages variable in the same page, make sure it is consistant to your design.

🙏🏼 Credits

The shop where I brought the birthday cake and the lights.

⭐️ Support this project

Please give a star if you find this project helpful.
Any suggestions and improvements are highly appreciated!
I wish you and your be loved ones a Happy Birthday 🎊.