My Portfolio

##High-Performance Industrial-Grade Digital System A bespoke portfolio architecture built with SvelteKit and Tailwind CSS v4, designed with a focus on scalable logic, technical precision, and a "terminal-industrial" aesthetic.

##Setup Instructions Ensure you have Node.js (v18+) installed on your machine.

1. Clone the repository:

   git add https://github.com/JasonChukwuebuka01/My-Portfolio.git
   cd architecture-portfolio
   

2. Install dependencies:

npm install

3. Development Mode: Launch the development server with hot-module replacement:

   npm run dev
   

4. Production Build: Compile and optimize the project for deployment:

   npm run build
   npm run preview
   

##Architecture Explanation The system follows a Component-Driven Architecture within the SvelteKit framework, emphasizing separation of concerns:

-Logic Layer (src/lib/actions): Custom Svelte Actions (like decipher.ts) handle direct DOM manipulations for high-performance animations without bloating the component state.

-UI Layer (src/lib/components): Atomic components (TechStack, ScrollHUD) that are isolated and reusable.

-Style Layer (src/routes/layout.css): Utilizing Tailwind CSS v4, moving configuration into CSS variables for a "CSS-first" workflow and faster build times.

• Static Assets (/static): Optimized storage for the resume PDF and brand identity assets (favicon).

##Animation Decisions Rather than using heavy libraries like Framer Motion for every element, this project utilizes Custom Svelte Actions for a more "mechanical" feel:

1. The Decipher Action: A custom-coded text-scramble effect.

2. Decision: We avoided standard fades in favor of a high-speed character-swapping algorithm (20ms intervals).

3. Goal: To mirror the "scanned" or "processed" look of industrial automation software.

4. Reactive HUD: A fixed-position navigation system that uses reactive scroll-spy logic to provide real-time feedback on the user's "depth" within the system.

##Performance Optimization Techniques

• Zero-Dependency Animations: By writing raw JavaScript/TypeScript for the decipher effect, we eliminated the need for heavy animation libraries, reducing the main-thread execution time.

• Reactive Throttling: The ScrollHUD component targets scrollY via Svelte bindings, ensuring calculations only occur when a scroll event is detected by the browser.

• Asset Preloading: Critical path assets (like the site's system fonts and the custom favicon) are served with minimal latency via the static directory.

• Tailwind v4 JIT: Leveraging the Lightning CSS-powered compiler in v4 for ultra-small CSS bundles.

##Accessibility (A11y) Considerations

• Semantic HTML: Strict use of

• ARIA Live Regions: Integrated into dynamic text components to ensure assistive technologies are aware of text-scramble updates.

• Keyboard Navigation: All system-links (including the ScrollHUD) are focusable and support smooth-scroll triggers via keyboard events.

• Color Contrast: The "Industrial Dark Mode" utilizes a high-contrast palette (Amber-500 on Slate-900) to ensure readability for users with visual impairments.

##Trade-offs Made

1. Svelte Actions vs. Transitions: We chose custom Actions over Svelte's built-in transition:fn for the decipher effect. While standard transitions are easier to write, Actions allowed for more granular control over interval timing and character manipulation required for the "scramble" aesthetic.

2. Client-Side Navigation: We utilized rel="external" for asset downloads (Resume). This trades off a seamless "single-page" feel for guaranteed browser stability when handling large PDF files.

3. Tailwind v4 Migration: Adopting v4 meant abandoning traditional tailwind.config.js in favor of CSS-based configuration. This increased the initial setup complexity but significantly reduced build-time overhead and improved developer experience (DX).