Merge pull request #139 from CarterPerez-dev/project/binary-analysis-tool

update
This commit is contained in:
Carter Perez 2026-04-01 00:57:13 -04:00 committed by GitHub
commit bf0fb03d04
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 196 additions and 56 deletions

View File

@ -6,6 +6,7 @@
██║ ██║██╔╝ ██╗╚██████╔╝██║ ╚═╝ ██║╚██████╔╝██║ ██║ ██║ ███████╗██║ ╚═╝ ██║
╚═╝ ╚═╝╚═╝ ╚═╝ ╚═════╝ ╚═╝ ╚═╝ ╚═════╝ ╚═╝ ╚═╝ ╚═╝ ╚══════╝╚═╝ ╚═╝
```
#### >>> [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)

View File

@ -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"

View File

@ -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>

View File

@ -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;
}
}

View File

@ -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;

View File

@ -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%);
$white: hsl(220, 15%, 97%);
$black: hsl(227, 21%, 4%);
// Auth
$bg-page: hsl(0, 0%, 10.5%);
$bg-card: hsl(0, 0%, 6.2%);
$bg-page: hsl(260, 16%, 10%);
$bg-card: hsl(260, 18%, 6%);
// Home/landing
$bg-landing: hsl(0, 0%, 10.8%);
$bg-landing: hsl(260, 16%, 10%);
$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%);
$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(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%);
$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(0, 0%, 98%);
$text-light: hsl(0, 0%, 70.6%);
$text-lighter: hsl(0, 0%, 53.7%);
$text-muted: hsl(0, 0%, 30.2%);
$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

View File

@ -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