Skip to content

Commit ebe5fde

Browse files
SebiGitHubSebiGitHub
committed
Cambios sutiles y fondo
Sigo modificando el fondo y pequeños cambios sutiles.
1 parent 189251d commit ebe5fde

4 files changed

Lines changed: 171 additions & 44 deletions

File tree

‎assets/css/styles.css‎

Lines changed: 86 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ html,body{ margin:0; }
2222
html{ scroll-behavior:smooth; }
2323

2424
body{
25-
background: var(--bg);
25+
background: url("../img/bg-hero.png") center/cover fixed no-repeat;
2626
color: var(--text);
2727
font-family: Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
2828
}
@@ -38,14 +38,10 @@ body::before{
3838
inset: 0;
3939
pointer-events: none;
4040
z-index: 0;
41-
42-
background:
43-
radial-gradient(900px 700px at 20% 15%, rgba(124,58,237,.32), transparent 60%),
44-
radial-gradient(900px 700px at 80% 25%, rgba(236,72,153,.20), transparent 60%),
45-
radial-gradient(900px 700px at 60% 85%, rgba(34,211,238,.18), transparent 65%),
46-
linear-gradient(180deg, #050615 0%, #07081a 55%, #050615 100%);
41+
background: rgba(5,6,21,.72); /* oscurece para legibilidad */
4742
}
4843

44+
4945
/* Spotlight reducido (≈ 1/4 del tamaño original) */
5046
body::after{
5147
content:"";
@@ -78,17 +74,6 @@ h1{ font-size: clamp(32px,6vw,52px); margin:0 0 12px; }
7874
h2{ font-size: clamp(22px,3.5vw,32px); margin:0 0 16px; text-align:center; }
7975
p{ color: var(--muted); line-height:1.7; }
8076

81-
/* Watermark sutil en secciones */
82-
.section::after{
83-
content:"";
84-
position:absolute;
85-
inset:0;
86-
background: url("../img/logo-s.png") no-repeat 90% 20%;
87-
background-size: 120px;
88-
opacity: .03;
89-
pointer-events: none;
90-
}
91-
9277
/* Grids */
9378
#projects-grid,#skills-grid,#xp-list,#services-list{
9479
display:grid;
@@ -120,6 +105,11 @@ p{ color: var(--muted); line-height:1.7; }
120105
align-items:center;
121106
}
122107

108+
.nav .nav-btn{
109+
padding: 8px 12px;
110+
font-size: 14px;
111+
}
112+
123113
.brand{
124114
display:flex;
125115
align-items:center;
@@ -142,6 +132,13 @@ p{ color: var(--muted); line-height:1.7; }
142132
}
143133
.nav a:hover{ color: var(--text); }
144134

135+
.nav a.btn{
136+
color: #0b0f14;
137+
}
138+
.nav a.btn:hover{
139+
color: #ffffff;
140+
}
141+
145142
/* =========================
146143
5) Botones (CTA)
147144
========================= */
@@ -224,10 +221,10 @@ p{ color: var(--muted); line-height:1.7; }
224221
}
225222

226223
.hero-logo{
227-
width: 90px;
224+
width: 140px;
228225
margin-bottom: 18px;
229226
filter: drop-shadow(0 20px 60px rgba(124,58,237,.6));
230-
opacity:.9;
227+
opacity: .95;
231228
animation: floatLogo 6s ease-in-out infinite;
232229
}
233230

@@ -411,15 +408,22 @@ p{ color: var(--muted); line-height:1.7; }
411408
.contact-arrows{
412409
display:flex;
413410
justify-content:center;
414-
gap:140px;
415-
margin: 6px 0 14px;
411+
gap: 120px;
412+
margin: 6px 0 12px;
413+
}
416414

417-
font-size:26px;
418-
font-weight:900;
419-
color: rgba(196,181,253,.9);
420-
text-shadow: 0 10px 40px rgba(124,58,237,.35);
415+
.contact-arrows .arrow{
416+
font-size: 46px;
417+
font-weight: 900;
418+
line-height: 1;
419+
background: linear-gradient(90deg, var(--violet), var(--cyan));
420+
-webkit-background-clip: text;
421+
background-clip: text;
422+
color: transparent;
423+
filter: drop-shadow(0 14px 40px rgba(124,58,237,.35));
421424
}
422425

