Gusdslara.github.io

Ultra-Fast, SEO and GEO optimized, Premium Portfolio Landing Page built with SvelteKit, SvelteMotion, GSAP & Three.js

• Core: SvelteKit for server-side rendering and lightning-fast client-side navigation.
• Language: TypeScript for robust, type-safe development.
• Styling: Tailwind CSS for utility-first responsive design, complemented by SCSS for complex custom animations and styles.
• Animations:
  • GSAP: Powering complex scroll-triggered animations and high-performance sequencing.
  • SvelteMotion: Orchestrating seamless component-level transitions and interactive UI feedback (Framer Motion equivalent for Svelte).
• 3D Graphics: Three.js for integrating interactive 3D models.
• Build System: Vite for a near-instant development experience and optimized production bundles.

✨ Key Features

• 📱 Fully Responsive: Optimized for every screen size, from mobile devices to ultra-wide monitors.
• 🎨 Premium UI/UX: Minimalist and rounded components with smooth animations.
• 🚀 Performance Optimized: Lazy-loaded components, optimized asset delivery, and minimal bundle size.
• 📦 Modular Architecture: Highly organized component structure for scalability and maintainability.
• 🌍 Internationalization (i18n): Ready for multi-language support (PT-BR / EN / ES).
• 🏗️ SSG (Static Site Generation): Pre-rendered pages for maximum speed and SEO.
• 🏗️ CI/CD Ready: Configured for seamless deployment via GitHub Pages using GitHub Actions.
• 🤖 AI & SEO Optimized: Advanced Open Graph, Twitter Cards, GEO tags for regional targeting (Brazil), and rich JSON-LD schema for accurate indexing by Google's AI Overviews and ChatGPT Web Search.

📂 Project Structure

/src
├── lib
│   ├── components   # Atomic and complex UI components
│   │   ├── common   # Reusable elements (buttons, modals, etc.)
│   │   ├── home     # Section-specific components for the landing page
│   │   └── layout   # Core layout parts like Navbar and Footer
│   ├── config       # Global settings and constants
│   ├── data         # Static content (projects, experience, education)
│   ├── services     # External API integrations or complex logic
│   └── utils        # Helper functions and shared utilities
├── routes           # SvelteKit page routes
├── styles           # Global SCSS and Tailwind directives
└── app.html         # Main HTML entry point

🚀 Getting Started

Prerequisites

• Node.js (v18 or higher)
• npm or yarn

Installation

1. Clone the repository:

   git clone https://github.com/gustavodslara/gustavodslara.github.io.git
   

2. Install dependencies:

   npm install
   

Development

Run the development server with HMR:

npm run dev

Build

Compile the project for production:

npm run build

The static assets will be generated in the /docs directory, ready for deployment.

🛠️ GitHub Pages Deployment

This project is configured to deploy automatically to GitHub Pages via GitHub Actions.

Deployment Workflow:

1. Trigger: Push to the main branch.
2. Build: Runs npm run build using SvelteKit's @sveltejs/adapter-static.
3. Output: Generates static files into the /docs folder.
4. Deploy: GitHub Pages is configured to serve content from the /docs folder.

You can monitor the deployment status in the Actions tab of this repository.

🤖 SEO & AI Indexation Optimization

This portfolio is heavily optimized for modern search engines and AI parsers. The following optimizations have been deployed:

• Advanced Metadata: Includes comprehensive Open Graph (OG) and Twitter Card tags ensuring rich, visual previews when shared on social media and communication platforms.
• GEO Targeted Tags: Configured with geo.region, geo.placename, geo.position, and ICBM metatags focused on Brazil, explicitly boosting local/regional search ranking.
• Rich JSON-LD Schema (AI Indexation): Injects an application/ld+json schema defining a Person and a WebSite within the <svelte:head>. This semantic structure explicitly provides context to AI crawlers (e.g., Google's AI Overview, ChatGPT Search) regarding the author, expertise (Software Architecture, Microservices, SvelteKit, etc.), external profiles (GitHub/LinkedIn), and general portfolio details.