The latest articles on DEV Community by dorbin.dev (@dorbindevfrlncr). https://dev.to/dorbindevfrlncr https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3846917%2F3ba21ec9-c720-4c17-9f4c-0aa5012b07a6.png https://dev.to/dorbindevfrlncr en dorbin.dev Sat, 28 Mar 2026 02:21:49 +0000 https://dev.to/dorbindevfrlncr/how-i-built-my-portfolio-with-react-typescript-lighthouse-97100-5843 https://dev.to/dorbindevfrlncr/how-i-built-my-portfolio-with-react-typescript-lighthouse-97100-5843 <h1> How I built my portfolio with React + TypeScript (Lighthouse 97/100) </h1> <p>I'm an 18 y/o self-taught frontend dev and just finished my personal portfolio site.</p> <h2> 🛠️ Stack </h2> <ul> <li> <strong>React 18 + TypeScript</strong> — core framework</li> <li> <strong>Vite</strong> over CRA — faster builds, better DX</li> <li> <strong>Tailwind CSS</strong> — no time wasted on CSS</li> <li> <strong>Framer Motion</strong> — smooth animations without headaches</li> <li> <strong>i18next</strong> — multilingual (RU/EN/DE)</li> <li> <strong>EmailJS</strong> — contact form without a backend</li> </ul> <h2> ⚡ Performance </h2> <div class="table-wrapper-paragraph"><table> <thead> <tr> <th>Metric</th> <th>Score</th> </tr> </thead> <tbody> <tr> <td>Performance</td> <td>97</td> </tr> <tr> <td>Accessibility</td> <td>94</td> </tr> <tr> <td>Best Practices</td> <td>100</td> </tr> <tr> <td>SEO</td> <td>100</td> </tr> </tbody> </table></div> <h2> 😤 Hardest part </h2> <p>Getting Lighthouse performance above 95 — ended up optimizing images to WebP and fixing a few render-blocking issues.</p> <h2> 🔗 Links </h2> <ul> <li> <strong>Live demo:</strong> <a href="https://personal-portfolio-landing-theta.vercel.app" rel="noopener noreferrer">https://personal-portfolio-landing-theta.vercel.app</a> </li> <li> <strong>GitHub:</strong> <a href="https://github.com/dorbinDevFRLNCR/personal-portfolio-landing" rel="noopener noreferrer">https://github.com/dorbinDevFRLNCR/personal-portfolio-landing</a> </li> </ul> <p>Feedback welcome! 🔥</p> react typescript tailwindcss vite