{{whyLabel}}: A portfolio that tries to appeal to everyone appeals to no one; clarity on your audience dictates your tone and content.

{{howLabel}}:

Identify your primary viewer (e.g., Tech Recruiters, Small Business Owners, or Creative Directors).
Write a one-sentence Value Proposition: 'I help [Audience] achieve [Result] through [My Skill].'
List 3 specific problems your work solves for this audience.

{{doneWhenLabel}}: You have a written profile of your ideal visitor and a clear value statement.

{{whyLabel}}: Benchmarking helps you understand current design standards and identify gaps in your own presentation.

{{howLabel}}:

Visit 'Awwwards' or 'Bestfolios' to find top-rated sites in your field.
Note their navigation structure, how they describe projects, and their 'Call to Action' (CTA) placement.
Identify one specific element from each that you want to adapt for your own site.

{{doneWhenLabel}}: You have a list of 3-5 specific design or content features to implement.

{{whyLabel}}: Quality beats quantity; recruiters spend less than 3 minutes on a site, so only show your absolute best work.

{{howLabel}}:

Choose projects that align with the niche you defined in Phase 1.
Ensure each project demonstrates a different facet of your skill set.
Archive or remove older, less relevant work that doesn't reflect your current level.

{{doneWhenLabel}}: You have a final list of 3-5 projects ready for documentation.

{{whyLabel}}: Storytelling provides context and proves your problem-solving abilities beyond just showing a final image.

{{howLabel}}:

Situation: Briefly describe the context and the challenge.
Task: Explain your specific responsibility in the project.
Action: Detail the steps you took and the tools you used (e.g., Figma, Python, React).
Result: Quantify the outcome (e.g., 'Increased conversion by 15%' or 'Saved 10 hours of manual work').

{{doneWhenLabel}}: You have 3-5 written case studies (approx. 300 words each).

{{whyLabel}}: Large images slow down your site, hurting both user experience and SEO rankings.

{{howLabel}}:

Convert all images to WebP or AVIF formats for superior compression.
Resize images to a maximum width of 1920px for full-screen or 1200px for content blocks.
Use a generic online compressor to reduce file sizes below 200KB per image.

{{doneWhenLabel}}: All project images are organized in folders and optimized for fast loading.

{{whyLabel}}: Choosing the right tool saves hundreds of hours in maintenance and allows for rapid updates.

{{howLabel}}:

Use Framer if you are a designer who wants Figma-like control and high-end animations.
Use Wix Studio or Squarespace for an all-in-one solution with robust templates.
Use GitHub Pages with a static site generator (like Hugo) if you are a developer wanting a free, code-centric approach.

{{doneWhenLabel}}: You have an active account and a blank project started on your chosen platform.

{{whyLabel}}: A custom domain (e.g., yourname.com) builds immediate trust and is easier to remember than a generic subdomain.

{{howLabel}}:

Aim for 'firstname-lastname.com' or 'name-specialty.com'.
Avoid hyphens or numbers if possible.
Purchase from a reputable registrar and connect it to your hosting platform via DNS settings.

{{doneWhenLabel}}: Your custom domain is registered and pointing to your site.

{{whyLabel}}: The top of your homepage is the most valuable real estate; it must answer 'Who are you?' and 'What do you do?' instantly.

{{howLabel}}:

Place your Value Proposition from Phase 1 in a large H1 heading.
Add a high-quality professional headshot or a signature piece of work.
Include a clear 'View Work' button that anchors to your projects.
Keep navigation simple: Work, About, Contact.

{{doneWhenLabel}}: The homepage header is visually complete and functional.

{{whyLabel}}: Proper structure ensures your work is discoverable by search engines and easy to read for humans.

{{howLabel}}:

Create a separate page for each project using your STAR narratives.
Use H2 and H3 tags for section titles (e.g., 'The Challenge', 'The Solution').
Add Alt-Text to every image describing the content for accessibility.
Set unique Meta Titles and Descriptions for each page (max 160 characters).

{{doneWhenLabel}}: All 3-5 project pages are live and SEO-optimized.

{{whyLabel}}: Google prioritizes mobile-friendly sites that load in under 2.5 seconds (Largest Contentful Paint).

{{howLabel}}:

Test your site using 'Google PageSpeed Insights'.
Ensure all buttons are 'finger-friendly' (at least 44x44 pixels) on mobile view.
Enable 'Lazy Loading' for images below the fold to speed up initial rendering.

{{doneWhenLabel}}: Your site passes the mobile-friendly test and has a performance score > 80.

{{whyLabel}}: Your portfolio is useless if no one knows it exists; LinkedIn is the primary driver of professional traffic.

{{howLabel}}:

Add your new URL to the 'Contact Info' and 'Featured' sections of LinkedIn.
Write a post announcing the launch, highlighting one specific project and the 'Why' behind the site.
Update your email signature with a link to your portfolio.

{{doneWhenLabel}}: Your site link is visible on all your professional social profiles.

{{whyLabel}}: Direct feedback from peers or mentors is the fastest way to identify UX issues and build professional relationships.

{{howLabel}}:

Reach out to 3 people in your network via LinkedIn or email.
Ask for a 20-minute 'Portfolio Review' or 'Industry Insight' chat.
Prepare 3 specific questions about your site's clarity and impact.

{{doneWhenLabel}}: Three appointments are confirmed in your calendar.

{{whyLabel}}: Physical networking builds a level of trust that digital interactions cannot match.

{{howLabel}}:

Find a relevant industry meetup (e.g., Tech, Design, or Marketing) in your area.
Prepare a 30-second 'Elevator Pitch' based on your site's Value Proposition.
Have your portfolio ready on your phone to show as a 'digital business card'.

{{doneWhenLabel}}: You have attended the event and made at least two new professional connections.

Portfolio website creation

Projekt-Plan