CarterPerez-dev · CarterPerez-dev · Apr 1, 2026 · Apr 1, 2026
diff --git a/PROJECTS/intermediate/binary-analysis-tool/README.md b/PROJECTS/intermediate/binary-analysis-tool/README.md
@@ -1,11 +1,12 @@
-```rust
+```json
  █████╗ ██╗  ██╗██╗   ██╗███╗   ███╗ ██████╗ ██████╗ ████████╗███████╗███╗   ███╗
 ██╔══██╗╚██╗██╔╝██║   ██║████╗ ████║██╔═══██╗██╔══██╗╚══██╔══╝██╔════╝████╗ ████║
 ███████║ ╚███╔╝ ██║   ██║██╔████╔██║██║   ██║██████╔╝   ██║   █████╗  ██╔████╔██║
 ██╔══██║ ██╔██╗ ██║   ██║██║╚██╔╝██║██║   ██║██╔══██╗   ██║   ██╔══╝  ██║╚██╔╝██║
 ██║  ██║██╔╝ ██╗╚██████╔╝██║ ╚═╝ ██║╚██████╔╝██║  ██║   ██║   ███████╗██║ ╚═╝ ██║
 ╚═╝  ╚═╝╚═╝  ╚═╝ ╚═════╝ ╚═╝     ╚═╝ ╚═════╝ ╚═╝  ╚═╝   ╚═╝   ╚══════╝╚═╝     ╚═╝
 ```
+#### >>> [Live Demo](axumortem.carterperez-dev.com)
 
 [![Cybersecurity Projects](https://img.shields.io/badge/Cybersecurity--Projects-Project%20%2320-red?style=flat&logo=github)](https://github.com/CarterPerez-dev/Cybersecurity-Projects/tree/main/PROJECTS/intermediate/binary-analysis-tool)
 [![Rust](https://img.shields.io/badge/Rust-stable-000000?style=flat&logo=rust&logoColor=white)](https://www.rust-lang.org)

diff --git a/PROJECTS/intermediate/binary-analysis-tool/frontend/index.html b/PROJECTS/intermediate/binary-analysis-tool/frontend/index.html
@@ -24,6 +24,12 @@
       name="viewport"
       content="width=device-width, initial-scale=1.0"
     />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Anton&family=Archivo+Black&family=Archivo:wght@400;500;600;700&family=Epilogue:wght@400;500;600;700&family=Poetsen+One&family=Montserrat:wght@400;500;600;700;900&display=swap"
+      rel="stylesheet"
+    />
     <title>Binary Analysis Tool</title>
     <meta
       name="description"

diff --git a/PROJECTS/intermediate/binary-analysis-tool/frontend/src/pages/landing/index.tsx b/PROJECTS/intermediate/binary-analysis-tool/frontend/src/pages/landing/index.tsx
@@ -78,6 +78,33 @@ export function Component(): React.ReactElement {
 
   return (
     <div className={styles.page}>
+      <div className={styles.grain} aria-hidden="true">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="100%"
+          height="100%"
+          preserveAspectRatio="none"
+        >
+          <filter id="grain-bat">
+            <feTurbulence
+              type="turbulence"
+              baseFrequency="1.16"
+              numOctaves="1"
+              seed="2"
+              stitchTiles="stitch"
+            >
+              <animate
+                attributeName="seed"
+                from="0"
+                to="100"
+                dur="2.67s"
+                repeatCount="indefinite"
+              />
+            </feTurbulence>
+          </filter>
+          <rect width="100%" height="100%" filter="url(#grain-bat)" />
+        </svg>
+      </div>
       <div className={styles.hexMargin} aria-hidden="true">
         {HEX_OFFSETS.map((offset) => (
           <span key={offset}>{offset}</span>
@@ -92,7 +119,7 @@ export function Component(): React.ReactElement {
       <header className={styles.metaStrip}>
         <span>AXM-001</span>
         <span className={styles.metaCenter}>STATIC ANALYSIS SUITE</span>
-        <span>v0.1.0</span>
+        <span>v0.1.1</span>
       </header>
 
       <div className={styles.rule} />
@@ -102,9 +129,9 @@ export function Component(): React.ReactElement {
         <p className={styles.subtitle}>BINARY DISSECTION ENGINE</p>
         <p className={styles.formats}>
           <span>ELF</span>
-          <span className={styles.formatDivider}>/</span>
+          <span className={styles.formatDivider}>&middot;</span>
           <span>PE</span>
-          <span className={styles.formatDivider}>/</span>
+          <span className={styles.formatDivider}>&middot;</span>
           <span>MACH-O</span>
         </p>
       </section>
@@ -196,6 +223,7 @@ export function Component(): React.ReactElement {
 
       <footer className={styles.footer}>
         <span>&copy; ANGELAMOS 2026</span>
+        <span className={styles.footerDesignation}>SYS AXM-BDE // UNIT-001</span>
         <span>AXUMORTEM</span>
       </footer>
     </div>

diff --git a/PROJECTS/intermediate/binary-analysis-tool/frontend/src/pages/landing/landing.module.scss b/PROJECTS/intermediate/binary-analysis-tool/frontend/src/pages/landing/landing.module.scss
@@ -28,6 +28,23 @@ $content-max: 860px;
   }
 }
 
+.grain {
+  position: fixed;
+  inset: 0;
+  width: 100vw;
+  height: 100vh;
+  pointer-events: none;
+  z-index: $z-max;
+  mix-blend-mode: multiply;
+  opacity: 1;
+
+  svg {
+    width: 100%;
+    height: 100%;
+    display: block;
+  }
+}
+
 .hexMargin {
   display: none;
   position: fixed;
@@ -201,17 +218,23 @@ $content-max: 860px;
 }
 
 .title {
+  font-family: $font-display;
   font-size: $font-size-6xl;
-  font-weight: $font-weight-black;
-  letter-spacing: 0.06em;
+  font-weight: $font-weight-medium;
+  letter-spacing: 0.04em;
   line-height: $line-height-none;
   color: $text-default;
+  text-transform: uppercase;
 
   @include breakpoint-up('sm') {
-    font-size: $font-size-7xl;
+    font-size: $font-size-5xl;
   }
 
   @include breakpoint-up('md') {
+    font-size: $font-size-7xl;
+  }
+
+  @include breakpoint-up('lg') {
     font-size: $font-size-8xl;
   }
 }
@@ -277,27 +300,78 @@ $content-max: 860px;
   }
 }
 
+$bracket-size: 14px;
+$bracket-weight: 1px;
+$bracket-inset: $space-3;
+
 .dropZone {
-  border: 1px solid $border-default;
+  position: relative;
+  border: 1px dashed $border-strong;
   padding: $space-10 $space-6;
   cursor: pointer;
-  transition-property: border-color, background-color;
+  transition-property: border-color, background-color, border-style;
   transition-duration: $duration-fast;
   transition-timing-function: $ease-out;
 
+  &::before,
+  &::after {
+    content: '';
+    position: absolute;
+    width: $bracket-size;
+    height: $bracket-size;
+    pointer-events: none;
+    transition: border-color $duration-fast $ease-out;
+  }
+
+  &::before {
+    top: $bracket-inset;
+    left: $bracket-inset;
+    border-top: $bracket-weight solid $border-stronger;
+    border-left: $bracket-weight solid $border-stronger;
+  }
+
+  &::after {
+    top: $bracket-inset;
+    right: $bracket-inset;
+    border-top: $bracket-weight solid $border-stronger;
+    border-right: $bracket-weight solid $border-stronger;
+  }
+
   @include hover {
-    border-color: $border-strong;
+    border-color: $border-stronger;
+
+    &::before,
+    &::after,
+    .dropPrompt::before,
+    .dropPrompt::after {
+      border-color: $accent;
+    }
   }
 
   &.dragActive {
+    border-style: solid;
     border-color: $accent;
     background: $accent-dim;
+
+    &::before,
+    &::after,
+    .dropPrompt::before,
+    .dropPrompt::after {
+      border-color: $accent;
+    }
   }
 
   &.hasFile {
+    border-style: solid;
+    border-color: $border-default;
     cursor: default;
     background: $bg-surface-75;
     padding: $space-6;
+
+    &::before,
+    &::after {
+      display: none;
+    }
   }
 }
 
@@ -307,6 +381,30 @@ $content-max: 860px;
   align-items: center;
   gap: $space-3;
   text-align: center;
+
+  &::before,
+  &::after {
+    content: '';
+    position: absolute;
+    width: $bracket-size;
+    height: $bracket-size;
+    pointer-events: none;
+    transition: border-color $duration-fast $ease-out;
+  }
+
+  &::before {
+    bottom: $bracket-inset;
+    left: $bracket-inset;
+    border-bottom: $bracket-weight solid $border-stronger;
+    border-left: $bracket-weight solid $border-stronger;
+  }
+
+  &::after {
+    bottom: $bracket-inset;
+    right: $bracket-inset;
+    border-bottom: $bracket-weight solid $border-stronger;
+    border-right: $bracket-weight solid $border-stronger;
+  }
 }
 
 .dropStatus {
@@ -410,6 +508,8 @@ $content-max: 860px;
   display: flex;
   align-items: center;
   gap: $space-3;
+  padding-left: $space-3;
+  border-left: 2px solid $accent;
 }
 
 .passNumber {
@@ -435,9 +535,18 @@ $content-max: 860px;
   align-items: center;
   padding: $space-6 0 $space-4;
   font-family: $font-mono;
-  font-size: $font-size-3xs;
+  font-size: $font-size-2xs;
   text-transform: uppercase;
   letter-spacing: $tracking-widest;
   color: $text-muted;
   margin-top: auto;
 }
+
+.footerDesignation {
+  display: none;
+  color: $border-strong;
+
+  @include breakpoint-up('sm') {
+    display: inline;
+  }
+}
diff --git a/PROJECTS/intermediate/binary-analysis-tool/frontend/src/styles/_fonts.scss b/PROJECTS/intermediate/binary-analysis-tool/frontend/src/styles/_fonts.scss
@@ -5,8 +5,9 @@
 
 @use 'tokens' as *;
 
-$font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', Roboto,
-  'Helvetica Neue', Arial, sans-serif;
+$font-display: 'Montserrat', sans-serif;
 
-$font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas,
-  'Liberation Mono', monospace;
+$font-sans: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI',
+  Roboto, 'Helvetica Neue', Arial, sans-serif;
+
+$font-mono: 'Epilogue', -apple-system, BlinkMacSystemFont, sans-serif;
diff --git a/PROJECTS/intermediate/binary-analysis-tool/frontend/src/styles/_tokens.scss b/PROJECTS/intermediate/binary-analysis-tool/frontend/src/styles/_tokens.scss
@@ -34,9 +34,9 @@ $space-32: 8rem;
 // ============================================================================
 // TYPOGRAPHY SCALE
 // ============================================================================
-$font-size-3xs: 0.625rem;
-$font-size-2xs: 0.6875rem;
-$font-size-xs: 0.75rem;
+$font-size-3xs: 0.65rem;
+$font-size-2xs: 0.695rem;
+$font-size-xs: 0.765rem;
 $font-size-sm: 0.875rem;
 $font-size-base: 1rem;
 $font-size-lg: 1.125rem;
@@ -80,43 +80,41 @@ $tracking-widest: 0.1em;
 // ============================================================================
 // COLORS
 // ============================================================================
-$white: hsl(0, 0%, 100%);
-$black: hsl(0, 0%, 0%);
-
-// Auth
-$bg-page: hsl(0, 0%, 10.5%);
-$bg-card: hsl(0, 0%, 6.2%);
-
-// Home/landing
-$bg-landing: hsl(0, 0%, 10.8%);
-
-$bg-default: hsl(0, 0%, 7.1%);
-$bg-alternative: hsl(0, 0%, 5.9%);
-$bg-surface-75: hsl(0, 0%, 9%);
-$bg-surface-100: hsl(0, 0%, 12.2%);
-$bg-surface-200: hsl(0, 0%, 14.1%);
-$bg-surface-300: hsl(0, 0%, 16.1%);
-$bg-control: hsl(0, 0%, 10%);
-$bg-selection: hsl(0, 0%, 19.2%);
-$bg-overlay: hsl(0, 0%, 14.1%);
-$bg-overlay-hover: hsl(0, 0%, 18%);
-
-$border-muted: hsl(0, 0%, 11.1%);
-$border-default: hsl(0, 0%, 18%);
-$border-strong: hsl(0, 0%, 22.4%);
-$border-stronger: hsl(0, 0%, 27.1%);
-$border-control: hsl(0, 0%, 22.4%);
-
-$text-default: hsl(0, 0%, 98%);
-$text-light: hsl(0, 0%, 70.6%);
-$text-lighter: hsl(0, 0%, 53.7%);
-$text-muted: hsl(0, 0%, 30.2%);
+$white: hsl(220, 15%, 97%);
+$black: hsl(227, 21%, 4%);
+
+$bg-page: hsl(260, 16%, 10%);
+$bg-card: hsl(260, 18%, 6%);
+
+$bg-landing: hsl(260, 16%, 10%);
+
+$bg-default: hsl(260, 18%, 7%);
+$bg-alternative: hsl(260, 18%, 5.5%);
+$bg-surface-75: hsl(260, 15%, 9.5%);
+$bg-surface-100: hsl(260, 13%, 12.5%);
+$bg-surface-200: hsl(260, 11%, 14.5%);
+$bg-surface-300: hsl(260, 9%, 16.5%);
+$bg-control: hsl(260, 15%, 10%);
+$bg-selection: hsl(260, 9%, 19.5%);
+$bg-overlay: hsl(260, 11%, 14.5%);
+$bg-overlay-hover: hsl(260, 9%, 18.5%);
+
+$border-muted: hsl(260, 12%, 21.5%);
+$border-default: hsl(260, 9%, 28.5%);
+$border-strong: hsl(260, 7%, 33.5%);
+$border-stronger: hsl(260, 5%, 37.5%);
+$border-control: hsl(260, 7%, 33.5%);
+
+$text-default: hsl(255, 14%, 98%);
+$text-light: hsl(258, 9%, 87%);
+$text-lighter: hsl(258, 7%, 80%);
+$text-muted: hsl(260, 9%, 50%);
 
 $error-default: hsl(0, 72%, 51%);
 $error-light: hsl(0, 72%, 65%);
 
-$accent: hsl(25, 85%, 55%);
-$accent-dim: hsl(25, 35%, 14%);
+$accent: hsl(160, 85%, 50%);
+$accent-dim: hsl(160, 35%, 12%);
 
 // ============================================================================
 // BORDER RADIUS