Skip to content

Commit 9a8c4c1

Browse files
medeirosdevmedeirosdev
committed
feat: add About modal with developer info
- Add 'Sobre o Projeto' button in sidebar footer - Create modal with glassmorphism effect and animations - Display developer info: Guilherme de Medeiros (UNICAMP) - Add LinkedIn and GitHub social links - Show tech stack and project description
1 parent 63690f8 commit 9a8c4c1

File tree

2 files changed

+263
-0
lines changed

2 files changed

+263
-0
lines changed

‎src/components/Sidebar/Sidebar.css‎

Lines changed: 197 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -516,4 +516,201 @@
516516
.sidebar-footer p {
517517
font-size: 0.75rem;
518518
color: var(--color-text-muted);
519+
}
520+
521+
.about-btn {
522+
margin-top: var(--space-sm);
523+
padding: 6px 16px;
524+
font-size: 0.75rem;
525+
background: transparent;
526+
border: 1px solid var(--color-border);
527+
border-radius: var(--radius-md);
528+
color: var(--color-text-muted);
529+
cursor: pointer;
530+
transition: all var(--transition-fast);
531+
}
532+
533+
.about-btn:hover {
534+
background: var(--color-accent-primary);
535+
border-color: var(--color-accent-primary);
536+
color: white;
537+
}
538+
539+
/* =============================================================================
540+
About Modal
541+
============================================================================= */
542+
543+
.about-overlay {
544+
position: fixed;
545+
top: 0;
546+
left: 0;
547+
right: 0;
548+
bottom: 0;
549+
background: rgba(0, 0, 0, 0.7);
550+
backdrop-filter: blur(4px);
551+
display: flex;
552+
align-items: center;
553+
justify-content: center;
554+
z-index: 1000;
555+
animation: fadeIn 0.2s ease;
556+
}
557+
558+
@keyframes fadeIn {
559+
from {
560+
opacity: 0;
561+
}
562+
563+
to {
564+
opacity: 1;
565+
}
566+
}
567+
568+
.about-modal {
569+
background: var(--color-bg-secondary);
570+
border: 1px solid var(--color-border);
571+
border-radius: var(--radius-lg);
572+
padding: var(--space-xl);
573+
max-width: 450px;
574+
width: 90%;
575+
position: relative;
576+
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
577+
animation: slideIn 0.3s ease;
578+
}
579+
580+
@keyframes slideIn {
581+
from {
582+
opacity: 0;
583+
transform: translateY(-20px) scale(0.95);
584+
}
585+
586+
to {
587+
opacity: 1;
588+
transform: translateY(0) scale(1);
589+
}
590+
}
591+
592+
.about-close {
593+
position: absolute;
594+
top: var(--space-md);
595+
right: var(--space-md);
596+
width: 32px;
597+
height: 32px;
598+
border: none;
599+
background: var(--color-bg-tertiary);
600+
border-radius: 50%;
601+
font-size: 1.25rem;
602+
color: var(--color-text-muted);
603+
cursor: pointer;
604+
transition: all var(--transition-fast);
605+
}
606+
607+
.about-close:hover {
608+
background: var(--color-accent-primary);
609+
color: white;
610+
}
611+
612+
.about-modal h2 {
613+
font-size: 1.5rem;
614+
margin: 0 0 var(--space-xs);
615+
background: linear-gradient(135deg, var(--color-accent-primary), var(--color-accent-secondary));
616+
-webkit-background-clip: text;
617+
-webkit-text-fill-color: transparent;
618+
background-clip: text;
619+
}
620+
621+
.about-subtitle {
622+
font-size: 0.875rem;
623+
color: var(--color-text-muted);
624+
margin-bottom: var(--space-lg);
625+
}
626+
627+
.about-section {
628+
margin-bottom: var(--space-lg);
629+
}
630+
631+
.about-section h3 {
632+
font-size: 0.75rem;
633+
text-transform: uppercase;
634+
letter-spacing: 0.05em;
635+
color: var(--color-text-muted);
636+
margin-bottom: var(--space-sm);
637+
}
638+
639+
.about-section p {
640+
font-size: 0.875rem;
641+
color: var(--color-text-secondary);
642+
line-height: 1.6;
643+
}
644+
645+
.about-author {
646+
display: flex;
647+
flex-direction: column;
648+
gap: var(--space-md);
649+
}
650+
651+
.author-info {
652+
display: flex;
653+
flex-direction: column;
654+
gap: 4px;
655+
}
656+
657+
.author-info strong {
658+
font-size: 1rem;
659+
color: var(--color-text-primary);
660+
}
661+
662+
.author-info span {
663+
font-size: 0.875rem;
664+
color: var(--color-text-muted);
665+
}
666+
667+
.author-links {
668+
display: flex;
669+
gap: var(--space-sm);
670+
}
671+
672+
.social-link {
673+
display: inline-flex;
674+
align-items: center;
675+
padding: 8px 16px;
676+
font-size: 0.8125rem;
677+
font-weight: 500;
678+
border-radius: var(--radius-md);
679+
text-decoration: none;
680+
transition: all var(--transition-fast);
681+
}
682+
683+
.social-link.linkedin {
684+
background: #0077B5;
685+
color: white;
686+
}
687+
688+
.social-link.linkedin:hover {
689+
background: #005885;
690+
transform: translateY(-2px);
691+
}
692+
693+
.social-link.github {
694+
background: #333;
695+
color: white;
696+
}
697+
698+
.social-link.github:hover {
699+
background: #1a1a1a;
700+
transform: translateY(-2px);
701+
}
702+
703+
.tech-stack {
704+
font-family: var(--font-mono);
705+
font-size: 0.8125rem !important;
706+
color: var(--color-accent-primary) !important;
707+
}
708+
709+
.about-footer {
710+
font-size: 0.75rem;
711+
color: var(--color-text-muted);
712+
text-align: center;
713+
margin-top: var(--space-lg);
714+
padding-top: var(--space-md);
715+
border-top: 1px solid var(--color-border);
519716
}

