diff --git a/css/normalize.css b/css/normalize.css deleted file mode 100644 index b0c1902..0000000 --- a/css/normalize.css +++ /dev/null @@ -1,349 +0,0 @@ -/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ - -/* Document - ========================================================================== */ - -/** - * 1. Correct the line height in all browsers. - * 2. Prevent adjustments of font size after orientation changes in iOS. - */ - -html { - line-height: 1.15; /* 1 */ - -webkit-text-size-adjust: 100%; /* 2 */ -} - -/* Sections - ========================================================================== */ - -/** - * Remove the margin in all browsers. - */ - -body { - margin: 0; -} - -/** - * Render the `main` element consistently in IE. - */ - -main { - display: block; -} - -/** - * Correct the font size and margin on `h1` elements within `section` and - * `article` contexts in Chrome, Firefox, and Safari. - */ - -h1 { - font-size: 2em; - margin: 0.67em 0; -} - -/* Grouping content - ========================================================================== */ - -/** - * 1. Add the correct box sizing in Firefox. - * 2. Show the overflow in Edge and IE. - */ - -hr { - box-sizing: content-box; /* 1 */ - height: 0; /* 1 */ - overflow: visible; /* 2 */ -} - -/** - * 1. Correct the inheritance and scaling of font size in all browsers. - * 2. Correct the odd `em` font sizing in all browsers. - */ - -pre { - font-family: monospace, monospace; /* 1 */ - font-size: 1em; /* 2 */ -} - -/* Text-level semantics - ========================================================================== */ - -/** - * Remove the gray background on active links in IE 10. - */ - -a { - background-color: transparent; -} - -/** - * 1. Remove the bottom border in Chrome 57- - * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. - */ - -abbr[title] { - border-bottom: none; /* 1 */ - text-decoration: underline; /* 2 */ - text-decoration: underline dotted; /* 2 */ -} - -/** - * Add the correct font weight in Chrome, Edge, and Safari. - */ - -b, -strong { - font-weight: bolder; -} - -/** - * 1. Correct the inheritance and scaling of font size in all browsers. - * 2. Correct the odd `em` font sizing in all browsers. - */ - -code, -kbd, -samp { - font-family: monospace, monospace; /* 1 */ - font-size: 1em; /* 2 */ -} - -/** - * Add the correct font size in all browsers. - */ - -small { - font-size: 80%; -} - -/** - * Prevent `sub` and `sup` elements from affecting the line height in - * all browsers. - */ - -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sub { - bottom: -0.25em; -} - -sup { - top: -0.5em; -} - -/* Embedded content - ========================================================================== */ - -/** - * Remove the border on images inside links in IE 10. - */ - -img { - border-style: none; -} - -/* Forms - ========================================================================== */ - -/** - * 1. Change the font styles in all browsers. - * 2. Remove the margin in Firefox and Safari. - */ - -button, -input, -optgroup, -select, -textarea { - font-family: inherit; /* 1 */ - font-size: 100%; /* 1 */ - line-height: 1.15; /* 1 */ - margin: 0; /* 2 */ -} - -/** - * Show the overflow in IE. - * 1. Show the overflow in Edge. - */ - -button, -input { /* 1 */ - overflow: visible; -} - -/** - * Remove the inheritance of text transform in Edge, Firefox, and IE. - * 1. Remove the inheritance of text transform in Firefox. - */ - -button, -select { /* 1 */ - text-transform: none; -} - -/** - * Correct the inability to style clickable types in iOS and Safari. - */ - -button, -[type="button"], -[type="reset"], -[type="submit"] { - -webkit-appearance: button; -} - -/** - * Remove the inner border and padding in Firefox. - */ - -button::-moz-focus-inner, -[type="button"]::-moz-focus-inner, -[type="reset"]::-moz-focus-inner, -[type="submit"]::-moz-focus-inner { - border-style: none; - padding: 0; -} - -/** - * Restore the focus styles unset by the previous rule. - */ - -button:-moz-focusring, -[type="button"]:-moz-focusring, -[type="reset"]:-moz-focusring, -[type="submit"]:-moz-focusring { - outline: 1px dotted ButtonText; -} - -/** - * Correct the padding in Firefox. - */ - -fieldset { - padding: 0.35em 0.75em 0.625em; -} - -/** - * 1. Correct the text wrapping in Edge and IE. - * 2. Correct the color inheritance from `fieldset` elements in IE. - * 3. Remove the padding so developers are not caught out when they zero out - * `fieldset` elements in all browsers. - */ - -legend { - box-sizing: border-box; /* 1 */ - color: inherit; /* 2 */ - display: table; /* 1 */ - max-width: 100%; /* 1 */ - padding: 0; /* 3 */ - white-space: normal; /* 1 */ -} - -/** - * Add the correct vertical alignment in Chrome, Firefox, and Opera. - */ - -progress { - vertical-align: baseline; -} - -/** - * Remove the default vertical scrollbar in IE 10+. - */ - -textarea { - overflow: auto; -} - -/** - * 1. Add the correct box sizing in IE 10. - * 2. Remove the padding in IE 10. - */ - -[type="checkbox"], -[type="radio"] { - box-sizing: border-box; /* 1 */ - padding: 0; /* 2 */ -} - -/** - * Correct the cursor style of increment and decrement buttons in Chrome. - */ - -[type="number"]::-webkit-inner-spin-button, -[type="number"]::-webkit-outer-spin-button { - height: auto; -} - -/** - * 1. Correct the odd appearance in Chrome and Safari. - * 2. Correct the outline style in Safari. - */ - -[type="search"] { - -webkit-appearance: textfield; /* 1 */ - outline-offset: -2px; /* 2 */ -} - -/** - * Remove the inner padding in Chrome and Safari on macOS. - */ - -[type="search"]::-webkit-search-decoration { - -webkit-appearance: none; -} - -/** - * 1. Correct the inability to style clickable types in iOS and Safari. - * 2. Change font properties to `inherit` in Safari. - */ - -::-webkit-file-upload-button { - -webkit-appearance: button; /* 1 */ - font: inherit; /* 2 */ -} - -/* Interactive - ========================================================================== */ - -/* - * Add the correct display in Edge, IE 10+, and Firefox. - */ - -details { - display: block; -} - -/* - * Add the correct display in all browsers. - */ - -summary { - display: list-item; -} - -/* Misc - ========================================================================== */ - -/** - * Add the correct display in IE 10+. - */ - -template { - display: none; -} - -/** - * Add the correct display in IE 10. - */ - -[hidden] { - display: none; -} \ No newline at end of file diff --git a/css/styles.min.css b/css/styles.min.css index 23ecfa1..194da93 100644 --- a/css/styles.min.css +++ b/css/styles.min.css @@ -37,14 +37,11 @@ body { } - - - -/* h1 { +h1 { font-size: 20px; text-shadow: 1px 1px 1px #0F111F; margin-top: 0; -} */ +} #background { width: 100%; @@ -55,19 +52,20 @@ body { z-index: -999; } -/* .transparentbox { - background-color: black; +.transparentbox { + color:#FFF; + background-color: rgba(143, 136, 136, 0.831); opacity: .15; - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=15)"; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=15)"; filter: alpha(opacity=15); position: absolute; width: 100%; - height: 100%; + height: 65%; z-index: -1; -moz-border-radius: 10px; -webkit-border-radius: 10px; - border-radius: 10px; -} */ + border-radius: 15px; +} .contents { position: absolute; @@ -87,6 +85,10 @@ body { color: #d1d1d1; } +#jason a { + color: #77D; +} + #name { left: 20px; top: 20px; @@ -211,6 +213,8 @@ body { top: 20px; left: 20px; right: 30%; + height: 100vh; + overflow: hidden; } .title { @@ -227,8 +231,182 @@ body { margin-left: auto; } -.text-white { +.contact:hover { + color:aliceblue; + margin-top: auto; + font-size: small; + margin-left: auto; +} + +.pure-menu .pure-menu-link{ color: #FFF; + background-color: rgba(15, 30, 31, 0.489); +} + +.pure-menu .pure-menu-selected > .pure-menu-link { + color: #FFF; +} + +.pure-menu-children .pure-menu-link { + color: #FFF; + background-color: rgba(15, 17, 31, 0.911); +} + +#scrollTextBox { + width: 30%; + left: 70%; + padding-left: 20px; + height: 100%; + position: fixed; + float: right; + z-index: -997; + overflow: hidden; +} + +#careerContainer { + position: relative; + height: calc(100vh - 90px); + overflow-y: auto; + overflow-x: hidden; + white-space: normal; + scrollbar-width: thin; + background: rgba(20, 20, 20, 0.72); + border-radius: 10px; + border: 1px solid rgba(255,255,255,0.12); + box-shadow: 0 6px 24px rgba(0,0,0,0.24); + padding-bottom: 24px; + opacity: 1; + z-index: 2; +} + +#innerScrollbox { + max-height: 250px; /* adjust height as needed */ + overflow-y: auto; + padding-right: 10px; /* prevents text from touching scrollbar */ +} + +/* Optional: nicer scrollbar */ +#innerScrollbox::-webkit-scrollbar { + width: 8px; +} + +#innerScrollbox::-webkit-scrollbar-thumb { + background: rgba(255,255,255,0.3); + border-radius: 10px; +} + +#innerScrollbox { + max-height: 60vh; + overflow-y: auto; +} + +#careerContainer::-webkit-scrollbar { + width: 10px; +} + +#careerContainer::-webkit-scrollbar-thumb { + background: rgba(255,255,255,0.25); + border-radius: 999px; +} + +.career-progress-wrapper { + position: sticky; + top: 0; + background: rgba(0, 0, 0, 0.92); + padding: 14px 14px 10px; + z-index: 1000; + border-top-left-radius: 10px; + border-top-right-radius: 10px; + backdrop-filter: blur(2px); +} + +.progress-meta { + display: flex; + justify-content: space-between; + align-items: center; + gap: 12px; + margin-bottom: 8px; + font-family: 'Press Start 2P', cursive; + font-size: 10px; + color: #d8ffd8; + white-space: normal; +} + +#careerProgress { + width: 100%; + height: 20px; + display: block; +} + +.character-track { + position: sticky; + top: 62px; + z-index: 1001; + height: 32px; + margin: 0 14px; + pointer-events: none; +} + +.character { + position: absolute; + left: 0; + top: 0; + font-size: 28px; + line-height: 1; + transition: transform 0.12s linear; + will-change: transform; + visibility: hidden; +} + +.timeline { + display: flex; + flex-direction: column; + gap: 56px; + padding: 54px 40px 30px 40px; + width: auto; + min-width: 0; + align-items: stretch; +} + +.career-stage { + min-width: 0; + max-width: none; + padding: 20px; + border: 3px solid #4CAF50; + background: rgba(0,0,0,0.72); + transition: transform 0.3s ease, opacity 0.3s ease, box-shadow 0.3s ease; + box-sizing: border-box; + white-space: normal; + box-shadow: 0 6px 20px rgba(0,0,0,0.25); +} + +.career-stage h3 { + margin: 0 0 12px; + font-size: 1.05rem; + line-height: 1.35; +} + +.career-stage p { + margin: 0; + font-size: 0.98rem; + line-height: 1.45; + color: #f2f2f2; +} + + +.career-stage, +.career-stage.active, +.career-stage:not(.active) { + opacity: 1; + transform: none; + box-shadow: 0 6px 20px rgba(0,0,0,0.25); +} + +.journey-help { + margin-top: 10px; + font-size: 12px; + color: rgba(255,255,255,0.85); + text-shadow: 0 1px 2px rgba(0,0,0,0.6); } a { @@ -238,10 +416,79 @@ a { } a:hover { + color:aliceblue; text-decoration: underline; } -.custom-link-color-force{ - color:#FFF; - background-color: #0F111F; +.logo { + width: 40px; /* adjust size */ + height: auto; /* keeps aspect ratio */ +} + +.section { + padding-left: 15px; + padding-top: 10px; + font-size: medium; +} + +/* Main content box */ +.content-card { + position: relative; + border-radius: 10px; + overflow: hidden; + + height: 70vh; /* bigger vertical size */ + padding: 10px 0; /* spacing inside */ +} + +/* background layer */ +.content-card .transparentbox { + position: absolute; + height: 400px; + inset: 0; + opacity: 0.15; + z-index: 0; +} + +/* actual content */ +#innerScrollbox { + position: relative; + z-index: 1; + max-height: 60vh; + overflow-y: auto; + padding-right: 10px; +} + +.footer-box { + margin-top: 10px; + padding: 10px 14px; + + background: rgba(20, 20, 20, 0.65); + border: 1px solid rgba(255,255,255,0.12); + border-radius: 10px; + + font-size: 11px; + color: rgba(255,255,255,0.75); + + box-shadow: 0 4px 12px rgba(0,0,0,0.25); +} + +.footer-content { + text-align: center; + line-height: 1.4; +} + +.footer-content a { + color: #b8e6ff; + font-weight: normal; +} + +.footer-content a:hover { + color: #fff; +} + +@media (max-width: 900px) { + body { + overflow: auto; + } } \ No newline at end of file diff --git a/images/APS-DK-logo.jpg b/images/APS-DK-logo.jpg new file mode 100644 index 0000000..f4f9f98 Binary files /dev/null and b/images/APS-DK-logo.jpg differ diff --git a/images/GGSIU_logo.svg.png b/images/GGSIU_logo.svg.png new file mode 100644 index 0000000..c112a19 Binary files /dev/null and b/images/GGSIU_logo.svg.png differ diff --git a/images/te.png b/images/te.png new file mode 100644 index 0000000..633c4ba Binary files /dev/null and b/images/te.png differ diff --git a/images/tejas-networks-logo.png b/images/tejas-networks-logo.png new file mode 100644 index 0000000..633c4ba Binary files /dev/null and b/images/tejas-networks-logo.png differ diff --git a/index.html b/index.html index 43312f2..248e0a3 100644 --- a/index.html +++ b/index.html @@ -8,6 +8,8 @@ + + jhossain @@ -15,46 +17,140 @@
-
-
-
-
- Junet Hossain -
-
- mail@jhossain.online - | - Resume -
-
-
+
-
- +
+
+
+
+ Junet Hossain +
+
+ mail@jhossain.online + | + Resume +
+
+
+
+
+ +
+
+
+
+
+
+
+
+ Hi.. +

