Skip to content

Commit e71110a

Browse files
marcelomcdcursoragent
marcelomcd
and
cursoragent
committed
feat(portfolio): logos empresas, links, layout bento e ONS sem fundo branco
- Logos Quali IT, ONS, TCS, Infosys no card empresas com links para sites oficiais - Layout hero: card do código abaixo do principal, ao lado do card de stats - Logo ONS: mix-blend-mode multiply para remover efeito de fundo branco - CSS: company__logo--blend e posições explícitas no bento-grid Co-authored-by: Cursor <cursoragent@cursor.com>
1 parent 2d24d32 commit e71110a

6 files changed

Lines changed: 71 additions & 38 deletions

File tree

‎assets/infosys.png‎

60.9 KB
Loading

‎assets/ons.png‎

46.5 KB
Loading

‎assets/quali-it.png‎

5.72 KB
Loading

‎assets/tcs.png‎

61 KB
Loading

‎css/style.css‎

Lines changed: 38 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -442,25 +442,30 @@ img {
442442
}
443443

444444
.bento-card--main {
445-
grid-column: span 7;
446-
grid-row: span 2;
445+
grid-column: 1 / span 7;
446+
grid-row: 1 / span 2;
447447
}
448448

449449
.bento-card--photo {
450-
grid-column: span 5;
450+
grid-column: 8 / span 5;
451+
grid-row: 1;
451452
overflow: hidden;
452453
}
453454

454-
.bento-card--stats {
455-
grid-column: span 5;
456-
}
457-
455+
/* Card do código: logo abaixo do principal, à esquerda */
458456
.bento-card--code {
459-
grid-column: span 7;
457+
grid-column: 1 / span 7;
458+
grid-row: 2;
460459
padding: 0;
461460
overflow: hidden;
462461
}
463462

