[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

This is a birthday celebration single-page-application using Vue.js πŸŽ‚.

License

Notifications You must be signed in to change notification settings

amoossssss/birthday_webpage

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

5 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

πŸŽ‚ 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."

website previe

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 🎊.