+ I work as an R&D engineer in telecom, mostly around DWDM systems, monitoring, and control-plane software. A lot of my work involves building and fixing things at the system level—usually in C/C++—and making sure they actually hold up in real conditions. +

+ +

+ I’ve worked on spectrum sharing and performance monitoring, where I’ve had to deal with everything from low-level device integration to system-wide behavior. I like going deep into problems, especially when they’re messy and don’t have obvious answers. +

+ +

+ Outside of that, I build small system tools and simple web stuff. I prefer things that are minimal, practical, and easy to understand—nothing overengineered. +

+
+ +
+
+
+
+
+
+ Checkout my self-hosted repo using Gitea. +
+
+
+
+
+ +
+
+

Journey

+ +
+
+
+ + 0% +
+ +
+ + + +
+
+

Army Public School Dhaula Kuan

+

Education: Secondary and Senior Secondary

+

Stream: Science

+

Duration: July 2011 - July 2020

+

Secondary Education Grade (10th): 92.2%

+

Seniro Secondary Education Grade (12th): 94%

+
+
+

GGSIPU

+

Education: B.Tech

+

Course: Computer Science Engineering

+

Duration: July 2021 - July 2025

+

Overall Grade: 9.03 CGPA

+
+
+

Tejas Networks Ltd.

