const developer = {
  name: 'Ruje Alfon',
  skills: ['Vue.js', 'JavaScript']
};
<div class="portfolio">
  <h1>Frontend Developer</h1>
</div>
.hero {
  background: linear-gradient();
  animation: fadeIn 2s;
}
function createAmazingWebsite() {
  return 'Innovative Solutions';
}
<head>
  <meta charset="UTF-8">
  <title>Portfolio</title>
</head>
@keyframes slideIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
<nav class="navbar">
  <a href="#home">Home</a>
</nav>
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}
import { ref, computed } from 'vue';
const count = ref(0);
<template>
  <div v-if="isVisible">
    {{ message }}
  </div>
</template>
.btn {
  background: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
}
async function fetchData() {
  try {
    const response = await fetch('/api');
    return response.json();
  } catch (error) {
    console.error(error);
  }
}
<style scoped>
.component {
  display: flex;
  flex-direction: column;
}
</style>
const router = createRouter({
  history: createWebHistory(),
  routes: []
});
@media (min-width: 768px) {
  .responsive {
    grid-template-columns: repeat(2, 1fr);
  }
}
<script setup>
import { onMounted } from 'vue';
onMounted(() => {
  console.log('Component mounted');
});
</script>
.card {
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  border-radius: 8px;
  padding: 1rem;
}
export default {
  name: 'Portfolio',
  data() {
    return {
      title: 'Frontend Dev'
    }
  }
}
<main>
  <section class="hero">
    <h1>Welcome</h1>
  </section>
</main>
const store = createStore({
  state: {
    user: null
  },
  mutations: {}
});
.flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
document.addEventListener('DOMContentLoaded', () => {
  console.log('Page loaded');
});
<button @click="handleClick">
  Click me
</button>
.hover\\:scale-105 {
  transition: transform 0.2s;
}
.hover\\:scale-105:hover {
  transform: scale(1.05);
}
const app = createApp({
  setup() {
    return { message: 'Hello Vue!' }
  }
});
<footer>
  <p>© 2024 Portfolio</p>
</footer>
.grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
function debounce(func, wait) {
  let timeout;
  return function(...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(this, args), wait);
  };
}

Ruje Alfon

Senior Frontend Web Developer

View My Work Get In Touch
const developer = {
  name: 'Ruje Alfon',
  experience: '10+ years',
  passion: 'Frontend Development'
};
.skill-progress {
  width: 0%;
  transition: width 1.5s ease;
  background: linear-gradient(90deg, #00DC82, #34D399);
}
<div class="about-container">
  <img src="profile.jpeg" alt="Profile"/>
  <p>Frontend Developer</p>
</div>
function animateSkills() {
  gsap.to('.skill-progress', {
    width: '95%',
    duration: 1.5
  });
}
.floating-icon {
  position: absolute;
  animation: float 3s ease-in-out infinite;
  opacity: 0.7;
}
<section id="about">
  <h2>About Me</h2>
  <div class="skills-showcase"></div>
</section>
const skills = [
  'JavaScript', 'Vue.js',
  'HTML5', 'CSS3',
  'React', 'Node.js'
];
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}
.profile-image {
  border-radius: 50%;
  transition: transform 0.3s ease;
  box-shadow: 0 0 20px rgba(0,220,130,0.3);
}
<div class="skill-item">
  <i class="fab fa-js-square"></i>
  <h4>JavaScript</h4>
</div>

About Me

Ruje Alfon - Frontend Web Developer

Passionate frontend developer with 10+ years of experience crafting exceptional digital experiences. I transform complex ideas into intuitive, responsive web applications using modern frameworks like Vue.js, cutting-edge CSS techniques, and performance-optimized JavaScript.

From concept to deployment, I thrive in agile environments where collaboration meets innovation. My expertise spans the entire development lifecycle - architecting scalable component systems, implementing pixel-perfect designs, and ensuring seamless user experiences across all devices and platforms.

I'm passionate about staying ahead of the curve with emerging technologies, accessibility standards, and performance optimization techniques that make the web faster and more inclusive for everyone.

Core Technologies

JavaScript

Vue.js

HTML5

CSS3

import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);
.project-card {
  transform: translateY(0);
  transition: all 0.3s ease;
}

.project-card:hover {
  transform: translateY(-5px);
}
<template>
  <div class="projects-grid">
    <project-card
      v-for="project in projects"
      :key="project.id"
    />
  </div>
