Videographer Portfolio Website using HTML CSS & JavaScript with Source Code
Description: Videographer Portfolio Website using HTML CSS & JavaScript with Source Code
Preview Website - https://videographerportfolio-sepia.vercel.app/
Download Source Code -
Source Code {This Project} - https://pixelwebtemplate.gumroad.com/l/aumphb
Source Code {All Projects} - https://pixelwebtemplate.gumroad.com/
This is a single hosted page. The hero footage is generated live in canvas, because a published page can't load outside video or images. There's a one-line switch for your real reel.The showreel site is published and ready to open from the card above. I haven't checked it in a browser here, so click through the filters and the viewer once. "Ilan Reyes", the clients and the copy are placeholders.
Hero. Full-screen "footage" is generated live in canvas: bokeh, anamorphic streaks and a dusk glow, with film grain over it. The name sits large on the left, with the role and a "Watch the 90-second reel" button on the right.
Navigation. Navigation is a timeline bar fixed at the bottom of the screen:
As you scroll, the playhead moves and the timecode runs, with the page standing in for a 2-minute film.
The chapters (Reel, Work, About, Contact) are links, and you can drag along the track to scrub the page.
The only other nav is the name and a "Book a shoot" link at the top.
Work grid.
Twelve films in four categories: Brand, Music, Documentary and Events, with counts on the filter buttons.
Hovering a frame animates a preview with a slow push-in, and clicking opens a viewer dialog.
The section sits on a neutral grey, like the grey card colorists grade against, so it's visibly separate from the dark hero and the dark About and Contact sections. A dark-mode variant is built in.
About and Contact. About has a short statement plus rows for services, kit, clients and availability. Contact is a full-screen end card with a large email link and social links.
⚠ Disclaimer
---------------------------------------
Disclaimer video is for educational purpose only. Copyright Disclaimer Under Section 107 of the Copyright Act 1976, allowance is made for "fair use" for purposes such as criticism, comment, news reporting, teaching, scholarship, and research. Fair use is a use permitted by copyright statute that might otherwise be infringing. Non-profit, educational or personal use tips the balance in favor of fair use.
#webdevelopmentproject Close description
Preview Website - https://videographerportfolio-sepia.vercel.app/
Download Source Code -
Source Code {This Project} - https://pixelwebtemplate.gumroad.com/l/aumphb
Source Code {All Projects} - https://pixelwebtemplate.gumroad.com/
This is a single hosted page. The hero footage is generated live in canvas, because a published page can't load outside video or images. There's a one-line switch for your real reel.The showreel site is published and ready to open from the card above. I haven't checked it in a browser here, so click through the filters and the viewer once. "Ilan Reyes", the clients and the copy are placeholders.
Hero. Full-screen "footage" is generated live in canvas: bokeh, anamorphic streaks and a dusk glow, with film grain over it. The name sits large on the left, with the role and a "Watch the 90-second reel" button on the right.
Navigation. Navigation is a timeline bar fixed at the bottom of the screen:
As you scroll, the playhead moves and the timecode runs, with the page standing in for a 2-minute film.
The chapters (Reel, Work, About, Contact) are links, and you can drag along the track to scrub the page.
The only other nav is the name and a "Book a shoot" link at the top.
Work grid.
Twelve films in four categories: Brand, Music, Documentary and Events, with counts on the filter buttons.
Hovering a frame animates a preview with a slow push-in, and clicking opens a viewer dialog.
The section sits on a neutral grey, like the grey card colorists grade against, so it's visibly separate from the dark hero and the dark About and Contact sections. A dark-mode variant is built in.
About and Contact. About has a short statement plus rows for services, kit, clients and availability. Contact is a full-screen end card with a large email link and social links.
⚠ Disclaimer
---------------------------------------
Disclaimer video is for educational purpose only. Copyright Disclaimer Under Section 107 of the Copyright Act 1976, allowance is made for "fair use" for purposes such as criticism, comment, news reporting, teaching, scholarship, and research. Fair use is a use permitted by copyright statute that might otherwise be infringing. Non-profit, educational or personal use tips the balance in favor of fair use.
#webdevelopmentproject Close description
