TSJ Company Profile.
Implemented bilingual React company website for PT Tekno Solusi Jenius during employment at PT Empat Teknologi Indonesia. Scope includes company information, services, portfolio, case study, contact, routing, responsive states, and SEO metadata.
CHALLENGE
Company information, services, portfolio records, case studies, contact routes, and bilingual content required one responsive web interface.
SOLUTION
Built React, TypeScript, and Vite interface with reusable components, bilingual state, React Router routes, Tailwind styling, SEO metadata, and static deployment configuration.
KEY FEATURES
- 01Bilingual ID and EN content
- 02Home, about, services, portfolio, and contact routes
- 03Case study route
- 04Responsive navigation and footer
- 05Reusable component system
- 06SEO metadata
- 07Static deployment
TECHNOLOGY
RESULTS
Delivered one bilingual React company website with seven implementation groups covering content, routing, responsive UI, components, metadata, and deployment.
PROJECT LINKS
NOTE
Publishes approved company and contact information. Excludes internal business records and restricted operational data.
'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20offset='0'%20stop-color='%23000014'/%3e%3cstop%20offset='1'%20stop-color='%23150426'/%3e%3c/linearGradient%3e%3clinearGradient%20id='b'%20x1='1001.68'%20x2='790.326'%20y1='652.45'%20y2='1094.91'%20gradientTransform='scale(.1)'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20offset='0'%20stop-color='%23ff1639'/%3e%3cstop%20offset='1'%20stop-color='%23ff1639'%20stop-opacity='0'/%3e%3c/linearGradient%3e%3c/defs%3e%3cpath%20fill='url(%23a)'%20d='M81.504%209.465c.973%201.207%201.469%202.836%202.457%206.09l21.656%2071.136a90.079%2090.079%200%200%200-25.89-8.765L65.629%2030.28a1.833%201.833%200%200%200-3.52.004L48.18%2077.902a90.104%2090.104%200%200%200-26.003%208.778l21.758-71.14c.996-3.25%201.492-4.876%202.464-6.083a8.023%208.023%200%200%201%203.243-2.398c1.433-.575%203.136-.575%206.535-.575H71.72c3.402%200%205.105%200%206.543.579a7.988%207.988%200%200%201%203.242%202.402Zm0%200'/%3e%3cpath%20fill='%23ff5d01'%20d='M84.094%2090.074c-3.57%203.055-10.696%205.137-18.903%205.137-10.07%200-18.515-3.137-20.754-7.356-.8%202.418-.98%205.184-.98%206.954%200%200-.527%208.675%205.508%2014.71a5.671%205.671%200%200%201%205.672-5.671c5.37%200%205.367%204.683%205.363%208.488v.336c0%205.773%203.527%2010.719%208.543%2012.805a11.62%2011.62%200%200%201-1.172-5.098c0-5.508%203.23-7.555%206.988-9.938%202.989-1.894%206.309-4%208.594-8.222a15.513%2015.513%200%200%200%201.875-7.41%2015.55%2015.55%200%200%200-.734-4.735Zm0%200'/%3e%3cpath%20fill='url(%23b)'%20d='M84.094%2090.074c-3.57%203.055-10.696%205.137-18.903%205.137-10.07%200-18.515-3.137-20.754-7.356-.8%202.418-.98%205.184-.98%206.954%200%200-.527%208.675%205.508%2014.71a5.671%205.671%200%200%201%205.672-5.671c5.37%200%205.367%204.683%205.363%208.488v.336c0%205.773%203.527%2010.719%208.543%2012.805a11.62%2011.62%200%200%201-1.172-5.098c0-5.508%203.23-7.555%206.988-9.938%202.989-1.894%206.309-4%208.594-8.222a15.513%2015.513%200%200%200%201.875-7.41%2015.55%2015.55%200%200%200-.734-4.735Zm0%200'/%3e%3c/svg%3e)
%20scale(.3122)'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20offset='0'%20stop-color='%2341d1ff'/%3e%3cstop%20offset='1'%20stop-color='%23bd34fe'/%3e%3c/linearGradient%3e%3clinearGradient%20id='b'%20x1='194.651'%20x2='236.076'%20y1='8.818'%20y2='292.989'%20gradientTransform='translate(0%20.937)%20scale(.3122)'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20offset='0'%20stop-color='%23ffea83'/%3e%3cstop%20offset='.083'%20stop-color='%23ffdd35'/%3e%3cstop%20offset='1'%20stop-color='%23ffa800'/%3e%3c/linearGradient%3e%3c/defs%3e%3cpath%20fill='url(%23a)'%20d='M124.766%2019.52%2067.324%20122.238c-1.187%202.121-4.234%202.133-5.437.024L3.305%2019.532c-1.313-2.302.652-5.087%203.261-4.622L64.07%2025.187a3.09%203.09%200%200%200%201.11%200l56.3-10.261c2.598-.473%204.575%202.289%203.286%204.594Zm0%200'/%3e%3cpath%20fill='url(%23b)'%20d='M91.46%201.43%2048.954%209.758a1.56%201.56%200%200%200-1.258%201.437l-2.617%2044.168a1.563%201.563%200%200%200%201.91%201.614l11.836-2.735a1.562%201.562%200%200%201%201.88%201.836l-3.517%2017.219a1.562%201.562%200%200%200%201.985%201.805l7.308-2.223c1.133-.344%202.223.652%201.985%201.812l-5.59%2027.047c-.348%201.692%201.902%202.614%202.84%201.164l.625-.968%2034.64-69.13c.582-1.16-.421-2.48-1.69-2.234l-12.185%202.352a1.558%201.558%200%200%201-1.793-1.965l7.95-27.562A1.56%201.56%200%200%200%2091.46%201.43Zm0%200'/%3e%3c/svg%3e)
'%20d='M66.958.825a6.07%206.07%200%200%200-6.035%200L11.103%2029.76c-1.895%201.072-2.96%203.095-2.96%205.24v57.988c0%202.143%201.183%204.167%202.958%205.24l49.82%2028.934a6.07%206.07%200%200%200%206.036%200l49.82-28.935c1.894-1.072%202.958-3.096%202.958-5.24V35c0-2.144-1.183-4.167-2.958-5.24z'/%3e%3cpath%20fill='url(%23b)'%20d='M116.897%2029.76%2066.841.825A8.161%208.161%200%200%200%2065.302.23L9.21%2096.798a6.251%206.251%200%200%200%201.657%201.43l50.057%2028.934c1.42.833%203.076%201.072%204.615.595l52.66-96.925a3.702%203.702%200%200%200-1.302-1.072z'/%3e%3cpath%20fill='url(%23c)'%20d='M116.898%2098.225c1.42-.833%202.485-2.262%202.958-3.81L65.066.108c-1.42-.238-2.959-.119-4.26.715L11.104%2029.639l53.606%2098.355c.71-.12%201.54-.358%202.25-.715z'/%3e%3cdefs%3e%3clinearGradient%20id='a'%20x1='34.513'%20x2='27.157'%20y1='15.535'%20y2='30.448'%20gradientTransform='translate(-129.242%20-73.715)%20scale(6.18523)'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%233F873F'/%3e%3cstop%20offset='.33'%20stop-color='%233F8B3D'/%3e%3cstop%20offset='.637'%20stop-color='%233E9638'/%3e%3cstop%20offset='.934'%20stop-color='%233DA92E'/%3e%3cstop%20offset='1'%20stop-color='%233DAE2B'/%3e%3c/linearGradient%3e%3clinearGradient%20id='b'%20x1='30.009'%20x2='50.533'%20y1='23.359'%20y2='8.288'%20gradientTransform='translate(-129.242%20-73.715)%20scale(6.18523)'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20offset='.138'%20stop-color='%233F873F'/%3e%3cstop%20offset='.402'%20stop-color='%2352A044'/%3e%3cstop%20offset='.713'%20stop-color='%2364B749'/%3e%3cstop%20offset='.908'%20stop-color='%236ABF4B'/%3e%3c/linearGradient%3e%3clinearGradient%20id='c'%20x1='21.917'%20x2='40.555'%20y1='22.261'%20y2='22.261'%20gradientTransform='translate(-129.242%20-73.715)%20scale(6.18523)'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20offset='.092'%20stop-color='%236ABF4B'/%3e%3cstop%20offset='.287'%20stop-color='%2364B749'/%3e%3cstop%20offset='.598'%20stop-color='%2352A044'/%3e%3cstop%20offset='.862'%20stop-color='%233F873F'/%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e)
'%3e%3cstop%20offset='0'%20stop-color='%235A9FD4'/%3e%3cstop%20offset='1'%20stop-color='%23306998'/%3e%3c/linearGradient%3e%3clinearGradient%20id='python-original-b'%20gradientUnits='userSpaceOnUse'%20x1='209.474'%20y1='1098.811'%20x2='173.62'%20y2='1149.537'%20gradientTransform='matrix(.563%200%200%20-.568%20-29.215%20707.817)'%3e%3cstop%20offset='0'%20stop-color='%23FFD43B'/%3e%3cstop%20offset='1'%20stop-color='%23FFE873'/%3e%3c/linearGradient%3e%3cpath%20fill='url(%23python-original-a)'%20d='M63.391%201.988c-4.222.02-8.252.379-11.8%201.007-10.45%201.846-12.346%205.71-12.346%2012.837v9.411h24.693v3.137H29.977c-7.176%200-13.46%204.313-15.426%2012.521-2.268%209.405-2.368%2015.275%200%2025.096%201.755%207.311%205.947%2012.519%2013.124%2012.519h8.491V67.234c0-8.151%207.051-15.34%2015.426-15.34h24.665c6.866%200%2012.346-5.654%2012.346-12.548V15.833c0-6.693-5.646-11.72-12.346-12.837-4.244-.706-8.645-1.027-12.866-1.008zM50.037%209.557c2.55%200%204.634%202.117%204.634%204.721%200%202.593-2.083%204.69-4.634%204.69-2.56%200-4.633-2.097-4.633-4.69-.001-2.604%202.073-4.721%204.633-4.721z'%20transform='translate(0%2010.26)'/%3e%3cpath%20fill='url(%23python-original-b)'%20d='M91.682%2028.38v10.966c0%208.5-7.208%2015.655-15.426%2015.655H51.591c-6.756%200-12.346%205.783-12.346%2012.549v23.515c0%206.691%205.818%2010.628%2012.346%2012.547%207.816%202.297%2015.312%202.713%2024.665%200%206.216-1.801%2012.346-5.423%2012.346-12.547v-9.412H63.938v-3.138h37.012c7.176%200%209.852-5.005%2012.348-12.519%202.578-7.735%202.467-15.174%200-25.096-1.774-7.145-5.161-12.521-12.348-12.521h-9.268zM77.809%2087.927c2.561%200%204.634%202.097%204.634%204.692%200%202.602-2.074%204.719-4.634%204.719-2.55%200-4.633-2.117-4.633-4.719%200-2.595%202.083-4.692%204.633-4.692z'%20transform='translate(0%2010.26)'/%3e%3cradialGradient%20id='python-original-c'%20cx='1825.678'%20cy='444.45'%20r='26.743'%20gradientTransform='matrix(0%20-.24%20-1.055%200%20532.979%20557.576)'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20offset='0'%20stop-color='%23B8B8B8'%20stop-opacity='.498'/%3e%3cstop%20offset='1'%20stop-color='%237F7F7F'%20stop-opacity='0'/%3e%3c/radialGradient%3e%3cpath%20opacity='.444'%20fill='url(%23python-original-c)'%20d='M97.309%20119.597c0%203.543-14.816%206.416-33.091%206.416-18.276%200-33.092-2.873-33.092-6.416%200-3.544%2014.815-6.417%2033.092-6.417%2018.275%200%2033.091%202.872%2033.091%206.417z'/%3e%3c/svg%3e)
%20scale(.1939)'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20offset='.003'%20stop-color='%23e44857'/%3e%3cstop%20offset='.469'%20stop-color='%23c711e1'/%3e%3cstop%20offset='1'%20stop-color='%237f52ff'/%3e%3c/linearGradient%3e%3c/defs%3e%3cpath%20fill='url(%23a)'%20d='M112.484%20112.484H15.516V15.516h96.968L64%2064Zm0%200'/%3e%3c/svg%3e)