426+
423427
.contact-actions{
424428
display:flex;
425429
flex-wrap:wrap;
@@ -429,16 +433,18 @@ p{ color: var(--muted); line-height:1.7; }
429433
}
430434

431435
.btn-icon{
432-
width:18px;
433-
height:18px;
434-
object-fit:contain;
436+
width: 1.1em;
437+
height: 1.1em;
438+
object-fit: contain;
439+
transform: translateY(1px);
435440
filter: drop-shadow(0 6px 18px rgba(0,0,0,.35));
436441
}
437442

438443
.contact-footer{
439444
text-align:center;
440445
color: var(--muted);
441-
padding-top: 6px;
446+
padding-top: 2px;
447+
padding-bottom: 6px; /* 👈 pegadito al final */
442448
}
443449

444450
/* =========================
@@ -478,8 +484,57 @@ p{ color: var(--muted); line-height:1.7; }
478484
grid-template-columns: 1fr;
479485
}
480486

487+
#services-list{
488+
list-style: none;
489+
padding: 0;
490+
margin: 0;
491+
}
492+
481493
h1{ font-size: clamp(26px, 8vw, 34px); }
482494
h2{ font-size: clamp(20px, 6vw, 26px); }
483495

484496
.contact-arrows{ gap: 90px; }
485-
}
497+
}
498+
499+
.nav-left{
500+
display:flex;
501+
align-items:center;
502+
gap: 14px;
503+
}
504+
505+
.brand img{
506+
height: 44px; /* 👈 más grande */
507+
}
508+
509+
.search-wrap{
510+
display:flex;
511+
align-items:center;
512+
gap: 10px;
513+
}
514+
515+
.search{
516+
width: 220px;
517+
padding: 10px 12px;
518+
border-radius: 12px;
519+
border: 1px solid rgba(255,255,255,.14);
520+
background: rgba(0,0,0,.18);
521+
color: var(--text);
522+
outline: none;
523+
}
524+
525+
.search::placeholder{
526+
color: rgba(229,231,235,.55);
527+
}
528+
529+
.btn.btn-icononly{
530+
padding: 10px 12px;
531+
border-radius: 12px;
532+
}
533+
534+
mark.hit{
535+
background: rgba(34,211,238,.22);
536+
color: #ffffff;
537+
padding: 0 .18em;
538+
border-radius: 6px;
539+
border: 1px solid rgba(34,211,238,.25);
540+
}

‎assets/img/logo-s-trasparente.png‎

194 KB
Loading

‎assets/js/app.js‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -198,3 +198,61 @@ function updateLangToggle(){
198198
pills.forEach(p => p.classList.toggle('active', p.dataset.lang === STATE.lang));
199199
}
200200

201+
function clearMarks(){
202+
document.querySelectorAll("mark.hit").forEach(m=>{
203+
const text = document.createTextNode(m.textContent);
204+
m.replaceWith(text);
205+
});
206+
}
207+
208+
function markQuery(q){
209+
clearMarks();
210+
if (!q || q.trim().length < 2) return;
211+
212+
const query = q.trim();
213+
const root = document.querySelector("main");
214+
if (!root) return;
215+
216+
const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, {
217+
acceptNode(node){
218+
const p = node.parentElement;
219+
if (!p) return NodeFilter.FILTER_REJECT;
220+
if (["SCRIPT","STYLE"].includes(p.tagName)) return NodeFilter.FILTER_REJECT;
221+
if (!node.nodeValue || !node.nodeValue.trim()) return NodeFilter.FILTER_REJECT;
222+
return NodeFilter.FILTER_ACCEPT;
223+
}
224+
});
225+
226+
const nodes = [];
227+
while (walker.nextNode()) nodes.push(walker.currentNode);
228+
229+
const re = new RegExp(query.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), "gi");
230+
nodes.forEach(n=>{
231+
const txt = n.nodeValue;
232+
if (!re.test(txt)) return;
233+
234+
const frag = document.createDocumentFragment();
235+
let last = 0;
236+
txt.replace(re, (match, offset)=>{
237+
frag.appendChild(document.createTextNode(txt.slice(last, offset)));
238+
const mark = document.createElement("mark");
239+
mark.className = "hit";
240+
mark.textContent = match;
241+
frag.appendChild(mark);
242+
last = offset + match.length;
243+
});
244+
frag.appendChild(document.createTextNode(txt.slice(last)));
245+
n.parentNode.replaceChild(frag, n);
246+
});
247+
248+
const first = document.querySelector("mark.hit");
249+
if (first) first.scrollIntoView({ behavior:"smooth", block:"center" });
250+
}
251+
252+
const searchInput = document.getElementById("site-search");
253+
const searchBtn = document.getElementById("search-btn");
254+
255+
searchBtn?.addEventListener("click", ()=> markQuery(searchInput?.value || ""));
256+
searchInput?.addEventListener("keydown", (e)=>{
257+
if (e.key === "Enter") markQuery(searchInput.value);
258+
});

