Show description
Lalo Morales — IDE Profile
Lalo Morales — IDE Profile
BLACK•IDE•PROFILE
workspace
lalo-morales / whoami
Command Palette
CtrlK
Copy Summary
Print PDF
EXPLORER
7 nodes
◎
overview.md
who is he
active
⧗
timeline.log
life arc
v1
⌁
skills.json
stack
hot
▣
projects.db
builds
+more
⚑
mission.txt
next 90 days
focus
✉
contact.yml
links
ready
⟡
values.cfg
how he builds
core
overview.md
timeline.log
skills.json
projects.db
mission.txt
values.cfg
contact.yml
LALO MORALES
Full-stack builder + systems thinker. Veteran. Dad. ASU senior.
Runs projects end-to-end (infra → app → automation → shipping), and loves terminal-first workflows,
ASCII/ANSI aesthetics, and dark IDE-style UIs.
Location → Chula Vista / San Diego
Focus → AI + Infra + Product
Style → terminal / thick borders / dot-grid
Mode → build → iterate → ship
Current
Building apps daily • home lab • hackathons • learning markets • leveling up marketing & distribution
What to hire him for
AI tooling • developer experience • automation • integrations • dashboards • ops systems • product prototypes
Operator cred
Startup ops + automation (Lightyear Health) • military networking • real-world fixing & shipping
North star
Stable income + freedom to build (DVBE / mobile computer service + scalable AI products)
Quick Highlights
Veteran • Air Force
9/11 era • overseas
Network ops, hardware, field logistics — learned “systems under pressure.”
Startup Operator
Lightyear Health
Automated portals + workflows, mapped broken processes, shipped fixes, reduced manual load.
Builder Mode
daily
CLI AIs, local models, multi-machine lab, apps + demos, hackathons, toolchains.
Dad / Husband
family first
Stable, sober, deliberate — building a life that can hold the power.
Timeline
signal > noise
1994 — First IBM Aptiva
breaking → reinstalling → learning
Deleted the drive in 2 days, reinstalled Windows, and discovered the superpower: you can rebuild anything.
2000s — Mili…
Lalo Morales — IDE Profile
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Lalo Morales — IDE Profile</title>
<style>
:root{
--bg:#000;
--panel:#07080a;
--panel2:#0b0d10;
--ink:#e9eef6;
--muted:#9aa4b2;
--line:#1a1f27;
--line2:#0f1319;
--shadow: 0 20px 60px rgba(0,0,0,.65);
--radius:22px;
--b:3px;
--a:#00e5ff;
--b2:#8a5cff;
--c:#28ff7a;
--d:#ff3df2;
--e:#ffd54a;
--danger:#ff4d4d;
--grid: radial-gradient(circle at 1px 1px, rgba(255,255,255,.05) 1px, transparent 0);
--gridSize: 18px 18px;
--glow: 0 0 24px rgba(0,229,255,.12), 0 0 48px rgba(138,92,255,.10);
--mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
--sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}
*{box-sizing:border-box}
html,body{height:100%}
body{
margin:0;
font-family: var(--sans);
background:
linear-gradient(180deg, rgba(255,255,255,.04), transparent 20%),
var(--grid);
background-color: var(--bg);
background-size: auto, var(--gridSize);
color: var(--ink);
overflow:hidden;
}
/* App shell */
.app{
height:100vh;
width:100vw;
padding:18px;
display:grid;
grid-template-rows: 54px 1fr 52px;
gap:14px;
}
.topbar{
display:flex;
align-items:center;
justify-content:space-between;
border: var(--b) solid var(--line);
border-radius: var(--radius);
background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
box-shadow: var(--shadow);
padding:10px 14px;
overflow:hidden;
position:relative;
}
.topbar:before{
content:"";
position:absolute; inset:-2px;
background: radial-gradient(700px 120px at 15% 0%, rgba(0,229,255,.16), transparent 55%),
radial-gradient(700px 120px at 75% 0%, rgba(138,92,255,.16), transparent 55%);
pointer-events:none;
filter: blur(6px);
opacity:.9;
}
.leftCluster, .rightCluster{display:flex; align-items:center; gap:10px; position:relative; z-index:1}
.brand{
display:flex; align-items:center; gap:10px;
font-family: var(--mono);
letter-spacing:.5px;
}
.dots{display:flex; gap:7px; padding-right:4px}
.dot{width:12px; height:12px; border-radius:999px; border:2px solid #000; box-shadow: 0 0 16px rgba(255,255,255,.08) inset}
.dot.red{background:#ff4d4d}
.dot.yellow{background:#ffd54a}
.dot.green{background:#28ff7a}
.titleBlock{display:flex; flex-direction:column; line-height:1.05}
.titleBlock .t1{font-size:12px; color:var(--muted)}
.titleBlock .t2{font-size:14px; color:var(--ink)}
.pill{
border:2px solid var(--line);
background: rgba(255,255,255,.03);
border-radius:999px;
padding:8px 10px;
font-family: var(--mono);
font-size:12px;
color:var(--muted);
display:flex; gap:8px; align-items:center;
}
.kbd{
border:1px solid var(--line);
background: rgba(0,0,0,.5);
padding:2px 7px;
border-radius:8px;
color: var(--ink);
}
.btn{
cursor:pointer;
user-select:none;
border:2px solid var(--line);
background: rgba(255,255,255,.03);
border-radius:14px;
padding:9px 12px;
font-family: var(--mono);
font-size:12px;
color: var(--ink);
transition: transform .08s ease, border-color .2s ease, background .2s ease;
}
.btn:hover{border-color: rgba(0,229,255,.35); background: rgba(0,229,255,.06); box-shadow: var(--glow)}
.btn:active{transform: translateY(1px)}
/* Main layout */
.main{
display:grid;
grid-template-columns: 280px 1fr 340px;
gap:14px;
min-height:0;
}
.panel{
border: var(--b) solid var(--line);
border-radius: var(--radius);
background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015));
box-shadow: var(--shadow);
overflow:hidden;
min-height:0;
position:relative;
}
.panel .head{
display:flex;
align-items:center;
justify-content:space-between;
padding:12px 14px;
border-bottom:2px solid var(--line2);
background: rgba(0,0,0,.35);
font-family: var(--mono);
font-size:12px;
color: var(--muted);
}
.panel .body{padding:12px 14px; min-height:0; height:100%; overflow:auto}
.panel .body::-webkit-scrollbar{height:10px; width:10px}
.panel .body::-webkit-scrollbar-thumb{background: rgba(255,255,255,.08); border-radius:12px; border:2px solid rgba(0,0,0,.2)}
.panel .body::-webkit-scrollbar-track{background: rgba(0,0,0,.2)}
.treeItem{
display:flex; align-items:center; justify-content:space-between;
border:2px solid var(--line);
background: rgba(0,0,0,.28);
border-radius:16px;
padding:10px 10px;
margin-bottom:10px;
cursor:pointer;
transition: border-color .2s ease, transform .08s ease, background .2s ease;
}
.treeItem:hover{
border-color: rgba(138,92,255,.35);
background: rgba(138,92,255,.05);
box-shadow: 0 0 24px rgba(138,92,255,.10);
}
.treeItem:active{transform: translateY(1px)}
.treeLeft{display:flex; gap:10px; align-items:center}
.icon{
width:28px; height:28px; border-radius:10px;
display:grid; place-items:center;
border:2px solid var(--line);
background: rgba(255,255,255,.03);
font-family: var(--mono);
color: var(--ink);
}
.badge{
font-family: var(--mono);
font-size:11px;
padding:2px 8px;
border-radius:999px;
border:1px solid var(--line);
color: var(--muted);
background: rgba(0,0,0,.35);
}
/* Center editor */
.editorTop{
display:flex;
gap:10px;
align-items:center;
padding:10px 12px;
border-bottom:2px solid var(--line2);
background: rgba(0,0,0,.30);
overflow:auto;
scrollbar-width:none;
}
.editorTop::-webkit-scrollbar{display:none}
.tab{
border:2px solid var(--line);
background: rgba(0,0,0,.28);
color: var(--muted);
border-radius:14px;
padding:8px 12px;
font-family: var(--mono);
font-size:12px;
cursor:pointer;
white-space:nowrap;
transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.tab.active{
color: var(--ink);
border-color: rgba(0,229,255,.40);
background: rgba(0,229,255,.06);
box-shadow: var(--glow);
}
.doc{
padding:14px 16px 18px 16px;
min-height:0;
}
.hero{
border:2px solid var(--line);
border-radius: 22px;
background:
radial-gradient(900px 220px at 30% 0%, rgba(0,229,255,.10), transparent 60%),
radial-gradient(900px 220px at 80% 0%, rgba(138,92,255,.10), transparent 60%),
rgba(0,0,0,.28);
padding:16px;
box-shadow: var(--glow);
position:relative;
overflow:hidden;
}
.heroGrid{
display:grid;
grid-template-columns: 1.1fr .9fr;
gap:14px;
align-items:start;
}
@media (max-width: 1100px){
body{overflow:auto}
.app{height:auto; overflow:auto}
.main{grid-template-columns: 1fr; grid-template-rows:auto; overflow:visible}
.panel{min-height: 420px}
.heroGrid{grid-template-columns:1fr}
}
.name{
font-family: var(--mono);
font-size:22px;
letter-spacing:.4px;
margin:0 0 8px 0;
}
.sub{
color: var(--muted);
margin:0 0 14px 0;
font-size:13px;
line-height:1.5;
}
.chips{
display:flex;
flex-wrap:wrap;
gap:8px;
}
.chip{
font-family: var(--mono);
font-size:12px;
padding:7px 10px;
border-radius:999px;
border:1px solid var(--line);
background: rgba(0,0,0,.35);
color: var(--ink);
}
.chip i{font-style:normal; color:var(--muted)}
.kv{
display:grid;
grid-template-columns: 1fr 1fr;
gap:10px;
margin-top:14px;
}
.card{
border:2px solid var(--line);
background: rgba(0,0,0,.28);
border-radius:18px;
padding:12px;
}
.card h4{
margin:0 0 8px 0;
font-size:12px;
font-family: var(--mono);
color: var(--muted);
letter-spacing:.4px;
text-transform:uppercase;
}
.card .big{
font-family: var(--mono);
font-size:14px;
color: var(--ink);
line-height:1.35;
}
.ascii{
font-family: var(--mono);
font-size:12px;
line-height:1.25;
color: rgba(233,238,246,.92);
white-space:pre;
border:2px solid var(--line);
border-radius:18px;
padding:12px;
background: rgba(0,0,0,.30);
overflow:auto;
margin:0;
box-shadow: 0 0 36px rgba(0,229,255,.06);
}
.sectionTitle{
display:flex;
align-items:center;
justify-content:space-between;
margin:16px 0 10px;
padding-bottom:10px;
border-bottom:1px dashed rgba(255,255,255,.10);
}
.sectionTitle h3{
margin:0;
font-family: var(--mono);
font-size:12px;
letter-spacing:.4px;
color: var(--muted);
text-transform:uppercase;
}
.mini{
font-family: var(--mono);
font-size:11px;
color: var(--muted);
}
.timelineItem{
border:2px solid var(--line);
background: rgba(0,0,0,.22);
border-radius:18px;
padding:12px;
margin-bottom:10px;
}
.timelineItem .row{
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:10px;
}
.timelineItem .role{
font-family: var(--mono);
color: var(--ink);
font-size:13px;
}
.timelineItem .meta{
font-family: var(--mono);
color: var(--muted);
font-size:11px;
white-space:nowrap;
}
.timelineItem p{
margin:8px 0 0 0;
color: rgba(233,238,246,.86);
font-size:13px;
line-height:1.55;
}
.grid2{
display:grid;
grid-template-columns: 1fr 1fr;
gap:10px;
}
.skill{
border:2px solid var(--line);
background: rgba(0,0,0,.22);
border-radius:18px;
padding:12px;
}
.skill .top{
display:flex; justify-content:space-between; gap:10px; align-items:center;
font-family: var(--mono);
font-size:12px;
}
.bar{
margin-top:10px;
border:1px solid rgba(255,255,255,.08);
background: rgba(0,0,0,.40);
border-radius:999px;
overflow:hidden;
height:12px;
}
.fill{
height:100%;
width:0%;
background: linear-gradient(90deg, rgba(0,229,255,.85), rgba(138,92,255,.75), rgba(255,61,242,.70));
box-shadow: 0 0 22px rgba(0,229,255,.20);
transition: width .9s cubic-bezier(.2,.8,.2,1);
}
/* Right panel: radar + quick actions */
.radar{
border:2px solid var(--line);
border-radius:18px;
background: rgba(0,0,0,.26);
padding:12px;
}
.radar canvas{width:100%; height:200px; display:block}
.statGrid{
display:grid;
grid-template-columns: 1fr 1fr;
gap:10px;
margin-top:10px;
}
.stat{
border:2px solid var(--line);
border-radius:18px;
background: rgba(0,0,0,.22);
padding:12px;
}
.stat .k{
font-family: var(--mono);
font-size:11px;
color: var(--muted);
text-transform:uppercase;
letter-spacing:.4px;
}
.stat .v{
font-family: var(--mono);
font-size:16px;
margin-top:6px;
}
.sparkline{
margin-top:10px;
height:26px;
border-radius:14px;
border:1px solid rgba(255,255,255,.08);
background: rgba(0,0,0,.35);
display:flex;
gap:3px;
padding:4px;
align-items:flex-end;
}
.sparkline span{
flex:1;
border-radius:8px;
background: rgba(0,229,255,.24);
box-shadow: 0 0 18px rgba(0,229,255,.10);
}
/* Bottom terminal */
.bottombar{
border: var(--b) solid var(--line);
border-radius: var(--radius);
background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
box-shadow: var(--shadow);
display:flex;
align-items:center;
gap:10px;
padding:10px 12px;
overflow:hidden;
}
.prompt{
font-family: var(--mono);
color: rgba(233,238,246,.92);
display:flex;
align-items:center;
gap:10px;
min-width: 260px;
white-space:nowrap;
}
.caret{
width:10px; height:10px; border-radius:2px;
background: rgba(0,229,255,.75);
box-shadow: 0 0 18px rgba(0,229,255,.35);
animation: blink 1s steps(1) infinite;
}
@keyframes blink{50%{opacity:.25}}
.cmdline{
flex:1;
border:2px solid var(--line);
background: rgba(0,0,0,.35);
border-radius:16px;
padding:10px 12px;
color: var(--ink);
font-family: var(--mono);
font-size:13px;
outline:none;
}
.hint{
font-family: var(--mono);
font-size:11px;
color: var(--muted);
white-space:nowrap;
}
/* Modal (command palette) */
.modal{
position:fixed; inset:0;
background: rgba(0,0,0,.70);
backdrop-filter: blur(10px);
display:none;
align-items:center;
justify-content:center;
padding:18px;
z-index:50;
}
.modal.show{display:flex}
.palette{
width:min(920px, 100%);
border: var(--b) solid rgba(0,229,255,.25);
border-radius: 26px;
background:
radial-gradient(900px 240px at 20% 0%, rgba(0,229,255,.12), transparent 60%),
radial-gradient(900px 240px at 80% 0%, rgba(255,61,242,.10), transparent 60%),
rgba(10,12,16,.92);
box-shadow: 0 30px 90px rgba(0,0,0,.75), var(--glow);
overflow:hidden;
}
.paletteHead{
padding:14px;
border-bottom:2px solid rgba(255,255,255,.08);
display:flex; align-items:center; justify-content:space-between;
font-family: var(--mono);
color: var(--muted);
font-size:12px;
}
.paletteBody{padding:14px}
.paletteInput{
width:100%;
border:2px solid rgba(255,255,255,.10);
background: rgba(0,0,0,.45);
border-radius:18px;
padding:12px 14px;
color: var(--ink);
font-family: var(--mono);
font-size:14px;
outline:none;
}
.actions{
margin-top:12px;
display:grid;
grid-template-columns: 1fr 1fr;
gap:10px;
}
.action{
border:2px solid rgba(255,255,255,.08);
background: rgba(0,0,0,.35);
border-radius:18px;
padding:12px;
cursor:pointer;
transition: border-color .2s ease, transform .08s ease, background .2s ease;
}
.action:hover{
border-color: rgba(0,229,255,.35);
background: rgba(0,229,255,.05);
}
.action:active{transform: translateY(1px)}
.action .a1{font-family: var(--mono); color: var(--ink); font-size:13px}
.action .a2{margin-top:6px; color: var(--muted); font-size:12px; line-height:1.35}
/* small toast */
.toast{
position:fixed;
right:18px; bottom:72px;
border:2px solid rgba(0,229,255,.25);
background: rgba(0,0,0,.55);
backdrop-filter: blur(10px);
border-radius:18px;
padding:12px 14px;
font-family: var(--mono);
color: var(--ink);
box-shadow: var(--glow);
opacity:0;
transform: translateY(8px);
transition: opacity .25s ease, transform .25s ease;
z-index:60;
max-width:min(520px, calc(100vw - 36px));
pointer-events:none;
}
.toast.show{opacity:1; transform: translateY(0)}
.toast small{display:block; color: var(--muted); margin-top:6px; font-size:11px}
a{color:inherit}
</style>
</head>
<body>
<div class="app">
<!-- TOP BAR -->
<header class="topbar">
<div class="leftCluster">
<div class="dots" aria-hidden="true">
<span class="dot red"></span><span class="dot yellow"></span><span class="dot green"></span>
</div>
<div class="brand">
<span style="opacity:.9;">BLACK</span><span style="color:var(--a)">•</span><span>IDE</span><span style="color:var(--b2)">•</span><span>PROFILE</span>
</div>
<div class="titleBlock">
<div class="t1">workspace</div>
<div class="t2">lalo-morales / whoami</div>
</div>
</div>
<div class="rightCluster">
<div class="pill" title="Keyboard shortcuts">
<span>Command Palette</span>
<span class="kbd">Ctrl</span><span class="kbd">K</span>
</div>
<button class="btn" id="btnCopy">Copy Summary</button>
<button class="btn" id="btnPrint">Print PDF</button>
</div>
</header>
<!-- MAIN -->
<main class="main">
<!-- LEFT: Explorer -->
<section class="panel" aria-label="Explorer">
<div class="head">
<span>EXPLORER</span>
<span class="badge" id="nodeCount">7 nodes</span>
</div>
<div class="body">
<div class="treeItem" data-open="overview">
<div class="treeLeft">
<div class="icon" style="outline:2px solid rgba(0,229,255,.14)">◎</div>
<div>
<div style="font-family:var(--mono); font-size:13px; color:var(--ink)">overview.md</div>
<div style="font-family:var(--mono); font-size:11px; color:var(--muted)">who is he</div>
</div>
</div>
<span class="badge">active</span>
</div>
<div class="treeItem" data-open="timeline">
<div class="treeLeft">
<div class="icon">⧗</div>
<div>
<div style="font-family:var(--mono); font-size:13px; color:var(--ink)">timeline.log</div>
<div style="font-family:var(--mono); font-size:11px; color:var(--muted)">life arc</div>
</div>
</div>
<span class="badge">v1</span>
</div>
<div class="treeItem" data-open="skills">
<div class="treeLeft">
<div class="icon">⌁</div>
<div>
<div style="font-family:var(--mono); font-size:13px; color:var(--ink)">skills.json</div>
<div style="font-family:var(--mono); font-size:11px; color:var(--muted)">stack</div>
</div>
</div>
<span class="badge">hot</span>
</div>
<div class="treeItem" data-open="projects">
<div class="treeLeft">
<div class="icon">▣</div>
<div>
<div style="font-family:var(--mono); font-size:13px; color:var(--ink)">projects.db</div>
<div style="font-family:var(--mono); font-size:11px; color:var(--muted)">builds</div>
</div>
</div>
<span class="badge">+more</span>
</div>
<div class="treeItem" data-open="mission">
<div class="treeLeft">
<div class="icon">⚑</div>
<div>
<div style="font-family:var(--mono); font-size:13px; color:var(--ink)">mission.txt</div>
<div style="font-family:var(--mono); font-size:11px; color:var(--muted)">next 90 days</div>
</div>
</div>
<span class="badge">focus</span>
</div>
<div class="treeItem" data-open="contact">
<div class="treeLeft">
<div class="icon">✉</div>
<div>
<div style="font-family:var(--mono); font-size:13px; color:var(--ink)">contact.yml</div>
<div style="font-family:var(--mono); font-size:11px; color:var(--muted)">links</div>
</div>
</div>
<span class="badge">ready</span>
</div>
<div class="treeItem" data-open="values">
<div class="treeLeft">
<div class="icon">⟡</div>
<div>
<div style="font-family:var(--mono); font-size:13px; color:var(--ink)">values.cfg</div>
<div style="font-family:var(--mono); font-size:11px; color:var(--muted)">how he builds</div>
</div>
</div>
<span class="badge">core</span>
</div>
</div>
</section>
<!-- CENTER: Editor -->
<section class="panel" aria-label="Editor">
<div class="editorTop" role="tablist" aria-label="Tabs">
<div class="tab active" data-tab="overview">overview.md</div>
<div class="tab" data-tab="timeline">timeline.log</div>
<div class="tab" data-tab="skills">skills.json</div>
<div class="tab" data-tab="projects">projects.db</div>
<div class="tab" data-tab="mission">mission.txt</div>
<div class="tab" data-tab="values">values.cfg</div>
<div class="tab" data-tab="contact">contact.yml</div>
</div>
<div class="body doc">
<!-- OVERVIEW -->
<section class="view" id="view-overview">
<div class="hero">
<div class="heroGrid">
<div>
<h1 class="name">LALO MORALES</h1>
<p class="sub">
Full-stack builder + systems thinker. Veteran. Dad. ASU senior.
Runs projects end-to-end (infra → app → automation → shipping), and loves terminal-first workflows,
ASCII/ANSI aesthetics, and dark IDE-style UIs.
</p>
<div class="chips">
<span class="chip">Location <i>→</i> Chula Vista / San Diego</span>
<span class="chip">Focus <i>→</i> AI + Infra + Product</span>
<span class="chip">Style <i>→</i> terminal / thick borders / dot-grid</span>
<span class="chip">Mode <i>→</i> build → iterate → ship</span>
</div>
<div class="kv">
<div class="card">
<h4>Current</h4>
<div class="big">
Building apps daily • home lab • hackathons • learning markets • leveling up marketing & distribution
</div>
</div>
<div class="card">
<h4>What to hire him for</h4>
<div class="big">
AI tooling • developer experience • automation • integrations • dashboards • ops systems • product prototypes
</div>
</div>
<div class="card">
<h4>Operator cred</h4>
<div class="big">
Startup ops + automation (Lightyear Health) • military networking • real-world fixing & shipping
</div>
</div>
<div class="card">
<h4>North star</h4>
<div class="big">
Stable income + freedom to build (DVBE / mobile computer service + scalable AI products)
</div>
</div>
</div>
</div>
<div>
<pre class="ascii" id="asciiBanner"></pre>
<div class="sectionTitle">
<h3>Quick Highlights</h3>
<span class="mini" id="highlightTime"></span>
</div>
<div class="grid2">
<div class="timelineItem">
<div class="row">
<div class="role">Veteran • Air Force</div>
<div class="meta">9/11 era • overseas</div>
</div>
<p>Network ops, hardware, field logistics — learned “systems under pressure.”</p>
</div>
<div class="timelineItem">
<div class="row">
<div class="role">Startup Operator</div>
<div class="meta">Lightyear Health</div>
</div>
<p>Automated portals + workflows, mapped broken processes, shipped fixes, reduced manual load.</p>
</div>
<div class="timelineItem">
<div class="row">
<div class="role">Builder Mode</div>
<div class="meta">daily</div>
</div>
<p>CLI AIs, local models, multi-machine lab, apps + demos, hackathons, toolchains.</p>
</div>
<div class="timelineItem">
<div class="row">
<div class="role">Dad / Husband</div>
<div class="meta">family first</div>
</div>
<p>Stable, sober, deliberate — building a life that can hold the power.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- TIMELINE -->
<section class="view" id="view-timeline" style="display:none">
<div class="sectionTitle">
<h3>Timeline</h3>
<span class="mini">signal > noise</span>
</div>
<div class="timelineItem">
<div class="row">
<div class="role">1994 — First IBM Aptiva</div>
<div class="meta">breaking → reinstalling → learning</div>
</div>
<p>Deleted the drive in 2 days, reinstalled Windows, and discovered the superpower: you can rebuild anything.</p>
</div>
<div class="timelineItem">
<div class="row">
<div class="role">2000s — Military Networking</div>
<div class="meta">cabling • racks • routing/switching • field ops</div>
</div>
<p>Deployed environment operations: maintain base computers, source parts in Kuwait City, keep the system alive.</p>
</div>
<div class="timelineItem">
<div class="row">
<div class="role">2005–2020 — San Francisco</div>
<div class="meta">hard years • learned humans</div>
</div>
<p>Long arc through addiction and recovery — eventually sobriety + treatment unlocked the builder again.</p>
</div>
<div class="timelineItem">
<div class="row">
<div class="role">2021–2023 — Lightyear Health (startup)</div>
<div class="meta">operator + automator</div>
</div>
<p>Got an inside view of growth/rebrand/contraction. Took chaotic portal workflows and turned them into automations with engineering.</p>
</div>
<div class="timelineItem">
<div class="row">
<div class="role">Aug 2024 — ASU return</div>
<div class="meta">upper-division to finish</div>
</div>
<p>Senior status. Building portfolio-level systems while completing coursework.</p>
</div>
<div class="timelineItem">
<div class="row">
<div class="role">Now — Home Lab / Builder Era</div>
<div class="meta">7 machines • local AI • pi cloud • robotics</div>
</div>
<p>Linux distros, CLI AIs, local models, Raspberry Pi rover + web control, Cloudflare-hosted personal cloud.</p>
</div>
</section>
<!-- SKILLS -->
<section class="view" id="view-skills" style="display:none">
<div class="sectionTitle">
<h3>Skills</h3>
<span class="mini">click a skill to “boost” it</span>
</div>
<div class="grid2" id="skillsGrid"></div>
</section>
<!-- PROJECTS -->
<section class="view" id="view-projects" style="display:none">
<div class="sectionTitle">
<h3>Projects</h3>
<span class="mini">ships > vibes (but keep the vibes)</span>
</div>
<div class="timelineItem">
<div class="row">
<div class="role">Comedeez.ai</div>
<div class="meta">AI comedy writing + community</div>
</div>
<p>End-to-end product building, iteration, and learning distribution. Designed for expansion: tools + community + content.</p>
</div>
<div class="timelineItem">
<div class="row">
<div class="role">Home Cloud (Keyboard Pi 500)</div>
<div class="meta">self-hosted • Cloudflare tunnel</div>
</div>
<p>Personal cloud alternative hosted from a keyboard computer. Practical infra + security + real world access patterns.</p>
</div>
<div class="timelineItem">
<div class="row">
<div class="role">Raspberry Pi Rover</div>
<div class="meta">remote control • web app • “AI voice” personality</div>
</div>
<p>A living demo of systems integration: hardware + web control + automation + delightful UI.</p>
</div>
<div class="timelineItem">
<div class="row">
<div class="role">CLI + Local AI Toolchain</div>
<div class="meta">multi-machine • terminal-first workflows</div>
</div>
<p>Local models, command-line agents, automation scripts, and prototype pipelines for rapid shipping.</p>
</div>
</section>
<!-- MISSION -->
<section class="view" id="view-mission" style="display:none">
<div class="sectionTitle">
<h3>Mission</h3>
<span class="mini">make the next move obvious</span>
</div>
<div class="timelineItem">
<div class="row">
<div class="role">Primary Objective</div>
<div class="meta">stability → leverage → freedom</div>
</div>
<p>
Build a stable income engine (DVBE + mobile computer/network service) while continuing to ship AI products.
Use the “anchor → rocket” sequence: anchor covers life & car, rocket grows optionality.
</p>
</div>
<div class="timelineItem">
<div class="row">
<div class="role">90-Day Plan (starter)</div>
<div class="meta">editable</div>
</div>
<p>
1) Pick the service brand + landing page + Google Business Profile<br/>
2) Offer: “same-day home service” + “network + WiFi rescue” + “PC tune & security”<br/>
3) Build a lightweight CRM (SQLite) + invoice templates + simple booking<br/>
4) Post daily: before/after fixes + short tutorials + local SEO content<br/>
5) Parallel: 72-hour Comedeez conversion sprint (one feature that sells)
</p>
</div>
<div class="timelineItem">
<div class="row">
<div class="role">What makes it work</div>
<div class="meta">your advantage</div>
</div>
<p>
You understand systems. You can translate human problems into fixable workflows.
You ship. You can package boring value into sleek experiences.
</p>
</div>
</section>
<!-- VALUES -->
<section class="view" id="view-values" style="display:none">
<div class="sectionTitle">
<h3>Values / Build Philosophy</h3>
<span class="mini">how he operates</span>
</div>
<div class="timelineItem">
<div class="row">
<div class="role">Truth over vibes</div>
<div class="meta">measure it</div>
</div>
<p>Track what matters. Use analytics as a compass. Make decisions from signal.</p>
</div>
<div class="timelineItem">
<div class="row">
<div class="role">Terminal-first clarity</div>
<div class="meta">fast feedback loops</div>
</div>
<p>Prefer tools that reduce context switching: CLI, dashboards, tight iterations, crisp logs.</p>
</div>
<div class="timelineItem">
<div class="row">
<div class="role">Break → rebuild → mastery</div>
<div class="meta">childhood pattern</div>
</div>
<p>Learn by pushing systems until they fail. Then rebuild them cleaner than before.</p>
</div>
<div class="timelineItem">
<div class="row">
<div class="role">Anchor then rocket</div>
<div class="meta">sequence</div>
</div>
<p>Secure stability first. Use stability to take bigger swings with less fear.</p>
</div>
</section>
<!-- CONTACT -->
<section class="view" id="view-contact" style="display:none">
<div class="sectionTitle">
<h3>Contact</h3>
<span class="mini">wire it into the world</span>
</div>
<div class="timelineItem">
<div class="row">
<div class="role">Online</div>
<div class="meta">links</div>
</div>
<p>
<span style="color:var(--muted); font-family:var(--mono)">Website:</span>
<span style="font-family:var(--mono)">comedeez.ai</span>
<br/>
<span style="color:var(--muted); font-family:var(--mono)">Cloud:</span>
<span style="font-family:var(--mono)">lalospiis.online</span>
<br/>
<span style="color:var(--muted); font-family:var(--mono)">X:</span>
<span style="font-family:var(--mono)">~2400 AI community followers</span>
</p>
</div>
<div class="timelineItem">
<div class="row">
<div class="role">Preferred Work</div>
<div class="meta">what to send</div>
</div>
<p>
Problems that need: automation, tooling, integration, product prototypes, infra + UI, dashboards,
and a builder who can ship alone or amplify a team.
</p>
</div>
</section>
</div>
</section>
<!-- RIGHT: Insight Panel -->
<section class="panel" aria-label="Insights">
<div class="head">
<span>INSIGHTS</span>
<span class="badge" id="energyLabel">energy: 0.78</span>
</div>
<div class="body">
<div class="radar">
<div style="display:flex; justify-content:space-between; align-items:center; gap:10px;">
<div style="font-family:var(--mono); color:var(--muted); font-size:12px;">FOCUS RADAR</div>
<div class="badge" id="radarMode">auto</div>
</div>
<canvas id="radar"></canvas>
</div>
<div class="statGrid">
<div class="stat">
<div class="k">Builder mode</div>
<div class="v" id="statBuild">ON</div>
<div class="sparkline" id="spark"></div>
</div>
<div class="stat">
<div class="k">Momentum</div>
<div class="v" id="statMomentum">+12%</div>
<div class="sparkline" id="spark2"></div>
</div>
<div class="stat">
<div class="k">Threads</div>
<div class="v">AI • Infra • Ops • Family</div>
<small style="display:block; color:var(--muted); font-family:var(--mono); margin-top:8px;">
Tip: press <span class="kbd">Ctrl</span> <span class="kbd">K</span> and type “focus”.
</small>
</div>
<div class="stat">
<div class="k">Signature style</div>
<div class="v">Terminal + Thick UI</div>
<small style="display:block; color:var(--muted); font-family:var(--mono); margin-top:8px;">
Analytics is the color. Black is the canvas.
</small>
</div>
</div>
<div class="sectionTitle">
<h3>Quick Actions</h3>
<span class="mini">click or type commands below</span>
</div>
<div style="display:grid; gap:10px;">
<button class="btn" style="width:100%;" data-action="open mission">Open Mission</button>
<button class="btn" style="width:100%;" data-action="open skills">Open Skills</button>
<button class="btn" style="width:100%;" data-action="focus dvbe">Focus: DVBE + Mobile Service</button>
<button class="btn" style="width:100%;" data-action="focus ai">Focus: AI Builder Portfolio</button>
</div>
</div>
</section>
</main>
<!-- BOTTOM TERMINAL -->
<footer class="bottombar" aria-label="Terminal">
<div class="prompt">
<span style="color:var(--a)">lalo</span><span style="opacity:.6">:</span><span style="color:var(--b2)">~/whoami</span>
<span style="opacity:.6">$</span>
<span class="caret" aria-hidden="true"></span>
</div>
<input class="cmdline" id="cmd" placeholder='Try: "help" • "open skills" • "theme neon" • "focus dvbe" • "boost rust"' />
<div class="hint">Enter to run • Ctrl+K palette • Esc close</div>
</footer>
</div>
<!-- Command Palette Modal -->
<div class="modal" id="modal">
<div class="palette" role="dialog" aria-modal="true" aria-label="Command Palette">
<div class="paletteHead">
<span>COMMAND PALETTE</span>
<span class="badge">Esc to close</span>
</div>
<div class="paletteBody">
<input class="paletteInput" id="palInput" placeholder="Type a command… (open, focus, boost, theme, copy, print)" />
<div class="actions" id="palActions"></div>
</div>
</div>
</div>
<div class="toast" id="toast"></div>
<script>
// ---------- Data ----------
const state = {
activeTab: "overview",
energy: 0.78,
focus: "auto",
theme: "default",
skills: [
{ name: "Python", level: 92, note: "automation, tooling, data, APIs" },
{ name: "Rust", level: 84, note: "systems, CLIs, performance, reliability" },
{ name: "JavaScript", level: 88, note: "full-stack UI, quick shipping" },
{ name: "SQL", level: 80, note: "SQLite/Postgres, data models, analytics" },
{ name: "Linux", level: 90, note: "distros, servers, bash, troubleshooting" },
{ name: "Networking", level: 86, note: "routing/switching, cabling, real-world ops" },
{ name: "AI Tooling", level: 89, note: "agents/CLIs/local models/pipelines" },
{ name: "Product Ops", level: 83, note: "workflows, portals, automation at startups" }
],
commands: [
{ cmd: "help", desc: "Show available commands" },
{ cmd: "open <tab>", desc: "Open a view (overview|timeline|skills|projects|mission|values|contact)" },
{ cmd: "focus <mode>", desc: "Set focus mode (dvbe|ai|family|auto)" },
{ cmd: "boost <skill>", desc: "Temporarily boost a skill bar (e.g., boost rust)" },
{ cmd: "theme <name>", desc: "Switch theme accents (default|neon|mono)" },
{ cmd: "copy", desc: "Copy summary to clipboard" },
{ cmd: "print", desc: "Print to PDF" }
]
};
// ---------- Helpers ----------
const $ = (sel, el=document) => el.querySelector(sel);
const $$ = (sel, el=document) => Array.from(el.querySelectorAll(sel));
const clamp01 = (x) => Math.max(0, Math.min(1, x));
function toast(msg, sub=""){
const t = $("#toast");
t.innerHTML = `${msg}${sub ? `<small>${sub}</small>` : ""}`;
t.classList.add("show");
clearTimeout(toast._t);
toast._t = setTimeout(()=>t.classList.remove("show"), 2100);
}
function setEnergy(val){
state.energy = clamp01(val);
$("#energyLabel").textContent = `energy: ${state.energy.toFixed(2)}`;
}
function openTab(tab){
state.activeTab = tab;
$$(".tab").forEach(t => t.classList.toggle("active", t.dataset.tab === tab));
$$(".view").forEach(v => v.style.display = "none");
const view = $("#view-" + tab);
if(view) view.style.display = "";
toast(`open → ${tab}`, "Tip: Ctrl+K for palette");
animateRadar();
}
function randomSpark(el, n=18){
el.innerHTML = "";
for(let i=0;i<n;i++){
const s = document.createElement("span");
const h = 6 + Math.floor(Math.random()*18);
s.style.height = h + "px";
s.style.background = `rgba(0,229,255,${0.10 + Math.random()*0.35})`;
el.appendChild(s);
}
}
// ---------- ASCII Banner ----------
function renderAscii(){
const banner =
`┌──────────────────────────────────────────────────────────────────────────────┐
│ WHOAMI : LALO MORALES │
│ │
│ ROLE : Full-stack builder • systems thinker • automation operator │
│ MODE : terminal-first • dark IDE UI • ship fast • iterate relentlessly │
│ STACK : python • rust • js • sql • linux • networking • ai tooling │
│ │
│ SIGNAL : "Break → Rebuild → Master" │
│ NORTH : stability (anchor) → leverage (rocket) → freedom │
└──────────────────────────────────────────────────────────────────────────────┘`;
$("#asciiBanner").textContent = banner;
$("#highlightTime").textContent = new Date().toLocaleString();
}
// ---------- Skills ----------
function renderSkills(){
const grid = $("#skillsGrid");
grid.innerHTML = "";
state.skills.forEach(s=>{
const wrap = document.createElement("div");
wrap.className = "skill";
wrap.innerHTML = `
<div class="top">
<div><span style="color:var(--ink)">${s.name}</span>
<span style="color:var(--muted)"> — ${s.note}</span>
</div>
<span class="badge">${s.level}%</span>
</div>
<div class="bar"><div class="fill" style="width:0%"></div></div>
`;
wrap.addEventListener("click", ()=>boostSkill(s.name));
grid.appendChild(wrap);
requestAnimationFrame(()=> {
const fill = $(".fill", wrap);
fill.style.width = s.level + "%";
});
});
}
function boostSkill(name){
const idx = state.skills.findIndex(s => s.name.toLowerCase() === name.toLowerCase());
if(idx === -1){ toast("unknown skill", `try: ${state.skills.map(s=>s.name).join(", ")}`); return; }
const s = state.skills[idx];
const bump = Math.min(100, s.level + 6);
const old = s.level;
s.level = bump;
renderSkills();
toast(`boost → ${s.name}`, `+${bump-old}% temporary`);
setEnergy(clamp01(state.energy + 0.03));
setTimeout(()=>{
s.level = old;
renderSkills();
toast(`normalize → ${s.name}`, "back to baseline");
}, 2600);
}
// ---------- Radar ----------
function drawRadar(mode="auto"){
const c = $("#radar");
const ctx = c.getContext("2d");
const W = c.width = c.clientWidth * devicePixelRatio;
const H = c.height = c.clientHeight * devicePixelRatio;
ctx.clearRect(0,0,W,H);
const cx = W/2, cy = H/2;
const R = Math.min(W,H)*0.36;
// axes labels
const labels = ["AI", "Infra", "Ops", "Family", "Learning", "Shipping"];
let v = [0.86, 0.88, 0.82, 0.76, 0.79, 0.84];
if(mode === "dvbe") v = [0.52, 0.86, 0.92, 0.78, 0.70, 0.80];
if(mode === "ai") v = [0.94, 0.74, 0.72, 0.70, 0.86, 0.88];
if(mode === "family") v = [0.62, 0.62, 0.70, 0.96, 0.66, 0.60];
// glow background
const grd = ctx.createRadialGradient(cx,cy,0,cx,cy,R*1.9);
grd.addColorStop(0, "rgba(0,229,255,0.10)");
grd.addColorStop(0.55, "rgba(138,92,255,0.06)");
grd.addColorStop(1, "rgba(0,0,0,0)");
ctx.fillStyle = grd;
ctx.fillRect(0,0,W,H);
// grid rings
for(let k=1;k<=4;k++){
ctx.beginPath();
ctx.arc(cx,cy,R*(k/4),0,Math.PI*2);
ctx.strokeStyle = "rgba(255,255,255,0.06)";
ctx.lineWidth = 2;
ctx.stroke();
}
// axes
for(let i=0;i<labels.length;i++){
const a = (Math.PI*2)*(i/labels.length) - Math.PI/2;
const x = cx + Math.cos(a)*R;
const y = cy + Math.sin(a)*R;
ctx.beginPath();
ctx.moveTo(cx,cy);
ctx.lineTo(x,y);
ctx.strokeStyle = "rgba(255,255,255,0.08)";
ctx.lineWidth = 2;
ctx.stroke();
// labels
ctx.font = `${12*devicePixelRatio}px ${getComputedStyle(document.documentElement).getPropertyValue('--mono')}`;
ctx.fillStyle = "rgba(233,238,246,0.78)";
const lx = cx + Math.cos(a)*(R*1.15);
const ly = cy + Math.sin(a)*(R*1.15);
ctx.fillText(labels[i], lx - (labels[i].length*3.3*devicePixelRatio), ly + 5*devicePixelRatio);
}
// polygon
ctx.beginPath();
for(let i=0;i<v.length;i++){
const a = (Math.PI*2)*(i/v.length) - Math.PI/2;
const rr = R*v[i];
const x = cx + Math.cos(a)*rr;
const y = cy + Math.sin(a)*rr;
if(i===0) ctx.moveTo(x,y); else ctx.lineTo(x,y);
}
ctx.closePath();
// fill + stroke
ctx.fillStyle = "rgba(0,229,255,0.10)";
ctx.fill();
ctx.strokeStyle = "rgba(0,229,255,0.35)";
ctx.lineWidth = 3;
ctx.stroke();
// points
for(let i=0;i<v.length;i++){
const a = (Math.PI*2)*(i/v.length) - Math.PI/2;
const rr = R*v[i];
const x = cx + Math.cos(a)*rr;
const y = cy + Math.sin(a)*rr;
ctx.beginPath();
ctx.arc(x,y,4.5*devicePixelRatio,0,Math.PI*2);
ctx.fillStyle = "rgba(255,61,242,0.70)";
ctx.fill();
}
return v.reduce((a,b)=>a+b,0)/v.length;
}
function animateRadar(){
const mode = state.focus;
$("#radarMode").textContent = mode;
const avg = drawRadar(mode);
// energy gently follows radar avg
setEnergy(clamp01(0.55 + avg*0.45));
}
// ---------- Command palette ----------
const modal = $("#modal");
const palInput = $("#palInput");
const palActions = $("#palActions");
function openPalette(){
modal.classList.add("show");
palInput.value = "";
renderPalette("");
setTimeout(()=>palInput.focus(), 0);
}
function closePalette(){
modal.classList.remove("show");
$("#cmd").focus();
}
function renderPalette(q){
const query = q.trim().toLowerCase();
const items = [
{ title:"Open Mission", desc:"Jump to the Mission view", cmd:"open mission" },
{ title:"Open Skills", desc:"See the stack + boost bars", cmd:"open skills" },
{ title:"Focus DVBE", desc:"Set focus mode to DVBE + mobile service", cmd:"focus dvbe" },
{ title:"Focus AI", desc:"Set focus mode to AI builder portfolio", cmd:"focus ai" },
{ title:"Copy Summary", desc:"Copy a clean summary for messages", cmd:"copy" },
{ title:"Print PDF", desc:"Print this page as a resume PDF", cmd:"print" },
{ title:"Theme Neon", desc:"Turn on punchier accents", cmd:"theme neon" }
].filter(x => !query || (x.title.toLowerCase().includes(query) || x.desc.toLowerCase().includes(query) || x.cmd.includes(query)));
palActions.innerHTML = items.map(it=>`
<div class="action" data-cmd="${it.cmd}">
<div class="a1">${it.title}</div>
<div class="a2">${it.desc}<br/><span style="font-family:var(--mono); color:rgba(233,238,246,.86)">↳ ${it.cmd}</span></div>
</div>
`).join("");
$$(".action", palActions).forEach(el=>{
el.addEventListener("click", ()=>{
runCommand(el.dataset.cmd);
closePalette();
});
});
}
// ---------- Commands ----------
function copySummary(){
const text =
`Lalo Morales — Full-stack builder + systems thinker (San Diego / Chula Vista).
Veteran (network ops) + startup operator (automation + portal workflows) now shipping AI/infra tooling daily.
Stack: Python, Rust, JS, SQL, Linux, Networking. Loves terminal-first workflows, clean dashboards, thick-border dark UIs.
Looking for roles in AI tooling, developer experience, automation, integrations, product prototypes.`;
navigator.clipboard.writeText(text).then(()=>{
toast("copied summary", "paste into email / DM / application");
}).catch(()=>{
toast("copy failed", "browser blocked clipboard");
});
}
function setTheme(name){
state.theme = name;
// subtle theme tweaks using CSS variables
if(name === "neon"){
document.documentElement.style.setProperty("--line", "rgba(255,255,255,0.12)");
toast("theme → neon", "punchier edges + glow");
} else if(name === "mono"){
document.documentElement.style.setProperty("--line", "rgba(255,255,255,0.10)");
toast("theme → mono", "minimal contrast");
} else {
document.documentElement.style.setProperty("--line", "#1a1f27");
toast("theme → default", "back to baseline");
}
}
function setFocus(mode){
state.focus = mode;
animateRadar();
toast(`focus → ${mode}`, "your UI colors follow your focus");
}
function runCommand(input){
const raw = input.trim();
if(!raw) return;
const [cmd, ...rest] = raw.split(/\s+/);
const arg = rest.join(" ");
switch(cmd.toLowerCase()){
case "help":
toast("commands:", state.commands.map(c=>c.cmd).join(" • "));
break;
case "open":
if(!arg) return toast("usage", "open overview|timeline|skills|projects|mission|values|contact");
openTab(arg.toLowerCase());
break;
case "focus":
if(!arg) return toast("usage", "focus dvbe|ai|family|auto");
setFocus(arg.toLowerCase());
break;
case "boost":
if(!arg) return toast("usage", "boost rust|python|linux|...");
openTab("skills");
boostSkill(arg);
break;
case "theme":
if(!arg) return toast("usage", "theme default|neon|mono");
setTheme(arg.toLowerCase());
break;
case "copy":
copySummary();
break;
case "print":
window.print();
break;
default:
toast("unknown command", `try "help"`);
}
}
// ---------- Events ----------
// tabs click
$$(".tab").forEach(t=>{
t.addEventListener("click", ()=>openTab(t.dataset.tab));
});
// explorer click
$$(".treeItem").forEach(item=>{
item.addEventListener("click", ()=>{
const t = item.dataset.open;
openTab(t);
});
});
// quick action buttons
$$("[data-action]").forEach(btn=>{
btn.addEventListener("click", ()=>runCommand(btn.dataset.action));
});
// topbar buttons
$("#btnCopy").addEventListener("click", copySummary);
$("#btnPrint").addEventListener("click", ()=>window.print());
// terminal input
$("#cmd").addEventListener("keydown", (e)=>{
if(e.key === "Enter"){
runCommand(e.target.value);
e.target.value = "";
}
if(e.key === "Escape"){
e.target.value = "";
}
});
// Ctrl+K palette
window.addEventListener("keydown", (e)=>{
const isMac = navigator.platform.toLowerCase().includes("mac");
const mod = isMac ? e.metaKey : e.ctrlKey;
if(mod && e.key.toLowerCase() === "k"){
e.preventDefault();
openPalette();
}
if(e.key === "Escape" && modal.classList.contains("show")){
closePalette();
}
});
// palette interactions
palInput.addEventListener("input", ()=>renderPalette(palInput.value));
modal.addEventListener("click", (e)=>{
if(e.target === modal) closePalette();
});
// ---------- Boot ----------
function boot(){
renderAscii();
renderSkills();
randomSpark($("#spark"), 20);
randomSpark($("#spark2"), 20);
$("#nodeCount").textContent = "7 nodes";
animateRadar();
toast("loaded workspace", "Ctrl+K → command palette");
}
boot();
// Slight motion: update sparklines occasionally
setInterval(()=>{
randomSpark($("#spark"), 20);
randomSpark($("#spark2"), 20);
}, 3800);
</script>
</body>
</html>