diff --git a/PROJECTS/intermediate/binary-analysis-tool/README.md b/PROJECTS/intermediate/binary-analysis-tool/README.md
index 23d0bf0..8ec2ffe 100644
--- a/PROJECTS/intermediate/binary-analysis-tool/README.md
+++ b/PROJECTS/intermediate/binary-analysis-tool/README.md
@@ -1,4 +1,4 @@
-```rust
+```json
█████╗ ██╗ ██╗██╗ ██╗███╗ ███╗ ██████╗ ██████╗ ████████╗███████╗███╗ ███╗
██╔══██╗╚██╗██╔╝██║ ██║████╗ ████║██╔═══██╗██╔══██╗╚══██╔══╝██╔════╝████╗ ████║
███████║ ╚███╔╝ ██║ ██║██╔████╔██║██║ ██║██████╔╝ ██║ █████╗ ██╔████╔██║
@@ -6,6 +6,7 @@
██║ ██║██╔╝ ██╗╚██████╔╝██║ ╚═╝ ██║╚██████╔╝██║ ██║ ██║ ███████╗██║ ╚═╝ ██║
╚═╝ ╚═╝╚═╝ ╚═╝ ╚═════╝ ╚═╝ ╚═╝ ╚═════╝ ╚═╝ ╚═╝ ╚═╝ ╚══════╝╚═╝ ╚═╝
```
+#### >>> [Live Demo](axumortem.carterperez-dev.com)
[](https://github.com/CarterPerez-dev/Cybersecurity-Projects/tree/main/PROJECTS/intermediate/binary-analysis-tool)
[](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
index 299f87a..35702cf 100644
--- 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"
/>
+
+
+
Binary Analysis Tool
+
{HEX_OFFSETS.map((offset) => (
{offset}
@@ -92,7 +119,7 @@ export function Component(): React.ReactElement {
AXM-001
STATIC ANALYSIS SUITE
- v0.1.0
+ v0.1.1
@@ -102,9 +129,9 @@ export function Component(): React.ReactElement {
BINARY DISSECTION ENGINE
ELF
- /
+ ·
PE
- /
+ ·
MACH-O
@@ -196,6 +223,7 @@ export function Component(): React.ReactElement {
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
index c584756..cdf42a7 100644
--- 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
index 10d59dc..88d222a 100644
--- 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
index 464afb6..cccb57e 100644
--- 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
diff --git a/PROJECTS/intermediate/binary-analysis-tool/justfile b/PROJECTS/intermediate/binary-analysis-tool/justfile
index 7adda43..9e67d74 100644
--- a/PROJECTS/intermediate/binary-analysis-tool/justfile
+++ b/PROJECTS/intermediate/binary-analysis-tool/justfile
@@ -3,9 +3,6 @@
# justfile
# =============================================================================
-set dotenv-filename := ".env.development"
-set dotenv-load
-set export
set shell := ["bash", "-uc"]
set windows-shell := ["powershell.exe", "-NoLogo", "-Command"]
@@ -105,35 +102,35 @@ tunnel-logs:
[group('dev')]
dev-up *ARGS:
- docker compose -f dev.compose.yml up {{ARGS}}
+ docker compose --env-file .env.development -f dev.compose.yml up {{ARGS}}
[group('dev')]
dev-start *ARGS:
- docker compose -f dev.compose.yml up -d {{ARGS}}
+ docker compose --env-file .env.development -f dev.compose.yml up -d {{ARGS}}
[group('dev')]
dev-down *ARGS:
- docker compose -f dev.compose.yml down {{ARGS}}
+ docker compose --env-file .env.development -f dev.compose.yml down {{ARGS}}
[group('dev')]
dev-stop:
- docker compose -f dev.compose.yml stop
+ docker compose --env-file .env.development -f dev.compose.yml stop
[group('dev')]
dev-build *ARGS:
- docker compose -f dev.compose.yml build {{ARGS}}
+ docker compose --env-file .env.development -f dev.compose.yml build {{ARGS}}
[group('dev')]
dev-rebuild:
- docker compose -f dev.compose.yml build --no-cache
+ docker compose --env-file .env.development -f dev.compose.yml build --no-cache
[group('dev')]
dev-logs *SERVICE:
- docker compose -f dev.compose.yml logs -f {{SERVICE}}
+ docker compose --env-file .env.development -f dev.compose.yml logs -f {{SERVICE}}
[group('dev')]
dev-ps:
- docker compose -f dev.compose.yml ps
+ docker compose --env-file .env.development -f dev.compose.yml ps
# =============================================================================
# Utilities