-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathabout.php
More file actions
134 lines (122 loc) · 8.28 KB
/
Copy pathabout.php
File metadata and controls
134 lines (122 loc) · 8.28 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<div class="about-page">
<section class="hero-section about-hero">
<h1 class="neon-title">SYSTEM PROFILE</h1>
<p class="status-transmission-label">CLASSIFICATION: SOFTWARE ENGINEER</p>
</section>
<div class="bottom-showcase-layout about-layout">
<!-- Left Hologram Podium -->
<div class="hologram-podium-container left-podium">
<div class="podium-project-screen">
<div class="podium-screen-inner">
<img src="https://img.icons8.com/nolan/64/user.png" alt="Profile View" class="podium-icon">
<span class="podium-label">USER_DB</span>
<div class="podium-stats-bar">
<span>SYS_ID: 23.03</span>
<span>PENDING...</span>
</div>
</div>
</div>
<!-- Hologram Beam -->
<div class="hologram-beam"></div>
<div class="podium-base">
<div class="podium-ring ring-1"></div>
<div class="podium-ring ring-2"></div>
</div>
</div>
<!-- Main Dossier -->
<div class="profile-dossier-wrapper">
<h2 class="portal-header-title">BRAIN DUMP 🤯</h2>
<div class="dossier-content">
<!-- Objective Section -->
<div class="dossier-section">
<h3 class="subsection-title"><i class="fa-solid fa-terminal"></i> Who Is This?</h3>
<p class="about-card-text">
I am Keabetswe Masole. An eager junior software developer focused on engineering highly effective back-end architecture,
clean database models, and an interactive user interfaces. Aiming to apply modern development frameworks to the creation
of normal logical systems. I'm eager to learn new skills and become a better developer through more hands-on experience and
exposure to real-world projects.
</p>
</div>
<!-- Technical Skills Grid -->
<div class="dossier-grid">
<div class="dossier-box">
<h3 class="subsection-title"><i class="fa-solid fa-code"></i> Languages & Frameworks</h3>
<div class="dossier-tags">
<span class="skill-pill"><i class="fa-brands fa-java"></i> Java</span>
<span class="skill-pill"><i class="fa-brands fa-php"></i> PHP</span>
<span class="skill-pill"><i class="fa-brands fa-kotlin"></i> Kotlin</span>
<span class="skill-pill"><i class="fa-solid fa-database"></i> SQL</span>
<span class="skill-pill"><i class="fa-brands fa-html5"></i> HTML</span>
<span class="skill-pill"><i class="fa-brands fa-css3-alt"></i> CSS</span>
</div>
</div>
<!-- Tools & IDEs Section -->
<div class="dossier-box">
<h3 class="subsection-title"><i class="fa-solid fa-gears"></i> Core Competencies</h3>
<div class="dossier-tags">
<span class="skill-pill"><i class="fa-solid fa-layer-group"></i> Android Studio</span>
<span class="skill-pill"><i class="fa-solid fa-code"></i> VS Code</span>
<span class="skill-pill"><i class="fa-solid fa-database"></i> MySQL/SSMS</span>
<span class="skill-pill"><i class="fa-solid fa-server"></i> OracleSQL</span>
<span class="skill-pill"><i class="fa-solid fa-cubes"></i> Apache Netbeans</span>
</div>
</div>
</div>
<!-- Personal Interests Section -->
<div class="dossier-section">
<h3 class="subsection-title"><i class="fa-solid fa-heart-pulse"></i> Personal Interests</h3>
<div class="dossier-tags" style="display: flex; flex-wrap: wrap; gap: 10px; margin-top: 15px;">
<span class="skill-pill" style="background: rgba(3, 8, 15, 0.4);"><i class="fa-solid fa-wallet"></i> Finances</span>
<span class="skill-pill" style="background: rgba(3, 8, 15, 0.4);"><i class="fa-solid fa-compass-drafting"></i> Architecture</span>
<span class="skill-pill" style="background: rgba(3, 8, 15, 0.4);"><i class="fa-solid fa-brain"></i> Learning New Things</span>
<span class="skill-pill" style="background: rgba(3, 8, 15, 0.4);"><i class="fa-solid fa-car"></i> Automotive</span>
<span class="skill-pill" style="background: rgba(3, 8, 15, 0.4);"><i class="fa-solid fa-gamepad"></i> Video Games</span>
<span class="skill-pill" style="background: rgba(3, 8, 15, 0.4);"><i class="fa-solid fa-plane"></i> Travelling</span>
<span class="skill-pill" style="background: rgba(3, 8, 15, 0.4);"><i class="fa-solid fa-music"></i> Music</span>
<span class="skill-pill" style="background: rgba(3, 8, 15, 0.4);"><i class="fa-brands fa-youtube"></i> YouTube</span>
<span class="skill-pill" style="background: rgba(3, 8, 15, 0.4);"><i class="fa-solid fa-code-branch"></i> Code Development</span>
<span class="skill-pill" style="background: rgba(3, 8, 15, 0.4);"><i class="fa-solid fa-screwdriver-wrench"></i> Hands-on Building</span>
<span class="skill-pill" style="background: rgba(3, 8, 15, 0.4);"><i class="fa-solid fa-person-swimming"></i> Swimming</span>
<span class="skill-pill" style="background: rgba(3, 8, 15, 0.4);"><i class="fa-solid fa-couch"></i> Relaxing</span>
</div>
</div>
<!-- System Interfacing Footer Section -->
<div class="dossier-section last-section">
<h3 class="subsection-title"><i class="fa-solid fa-circle-nodes"></i> System Offline</h3>
<p class="about-card-text">
When I'm offline, I actively study market dynamics, test, update, debug and optimize micro-applications.
I also enjoy gaming, so much so that i have a <a href="https://www.youtube.com/@FP_Gaming_FPNDA" class="text-link">YouTube channel</a>
where I post my gaming experiences and sometimes go live, along with <a href="https://www.youtube.com/@fadingpandaa" class="text-link">another channel</a>
where I vlog at car events. I am always open to new opportunities, collaborations, and challenges that allow me to grow as a developer and contribute
meaningfully to projects.
</p>
</div>
</div>
<!-- Console Status Diagnostics -->
<div class="console-status-diagnostics">
<p>[CORE] diagnostic stable...</p>
<p>[INTEL] memory partition loaded...</p>
<p class="status-glow">[STATUS] developer ready</p>
</div>
</div>
<!-- Right Hologram Podium -->
<div class="hologram-podium-container right-podium">
<div class="podium-project-screen">
<div class="podium-screen-inner">
<img src="https://img.icons8.com/nolan/64/processor.png" alt="System Specs" class="podium-icon">
<span class="podium-label">SYS_KERN</span>
<div class="podium-stats-bar">
<span>STABLIZING...</span>
<span>127.0.0.1</span>
</div>
</div>
</div>
<!-- Hologram Beam -->
<div class="hologram-beam"></div>
<div class="podium-base">
<div class="podium-ring ring-1"></div>
<div class="podium-ring ring-2"></div>
</div>
</div>
</div>
</div>