Create a custom webpage
Build a portfolio site to showcase your work and learn how to deploy it live without writing a line of code.
- CategoryPersonal
- ModelSonnet 4.5
- Features
- ShareCopy link
1
Describe the task
Claude's vision and coding abilities work together to transform your descriptions and images into working web interfaces. Paired with your resume and past projects, Claude can create a portfolio that reflects both your professional narrative and preferred design style.
Tell Claude to build your portfolio site using your uploaded resume and project files. Specify your design preferences and that you need guidance on how to eventually deploy it.
Help me create a professional portfolio HTML page to showcase my professional career and accomplishments. I've uploaded my resume, project descriptions, and some design inspiration files. Use those to understand my background and aesthetic preferences.
For the design direction, I want something sophisticated and editorial—think high-end creative agency, not corporate template. Avoid generic layouts, AI-looking gradients, or too much symmetry. The sites I admire (in the uploads) have an organic, hand-crafted quality with unexpected details.
After you create it, walk me through publishing it live on the internet. Assume I've never deployed a website—I need exact steps that don't require any coding knowledge.
2
Give Claude context
Provide Claude with information on your professional background and design preferences to create a site that authentically represents your work.
Required context
Upload files that capture your professional story, like your resume, past projects, and other achievements you want to highlight.
Also include any files that convey your aesthetic preferences. Screenshots of portfolios you admire or even UI code snippets from designs you like help Claude understand your aesthetic direction.
No items found.
Resume
PDF
Project descriptions (3-5 detailed examples of your best work)
PDF
Resume
PDF
Optional context
Turn on Extended Thinking so Claude can spend more time creating high quality outputs.
Extended Thinking
3
What Claude creates
Claude builds a complete portfolio page as a HTML artifact. The artifact includes your professional information, project showcases, and design choices to match your aesthetic preferences.
From Claude
I've created your portfolio site. The design pulls from the editorial, hand-crafted aesthetic in your inspiration files—I avoided symmetrical layouts and corporate templates in favor of something that feels more organic. The tape effects you mentioned appear on project cards, and I added subtle scroll animations that activate as you move through the page.
Your resume information structures the About section, while your project descriptions each get their own showcase area with space for images and details. The typography uses a serif-sans pairing that matches the sophisticated tone you wanted, and the color palette comes from analyzing your design references.
View your portfolio webpage
You can open this in any browser to see how it looks. If you want to adjust colors, change project order, or modify any of the text, let me know what you'd like different.
4
Follow up prompts
Continue the conversation with Claude to refine, expand, or explore further.
Deploy your site live
Claude can connect to Netlify to take your artifact's code and deploy it as a live website—no coding required on your end. From your artifact's HTML code, Claude can teach you how to handle the technical deployment process.
Using the code from my portfolio artifact, I want to create a real site. Use my Netlify connector, create a new site project directly in Netlify and walk me through deploying this live. I'm sharing the code from my portfolio artifact. Use my Netlify connector to create a new site project and deploy this as a live website. Give me the URL once it's live, and explain how I can update the site later if I want to make changes.
Build interactive effects
Add polish through coded animations and interactions. Claude can write HTML, CSS, and JavaScript to add functional behavior to your site—hover effects, scroll animations, or interactive elements that respond to user actions.
Add hover effects on the project cards—maybe a subtle shift or border change. When I scroll to a section, have the heading fade in slightly. Nothing flashy, just refined interactions that show attention to detail.
Expand one project into a detailed case study
Deep-dive into your most important work with the full design process.
Take the Infrastructure Monitoring Dashboard project and expand it into a full case study page. Include the problem, research phase, design process, iterations, challenges we faced, how we solved them, and measurable impact. Add sections for wireframes, user feedback, and lessons learned.
5
Tricks, tips, and troubleshooting
Improve the design of your outputs
Claude can sometimes opt for more functional design choices—standard fonts, default colors, adequate spacing. For more varied outputs, try using different prompting techniques. Reference quality benchmarks ("top-tier consulting report," "premium SaaS product"), frame Claude as a domain expert ("approach this as a senior designer would"), or ask Claude to grade and refine its own output against high quality standards. You can also tell Claude what not to do ("avoid generic corporate blue," "don't use default typography"). Getting to your final result can take iteration—after the first output, assess what's missing and prompt for improvements.
Use Skills for consistent design standards
Create a skill that packages your visual references, successful examples, and specific design preferences so Claude can apply your established standards without re-explaining your preferences every time. Ask Claude to help create a content design skill to bundle your formatting preferences, aesthetic direction, and quality standards into a reusable workflow. Learn more about creating skills.
Ready to try for yourself?
Work with Claude to build a portfolio page that represents your work and learn to deploy it live—all without writing code.
