system@portfolio:~$

Ian Padua

Systems & Web Developer | IT Project Manager

25+ years bridging legacy systems (COBOL, FoxPro) and modern web architectures (JavaScript, Python, Java). Specializing in end-to-end system design, network security, and database management across the Middle East, Mongolia, and the Philippines.

Headless CMS Blog & Portfolio

High-performance, SEO-optimized blog and portfolio using a decoupled JAMstack architecture with server-side rendering and static site generation for near-instantaneous navigation.

Nuxt.jsSanity.ioGROQTailwind CSS

Java Library Management System

Comprehensive desktop application for automated book tracking, member registration, and circulation management with real-time availability tracking and automated fine calculation.

JavaSwingJDBCMySQL

Technology stack

Click any node to explore connections and related projects

From code to production

Drag the slider to explore the implementation

Result

Code

// Nuxt.js + Sanity.io JAMstack Architecture
// GROQ query for fetching blog posts
const query = groq`
  *[_type == "post"] | order(publishedAt desc) {
    _id,
    title,
    slug,
    publishedAt,
    "author": author->name,
    "categories": categories[]->title,
    "mainImage": mainImage.asset->url,
    body
  }
`;

// Server-side rendering with Nuxt.js
export default defineNuxtConfig({
  modules: ['@nuxtjs/sanity'],
  sanity: {
    projectId: process.env.SANITY_PROJECT_ID,
    dataset: 'production',
    useCdn: true,
    apiVersion: '2024-01-01'
  }
});

// Image CDN delivery with optimized loading
const imageUrl = urlFor(post.mainImage)
  .width(800)
  .height(400)
  .format('webp')
  .url();