<title>E-Portfolio</title> <style> body { margin: 0; font-family: Arial, sans-serif; background: linear-gradient(135deg, #d6d6d6, #a8a8a8); color: #1e293b; width: 1000px; scroll-behavior: smooth; }

body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(#ffffff 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: 0.2;
  pointer-events: none;
  z-index: -1;
}

/* Header */
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #111827;
  z-index: 1000;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.5);
}
header h1 {
  margin: 0;
  font-size: 24px;
  color: #7c3aed;
  letter-spacing: 1px;
}
nav ul {
  list-style: none;
  display: flex;
  gap: 20px;
  margin: 0;
  padding: 0;
}
nav a {
  text-decoration: none;
  color: #cbd5e1;
  font-weight: bold;
  position: relative;
}
nav a::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -4px;
  left: 0;
  background: #7c3aed;
  transition: width 0.3s;
}
nav a:hover::after {
  width: 100%;
}

/* Home Section */
#home {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  gap: 40px;
  background: radial-gradient(circle at top left, #f3f4f6, #d6d6d6);
}
#home img {
  width: 260px;
  height: 260px;
  object-fit: cover;
  border-radius: 50%;
  border: 4px solid #7c3aed;
  box-shadow: 0 0 20px rgba(124,58,237,0.6);
}
#home .description {
  max-width: 500px;
}
#home h2 {
  margin: 0;
  font-size: 28px;
  color: #7c3aed;
}
#home p {
  line-height: 1.6;
  color: #1e293b;
}

/* About Section */
#about h2 {
  margin-bottom: 30px;
  font-size: 30px;
  color: #7c3aed;
}
.ab {
  display: flex;
  gap: 50px;
  max-width: 1000px;
  margin: 50px auto;
  padding: 40px;
  background: white;
  border-radius: 15px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
:root{--gap:12px;--card-radius:12px;--card-w:720px}
*{box-sizing:border-box}
body{font-family:system-ui, -apple-system, 'Segoe UI', Roboto, Arial; margin:28px; background:#f4f6fb}
.container{max-width:1000px;margin:0 auto}
h1{text-align:center;margin-bottom:10px}
.group-card{
  width:100%;max-width:var(--card-w);margin:16px auto;padding:14px;border-radius:var(--card-radius);background:#fff;box-shadow:0 8px 28px rgba(3,10,18,0.08);cursor:pointer;display:flex;gap:var(--gap);align-items:center}
.thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;flex:1}
.thumbs img{width:100%;height:110px;object-fit:cover;border-radius:8px;display:block}
.group-info{min-width:180px;padding-left:8px}
.group-info h2{margin:0 0 6px 0;font-size:16px}
.group-info p{margin:0;color:#475569;font-size:14px}

/* modal/gallery */
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,0.7);z-index:999}
.modal.open{display:flex}
.gallery{position:relative;max-width:92vw;max-height:88vh;background:#000;border-radius:10px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.gallery img{max-width:100%;max-height:100%;display:block}
.gbtn{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,0.9);border:0;padding:10px;border-radius:8px;cursor:pointer;font-weight:700}
.prev{left:12px}
.next{right:12px}
.close{top:12px;right:12px;transform:none}
.counter{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);color:#fff;background:rgba(0,0,0,0.35);padding:6px 10px;border-radius:8px;font-size:13px}

@media (max-width:640px){.thumbs img{height:80px}.group-info{display:none}}
.about-photo img {
  width: 100%;
  max-width: 300px;
  border-radius: 12px;
  object-fit: cover;
}
.about-details {
  flex: 2;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.detail-box {
  background: #fafafa;
  padding: 15px 20px;
  border-left: 5px solid #00796b;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  transition: transform 0.2s;
}
.detail-box:hover {
  transform: translateX(5px);
}
.detail-box h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #00796b;
}
.detail-box p {
  margin: 5px 0 0;
  font-size: 15px;
}

/* Skills Section */
#skills {
  padding: 60px 20px;
  text-align: center;
  background: #f1f5f9;
}
#skills h2 {
  margin-bottom: 30px;
  font-size: 30px;
  color: #7c3aed;
}
.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 25px;
  max-width: 1100px;
  margin: auto;
}
.skills-card {
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  text-align: center;
  padding: 20px;
  transition: transform 0.3s, box-shadow 0.3s;
  border: 2px solid transparent;
}
.skills-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 6px 15px rgba(0,0,0,0.3);
  border-color: #7c3aed;
}
.skills-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 12px;
}
.skills-card h3 {
  margin: 8px 0;
  color: #7c3aed;
}
.skills-card p {
  margin: 0;
  font-size: 14px;
  color: #475569;
}

