Skip to content

context.md

Latest commit

 

History

History
48 lines (37 loc) · 2.79 KB

context.md

File metadata and controls

48 lines (37 loc) · 2.79 KB

Create a detailed prompt for a large language model capable of generating website code (HTML, CSS, JavaScript) for a personal portfolio website.

The website should showcase conference talks and include the following sections and features:

  1. Header:

    • Your name and title.
    • Navigation links: "Featured Talks," "All Talks," "Bio," "Headshots."

  2. Featured Talks Section:

    • Prominently display three manually selected conference talks.
    • For each featured talk, include:
      • Talk title.
      • Brief description/abstract.
      • Link to slides (if available).
      • Link to video recording (if available).
      • Optionally, a key visual or thumbnail.

  3. All Talks Section:

    • List all other conference talks (approximately 50).
    • Display them in a clear, organized manner (e.g., a table or list).
    • For each talk in the list, include:
      • Talk title.
      • Date or year presented.
      • Conference/Event name.
      • Optionally, links to slides and video.

  4. Bio Section:

    • Present your biography.
    • The bio should be available in three languages: English, Portuguese, and German. Provide the content for each language.
    • Include a mechanism for users to switch between the language versions.

  5. Headshots Section:

    • Make your headshots available for download. Specify how the headshots will be provided (e.g., a link to a folder or specific image URLs).

Design and Style Preferences:

  • Theme: Dark theme with yellow accents.
  • Aesthetics: Incorporate transparencies and shadows in the design elements.
  • Design Inspiration: Learn from the design principles of Supabase, Clerk, Vercel, and PostHog (referencing their clean, modern, and potentially developer-focused interfaces).
  • Usability: Adhere to Steve Krug's "Don't Make Me Think" principles, ensuring the website is intuitive and easy to navigate.

Technical and Accessibility Requirements:

  • Accessibility: The generated code should follow standard web accessibility guidelines (e.g., WCAG) to ensure the site is usable by people with disabilities. This includes proper semantic HTML, ARIA attributes where necessary, and considerations for color contrast and keyboard navigation.
  • Responsiveness: The website must be fully responsive and look good on various devices (desktops, tablets, mobile phones).
  • Code Output: Generate clean, well-structured code for HTML, CSS, and JavaScript. Specify if a specific framework or library should be used (e.g., a CSS framework like Tailwind CSS or a JavaScript framework like React, if the model supports it).

Generate the code for the described website, paying close attention to the structure, content requirements, design preferences, usability principles, and accessibility standards outlined above.