Remix

Make your own version of Student Developer Portfolio (Remix)

Get an exact, working copy in your account, then change anything with chat.

Original by U.Dhanush raju

Start free with 40 credits. No card needed.

Start fresh from this prompt

Builds a brand new app from the first prompt only, so later changes to the original are not included.

CINEMATIC INTRO VIDEO — FIRST THING USERS SEE

IMPORTANT: The website MUST begin with a full-screen cinematic intro video before the main portfolio appears.

Do NOT immediately show the navbar or hero section.

INTRO SEQUENCE

When the website loads:

1. Display a full-screen black/dark cinematic video.
2. The video should occupy 100% of the viewport.
3. Hide the main website content while the intro is playing.
4. Play the intro automatically.
5. Use a muted video so autoplay works reliably.
6. Use "playsInline" for mobile devices.
7. The intro should feel like the opening of a premium creative developer portfolio.

INTRO VIDEO CONTENT

Create/use an editable video placeholder:

"/intro.mp4"

The video should visually introduce the student and their digital identity.

Suggested sequence:

0:00 – 0:02
Black screen.

Very subtle ambient sound/visual atmosphere if audio is available.

Small text fades in:

"WELCOME"

0:02 – 0:04

Large typography appears:

"[YOUR NAME]"

The name should reveal smoothly using a mask/clip animation.

0:04 – 0:06

Show:

"COMPUTER SCIENCE STUDENT"

Then:

"DEVELOPER • CREATIVE TECHNOLOGIST"

0:06 – 0:09

Show cinematic visuals related to:

- Code
- AI
- UI/UX
- Websites
- Digital interfaces
- Programming
- Creative technology

Use dark, sophisticated visuals.

0:09 – 0:11

Display:

"BUILDING IDEAS INTO DIGITAL EXPERIENCES."

Large typography with a subtle cinematic reveal.

0:11 – 0:13

Transition from the intro video into the main portfolio.

Use a smooth cinematic transition such as:

- Fade
- Scale
- Blur
- Clip-path
- Light sweep

The transition should reveal the main HERO section underneath.

INTRO VIDEO UI

Add a very minimal progress indicator at the bottom.

Example:

"INTRO 01 — 100%"

or a thin progress line.

Keep it elegant and unobtrusive.

Do not add unnecessary buttons or UI elements.

SKIP INTRO

Add a small:

"SKIP INTRO →"

button in the bottom-right corner.

When clicked:

- Stop the video
- Animate the intro away
- Reveal the hero immediately

The button should have a subtle hover animation.

AFTER VIDEO ENDS

When the video reaches the end automatically:

1. Fade/transition the video out.
2. Reveal the hero section.
3. Start the hero animations.
4. Activate the navbar.
5. Enable smooth scrolling.
6. Start the website's normal interaction system.

The transition must feel continuous rather than like a separate page.

IMPORTANT

The intro video should play ONLY on the initial page entry.

Do not replay it every time the user scrolls.

Store a session flag if appropriate so returning to the home section does not repeatedly show the intro.

MOBILE

On mobile:

- Use a mobile-optimized intro video if available.
- Keep the video lightweight.
- Use "playsInline".
- Keep text readable.
- Avoid heavy effects.
- Provide SKIP INTRO.
- Respect reduced-motion settings.

REDUCED MOTION

If the user has:

"prefers-reduced-motion: reduce"

do NOT play the cinematic animation sequence.

Instead:

- Show a static dark intro screen briefly.
- Display "[YOUR NAME]".
- Quickly transition to the hero.

VIDEO FALLBACK

If "/intro.mp4" does not exist or fails to load:

Do NOT break the website.

Automatically display a cinematic animated fallback using:

- Dark background
- "[YOUR NAME]"
- "STUDENT DEVELOPER"
- Subtle gradient
- Simple text reveal

Then transition to the hero.

MAIN WEBSITE FLOW

The final website experience should be:

INTRO VIDEO
↓
CINEMATIC TRANSITION
↓
HERO
↓
ABOUT
↓
EDUCATION
↓
SKILLS
↓
PROJECTS
↓
CERTIFICATES
↓
BEYOND THE CLASSROOM
↓
STATISTICS
↓
RESUME
↓
CONTACT
↓
FOOTER

The intro video is an essential part of the website experience, not an optional decoration.

The overall feeling should be:

"Opening a premium creative developer portfolio."

Keep the intro cinematic, short, sophisticated and professional.BUILD A PREMIUM, CINEMATIC STUDENT DEVELOPER PORTFOLIO

