Skip to content

Commit 33c22bd

Browse files
PheogrammerPheogrammer
authored
Update index.html
1 parent 74e1be4 commit 33c22bd

File tree

1 file changed

+288
-65
lines changed

1 file changed

+288
-65
lines changed

‎index.html

Lines changed: 288 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -347,6 +347,248 @@
347347
border-radius: 8px;
348348
}
349349
}
350+
/* Experience Section */
351+
#experience {
352+
padding: 5rem 2rem;
353+
}
354+
355+
.experience-header {
356+
text-align: center;
357+
margin-bottom: 3rem;
358+
}
359+
360+
.experience-header h2 {
361+
font-size: 2.8rem;
362+
color: white;
363+
margin-bottom: 1rem;
364+
position: relative;
365+
display: inline-block;
366+
}
367+
368+
.experience-header h2::after {
369+
content: '';
370+
position: absolute;
371+
bottom: -10px;
372+
left: 50%;
373+
transform: translateX(-50%);
374+
width: 80px;
375+
height: 4px;
376+
background: var(--accent);
377+
}
378+
379+
.timeline {
380+
position: relative;
381+
max-width: 1200px;
382+
margin: 0 auto;
383+
}
384+
385+
.timeline::before {
386+
content: '';
387+
position: absolute;
388+
width: 6px;
389+
background: var(--secondary);
390+
top: 0;
391+
bottom: 0;
392+
left: 50%;
393+
margin-left: -3px;
394+
border-radius: 10px;
395+
}
396+
397+
.job {
398+
padding: 1.5rem 2rem;
399+
position: relative;
400+
background: rgba(255, 255, 255, 0.95);
401+
border-radius: 12px;
402+
margin-bottom: 3rem;
403+
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
404+
transition: all 0.3s ease;
405+
}
406+
407+
.job:hover {
408+
transform: translateY(-5px);
409+
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
410+
}
411+
412+
.job::after {
413+
content: '';
414+
position: absolute;
415+
width: 25px;
416+
height: 25px;
417+
right: -17px;
418+
background-color: white;
419+
border: 4px solid var(--accent);
420+
top: 30px;
421+
border-radius: 50%;
422+
z-index: 1;
423+
}
424+
425+
.left {
426+
left: 0;
427+
}
428+
429+
.right {
430+
left: 50%;
431+
}
432+
433+
.job-header {
434+
display: flex;
435+
align-items: center;
436+
margin-bottom: 1rem;
437+
}
438+
439+
.job-logo {
440+
width: 60px;
441+
height: 60px;
442+
border-radius: 50%;
443+
background: white;
444+
display: flex;
445+
align-items: center;
446+
justify-content: center;
447+
margin-right: 1.5rem;
448+
box-shadow: 0 3px 10px rgba(0,0,0,0.1);
449+
overflow: hidden;
450+
}
451+
452+
.job-logo img {
453+
max-width: 80%;
454+
max-height: 80%;
455+
}
456+
457+
.job-title {
458+
flex: 1;
459+
}
460+
461+
.job-title h3 {
462+
font-size: 1.5rem;
463+
margin-bottom: 0.3rem;
464+
color: var(--primary);
465+
}
466+
467+
.job-meta {
468+
display: flex;
469+
flex-wrap: wrap;
470+
gap: 1rem;
471+
margin-bottom: 1rem;
472+
}
473+
474+
.meta-item {
475+
display: flex;
476+
align-items: center;
477+
font-size: 0.9rem;
478+
color: #666;
479+
}
480+
481+
.meta-item i {
482+
margin-right: 0.5rem;
483+
color: var(--secondary);
484+
}
485+
486+
.job-content {
487+
margin-bottom: 1.5rem;
488+
}
489+
490+
.job-content ul {
491+
list-style-type: none;
492+
padding-left: 1.5rem;
493+
}
494+
495+
.job-content li {
496+
position: relative;
497+
margin-bottom: 0.8rem;
498+
line-height: 1.6;
499+
}
500+
501+
.job-content li::before {
502+
content: '▹';
503+
position: absolute;
504+
left: -1.5rem;
505+
color: var(--accent);
506+
}
507+
508+
.tech-skills {
509+
margin-top: 1.5rem;
510+
}
511+
512+
.tech-skills h4 {
513+
font-size: 1.1rem;
514+
margin-bottom: 0.8rem;
515+
color: var(--primary);
516+
}
517+
518+
.skill-tags {
519+
display: flex;
520+
flex-wrap: wrap;
521+
gap: 0.5rem;
522+
}
523+
524+
.skill-tag {
525+
background: rgba(52, 152, 219, 0.1);
526+
color: var(--secondary);
527+
padding: 0.4rem 0.8rem;
528+
border-radius: 20px;
529+
font-size: 0.8rem;
530+
font-weight: 600;
531+
}
532+
533+
.project-highlight {
534+
margin-top: 1.5rem;
535+
padding: 1.2rem;
536+
background: rgba(231, 76, 60, 0.08);
537+
border-left: 4px solid var(--accent);
538+
border-radius: 0 4px 4px 0;
539+
}
540+
541+
.project-highlight h4 {
542+
margin-bottom: 0.5rem;
543+
color: var(--primary);
544+
}
545+
546+
/* Responsive Timeline */
547+
@media screen and (max-width: 768px) {
548+
.timeline::before {
549+
left: 31px;
550+
}
551+
552+
.job {
553+
width: 100%;
554+
padding-left: 70px;
555+
padding-right: 25px;
556+
}
557+
558+
.job::after {
559+
left: 18px;
560+
}
561+
562+
.left::after, .right::after {
563+
left: 18px;
564+
}
565+
566+
.right {
567+
left: 0%;
568+
}
569+
}
570+
571+
/* Animation */
572+
@keyframes fadeInUp {
573+
from {
574+
opacity: 0;
575+
transform: translateY(20px);
576+
}
577+
to {
578+
opacity: 1;
579+
transform: translateY(0);
580+
}
581+
}
582+
583+
.job {
584+
animation: fadeInUp 0.6s ease forwards;
585+
}
586+
587+
.job:nth-child(1) { animation-delay: 0.1s; }
588+
.job:nth-child(2) { animation-delay: 0.2s; }
589+
.job:nth-child(3) { animation-delay: 0.3s; }
590+
.job:nth-child(4) { animation-delay: 0.4s; }
591+
.job:nth-child(5) { animation-delay: 0.5s; }
350592
</style>
351593
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">
352594
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
@@ -397,73 +639,54 @@ <h1>Alfeo Raymond</h1>
397639
<h2>Professional Journey</h2>
398640

