Complete AI Mastery Course

{"contentFormat":"slides.v1","completion":{"requireAllSlides":true,"requireQuiz":true},"slides":[{"kind":"title","eyebrow":"Module 8: Portfolio Projects","title":"Building a Portfolio Website","body":"Create a professional portfolio website to showcase your AI projects. This capstone lesson guides you end-to-end: from planning and design to deployment and maintenance. By the end, you'll have a live, discoverable site that impresses employers and clients.","outcomes":["Define your portfolio's purpose and target audience","Choose a domain, hosting, and tech stack (2026 tools)","Structure and design a responsive, accessible site","Create compelling project pages with visuals and code","Implement SEO and analytics for discoverability","Deploy and maintain your site with regular updates"],"narration":"Welcome to Module 8, where you'll build a portfolio website from scratch. This is your capstone project: a live site that showcases your AI skills. We'll cover everything from planning to deployment, using modern tools as of 2026."},{"kind":"content","heading":"1. Define Purpose & Audience","body":"Before writing code, clarify your goals. Ask yourself:\n\n- Purpose: Are you seeking a job, freelance clients, or academic positions? Your site's focus will differ.\n- Audience: Recruiters, hiring managers, or potential clients? Tailor content to their expectations.\n\nExample: If targeting AI research roles, highlight publications, model architectures, and technical depth. For industry roles, emphasize impact metrics (e.g., \"Reduced inference time by 30%\").\n\nGlobal Context: Consider local job markets. In Kenya, mobile-first design is crucial; in Germany, data privacy (GDPR) compliance matters. Research your audience's preferences.","callout":{"variant":"exercise","title":"Define Your Goal","text":"Write one sentence: \"My portfolio website aims to [purpose] for [audience].\" Example: \"My portfolio aims to land a machine learning engineer role at a European tech company.\""},"narration":"Start by defining your purpose and audience. This guides every decision, from design to content. For example, a research-focused site differs from one targeting industry roles."},{"kind":"content","heading":"2. Choose Domain, Hosting & Stack","body":"Domain Name: Use your name (e.g., janedoe.com) or a variation. Keep it short, professional, and easy to spell. Check availability on Namecheap or Google Domains.\n\nHosting: For static sites, use free tiers:\n- GitHub Pages (ideal for developers)\n- Netlify (easy CI/CD, form handling)\n- Vercel (great for Next.js)\n\nTech Stack (2026):\n- Static Site Generator: Hugo (fast, simple) or Astro (modern, component-based).\n- CSS Framework: Tailwind CSS (utility-first) or Bootstrap (pre-built components).\n- Deployment: Git-based CI/CD (push to deploy).\n\nExample: Use Hugo with the Academic theme, deploy on Netlify via GitHub. This is free, fast, and scalable.","table":{"headers":["Tool","Use Case","Cost"],"rows":[["Hugo","Static site generation","Free"],["Netlify","Hosting + CI/CD","Free tier available"],["Tailwind CSS","Styling","Free"],["GitHub","Version control","Free"]]},"narration":"Choose a domain that reflects your brand. For hosting, free options like GitHub Pages or Netlify work well. Use a static site generator like Hugo for speed and simplicity."},{"kind":"content","heading":"3. Structure Your Site","body":"A typical portfolio has these pages:\n\n- Homepage: Brief intro, key skills, call-to-action (e.g., \"View Projects\").\n- About: Background, photo, career goals, and a personal touch.\n- Projects: Each project gets a dedicated page with description, tech stack, visuals, and links to code/live demo.\n- Contact: Email, LinkedIn, GitHub, and a contact form (use Netlify Forms or Formspree).\n- Blog (optional): Share tutorials, project deep-dives, or industry insights to demonstrate expertise.\n\nNavigation: Keep it simple – a top navbar with links to main sections. Use a hamburger menu on mobile.","callout":{"variant":"tip","title":"Mobile First","text":"Over 60% of traffic comes from mobile devices. Design your navigation and layout for small screens first, then scale up."},"narration":"Structure your site with essential pages: Home, About, Projects, Contact. Add a blog if you enjoy writing. Keep navigation simple and mobile-friendly."},{"kind":"content","heading":"4. Create Compelling Project Pages","body":"Each project page should tell a story:\n\n- Problem: What issue did you solve? (e.g., \"Classifying plant diseases from leaf images\")\n- Solution: Your approach, model architecture, data sources.\n- Technologies: List tools (Python, PyTorch, TensorFlow, etc.).\n- Your Role: Data collection, model training, deployment.\n- Results: Metrics (accuracy, speed) and business impact.\n- Visuals: Screenshots, diagrams, or a demo video.\n- Code: Link to GitHub repo with a README.\n- Live Demo: If possible, host a demo (e.g., Hugging Face Spaces).\n\nExample: For a chatbot project, include a conversation screenshot, a code snippet of the training loop, and a link to the live bot.","callout":{"variant":"insight","title":"Show, Don't Just Tell","text":"Use visuals and interactive demos. A GIF of your model in action is worth a thousand words."},"narration":"For each project, explain the problem, solution, and results. Include visuals and links to code. A live demo is a huge plus."},{"kind":"content","heading":"5. Design for UX & Accessibility","body":"Clean Design: Use a consistent color palette (2-3 colors), readable fonts (e.g., Inter, Roboto), and ample white space.\n\nResponsiveness: Test on mobile, tablet, and desktop. Use CSS media queries or a framework like Tailwind.\n\nAccessibility:\n- Add alt text to images.\n- Ensure sufficient color contrast (WCAG AA).\n- Use semantic HTML (<nav>, <main>, <article>).\n- Make interactive elements keyboard-accessible.\n\nPerformance: Optimize images (WebP format), minify CSS/JS, and use lazy loading. Aim for <2s load time.","callout":{"variant":"warning","title":"Global Accessibility","text":"Consider users with slow internet (common in parts of Africa, Asia). Use lightweight assets and progressive enhancement."},"narration":"Design for all users: clean, responsive, accessible. Optimize performance for global audiences. A fast, accessible site ranks better in search engines."},{"kind":"content","heading":"6. SEO & Analytics","body":"SEO (Search Engine Optimization):\n- Use descriptive page titles and meta descriptions.\n- Add alt text to images.\n- Use semantic HTML (headings, lists).\n- Create a sitemap.xml (Hugo generates this automatically).\n- Submit to Google Search Console.\n\nAnalytics:\n- Google Analytics (free, but requires GDPR consent in EU).\n- Plausible or Fathom (privacy-friendly, paid).\n- Simple: Add a tracking pixel or use Netlify Analytics.\n\nTrack: page views, popular projects, visitor locations. Use data to improve content.","table":{"headers":["Tool","Type","Cost"],"rows":[["Google Analytics","Full-featured","Free"],["Plausible","Privacy-focused","Paid (€10/mo)"],["Netlify Analytics","Simple","Free with Netlify"]]},"narration":"Make your site discoverable with SEO basics: meta tags, alt text, sitemaps. Add analytics to understand your audience. Choose a privacy-friendly option if needed."},{"kind":"content","heading":"7. Deploy & Maintain","body":"Deployment Steps (Hugo + Netlify):\n1. Push your Hugo site to a GitHub repository.\n2. Connect the repo to Netlify (New site from Git).\n3. Set build command: hugo and publish directory: public.\n4. Deploy – your site is live! Set a custom domain.\n\nMaintenance:\n- Update projects regularly (add new ones, refresh old ones).\n- Keep dependencies up to date (Hugo, theme, plugins).\n- Review analytics monthly to see what's popular.\n- Test links and forms quarterly.\n- Add a blog post every few months to show active learning.\n\nWhat Good Looks Like Checklist:\n- [ ] Live at custom domain\n- [ ] All pages load <2s\n- [ ] Mobile responsive\n- [ ] At least 3 projects with visuals and code links\n- [ ] Contact form works\n- [ ] Analytics installed\n- [ ] SEO meta tags present\n- [ ] Accessible (alt text, contrast)","narration":"Deploy using Git-based CI/CD for automatic updates. Maintain your site by adding new projects, updating dependencies, and reviewing analytics. Use the checklist to ensure quality."},{"kind":"quiz","heading":"Check Your Understanding","questions":[{"question":"Which of the following is the best domain name for a professional AI portfolio?","options":["ai-guru-2026.net","jane.doe-portfolio.com","janedoe.com","my-ai-projects.blog"],"questionId":"cmrf73kd20037pd27bng5o724"},{"question":"What is the primary benefit of using a static site generator like Hugo for a portfolio?","options":["It allows dynamic content without a database.","It generates fast, secure HTML pages that are easy to host for free.","It automatically adds SEO and analytics.","It requires no coding knowledge."],"questionId":"cmrf73kd20038pd276f0l5zyj"},{"question":"Why is it important to include alt text on images in your portfolio?","options":["It improves image quality.","It helps search engines understand the image content and improves accessibility.","It automatically links to your GitHub.","It reduces file size."],"questionId":"cmrf73kd20039pd270gpooq7i"}],"quizId":"cmk7lo8b5003pg4p8h7gv1sxj"},{"kind":"summary","heading":"Summary & Next Steps","takeaways":["Define your portfolio's purpose and audience before building.","Choose a professional domain and free hosting (GitHub Pages, Netlify).","Use a static site generator (Hugo, Astro) for fast, secure sites.","Structure your site with Home, About, Projects, Contact, and optional Blog.","Create project pages that tell a story: problem, solution, results, visuals, code.","Design for responsiveness, accessibility, and performance.","Implement basic SEO (meta tags, alt text) and analytics (Google Analytics, Plausible).","Deploy via Git-based CI/CD and maintain with regular updates."],"narration":"You now have a complete roadmap to build a professional portfolio website. Start with your goal, choose your tools, and create compelling project pages. Deploy, optimize for SEO, and keep it updated. Good luck!"}]}