diff --git a/README.md b/README.md index 1a3180c..bf0b571 100644 --- a/README.md +++ b/README.md @@ -91,3 +91,7 @@ python3 -m http.server 8000 --bind 127.0.0.1 - 본문 바로가기, 포커스 표시, 이미지 대체 텍스트, 의미 있는 HTML 구조 외부 CDN이나 폰트 라이브러리를 사용하지 않아 다운로드한 파일만으로 홈페이지 화면을 확인할 수 있습니다. 지도 모달은 외부 지도 서비스를 불러옵니다. + +## 연혁 편집 + +연혁 내용은 `index.html`과 `index-form.html`의 `#journey` 안에 있습니다. 각 `timeline-panel-연도`의 제목과 설명을 수정하고, 설명 안의 핵심 기술은 ``으로 강조합니다. `script.js`는 탭 전환과 키보드 이동만 담당하고, 강조 스타일은 `journey.css`에서 관리합니다. 두 페이지의 연혁은 함께 수정합니다. diff --git a/index-form.html b/index-form.html index 5685abf..7b25c19 100644 --- a/index-form.html +++ b/index-form.html @@ -18,13 +18,14 @@ - + + @@ -318,7 +319,55 @@ -

05 / OUR JOURNEY

A CONTINUOUS JOURNEY OF INNOVATION

새로운 길은,
계속됩니다.

첫 서버에서 글로벌 모빌리티까지.
기술이 바뀌어도, 더 나은 답을 찾는 우리의 태도는 같습니다.

WHAT'S NEXT

더 넓은 연결, 다음의 가능성

블록체인 기반 기부 플랫폼 GivOn 관리자 개발과 소규모 기관차 관제 프로그램 개발로 기술의 쓰임을 넓혀갑니다.

Web3관제 시스템디지털 플랫폼
+
+
+

05 / OUR JOURNEY

TECHNOLOGY & EXPERIENCE
+

프로젝트로 쌓아온
기술과 경험.

서버·업무 시스템부터 내비게이션 HMI,
모바일·웹 플랫폼과 관제까지.

+
+ + + + + +
+ + + + + +
+ +
+

기부 플랫폼과 기관차 관제 개발

+

블록체인 기반 기부 플랫폼 GivOn의 관리자 시스템을 개발했습니다. 소규모 기관차 관제 프로그램 개발에도 참여하며 플랫폼 운영과 산업 현장에 필요한 소프트웨어를 구현했습니다.

+
+
+
+
diff --git a/index.html b/index.html index c53f8b8..8c9c418 100644 --- a/index.html +++ b/index.html @@ -18,13 +18,14 @@ - + + @@ -318,7 +319,55 @@
-

05 / OUR JOURNEY

A CONTINUOUS JOURNEY OF INNOVATION

새로운 길은,
계속됩니다.

첫 서버에서 글로벌 모빌리티까지.
기술이 바뀌어도, 더 나은 답을 찾는 우리의 태도는 같습니다.

WHAT'S NEXT

더 넓은 연결, 다음의 가능성

블록체인 기반 기부 플랫폼 GivOn 관리자 개발과 소규모 기관차 관제 프로그램 개발로 기술의 쓰임을 넓혀갑니다.

Web3관제 시스템디지털 플랫폼
+
+
+

05 / OUR JOURNEY

TECHNOLOGY & EXPERIENCE
+

프로젝트로 쌓아온
기술과 경험.

서버·업무 시스템부터 내비게이션 HMI,
모바일·웹 플랫폼과 관제까지.

+
+ + + + + +
+ + + + + +
+ +
+

기부 플랫폼과 기관차 관제 개발

+

블록체인 기반 기부 플랫폼 GivOn의 관리자 시스템을 개발했습니다. 소규모 기관차 관제 프로그램 개발에도 참여하며 플랫폼 운영과 산업 현장에 필요한 소프트웨어를 구현했습니다.