/* Experience Section */
#experience {
  padding: 60px 20px;
  text-align: center;
  background: #f8fafc;
}
#experience h2 {
  font-size: 30px;
  color: #7c3aed;
  margin-bottom: 30px;
}
.experience-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 25px;
  max-width: 1100px;
  margin: auto;
}
.exp-card {
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 15px rgba(0,0,0,0.15);
  transition: transform 0.3s;
}
.exp-card:hover {
  transform: translateY(-6px);
}
.exp-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}
.exp-card p {
  padding: 12px;
  margin: 0;
  font-size: 14px;
  color: #475569;
  text-align: center;
}

/* Contact Section */
#contact {
  padding: 50px 20px;
  text-align: center;
  background: #e2e8f0;
}
.card {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.8));
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(2,6,23,0.3);
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 20px;
  padding: 20px;
  align-items: center;
}
.avatar {
  width: 120px;
  height: 120px;
  border-radius: 12px;
  background: linear-gradient(135deg, #7c3aed, #9333ea);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 28px;
  color: white;
}
.info h1 {
  margin: 0 0 6px 0;
  font-size: 20px;
  letter-spacing: 0.2px;
}
.info p.role {
  margin: 0 0 12px 0;
  color: #475569;
  font-size: 13px;
}
.contacts {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.contact-item {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  background: rgba(124,58,237,0.05);
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  transition: transform .12s ease, background .12s ease;
}
.contact-item:hover {
  transform: translateY(-4px);
  background: rgba(124,58,237,0.1);
}
.icon {
  width: 36px;
  height: 36px;
  display: inline-grid;
  place-items: center;
  background: rgba(124,58,237,0.15);
  border-radius: 8px;
  flex: 0 0 36px;
}
.meta {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.meta .label { font-size: 12px; color: #475569; }
.meta .value { font-size: 14px; font-weight: 600; }
.actions {
  margin-top: 10px;
  display: flex;
  gap: 8px;
}
.btn {
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  text-decoration: none;
  color: white;
  background: #7c3aed;
  font-weight: 600;
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

</style>

E-Portfolio

• Home
• About
• Skills
• Experiences
• Contact

<div class="description">
  <h2>Ben Jasper T. <br> Solitario</h2>
  <p>IT Graduate | Network Specialist | Hardware Specialist | Technical Support</p>
  <p>Welcome to my portfolio! I am passionate about technology, problem-solving, and delivering efficient IT solutions to real-world challenges.</p>
</div>

About

Grouped Photo Card — Click anywhere to open gallery

<div class="group-card" id="groupCard" tabindex="0" role="button" aria-label="Open photo gallery">
  <div class="thumbs" id="thumbs">
    <img src="https://picsum.photos/seed/201/600/400" alt="Photo 1" data-large="https://picsum.photos/seed/201/1200/800">
    <img src="https://picsum.photos/seed/202/600/400" alt="Photo 2" data-large="https://picsum.photos/seed/202/1200/800">
    <img src="https://picsum.photos/seed/203/600/400" alt="Photo 3" data-large="https://picsum.photos/seed/203/1200/800">
    <img src="https://picsum.photos/seed/204/600/400" alt="Photo 4" data-large="https://picsum.photos/seed/204/1200/800">
  </div>
  <div class="group-info">
    <h2>My Photos</h2>
    <p>Click this card to open all photos in a lightbox gallery. Use ← and → or the buttons to navigate.</p>
  </div>
</div>

◀ ▶ ✕

1 / 4

<script> const groupCard = document.getElementById('groupCard'); const modal = document.getElementById('modal'); const galleryImg = document.getElementById('galleryImg'); const prevBtn = document.getElementById('prevBtn'); const nextBtn = document.getElementById('nextBtn'); const closeBtn = document.getElementById('closeBtn'); const counter = document.getElementById('counter'); // collect images from the thumbs const thumbs = Array.from(document.querySelectorAll('#thumbs img')); const images = thumbs.map(t => t.getAttribute('data-large') || t.src); let index = 0; function openGallery(start = 0){ index = start; galleryImg.src = images[index]; counter.textContent = (index+1) + ' / ' + images.length; modal.classList.add('open'); modal.setAttribute('aria-hidden','false'); closeBtn.focus(); } function closeGallery(){ modal.classList.remove('open'); modal.setAttribute('aria-hidden','true'); galleryImg.src = ''; } function showNext(){ index = (index + 1) % images.length; galleryImg.src = images[index]; counter.textContent = (index+1)+' / '+images.length } function showPrev(){ index = (index - 1 + images.length) % images.length; galleryImg.src = images[index]; counter.textContent = (index+1)+' / '+images.length } // open when clicking the whole group card groupCard.addEventListener('click', ()=> openGallery(0)); groupCard.addEventListener('keydown', (e)=>{ if(e.key === 'Enter' || e.key === ' ') { e.preventDefault(); openGallery(0) } }); // also allow clicking any thumbnail to open starting at that image thumbs.forEach((t,i)=> t.addEventListener('click',(e)=>{ e.stopPropagation(); openGallery(i) })); prevBtn.addEventListener('click', (e)=>{ e.stopPropagation(); showPrev() }); nextBtn.addEventListener('click', (e)=>{ e.stopPropagation(); showNext() }); closeBtn.addEventListener('click', closeGallery); // close when clicking backdrop modal.addEventListener('click', (e)=>{ if(e.target === modal) closeGallery() }); // keyboard support document.addEventListener('keydown', (e)=>{ if(modal.classList.contains('open')){ if(e.key === 'Escape') closeGallery(); if(e.key === 'ArrowRight') showNext(); if(e.key === 'ArrowLeft') showPrev(); } }); </script>

  </div>
  <div class="about-details">
    <div class="detail-box">
      <h3>IT Graduate</h3>
      <p>Caraga State University (2020–2025)</p>
    </div>
    <div class="detail-box">
      <h3>NCII Holder</h3>
      <p>Computer Systems Servicing (2020)</p>
    </div>
    <div class="detail-box">
      <h3>Student Leader</h3>
      <p>Caraga State University (2021–2025)</p>
    </div>
    <div class="detail-box">
      <h3>Civil Service Passer</h3>
      <p>Professional Eligibility</p>
    </div>
  </div>
</div>

Skills

Networking

I have hands-on experience configuring routers, switches, and firewalls to ensure secure and reliable connectivity. I monitor traffic, troubleshoot network issues, and optimize performance.

Computer Hardware Specialist

Skilled in assembling, upgrading, and repairing computer systems. Experienced in diagnosing hardware problems, replacing faulty components, and improving performance of desktops and laptops.

Web Development

Designing and developing responsive websites using HTML, CSS, and JavaScript. I create clean layouts and ensure compatibility across devices.

Teamwork

Effective in collaborating with teams on technical projects, sharing responsibilities, and ensuring successful outcomes through communication and cooperation.

My Experiences

Networking project setup and troubleshooting.

Provided technical support for clients.

Configured routers and switches in lab.

Hardware diagnostics and repair workshop.

Assisted in IT event coordination.

Developed portfolio website project.

Internship in IT support role. Network maintenance and safety.

Collaborated with a team on networking tasks.

Contact

CT

Contact

Quick links — reach out anytime

📘

Facebook facebook.com/bentoy

✉️

Email benjasperteves@gmail.com

📞

Phone 0908818424

🔗

Link link

Email me Call