Use Claude Code or ChatGPT Codex to build a custom portfolio website from a folder of your own work, then deploy it with free hosting.
Create a custom motion design portfolio website using a vibe coding workflow. You will organize your work into one project folder, use AI coding tools to design and build the site, then publish it online so you have a real portfolio link.
This assignment should not be built on school computers. You need your own project folder, your own login accounts, and control over the files, permissions, domain, and hosting setup.
Use Claude Code or ChatGPT Codex. The lowest paid plan is enough for this assignment. The tool will help write, edit, organize, and troubleshoot your website files.
Use Cloudflare Pages for free static website hosting. It is fast, professional, and works well for portfolio sites built from HTML/CSS/JS or simple frameworks.
Buy a domain name if you can. A custom domain makes the site feel more professional and gives you one clean link for reels, resumes, internships, clients, and applications.
FirstnameLastname_PortfolioSite.project-01, project-02, reel, process, and assets.final_final_REAL2.mov. Rename things so the AI can understand them.The AI should only need access to the portfolio folder. Do not give it random access to personal folders, passwords, private documents, client files, or anything unrelated to this site.
Do not try to write a perfect prompt. Dictate or type pages of messy explanation: what you want the site to feel like, colors, type, layout, references, project order, page names, case study content, and what kind of motion designer you want to look like. The AI can parse typos, fragments, and your natural language. The more real material you give it, the more it can build from your taste instead of guessing.
Describe the personality: polished, experimental, cinematic, clean, brutalist, playful, technical, editorial, sleek, weird, soft, bold, minimal, maximal, or anything else that fits you.
Talk through colors, type styles, layout, navigation, spacing, motion, transitions, thumbnails, video presentation, and what you do not want it to look like.
Explain your projects, what files belong to each one, which pieces are strongest, what case studies need to say, and how your reel should be presented.
I am building a motion design portfolio website from this folder. First inspect the folder and summarize the assets you see. Then propose a site structure with a homepage, work/project gallery, demo reel area, about/contact, and case study pages for my strongest projects. Do not delete or overwrite my source assets. Ask before major changes. I want the site to feel like [describe your style]. My strongest projects are [list them]. My colors/type/layout references are [describe them]. I want the site hosted on Cloudflare Pages. Build a simple static site I can deploy.
If you get stuck, bring the problem to Topher. Be ready to show the folder, the AI conversation, the error message, the Cloudflare Pages screen, and what you already tried. The more specific the problem, the faster we can fix it.
The homepage should clearly communicate who you are, what kind of motion/design work you make, and where your best work lives.
Project pages should show finished work and process: storyboards, styleframes, breakdowns, sketches, 3D tests, animation tests, or case study writing.
The site should load, navigate, play media, work on mobile, and give viewers a clear way to contact you.
Submit the live website link, a screenshot of your organized root folder, and a short note describing which AI tool you used, what you asked it to build, and what you changed during the process.