‎index.html‎

Lines changed: 27 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -37,18 +37,30 @@
3737

3838
<body>
3939
<header class="nav">
40-
<a class="brand" href="#hero">
41-
<img src="assets/img/logo-s.png" alt="Logo Sebi" />
42-
<span>Sebi</span>
43-
</a>
40+
<div class="nav-left">
41+
<a class="brand" href="#hero">
42+
<img src="assets/img/logo-s-trasparente.png" alt="Logo Sebi" />
43+
<span>Sebi</span>
44+
</a>
45+
46+
<div class="search-wrap">
47+
<button id="search-btn" class="btn btn-icononly" aria-label="Buscar">
48+
🔍
49+
</button>
50+
51+
<input id="site-search" class="search" type="search"
52+
placeholder="Buscar…" autocomplete="off">
53+
</div>
54+
</div>
4455

4556
<nav>
46-
<a href="#about" data-i18n="nav.about">Sobre mí</a>
47-
<a href="#skills" data-i18n="nav.skills">Skills</a>
48-
<a href="#projects" data-i18n="nav.projects">Proyectos</a>
49-
<a href="#xp" data-i18n="nav.xp">Experiencia & Certs</a>
50-
<a href="#services" data-i18n="nav.services">Servicios</a>
57+
<a href="#about" class="btn nav-btn" data-i18n="nav.about">Sobre mí</a>
58+
<a href="#skills" class="btn nav-btn" data-i18n="nav.skills">Skills</a>
59+
<a href="#projects" class="btn nav-btn" data-i18n="nav.projects">Proyectos</a>
60+
<a href="#xp" class="btn nav-btn" data-i18n="nav.xp">Experiencia & Certs</a>
61+
<a href="#services" class="btn nav-btn" data-i18n="nav.services">Servicios</a>
5162
<a href="#contact" class="btn" data-i18n="nav.contact">Contacto</a>
63+
5264
<button id="lang-toggle" class="lang-toggle" aria-label="Cambiar idioma">
5365
<span class="lang-pill" data-lang="es">ES</span>
5466
<span class="lang-pill" data-lang="en">EN</span>
@@ -58,7 +70,7 @@
5870

5971
<main>
6072
<section id="hero" class="section hero">
61-
<img src="assets/img/logo-s.png" alt="" class="hero-logo" />
73+
<img src="assets/img/logo-s-trasparente.png" alt="" class="hero-logo" />
6274
<h1 data-i18n="hero.title">Desarrollo, automatizo y diseño experiencias web.</h1>
6375
<p data-i18n="hero.subtitle">DAM · Salesforce APEX · WordPress · Frontend</p>
6476
<a href="#projects" class="btn" data-i18n="hero.cta">Ver proyectos</a>
@@ -98,10 +110,12 @@ <h2 data-i18n="contact.title">Contacto</h2>
98110

99111
<!-- Flechas -->
100112
<div class="contact-arrows" aria-hidden="true">
101-
<span>↙</span>
102-
<span>↘</span>
113+
<span class="arrow">↙</span>
114+
<span class="arrow">↓</span>
115+
<span class="arrow">↘</span>
103116
</div>
104117

118+
105119
<div class="contact-actions">
106120
<a id="contact-email" class="btn"
107121
href="mailto:sebitaexporu@gmail.com"
@@ -132,6 +146,6 @@ <h2 data-i18n="contact.title">Contacto</h2>
132146
</main>
133147

134148
<script src="assets/js/app.js?v=2"></script>
135-
149+
136150
</body>
137151
</html>

0 commit comments

Comments
 (0)