| 1 | # Hi, I'm Leyanne 👋 |
| 2 | |
| 3 | Welcome to my portfolio! I'm a frontend developer from La Union, |
| 4 | Philippines, and this is where I share the things I've built and |
| 5 | the skills I've grown along the way. |
| 6 | |
| 7 | --- |
| 8 | |
| 9 | ## About Me |
| 10 | |
| 11 | I'm a BS Information Systems graduate (2025) who fell in love with building things for the web. |
| 12 | I specialize in creating clean, responsive, and user-friendly interfaces, and I'm currently |
| 13 | a frontend developer at OFFLINE Web Agency. |
| 14 | |
| 15 | --- |
| 16 | |
| 17 | ## What You'll Find Here |
| 18 | |
| 19 | - **Projects**: Real projects I built from scratch, with live demos and source code |
| 20 | - **Experience**: My background, OJT, and academic journey |
| 21 | - **Tech Stack**: Tools and technologies I work with |
| 22 | - **Certificates**: Professional development and training |
| 23 | - **Contact**: Send me a message straight from the site |
| 24 | |
| 25 | --- |
| 26 | |
| 27 | ## Why This Portfolio Exists |
| 28 | |
| 29 | I built this not just to show what I can make, but to show how I think. |
| 30 | Every project here is a problem I chose to solve and a skill I chose to grow. |
| 31 | |
| 32 | --- |
| 33 | |
| 34 | ## Tech Stack |
| 35 | |
| 36 | **Frontend** |
| 37 | - Next.js 16 (App Router) |
| 38 | - React 19 |
| 39 | - TypeScript |
| 40 | - Tailwind CSS v4 |
| 41 | |
| 42 | **Backend & Services** |
| 43 | - OpenRouter API: AI chatbot assistant |
| 44 | - Resend: contact form emails |
| 45 | - Upstash Redis: rate limiting for the chatbot and contact form |
| 46 | - Umami + Microsoft Clarity: privacy-friendly analytics |
| 47 | |
| 48 | **Libraries** |
| 49 | - Dark Mode via next-themes |
| 50 | - Image Lightbox (yet-another-react-lightbox) |
| 51 | - Icons via react-icons |
| 52 | - Fonts: Geist Mono, Open Runde, Poppins |
| 53 | |
| 54 | --- |
| 55 | |
| 56 | ## Features |
| 57 | |
| 58 | - **Responsive Design**: Fully optimized for mobile, tablet, and desktop |
| 59 | - **Dark Mode**: Persistent theme switching with system preference detection |
| 60 | - **AI Chatbot Assistant**: Powered by OpenRouter with fallback system |
| 61 | - **Contact Form**: Split-panel modal that emails me via Resend, with rate |
| 62 | limiting and an exact retry time when you hit the limit |
| 63 | - **Interactive README**: You're looking at it! A GitHub-style file explorer |
| 64 | of this very project |
| 65 | - **Project Showcase**: Projects with live demos and source code |
| 66 | - **Certificate Gallery**: Professional certifications with lightbox viewer |
| 67 | - **Loading States**: Splash screen, smooth transitions, and skeleton loaders |
| 68 | - **Analytics**: Privacy-friendly insights via Umami and Microsoft Clarity |
| 69 | - **SEO Optimized**: Meta tags and sitemap |
| 70 | |
| 71 | --- |
| 72 | |
| 73 | ## Let's Connect |
| 74 | |
| 75 | Like what you see? Send me a message through the contact form on the site, |
| 76 | or reach me on LinkedIn. I'd love to hear from you! |
| 77 | |
| 78 | --- |
| 79 | |
| 80 | |