399641
<div class="timeline">
400-
<!-- Current Role -->
401-
<div class="job">
402-
<h3>ICT Supervisor</h3>
403-
<p class="meta">Médecins Sans Frontières (Switzerland) | Liwale, Tanzania | May 2024 - Present</p>
404-
<ul>
405-
<li>Manage IT/Telecom infrastructure ensuring <strong>100% operational continuity</strong> for remote healthcare services in challenging environments</li>
406-
<li>Implement security protocols that reduced system vulnerabilities by <strong>40%</strong> through firewall optimization and access controls</li>
407-
<li>Lead a team maintaining servers, communication tools, and field equipment serving <strong>50+ healthcare staff</strong></li>
408-
</ul>
409-
<div class="tech-tags">
410-
<span>Windows Server</span>
411-
<span>Network Security</span>
412-
<span>Cloud Storage</span>
413-
</div>
414-
</div>
415-
416-
<!-- Save the Children -->
417-
<div class="job">
418-
<h3>Technology for Development Officer</h3>
419-
<p class="meta">Save the Children International | Dar es Salaam | Nov 2023 - Apr 2024</p>
420-
<ul>
421-
<li>Developed <strong>AI-powered USSD/SMS platform</strong> delivering maternal health education to <strong>3,000+ beneficiaries</strong> in Dodoma/Morogoro</li>
422-
<li>Implemented monitoring systems that improved program evaluation efficiency by <strong>60%</strong></li>
423-
<li>Conducted security audits achieving <strong>100% compliance</strong> with international data protection standards</li>
424-
</ul>
425-
<div class="tech-tags">
426-
<span>Python</span>
427-
<span>Twilio API</span>
428-
<span>AI Analytics</span>
429-
</div>
430-
</div>
431-
432-
<!-- Human-Centered Design Consultant -->
433-
<div class="job">
434-
<h3>Human-Centered Design Consultant</h3>
435-
<p class="meta">Tanzania Ministry of Health (UNICEF Project) | Apr - Nov 2023</p>
436-
<ul>
437-
<li>Co-designed interventions increasing childhood vaccination rates by <strong>25%</strong> in Ilala District through community engagement</li>
438-
<li>Trained <strong>50+ health workers</strong> in HCD methodologies to identify barriers and co-design solutions</li>
439-
<li>Facilitated prototyping sessions that resulted in <strong>3 field-tested solutions</strong> for vaccine delivery challenges</li>
440-
</ul>
441-
<div class="tech-tags">
442-
<span>HCD</span>
443-
<span>Prototyping</span>
444-
<span>User Research</span>
445-
</div>
446-
</div>
447-
448-
<!-- UDSM Role -->
449-
<div class="job">
450-
<h3>Software & Systems Engineer</h3>
451-
<p class="meta">University of Dar es Salaam | Nov 2019 - Nov 2023</p>
452-
<ul>
453-
<li>Built e-learning platforms serving <strong>10,000+ students</strong>, reducing system downtime by <strong>30%</strong></li>
454-
<li>Developed operational management systems that improved administrative efficiency by <strong>25%</strong></li>
455-
<li>Mentored <strong>50+ student developers</strong> in software engineering best practices</li>
456-
</ul>
457-
<div class="tech-tags">
458-
<span>PHP</span>
459-
<span>Laravel</span>
460-
<span>MySQL</span>
461-
</div>
462-
</div>
463-
464-
<!-- Additional roles would follow the same pattern -->
642+
<!-- UNICC Experience -->
643+
<div class="job left">
644+
<div class="job-header">
645+
<div class="job-logo">
646+
<img src="path/to/unicc-logo.png" alt="UNICC Logo">
647+
</div>
648+
<div class="job-title">
649+
<h3>Innovative Technologies - UNICC</h3>
650+
<div class="job-meta">
651+
<span class="meta-item"><i class="fas fa-briefcase"></i> Internship</span>
652+
<span class="meta-item"><i class="fas fa-calendar-alt"></i> Sep 2024 - Present · 7 mos</span>
653+
<span class="meta-item"><i class="fas fa-map-marker-alt"></i> Brindisi, Italy (Remote)</span>
465654
</div>
466655
</div>
656+
</div>
657+
658+
<div class="job-content">
659+
<ul>
660+
<li>Researched emerging technologies like AI, ML, Blockchain, and IoT for humanitarian applications</li>
661+
<li>Analyzed data trends to suggest innovative tech solutions aligned with organizational goals</li>
662+
<li>Collaborated with cross-functional teams to gather user requirements and ensure tech solutions met their needs</li>
663+
<li>Designed eLearning contents using Articulate 360 and tested learning management systems</li>
664+
<li>Managed Microsoft SharePoint sites including content design, access management, and reporting</li>
665+
<li>Conducted AI tools analysis, testing and prototyping for organizational adoption</li>
666+
</ul>
667+
</div>
668+
669+
<div class="tech-skills">
670+
<h4>Key Skills Applied:</h4>
671+
<div class="skill-tags">
672+
<span class="skill-tag">Procedural Analysis</span>
673+
<span class="skill-tag">AI/ML Research</span>
674+
<span class="skill-tag">Articulate 360</span>
675+
<span class="skill-tag">SharePoint</span>
676+
<span class="skill-tag">Data Analysis</span>
677+
<span class="skill-tag">Technical Documentation</span>
678+
</div>
679+
</div>
680+
</div>
681+
682+
<!-- MSF Experience -->
683+
<div class="job right">
684+
<!-- Similar structure for MSF role -->
685+
</div>
686+
687+
<!-- Continue with other roles -->
688+
</div>
689+
</div>
467690
</section>
468691

469692
<!-- Certifications Section -->

0 commit comments

Comments
 (0)