Create a COMPLETE, FUNCTIONAL, RESPONSIVE portfolio inspired by the uploaded reference video. Do NOT make a basic resume, generic template, static mockup, or college-style website. Build a real interactive website with smooth scrolling, working navigation, animations, project interactions, forms and editable content. Use the reference only for motion quality, pacing, transitions and visual rhythm. Create an ORIGINAL design.

STYLE:
Premium Awwwards-style • Cinematic • Futuristic • Minimal • Dark • Editorial • Interactive • Professional.

Use near-black background, white/off-white typography, subtle gray text, restrained accent color, gradients, glassmorphism, thin borders, grain, fine grid, glow and generous whitespace. Avoid excessive neon, particles, bouncing or gaming aesthetics.

TECH:
Prefer React + Next.js + TypeScript + Tailwind CSS. Use GSAP + ScrollTrigger and Lenis where supported. Use reusable components and centralized editable data.

INTRO VIDEO — FIRST SCREEN:
The website MUST start with a fullscreen cinematic intro video before the hero. Use "/intro.mp4", autoplay muted, playsInline. Show:
WELCOME → [YOUR NAME] → COMPUTER SCIENCE STUDENT → DEVELOPER • CREATIVE TECHNOLOGIST → BUILDING IDEAS INTO DIGITAL EXPERIENCES.
Add subtle progress indicator and SKIP INTRO. When video ends, smoothly fade/blur/clip into the hero. If video is missing, use an animated fallback. Respect reduced-motion.

NAVBAR:
Floating transparent navbar with [YOUR NAME], HOME, ABOUT, SKILLS, PROJECTS, EDUCATION, CERTIFICATES, CONTACT and LET’S CONNECT. Hide on scroll down, reveal on scroll up, glass effect after scrolling. Mobile hamburger opens fullscreen animated menu.

HERO:
Fullscreen. HELLO, I’M / [YOUR NAME] / STUDENT DEVELOPER / TURNING IDEAS INTO DIGITAL EXPERIENCES. Add portrait, VIEW MY WORK and CONTACT ME. Use text reveals, image reveal, parallax, moving light, grain, grid and magnetic buttons.

SECTIONS:
ABOUT — editorial layout with WHO I AM / WHAT I DO / WHAT I LOVE.
EDUCATION — animated timeline.
SKILLS — Programming, Web, Database, AI, Design with interactive cards.
PROJECTS — AI Smart Interview Assessment, Attendance Management, Smart Campus, AI Home Design + editable projects. Desktop: pinned horizontal scroll. Mobile: vertical cards. Hover zoom/parallax. Clicking opens detailed modal with overview, problem, solution, features, tech, contribution, screenshots, GitHub and demo.
CERTIFICATES — responsive interactive gallery.
BEYOND CLASSROOM — internships, workshops, hackathons, symposiums and events.
STATS — editable animated counters.
RESUME — "/resume.pdf" download.
CONTACT — Name, Email, Subject, Message with validation and editable social links.
FOOTER — navigation, socials, copyright, back-to-top.

MOTION:
GSAP/ScrollTrigger/Lenis. Smooth text/image reveals, clip-path transitions, parallax, horizontal projects, magnetic buttons, counters, hover effects, cursor, modal transitions and section transitions. Keep motion cinematic, natural and controlled.

CUSTOM CURSOR:
Desktop only. Normal circle; buttons show VIEW; projects OPEN; images EXPLORE. Disable on mobile/reduced-motion.

RESPONSIVE:
Desktop, laptop, tablet and mobile. Mobile must be intentionally designed, with vertical projects, touch-friendly controls, reduced parallax and optimized images.

ACCESSIBILITY/PERFORMANCE:
Semantic HTML, keyboard navigation, focus states, alt text, ARIA, contrast, Escape-to-close modal, prefers-reduced-motion. Lazy-load images, WebP/AVIF, GPU transforms, minimal JS and prevent layout shifts.

EDITABLE DATA:
Central config for name, role, about, skills, projects, education, certificates, experience, stats, email, socials and resume. Assets: "/images/profile.webp", "/images/project-01.webp", "/images/certificate-01.webp", "/intro.mp4", "/resume.pdf".

FINAL:
BUILD THE COMPLETE WORKING WEBSITE NOW. Do not only explain or create a mockup. Make all major interactions functional. The final result must feel PREMIUM, CINEMATIC, MODERN, INTERACTIVE, PROFESSIONAL and FUTURE-READY — never like a basic college assignment or generic resume.

Start fresh from this prompt

Builds a brand new app from the first prompt only, so later changes to the original are not included.