</template>
const projects = [
  {
    name: 'PizzaHut',
    tech: 'React'
  },
  {
    name: 'Scoot',
    tech: 'Nuxt.js'
  }
];
function deployProject() {
  console.log('Deploying...');
  return 'Success!';
}
<article class="project">
  <h3>Project Title</h3>
  <p>Description</p>
</article>
.grid {
  display: grid;
  grid-template-columns:
    repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}
<link rel="stylesheet"
      href="styles.css">
.card-hover {
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  transform: scale(1.02);
}
const projectData = {
  featured: true,
  live: 'https://pizzahut.com.au',
  tech: ['React', 'Mobile']
};
.project-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}
<a href="#projects" class="nav-link">
  View Projects
</a>
function loadProjects() {
  return fetch('/api/projects')
    .then(res => res.json());
}

Featured Projects

Live

PizzaHut Australia

Maintain Web, Android and iOS App for PizzaHut Australia with modern UI/UX and seamless ordering experience.

Frontend Developer • March 2020

React Mobile E-commerce
Nuxt.js

Scoot Gauge Change

Automated gauge change process flow application built with Nuxt.js for airline operations optimization.

Frontend/UI Developer • October 2019

Nuxt.js Automation UI/UX
E-commerce

Galleon PH

E-commerce platform for products not available in the Philippines with seamless international shipping.

Full-Stack Developer • January 2019

E-commerce Full-Stack PHP
Travel

TripZeeker

Online Bazaar of Travel Experiences connecting travelers with unique local adventures and experiences.

Full-Stack Developer • January 2018

Travel Marketplace Full-Stack
Jobs

Jobayan

Fastest Growing Job Community, the Millennial Way to Find Jobs with smart matching algorithms.

Full-Stack Developer • January 2017

Job Portal Community Full-Stack
Node.js

ShippingCart

Large scale website built with Node.js framework for efficient shipping and logistics management.

Frontend Developer • October 2014

Node.js Shipping Frontend
class Experience {
  constructor(years) {
    this.duration = years;
    this.skills = [];
  }
}
.timeline-item {
  position: relative;
  opacity: 0;
  transform: translateY(30px);
}
const workHistory = [
  {
    company: 'BCS Technology',
    role: 'Senior Frontend'
  }
];
<div class="timeline">
  <div class="timeline-node"></div>
  <h3>Job Title</h3>
</div>
function animateTimeline() {
  gsap.to('.timeline-item', {
    opacity: 1
  });
}
.timeline-node {
  background: #00DC82;
  border-radius: 50%;
}

Work Experience

Senior Front-end Web Developer

BCS Technology International Pty Ltd

April 2019 - Present
  • Developing user-facing applications using Vue.js
  • Building modular and reusable components and libraries
  • API Integration from multiple services and state management

Web Developer

Sterling Technologies

March 2014 - April 2019
  • Developing and maintaining front-end functionality of websites
  • Writing cross-browser compliant XHTML, CSS & JavaScript
  • Creating websites that are user-friendly, effective and appealing

MIS Specialist

Cyber City Teleservices

February 2011 - April 2013
  • Quality assurance review through multiple QA programs
  • Maintaining data quality, validity, verification and compliance
  • Generated and managed 200+ reports daily for 50+ clients
const contactInfo = {
  email: 'rujealfon@gmail.com',
  phone: '+639053801178',
  website: 'rujealfon.github.io'
};
.contact-card {
  background: var(--nuxt-surface);
  border: 1px solid var(--nuxt-border);
  border-radius: 8px;
  transition: all 0.3s ease;
}
<form class="contact-form">
  <input type="email" placeholder="Your Email"/>
  <textarea placeholder="Message"></textarea>
  <button type="submit">Send</button>
</form>
function sendMessage() {
  fetch('/api/contact', {
    method: 'POST',
    body: formData
  });
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
<address>
  <a href="mailto:email@domain.com">
    Contact Me
  </a>
</address>
.btn-primary {
  background: linear-gradient(135deg, #0969da, #2da44e);
  color: white;
  border: none;
  border-radius: 8px;
}
<footer class="site-footer">
  <p>© 2024</p>
</footer>
.social-links {
  display: flex;
  gap: 1rem;
  justify-content: center;
}
<script src="contact.js"></script>
const contactMethods = {
  email: 'rujealfon@gmail.com',
  phone: '+639053801178',
  available: true
};
.contact-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,220,130,0.2);
}
<button onclick="startProject()">
  Let's Work Together
</button>

Let's Work Together

Ready to bring your ideas to life? Let's create something amazing together.

Email

rujealfon@gmail.com

Phone

+639053801178

Website

rujealfon.github.io
Start a Project Download Resume