.smooth-brain-designs

Frontend:

• HTML5 — Semantic markup, accessibility features, meta tags for SEO
• CSS3 — Custom stylesheets with gradients, animations, and glitch effects
• Bootstrap 5.3 — Responsive grid system, modals, accordions, carousel components

JavaScript:

• Vanilla JS — Custom interactions, dynamic content injection, modal behaviors
• SVG Animations — Brain hamburger menu morphing effects
• Bootstrap JS Bundle — Collapse, modal, carousel, and navbar functionality

.performance

• Resource hints (preconnect, dns-prefetch, preload)
• Deferred script loading for non-critical resources
• Responsive images with lazy loading
• CDN delivery via jsDelivr and Google Fonts

.benefits

• Quick initial page loads with optimized critical resources
• Accessible component library (Bootstrap accessibility features)
• Fully responsive across all device sizes
• Easy to maintain and extend with Bootstrap utilities

Astro Framework:

• Astro — Modern static site generation framework with partial hydration
• .astro Components — Reusable CV components (CVEntry, CVFooter, CVName, CVNav, SkillTag)
• Island Architecture — Only interactive components are hydrated with JavaScript

Frontend:

• astro/layouts — BaseLayout.astro for consistent page structure
• astro/pages — CV routing and content organization
• CSS — Scoped styling with Astro's CSS isolation

TypeScript:

• tsconfig.json — Type safety for JavaScript components
• Type-checked props — Component property validation

.performance

• Zero JavaScript by default (static rendering)
• Fast build times and optimized output
• Automatic code splitting and lazy loading
• Minimal CSS payload with scoped styling

.benefits

• Content-focused architecture ideal for documentation
• Easy component reusability across pages
• Type-safe development with TypeScript
• Seamless integration with modern tooling and frameworks

React Integration:

• React 19 — Latest version with modern hooks and concurrent features
• TypeScript (.tsx) — Fully typed React components for type safety
• Client-side Hydration — Interactive timeline with `client:load` directive
• React Hooks — useState, useEffect, useRef for state and lifecycle management

Astro + React:

• @astrojs/react — Official Astro integration for React components
• Island Architecture — React components hydrated only where needed
• Astro Layouts — Static shell with dynamic React islands

Styling:

• Tailwind CSS — Utility-first CSS framework for rapid styling
• Custom CSS Variables — Consistent cyberpunk theme across components
• Dynamic Inline Styles — React-controlled styles for animations and theming

.features

• Interactive filtering by category with stateful UI
• Expandable/collapsible timeline cards
• Intersection Observer API for scroll animations
• Responsive design with mobile-optimized layouts

.benefits

• Rich interactivity with React's component model
• Best of both worlds: static Astro + dynamic React
• Type-safe development with TypeScript
• Efficient bundle splitting and lazy loading

Vue Integration:

• Vue 3 — Progressive JavaScript framework with composition API
• JavaScript (.vue) — Single-file components with template, script, and style
• Client-side Hydration — Interactive project grid with `client:load` directive
• Vue Reactivity — Reactive state management for modal interactions

Astro + Vue:

• @astrojs/vue — Official Astro integration for Vue components
• Island Architecture — Vue components hydrated only where needed
• Component Composition — Projects, ProjectCard, and ProjectModal components

Styling:

• Scoped CSS — Component-level styling with Vue's scoped attribute
• Custom CSS Variables — Consistent cyberpunk theme with CSS custom properties
• Responsive Grid — CSS Grid with auto-fill for flexible layouts

.features

• Interactive project cards with click and keyboard navigation
• Modal overlays for detailed project information
• Smooth transitions and animations with Vue's Transition component
• Responsive grid adapting from 1 to 3+ columns based on viewport

.benefits

• Intuitive API with Vue's template syntax
• Lightweight and fast with Vue 3's optimizations
• Easy state management with Vue's reactivity system
• Seamless integration with Astro's island architecture