+

Role: R&D Engineer Intern

+

Duration: Jan 2025 - July 2025

+
+

Work:

+

Developed hands-on expertise in Ethernet, VLANs, Layer 2 switching protocols, and introductory virtual device driver development. + Automated Layer 2 product testing via scripting and internal frameworks, slashing manual validation time. Identified and reported critical + software bugs in L2 platform features, focusing on GPON.

+
+
+

Tejas Networks Ltd.

+

Role: R&D Engineer

+

Duration: July 2025 - Present

+
+

Work:

+

Owned and developed the performance monitoring stack for spectrum sharing using Optical Power Monitoring (OPM), including architecture, telemetry, and scalability. + Implemented 6.25 GHz granularity monitoring by extending HAL device classes and integrating across node daemons, supporting dual modes: channel monitoring and + fine-grained spectrum monitoring. Added North Bound Interface support, multi-tenant alarm handling for power thresholds, and a custom single-threaded Wheel Timer for + efficient periodic tasks. Documented via Doxygen, updated MIBs with NMS collaboration, and integrated hardware for reliability; ongoing work on PSD monitoring and + multi-vendor OPM.

+
+
+
-
...
diff --git a/js/scripts.min.js b/js/scripts.min.js index d5259ef..8a0d046 100644 --- a/js/scripts.min.js +++ b/js/scripts.min.js @@ -5397,3 +5397,52 @@ $(window).load(function() { var b = document.getElementsByTagName("script")[0]; b.parentNode.insertBefore(a, b) }); + + +document.addEventListener('DOMContentLoaded', function () { + const container = document.getElementById('careerContainer'); + const progressBar = document.getElementById('careerProgress'); + const stages = Array.from(document.querySelectorAll('.career-stage')); + const character = document.getElementById('character'); + const timeline = document.getElementById('timeline'); + const journeyLabel = document.getElementById('journeyLabel'); + const journeyPercent = document.getElementById('journeyPercent'); + + if (!container || !progressBar || !stages.length || !character || !timeline) return; + + function clamp(value, min, max) { + return Math.min(Math.max(value, min), max); + } + + function updateProgress() { + const maxScroll = Math.max(container.scrollHeight - container.clientHeight, 0); + const scrollPos = clamp(container.scrollTop, 0, maxScroll); + const percent = maxScroll > 0 ? (scrollPos / maxScroll) * 100 : 0; + progressBar.value = percent; + journeyPercent.textContent = Math.round(percent) + '%'; + + const trackHeight = Math.max(container.clientHeight - character.offsetHeight - 32, 0); + const moveY = (percent / 100) * trackHeight; + character.style.transform = 'translateY(' + moveY + 'px)'; + + } + + container.addEventListener('scroll', updateProgress, { passive: true }); + window.addEventListener('resize', updateProgress); + + updateProgress(); +}); + + +function showSection(section) { + const about = document.getElementById('About-Me'); + const projects = document.getElementById('Projects'); + + if (section === 'About-Me') { + about.style.display = 'block'; + projects.style.display = 'none'; + } else if (section === 'Projects') { + about.style.display = 'none'; + projects.style.display = 'block'; + } +} \ No newline at end of file