+
+
+
+
diff --git a/journey.css b/journey.css new file mode 100644 index 0000000..11091fa --- /dev/null +++ b/journey.css @@ -0,0 +1,6 @@ +.timeline-panel[hidden] { display: none; } +.timeline-description strong { color: var(--ink); font-weight: 700; } +.timeline-tabs button > span { font-family: var(--font); font-size: 11px; letter-spacing: 0; line-height: 1.5; } +@media (max-width: 600px) { + .timeline-tabs button > span { font-size: 9px; } +} diff --git a/script.js b/script.js index 7628c99..738aeec 100644 --- a/script.js +++ b/script.js @@ -201,29 +201,16 @@ updateScroll(); })); - const history = { - 2008: { label: 'THE BEGINNING', title: '기술로 여는 첫 번째 길', description: '2008년 12월 1일, 주식회사 트론트의 여정이 시작되었습니다. DDNS 서버, 그룹웨어, LMS 원격강의 지원 시스템과 차량용 미들웨어 개발로 기반을 다졌습니다.', tags: ['DDNS Server', 'Groupware', 'LMS'] }, - 2012: { label: 'NEW CONNECTIONS', title: '현장과 데이터를 연결하다', description: '디지털 사이니지와 NFC 자산 관리, 청라 U-CITY 환경 서비스 등으로 기술의 영역을 확장했습니다. 이후 RFID 기반 IT 자산 관리 솔루션으로 연결의 범위를 넓혔습니다.', tags: ['Digital Signage', 'NFC / RFID', 'U-CITY'] }, - 2018: { label: 'MOVING FORWARD', title: '세계의 도로 위로, 기술의 확장', description: '현대오토에버 국내외 내비게이션 HMI 개발을 시작했습니다. C++와 Qt 기반 GUI 및 인터페이스 기술로 다양한 시장의 차량용 사용자 경험 구현에 참여했습니다.', tags: ['Hyundai AutoEver', 'C++ / Qt', 'Navigation HMI'] }, - 2022: { label: 'EVERYDAY IMPACT', title: '기술이 일상에 가까워지는 순간', description: '약사 커뮤니티 모두의약국 개발을 시작으로 전문 플랫폼 역량을 확장했습니다. 빌딩 에너지 통합 관제 BEMS와 반려동물 커뮤니티 BISPET 등 산업과 일상을 위한 프로젝트를 이어갔습니다.', tags: ['모두의약국', 'BEMS', 'BISPET'] }, - 2025: { label: "WHAT'S NEXT", title: '더 넓은 연결, 다음의 가능성', description: '블록체인 기반 기부 플랫폼 GivOn 관리자 개발과 소규모 기관차 관제 프로그램 개발로 기술의 쓰임을 넓혀갑니다.', tags: ['Web3', '관제 시스템', '디지털 플랫폼'] } - }; + // Timeline content lives in HTML; JavaScript only switches accessible panels. const yearTabs = $$('.timeline-tabs [role="tab"]'); function selectYear(button, focus = false) { - const year = button.dataset.year; - const data = history[year]; yearTabs.forEach(tab => { - tab.setAttribute('aria-selected', String(tab === button)); - tab.tabIndex = tab === button ? 0 : -1; + const selected = tab === button; + tab.setAttribute('aria-selected', String(selected)); + tab.tabIndex = selected ? 0 : -1; + const panel = document.getElementById(tab.getAttribute('aria-controls')); + if (panel) panel.hidden = !selected; }); - $('#timeline-panel').setAttribute('aria-labelledby', button.id); - $('.timeline-year').textContent = year; - $('.timeline-detail .eyebrow').textContent = data.label; - $('.timeline-detail h3').textContent = data.title; - $('.timeline-description').textContent = data.description; - $('.timeline-detail .tags').replaceChildren(...data.tags.map(tag => { - const span = document.createElement('span'); span.textContent = tag; return span; - })); if (focus) button.focus(); } yearTabs.forEach((button, index) => {