The latest articles on Forem by Fab (@fabianlou1s). https://forem.com/fabianlou1s 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%2F3540995%2F78adb049-a309-4eaa-b4f3-f01199c3e67f.gif https://forem.com/fabianlou1s en Fab Mon, 27 Oct 2025 07:21:57 +0000 https://forem.com/fabianlou1s/now-lets-get-to-work-4n6e https://forem.com/fabianlou1s/now-lets-get-to-work-4n6e <div class="ltag__link"> <a href="/aadarsh-nagrath" class="ltag__link__link"> <div class="ltag__link__pic"> <img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F962955%2F0347c241-e37e-422b-bc79-351035282fd3.png" alt="aadarsh-nagrath"> </div> </a> <a href="https://dev.to/aadarsh-nagrath/how-to-keep-using-cursor-for-free-on-macoslinux-31pj" class="ltag__link__link"> <div class="ltag__link__content"> <h2>How to Keep Using Cursor for FREE on MacOS/Linux 🖥️</h2> <h3>Aadarsh Nagrath ・ Sep 23</h3> <div class="ltag__link__taglist"> <span class="ltag__link__tag">#ai</span> <span class="ltag__link__tag">#tutorial</span> <span class="ltag__link__tag">#tooling</span> <span class="ltag__link__tag">#linux</span> </div> </div> </a> </div> ai tutorial tooling linux Fab Sat, 18 Oct 2025 08:25:01 +0000 https://forem.com/fabianlou1s/how-i-built-my-developer-portfolio-step-by-step-21kc https://forem.com/fabianlou1s/how-i-built-my-developer-portfolio-step-by-step-21kc <p>I’ll walk you through how I built my personal portfolio using React, Tailwind CSS, and GitHub Pages — and how you can too."<br> tags: react, portfolio, webdev, tutorial, github<br> In this post, I’ll break down <strong>how I built my developer portfolio</strong>, the <strong>tools</strong> I used, and <strong>how you can do it too</strong> — even if you’re just starting out.</p> <h2> 🧰 Tech Stack </h2> <ul> <li>⚛️ <strong>React</strong> — UI library </li> <li>💨 <strong>Tailwind CSS</strong> — Styling </li> <li>🌐 <strong>GitHub Pages</strong> — Deployment </li> <li>🧠 <strong>Framer Motion</strong> — Animations </li> <li>🧰 <strong>Vite</strong> — Fast build tool</li> </ul> <h2> 🧱 Step 1: Project Setup </h2> <p>I started by setting up a new Vite + React project:</p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code> bash npm create vite@latest my-portfolio cd my-portfolio npm install npm install tailwindcss postcss autoprefixer npx tailwindcss init Then I configured Tailwind CSS in tailwind.config.js and imported the styles in index.css. 🎨 Step 2: Designing the Layout I focused on minimal, clean design. The key sections were: Hero section ✨ Projects 🚀 Skills 💻 Contact 📩 I used Tailwind utility classes to make the site responsive and elegant. 🌍 Step 3: Deploying to GitHub Pages Deployment was smooth using: npm run build and pushing to the gh-pages branch. Then I configured the repo settings to use GitHub Pages. 👉 Final result: My Portfolio 🧠 Lessons Learned Keep it simple — minimalism works Mobile-first design pays off GitHub Pages is underrated Polish matters — animations make a difference 💬 Final Thoughts If you're a developer looking to build your own portfolio, start small. You don’t need something fancy. Build something that reflects you. I’d love to see what you build. Feel free to drop your portfolio links in the comments 👇 Built with ❤️ by Fabian Louis </code></pre> </div> portfolio github tutorial react