463+
/* Stats: ao lado do card do código, à direita */
464+
.bento-card--stats {
465+
grid-column: 8 / span 5;
466+
grid-row: 2;
467+
}
468+
464469
/* Hero Content */
465470
.hero__greeting {
466471
display: flex;
@@ -1084,21 +1089,41 @@ img {
10841089
opacity: 1;
10851090
}
10861091

1092+
.company__logo a {
1093+
display: flex;
1094+
align-items: center;
1095+
justify-content: center;
1096+
text-decoration: none;
1097+
}
1098+
10871099
.company__logo img {
10881100
max-width: 100%;
1101+
max-height: 72px;
1102+
width: auto;
10891103
height: auto;
1104+
object-fit: contain;
10901105
filter: grayscale(100%);
10911106
transition: filter var(--transition-fast);
10921107
}
10931108

1109+
/* Sem brightness(0) para evitar "tarja" preta em logos com fundo opaco (ONS/TCS) */
10941110
[data-theme="light"] .company__logo img {
1095-
filter: grayscale(100%) brightness(0);
1111+
filter: grayscale(100%);
10961112
}
10971113

10981114
.company__logo:hover img {
10991115
filter: none;
11001116
}
11011117

1118+
/* Logo ONS: fundo branco da imagem some ao fundir com o card (mantém o verde) */
1119+
.company__logo--blend img {
1120+
mix-blend-mode: multiply;
1121+
}
1122+
1123+
[data-theme="light"] .company__logo--blend img {
1124+
mix-blend-mode: multiply;
1125+
}
1126+
11021127
/* Impact Stats */
11031128
.impact__title {
11041129
font-size: 1.5rem;
@@ -1463,10 +1488,10 @@ img {
14631488

14641489
/* ===== Responsive ===== */
14651490
@media screen and (max-width: 1024px) {
1466-
.bento-card--main { grid-column: span 12; }
1467-
.bento-card--photo { grid-column: span 6; }
1468-
.bento-card--stats { grid-column: span 6; }
1469-
.bento-card--code { grid-column: span 12; }
1491+
.bento-card--main { grid-column: 1 / span 12; grid-row: auto; }
1492+
.bento-card--photo { grid-column: 1 / span 12; grid-row: auto; }
1493+
.bento-card--code { grid-column: 1 / span 12; grid-row: auto; }
1494+
.bento-card--stats { grid-column: 1 / span 12; grid-row: auto; }
14701495

14711496
.about__container,
14721497
.contact__container {

‎index.html‎

Lines changed: 33 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -164,26 +164,8 @@ <h2 class="hero__title" data-i18n="hero.title">
164164
</div>
165165
</div>
166166

167-
<!-- Stats Card (moved to horizontal position) -->
168-
<div class="bento-card bento-card--stats glass-card" data-aos="fade-up" data-aos-delay="200">
169-
<div class="stats__grid">
170-
<div class="stat-item">
171-
<div class="stat-number" data-count="6">0</div>
172-
<div class="stat-label" data-i18n="hero.stats.years">Anos de Experiência</div>
173-
</div>
174-
<div class="stat-item">
175-
<div class="stat-number" data-count="50">0</div>
176-
<div class="stat-label" data-i18n="hero.stats.automations">Automações Criadas</div>
177-
</div>
178-
<div class="stat-item">
179-
<div class="stat-number" data-count="15">0</div>
180-
<div class="stat-label" data-i18n="hero.stats.companies">Empresas Atendidas</div>
181-
</div>
182-
</div>
183-
</div>
184-
185-
<!-- Code Card (improved layout) -->
186-
<div class="bento-card bento-card--code glass-card" data-aos="fade-up" data-aos-delay="300">
167+
<!-- Code Card (logo abaixo do card principal, ao lado do stats) -->
168+
<div class="bento-card bento-card--code glass-card" data-aos="fade-up" data-aos-delay="200">
187169
<div class="code-snippet">
188170
<div class="code-header">
189171
<div class="code-dots">
@@ -206,6 +188,24 @@ <h2 class="hero__title" data-i18n="hero.title">
206188
<span class="keyword">return</span> <span class="string">"Automação Inteligente"</span></code></pre>
207189
</div>
208190
</div>
191+
192+
<!-- Stats Card (ao lado do card do código) -->
193+
<div class="bento-card bento-card--stats glass-card" data-aos="fade-up" data-aos-delay="300">
194+
<div class="stats__grid">
195+
<div class="stat-item">
196+
<div class="stat-number" data-count="6">0</div>
197+
<div class="stat-label" data-i18n="hero.stats.years">Anos de Experiência</div>
198+
</div>
199+
<div class="stat-item">
200+
<div class="stat-number" data-count="50">0</div>
201+
<div class="stat-label" data-i18n="hero.stats.automations">Automações Criadas</div>
202+
</div>
203+
<div class="stat-item">
204+
<div class="stat-number" data-count="15">0</div>
205+
<div class="stat-label" data-i18n="hero.stats.companies">Empresas Atendidas</div>
206+
</div>
207+
</div>
208+
</div>
209209
</div>
210210
</div>
211211
</section>
@@ -835,16 +835,24 @@ <h2 class="section__title" data-i18n="recognition.title">Reconhecimento</h2>
835835
<h3 class="companies__title" data-i18n="recognition.companies.title">Empresas Onde Trabalhei</h3>
836836
<div class="companies__grid glass-card">
837837
<div class="company__logo">
838-
<span class="company__name">Quali IT</span>
838+
<a href="https://qualiit.com.br/" target="_blank" rel="noopener noreferrer" aria-label="Quali IT - site oficial">
839+
<img src="assets/quali-it.png" alt="Quali IT" width="120" height="48">
840+
</a>
839841
</div>
840-
<div class="company__logo">
841-
<span class="company__name">ONS</span>
842+
<div class="company__logo company__logo--blend">
843+
<a href="https://www.ons.org.br/" target="_blank" rel="noopener noreferrer" aria-label="ONS - Operador Nacional do Sistema Elétrico">
844+
<img src="assets/ons.png" alt="Operador Nacional do Sistema Elétrico - ONS" width="120" height="48">
845+
</a>
842846
</div>
843847
<div class="company__logo">
844-
<span class="company__name">Tata Consultancy Services</span>
848+
<a href="https://www.tcs.com/" target="_blank" rel="noopener noreferrer" aria-label="Tata Consultancy Services - TCS">
849+
<img src="assets/tcs.png" alt="Tata Consultancy Services - TCS" width="120" height="48">
850+
</a>
845851
</div>
846852
<div class="company__logo">
847-
<span class="company__name">Infosys</span>
853+
<a href="https://www.infosys.com/br/" target="_blank" rel="noopener noreferrer" aria-label="Infosys Brasil">
854+
<img src="assets/infosys.png" alt="Infosys" width="120" height="48">
855+
</a>
848856
</div>
849857
</div>
850858
</div>

0 commit comments

Comments
 (0)