‎src/components/Sidebar/Sidebar.tsx‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -251,6 +251,9 @@ export const Sidebar: React.FC<SidebarProps> = ({
251251
new Set(['point', 'spatial'])
252252
);
253253

254+
// Track About modal visibility
255+
const [showAbout, setShowAbout] = useState(false);
256+
254257
const toggleCategory = (categoryId: string) => {
255258
setExpandedCategories(prev => {
256259
const newSet = new Set(prev);
@@ -480,7 +483,70 @@ export const Sidebar: React.FC<SidebarProps> = ({
480483
{/* Footer */}
481484
<div className="sidebar-footer">
482485
<p className="mono">ImageVisLab v1.0</p>
486+
<button
487+
className="about-btn"
488+
onClick={() => setShowAbout(true)}
489+
>
490+
Sobre o Projeto
491+
</button>
483492
</div>
493+
494+
{/* About Modal */}
495+
{showAbout && (
496+
<div className="about-overlay" onClick={() => setShowAbout(false)}>
497+
<div className="about-modal" onClick={(e) => e.stopPropagation()}>
498+
<button className="about-close" onClick={() => setShowAbout(false)}>×</button>
499+
500+
<h2>ImageVisLab</h2>
501+
<p className="about-subtitle">Simulador Interativo de Processamento Digital de Imagens</p>
502+
503+
<div className="about-section">
504+
<h3>Sobre o Projeto</h3>
505+
<p>
506+
Ferramenta educacional desenvolvida para visualizar e experimentar
507+
conceitos de processamento digital de imagens em tempo real.
508+
Inclui operações de ponto, filtros espaciais, morfologia e muito mais.
509+
Espero que ajude nos estudos de Álgebra de Imagens! Tmj!
510+
</p>
511+
</div>
512+
513+
<div className="about-section">
514+
<h3>Desenvolvedor</h3>
515+
<div className="about-author">
516+
<div className="author-info">
517+
<strong>Guilherme de Medeiros</strong>
518+
<span>UNICAMP - Matemática Aplicada e Computacional</span>
519+
</div>
520+
<div className="author-links">
521+
<a
522+
href="https://www.linkedin.com/in/guilhermedemedeiros/"
523+
target="_blank"
524+
rel="noopener noreferrer"
525+
className="social-link linkedin"
526+
>
527+
LinkedIn
528+
</a>
529+
<a
530+
href="https://github.com/medeirosdev"
531+
target="_blank"
532+
rel="noopener noreferrer"
533+
className="social-link github"
534+
>
535+
GitHub
536+
</a>
537+
</div>
538+
</div>
539+
</div>
540+
541+
<div className="about-section">
542+
<h3>Tecnologias</h3>
543+
<p className="tech-stack">React + TypeScript + Vite + Canvas API</p>
544+
</div>
545+
546+
<p className="about-footer">Feito em 24/12/2025</p>
547+
</div>
548+
</div>
549+
)}
484550
</aside>
485551
);
486552
};

0 commit comments

Comments
 (0)