{"posts":[{"slug":"getting-started-with-svelte-5","title":"Getting Started with Svelte 5","publishedAt":"2024-04-20T00:00:00.000Z","content":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1},"children":["Getting Started with Svelte 5"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Svelte 5 introduces revolutionary changes to how we write reactive applications. In this post, we'll explore the new runes system and how it makes our code more intuitive and powerful."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2},"children":["The New Runes System"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Svelte 5 replaces the traditional reactive statements with \"runes\" - a more explicit and powerful way to handle reactivity. Let's look at some examples:"]},{"$$mdtype":"Tag","name":"pre","attributes":{"data-language":"svelte"},"children":["// Old way (Svelte 4)\n\n\n// New way (Svelte 5)\n\n"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2},"children":["Why This Matters"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The new runes system offers several advantages:"]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["More Explicit"]},": The code clearly shows what's reactive"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Better TypeScript Support"]},": Improved type inference and checking"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Flexible Scope"]},": Reactivity isn't limited to the component scope"]}]},{"$$mdtype":"Tag","name":"Callout","attributes":{"type":"tip"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Runes make it easier to share reactive logic between components and even outside of components entirely!"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2},"children":["Creating a Simple Counter"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Let's create a basic counter to demonstrate these concepts:"]},{"$$mdtype":"Tag","name":"pre","attributes":{"data-language":"svelte"},"children":["\n\n

{message}

\n \n

\n"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2},"children":["Performance Improvements"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["One of the most exciting aspects of Svelte 5 is its improved performance. The new compiler is smarter about:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Minimizing unnecessary updates"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Reducing bundle size"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Optimizing reactive dependencies"]}]},{"$$mdtype":"Tag","name":"Callout","attributes":{"type":"check"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["In benchmarks, Svelte 5 shows up to 30% better performance in large applications compared to Svelte 4."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2},"children":["Next Steps"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Ready to try Svelte 5? Here's what you can do:"]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Update your existing Svelte project:"]},{"$$mdtype":"Tag","name":"pre","attributes":{"data-language":"bash"},"children":["npm install svelte@next\n"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Start migrating your components one at a time"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Join the Svelte Discord to get help and share experiences"]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2},"children":["Conclusion"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Svelte 5 represents a significant step forward in frontend development. While the changes might seem daunting at first, they make our applications more maintainable and performant in the long run."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Remember, you don't have to migrate everything at once - take your time and experiment with the new features as you learn them."]},{"$$mdtype":"Tag","name":"Callout","attributes":{"type":"warning"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Svelte 5 is still in development, so be cautious about using it in production applications just yet."]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Happy coding! 🚀"]}],"frontmatter":{"title":"Getting Started with Svelte 5","publishedAt":"2024-04-20","author":"Codegio","tags":["javascript","web development"],"excerpt":"Discover the exciting new features in Svelte 5 and learn how to leverage them in your applications.","featuredImage":{"url":"https://svelte.dev/blog/svelte-5-is-alive/card.png","alt":"Svelte 5 Logo and Code Example","caption":"Svelte 5 introduces revolutionary changes to reactive programming"},"seo":{"title":"Getting Started with Svelte 5: A Comprehensive Guide","description":"Learn about Svelte 5's new runes system, improved performance, and how to migrate your existing applications. Comprehensive guide with examples.","keywords":["svelte 5","web framework","javascript framework","reactive programming","frontend development"],"ogImage":"https://svelte.dev/blog/svelte-5-is-alive/card.png"}}},{"slug":"portfolio-configuration-guide","title":"Portfolio Configuration Guide","publishedAt":"2024-04-20T00:00:00.000Z","content":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1},"children":["Portfolio Configuration Guide"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This guide explains each configuration type and how to use them in your portfolio. Each section includes the type definition and practical examples."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2},"children":["Basic Site Configuration (SiteConfig)"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3},"children":["Type Definition"]},{"$$mdtype":"Tag","name":"pre","attributes":{"data-language":"typescript"},"children":["interface SiteConfig {\n title: string; // Your site name\n description: string; // Site description\n logo: string; // Path to logo\n logoDark?: string; // Path to dark mode logo\n favicon: string; // Path to favicon\n}\n"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3},"children":["Example Usage"]},{"$$mdtype":"Tag","name":"pre","attributes":{"data-language":"typescript"},"children":["const siteConfig: SiteConfig = {\n title: 'Jane Dev Portfolio',\n description: 'Full-stack developer specializing in React and Node.js',\n logo: '/images/logo.svg',\n logoDark: '/images/logo-dark.svg',\n favicon: '/favicon.png'\n};\n"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2},"children":["Navigation (NavItem)"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3},"children":["Type Definition"]},{"$$mdtype":"Tag","name":"pre","attributes":{"data-language":"typescript"},"children":["interface NavItem {\n title: string; // Menu item text\n href: string; // Link URL\n items?: NavItem[]; // Submenu items (optional)\n}\n"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3},"children":["Example Usage"]},{"$$mdtype":"Tag","name":"pre","attributes":{"data-language":"typescript"},"children":["const navItems: NavItem[] = [\n {\n title: 'About',\n href: '/#about',\n items: [\n { title: 'Profile', href: '/#profile' },\n { title: 'Skills', href: '/#skills' }\n ]\n },\n {\n title: 'Contact',\n href: '/contact'\n }\n];\n"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2},"children":["Social Links (SocialLink)"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3},"children":["Type Definition"]},{"$$mdtype":"Tag","name":"pre","attributes":{"data-language":"typescript"},"children":["interface SocialLink {\n title: string; // Display name/username\n href: string; // Profile URL\n icon: string; // Icon name\n}\n"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3},"children":["Example Usage"]},{"$$mdtype":"Tag","name":"pre","attributes":{"data-language":"typescript"},"children":["const socialLinks: SocialLink[] = [\n {\n title: 'janedev',\n href: 'https://github.com/janedev',\n icon: 'github'\n },\n {\n title: 'Jane Developer',\n href: 'https://linkedin.com/in/janedev',\n icon: 'linkedin'\n }\n];\n"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2},"children":["Profile Information (Profile)"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3},"children":["Type Definition"]},{"$$mdtype":"Tag","name":"pre","attributes":{"data-language":"typescript"},"children":["interface Profile {\n name: string; // Your full name\n role: string; // Your job title\n tagline: string; // Short professional tagline\n avatar: string; // Profile picture path\n about: string; // Detailed bio\n location: string; // Your location\n}\n"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3},"children":["Example Usage"]},{"$$mdtype":"Tag","name":"pre","attributes":{"data-language":"typescript"},"children":["const profile: Profile = {\n name: 'Jane Developer',\n role: 'Full-Stack Developer',\n tagline: 'Building scalable web applications',\n avatar: '/images/profile.jpg',\n about: 'Passionate developer with 5 years of experience...',\n location: 'San Francisco, CA'\n};\n"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2},"children":["Projects (Project)"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3},"children":["Type Definition"]},{"$$mdtype":"Tag","name":"pre","attributes":{"data-language":"typescript"},"children":["interface Project {\n id: string; // Unique identifier\n imageUrl: string; // Project preview image\n imageAlt: string; // Image alt text\n href: string; // Project link\n}\n"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3},"children":["Example Usage"]},{"$$mdtype":"Tag","name":"pre","attributes":{"data-language":"typescript"},"children":["const projects: Project[] = [\n {\n id: '1',\n imageUrl: '/projects/app-preview.jpg',\n imageAlt: 'Mobile app dashboard',\n href: 'https://myproject.com'\n }\n];\n"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2},"children":["Skills (SkillCategory & SkillItem)"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3},"children":["Type Definitions"]},{"$$mdtype":"Tag","name":"pre","attributes":{"data-language":"typescript"},"children":["interface SkillItem {\n name: string;\n icon: typeof IconType; // Lucide icon component\n}\n\ninterface SkillCategory {\n category: string; // Category name\n items: SkillItem[]; // Skills in this category\n}\n"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3},"children":["Example Usage"]},{"$$mdtype":"Tag","name":"pre","attributes":{"data-language":"typescript"},"children":["import { Code2, Database } from 'lucide-svelte';\n\nconst skills: SkillCategory[] = [\n {\n category: 'Backend',\n items: [\n { name: 'Node.js', icon: Code2 },\n { name: 'PostgreSQL', icon: Database }\n ]\n }\n];\n"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2},"children":["Experience (Experience & ExperienceShowcase)"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3},"children":["Type Definitions"]},{"$$mdtype":"Tag","name":"pre","attributes":{"data-language":"typescript"},"children":["interface ExperienceShowcase {\n title: string;\n description: string;\n image: string;\n link: string;\n}\n\ninterface Experience {\n period: string;\n title: string;\n company?: string;\n icon: typeof IconType;\n description?: string;\n achievements?: string[];\n showcase?: ExperienceShowcase;\n}\n"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3},"children":["Example Usage"]},{"$$mdtype":"Tag","name":"pre","attributes":{"data-language":"typescript"},"children":["import { Briefcase } from 'lucide-svelte';\n\nconst experience: Experience[] = [\n {\n period: '2020 - Present',\n title: 'Senior Developer',\n company: 'Tech Corp',\n icon: Briefcase,\n description: 'Leading the frontend team...',\n achievements: [\n 'Improved site performance by 50%',\n 'Led team of 5 developers'\n ],\n showcase: {\n title: 'Company Redesign',\n description: 'Complete platform overhaul',\n image: '/projects/redesign.jpg',\n link: '/case-study'\n }\n }\n];\n"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2},"children":["Testimonials (Testimonial & TestimonialAuthor)"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3},"children":["Type Definitions"]},{"$$mdtype":"Tag","name":"pre","attributes":{"data-language":"typescript"},"children":["interface TestimonialAuthor {\n name: string; // Author's name\n avatar: string; // Author's photo\n}\n\ninterface Testimonial {\n id: string;\n content: string; // Testimonial text\n author: TestimonialAuthor; // Author info\n}\n"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3},"children":["Example Usage"]},{"$$mdtype":"Tag","name":"pre","attributes":{"data-language":"typescript"},"children":["const testimonials: Testimonial[] = [\n {\n id: '1',\n content: 'Jane is an exceptional developer...',\n author: {\n name: 'John Smith',\n avatar: '/testimonials/john.jpg'\n }\n }\n];\n"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2},"children":["Education (Education)"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3},"children":["Type Definition"]},{"$$mdtype":"Tag","name":"pre","attributes":{"data-language":"typescript"},"children":["interface Education {\n period: string; // Time period\n degree: string; // Degree name\n institution: string; // School name\n logo: string; // Institution logo\n}\n"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3},"children":["Example Usage"]},{"$$mdtype":"Tag","name":"pre","attributes":{"data-language":"typescript"},"children":["const education: Education[] = [\n {\n period: '2015 - 2019',\n degree: 'BS in Computer Science',\n institution: 'Tech University',\n logo: '/schools/tech-u-logo.png'\n }\n];\n"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2},"children":["Promotional Section (PromoConfig)"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3},"children":["Type Definition"]},{"$$mdtype":"Tag","name":"pre","attributes":{"data-language":"typescript"},"children":["interface PromoConfig {\n title: string;\n description: string;\n ctaText: string; // Call-to-action button text\n ctaLink: string; // Button link\n lightImage?: string; // Light theme image\n darkImage?: string; // Dark theme image\n}\n"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3},"children":["Example Usage"]},{"$$mdtype":"Tag","name":"pre","attributes":{"data-language":"typescript"},"children":["const promoConfig: PromoConfig = {\n title: 'Need a developer?',\n description: 'Let\\'s work together on your next project',\n ctaText: 'Contact Me',\n ctaLink: '/contact',\n lightImage: '/promo-light.jpg',\n darkImage: '/promo-dark.jpg'\n};\n"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2},"children":["Best Practices"]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["File Organization"]}]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Keep all configuration in a separate ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["config"]}," directory"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Split complex configurations into separate files"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Use index.ts to export all configurations"]}]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Type Safety"]}]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Always use type annotations"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Let TypeScript infer types when possible"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Use optional properties (?) for non-required fields"]}]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Asset Management"]}]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Keep all images in a public directory"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Use relative paths starting with \"/\""]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Optimize images before adding them"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Use SVG for icons when possible"]}]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Content Guidelines"]}]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Keep descriptions concise and professional"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Use proper grammar and punctuation"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Update content regularly"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Test all links and images"]}]}]}]}],"frontmatter":{"title":"Portfolio Configuration Guide","publishedAt":"2024-04-20","author":"Codegio","tags":["portfolio","configuration"],"excerpt":"A comprehensive guide to configuring your portfolio site, covering everything from basic site settings to promotional sections with detailed TypeScript type definitions and practical examples.","featuredImage":{"url":"https://svelte.dev/blog/svelte-5-is-alive/card.png","alt":"Svelte 5 Logo and Code Example","caption":"Portfolio configuration types and examples"},"seo":{"title":"Portfolio Configuration Guide: Complete TypeScript Setup","description":"Learn how to configure your portfolio site with TypeScript, including site settings, navigation, social links, projects, skills, experience, and more with practical examples.","keywords":["portfolio configuration","typescript configuration","web portfolio","developer portfolio","site configuration","frontend development","portfolio setup"],"ogImage":"https://svelte.dev/blog/svelte-5-is-alive/card.png"}}}],"timestamp":"2025-04-24T06:42:05.645Z"}

Blog Posts

Subscribe