DEV Community: Marcus Chan

How I Rebuilt My Portfolio with a Little Help from AI

Marcus Chan — Fri, 23 Jan 2026 13:00:52 +0000

What started as a messy side project is now a smarter, easier to maintain site, thanks to a configuration-driven approach and modern dev tools.

The Messy Start

Like many developers, my portfolio started as a quick weekend project. It was built with plain HTML, CSS, and JavaScript, functional but outdated, hard to maintain, and definitely not something I was proud of.

Every small update meant digging through multiple files, tweaking styles, and hoping nothing broke. So the project sat untouched for months… until I decided to finish it properly.

Before

Cleaning It Up with AI

The first step was cleaning up the mess. This time, I used AI as a coding partner to help with repetitive work like:

Refactoring messy code
Organizing files properly
Making CSS more consistent
Adding basic JavaScript structure

Tasks I had procrastinated for weeks were done in days. AI didn’t build the project for me, it simply accelerated the boring parts so I could focus on structure and decisions.

After

Making It Configuration-Driven

Next, I tackled the real problem: content was scattered everywhere. Adding a new project or skill meant editing multiple HTML files manually.

My solution was simple: create a single data.json file to store all the content. This one file now controls:

Bio and personal info
Project showcases
Timeline (work, education, certifications)
Skills and social links

{
  "_comment": "This file controls all content and navigation for the portfolio website.",
  "config": {
    "name": "...",
    "real_name": "...",
    "title": "...",
    "subtitle": "...",
    "summary": "...",
    "email": "...",
    "website": "...",
    "typedMessages": [...],
    "cvDriveId": "..."
  },
  "social": [
    {
      "platform": "...",
      "icon": "...",
      "url": "..."
    }
  ],
  "showcase": [
    {
      "id": "...",
      "title": "...",
      "backgroundImage": "...",
      "technologies": [...],
      "modalContent": {
        "title": "...",
        "description": "...",
        "links": [...]
      }
    }
  ],
  "skills": {
    "languages": [...],
    "cloud": [...],
    "web": [...],
    "devops": [...],
    "databases": [...],
    "ai": [...]
  },
  "timeline": [
    {
      "category": "...",
      "order": 0,
      "startDate": "...",
      "endDate": "...",
      "company": "...",
      "title": "...",
      "modalContent": {...}
    }
  ],
  "navigation": [
    {
      "id": "...",
      "enabled": true,
      "title": "...",
      "icon": "..."
    }
  ]
}

Now, updating the site means editing one file. Add a new project or certification to data.json, and the site updates automatically, no HTML editing required.

Upgrading the Tooling

With the structure in place, I modernized the build process using Vite.

The migration was smooth and made development much more enjoyable.

Automating the Workflow

To finish things off, I added CI/CD with GitHub Actions. Now every change follows this flow:

Update data.json
Commit and push
Tests run automatically, the site builds, and it deploys

No more manual steps, and no more deployment headaches.

Github Actions

What I Learned

✅ Centralize your content. A single JSON source of truth makes updates simple and scalable.

✅ AI is a helper, not a replacement. It speeds up development and removes friction.

✅ Modern tools matter. Vite, TypeScript, and CI/CD make even small projects more maintainable.

✅ Automation saves time. Build, test, and deploy steps should run without effort.

Connect with me on LinkedIn| GitHub| Portfolio

Built a Game in 2 Hours with Amazon Q

Marcus Chan — Thu, 19 Jun 2025 15:35:21 +0000

🧠 The Idea

So I was walking around AWS Summit Singapore and saw this poster:

“Build Games with Amazon Q CLI”

Score a T-shirt.

I didn’t go there planning to build a game. But I was curious what Amazon Q CLI could do. And yeah, the swag sounded fun.

So I gave myself a quick challenge:

⏱ Max 2 hours
🧠 Let Q CLI do most of the work
🎮 End up with something that runs

🧪 My Iteration Journey (with Prompts I gave Q)

🎮 Getting the First Build Running

“Build an endless jumper game in Python using pygame.”

Q spun up a basic prototype:

Player block
Green platforms
Gravity
Score counter

It worked! But sometimes… you just drop off the screen instantly. RIP.

⛔ Bug #1 — Sudden Death

“Fix a bug where the player sometimes falls immediately when the game starts.”

This worked.

But there was another issue: once you lost, the game window just closed. No warning, no time to react.

💀 Game Over Screen + Reset

“When the player loses, show a ‘Game Over’ screen and wait for a key press before closing. Also, add a reset feature, pressing ‘R’ should restart the game.”

Q delivered:

Game Over screen
Press ‘R’ to restart

Super helpful for testing. No more relaunching the app every time I mess up.

But there was something weird, the platforms were too wide. You literally couldn’t lose. You just bounced forever.

📏 Fixing the “Can’t Lose” Bug + Adding Difficulty

“Fix the bug where when you jump further up, the platform becomes too big — like make some difficulty in the game.”

With this prompt, Q made the game more challenging:

Narrower platforms : You could finally miss a jump and fall
Scaling difficulty : Platforms spread apart

Now we’re talking. It finally felt like a game — one you could actually lose.

⚡ Adding Power-Ups

“Add a random power-up — you decide what it is — and spawn it on some platforms. Enhance the game.”

Q gave me power-ups like:

Double jump
Bigger platforms
Slow motion

Cool stuff — but a new bug appeared: timer kept ticking even after you lost.

🛥️ Fixing the Timer Bug

“Fix the timer — once the game ends or is frozen, the timer should stop.”

Clean fix. Timer now pauses properly during freezes and stops on game over. That wrapped it up nicely.

🧹 Final Touches

“Create a README.md for the project.”

Q generated a clean, well-written README file with usage instructions.

💡 Final Thoughts

This was a fun, focused experiment. In under 2 hours, I went from nothing to:

A playable endless jumper game
Scaling difficulty and proper fail conditions
A working power-up system
Reset and game-over mechanics
A complete README

No, I haven’t claimed the T-shirt yet.

But maybe this post will help.

You can find my repository here:

https://github.com/MarcusCJH/amazon-q-pygame

My AWS Cloud Certification Was Expiring — Here’s How I Recertified It Through Gamification

Marcus Chan — Tue, 11 Mar 2025 08:05:53 +0000

My AWS Cloud Certification Was Expiring — Here’s How I Recertified It Through Gamification

📩 “Important: Your AWS Certification expires on Mar 23, 2025”

Wait, what? My AWS Certified Cloud Practitioner credential was about to expire! And, of course, like any responsible tech professional, I had totally not forgotten about it (okay, maybe just a little).

The Usual Recertification Route vs. A Gamified Approach

Initially, I was considering the traditional route: just take an Associate-level exam and be done with it.

But then, two things happened at the same time:

1️⃣ I saw AWS now offered a gamified recertification process.

2️⃣ There was a “Cloud Tournament” happening within my organization.

So I thought… why not align everything and go all in? It was the perfect opportunity to recertify and compete at the same time!

How AWS Cloud Quest for Recertification Works

✔️ Stages 1–12: These were interactive and scenario-based , covering real AWS concepts with plenty of hands-on learning. Sure, there was a lot of reading , but it was a great way to refresh my cloud knowledge.

✔️ Stage 13 (Final Boss Battle): A Troubleshooting Challenge where you analyze and fix an AWS Cloud Architecture. This one definitely required some AWS experience , but it was a solid practical application of everything learned.

How Long Did It Take?

I’m suggesting completing one stage per day, meaning you could finish in 13 days.

Me? I did it in 4 hours. (Would have been faster if I didn’t stop for snacks.)

Plus, since I was already in “locked in” , I had the extra motivation to speedrun through it!

Final Thoughts 💭

✅ Was it fun? Yes!

✅ Did it refresh my AWS knowledge? Absolutely.

✅ Would I recommend it? If your AWS Cloud Practitioner cert is expiring and you want a different experience from the usual exam, this is a solid option.

💡 Bonus: It’s free until the end of July 2025 , so why not?

Try it out here: AWS Cloud Quest: Recertify Cloud Practitioner

You can connect with me on linkedin: https://www.linkedin.com/in/marcuschanjh/

Leveraging Amazon Connect for Real-Time Incident Response Calls

Marcus Chan — Fri, 27 Sep 2024 18:54:13 +0000

Amazon Connect is a cloud-based contact center.

This use case was to automate incident response calls: when an alert is triggered, it sends the alert to SNS, which triggers a Lambda function. This Lambda function calls the first escalation point. If no one answers, it escalates to the second contact.

Here’s how I built it:

Ensure that you are in the Correct Region — I’m using ap-southeast-1 as I am located in Singapore.

1. Setting up AWS Identity and Access Management (IAM)

Step 1: In the AWS Console, search for IAM.

Step 2: Under Access management , click on Roles , then select Create role.

Step 3: For the trusted entity type, choose AWS Service , and under Use Case , select Lambda.

Step 4: Use the following AWS Managed Policies :

AmazonConnect_FullAccess
AmazonDynamoDBFullAccess
AmazonSNSFullAccess
AWSLambdaBasicExecutionRole

Step 5: Finally, create a role name, then click Create role. Make sure to take note of your Role Name for future use.

2. Setting Up Amazon Simple Notification Service (SNS) (Optional)

Step 1: In the AWS Console, search for SNS.

Step 2: Navigate to Topics and click on Create topic.

Step 3: Choose Standard for the topic type and give it a name (e.g., “AmazonConnectSNS”). After the topic is created, make sure to note down the ARN for later use.

3. Setting Up Amazon Lambda

Step 1: In the AWS Console, search for Lambda.

Step 2: Click on Create Function.

Step 3: On the Create Function page, provide a Function Name (e.g., “AmazonConnectLambda”), select Runtime as Python 3.xx, and choose the existing role you created in the IAM setup section.

Step 4: Add an SNS Trigger to the Lambda function.

Step 5: Go to Configuration , then navigate to Generation Configuration , and set the Timeout to 1 minute.

Step 6: Paste the following code into the lambda_function.py file. I will explain the code in the last section, where we’ll also revisit it to modify variables:

import boto3
import time
from datetime import datetime

# Initialize the DynamoDB resource
dynamodb = boto3.resource('dynamodb')
table = dynamodb.Table('CallLogs')

# Create a Connect client
connect_client = boto3.client('connect')

#Amazon Connect Instance ID, Contact Flow ID and Claim number
CONNECT_INSTANCE_ID = 'xxxxxxxxx'
CONTACT_FLOW_ID = 'xxxxxxxxx'
SOURCE_PHONE_NUMBER = 'xxxxxxxxx' 

# Phone numbers for the contacts
FIRST_CONTACT_PHONE = "+65xxxxxx"
SECOND_CONTACT_PHONE = "+65xxxxxx"

def log_event_to_dynamodb(contact_id, event, phone_number, escalation_stage):
    """
    Log the event (CONNECTED, DISCONNECTED) into DynamoDB with relevant details.
    """
    try:
        table.put_item(
            Item={
                'ContactId': contact_id,
                'Event': event,
                'Timestamp': datetime.utcnow().isoformat(),
                'PhoneNumber': phone_number,
                'EscalationStage': escalation_stage
            }
        )
        print(f"Logged {event} event for ContactId {contact_id} in DynamoDB")
    except Exception as e:
        print(f"Error logging event to DynamoDB: {e}")

def start_outbound_call(phone_number, escalation_stage):
    """
    Start an outbound call using Amazon Connect and return the ContactId.
    """
    try:
        response = connect_client.start_outbound_voice_contact(
            DestinationPhoneNumber=phone_number,
            ContactFlowId=CONTACT_FLOW_ID,
            InstanceId=CONNECT_INSTANCE_ID,
            SourcePhoneNumber=SOURCE_PHONE_NUMBER,
            Attributes={
                'Escalation': escalation_stage
            }
        )
        contact_id = response['ContactId']
        print(f"Started outbound call to {phone_number} with ContactId: {contact_id}")
        return contact_id
    except Exception as e:
        print(f"Failed to start outbound call: {e}")
        raise e

def check_call_status(contact_id):
    """
    Check the status of the outbound call using the ContactId.
    """
    try:
        response = connect_client.describe_contact(
            InstanceId=CONNECT_INSTANCE_ID,
            ContactId=contact_id
        )

        if 'Contact' in response and 'DisconnectTimestamp' in response['Contact']:
            print(f"Call with ContactId {contact_id} was disconnected at {response['Contact']['DisconnectTimestamp']}")
            return 'DISCONNECTED'

        elif 'Contact' in response and 'ConnectedToSystemTimestamp' in response['Contact']:
            print(f"Call with ContactId {contact_id} was connected at {response['Contact']['ConnectedToSystemTimestamp']}")
            return 'CONNECTED'

    except Exception as e:
        print(f"Failed to check call status: {e}")
        raise e

def lambda_handler(event, context):
    try:
        acknowledgment = event.get('Details', {}).get('Parameters', {}).get('acknowledgment', 'False')
        escalation_stage = event.get('Details', {}).get('Parameters', {}).get('EscalationStage', 'FirstAttempt')
        print(f"Acknowledgment: {acknowledgment}, Escalation Stage: {escalation_stage}")
    except KeyError:
        print("Expected keys not found in event")
        acknowledgment = 'False'

    if acknowledgment == 'False' and escalation_stage == 'FirstAttempt':
        print("Calling the first contact...")
        contact_id = start_outbound_call(FIRST_CONTACT_PHONE, 'FirstAttempt')

        for attempt in range(10):
            time.sleep(5) 
            status = check_call_status(contact_id)

            if status == 'CONNECTED':
                log_event_to_dynamodb(contact_id, 'CONNECTED', FIRST_CONTACT_PHONE, 'FirstAttempt')
                print("First contact answered the call. No need to escalate.")
                return {
                    'statusCode': 200,
                    'body': 'First contact answered the call.'
                }

            elif status == 'DISCONNECTED':
                print(f"First contact did not pick up or disconnected. Escalating to second contact.")
                break

        print("Escalating to second contact...")
        contact_id = start_outbound_call(SECOND_CONTACT_PHONE, 'SecondAttempt')
        log_event_to_dynamodb(contact_id, 'ESCALATION', SECOND_CONTACT_PHONE, 'SecondAttempt')
        return {
            'statusCode': 200,
            'body': 'Second contact attempt made.'
        }

    elif acknowledgment == 'False' and escalation_stage == 'SecondAttempt':
        print("Calling the second contact...")
        contact_id = start_outbound_call(SECOND_CONTACT_PHONE, 'SecondAttempt')
        log_event_to_dynamodb(contact_id, 'ESCALATION', SECOND_CONTACT_PHONE, 'SecondAttempt')
        return {
            'statusCode': 200,
            'body': 'Second contact attempt made.'
        }

    elif acknowledgment == 'True':
        print("First contact acknowledged the call.")
        return {
            'statusCode': 200,
            'body': 'Call acknowledged by the first contact.'
        }

    else:
        print("Unexpected scenario encountered.")
        return {
            'statusCode': 500,
            'body': 'Unexpected scenario.'
        }

Step 6 : Click on Deploy

4. Setting up DynamoDB

Step 1: In the AWS Console, search for DynamoDB.

Step 2: In the navigation pane, click on Tables , then select Create Table.

Step 3: In the Create Table form, follow these steps:

Set the Table name to CallLogs.
For the Partition key , use ContactId.
For the Sort key , use Timestamp.

Finally, click Create table at the bottom.

5. Setting Up Amazon Connect

Step 1 : In the AWS Console, search for Amazon Connect.

Step 2: Create a new instance by following the on-screen instructions. Make sure to enable both Inbound and Outbound calls during setup.

Step 3: After the instance is created, navigate to Flows in the side menu. In the flow editor, under AWS Lambda , add the Lambda function that was created earlier.

Step 4: Log in to your Amazon Connect instance with admin privileges. Once logged in, navigate to the sidebar and select Phone numbers.

Step 5: Click on Claim a number and follow the recommended steps to complete the process.

Step 6: Test both incoming and outgoing calls:

To test incoming calls, use a mobile phone to dial the number you claimed.
For outgoing calls, use the Contact Control Panel in Amazon Connect.

Step 7: In the Amazon Connect navigation bar, click on Flows and create a new flow.

Step 8: Add a title to your flow, design the flow, and once done, click Publish. You can follow this basic structure for your flow:

Entry -> Set Logging Behavior block -> Play Prompt -> Get Customer Input

If the user presses 1, proceed to the Play Prompt block-> Disconnect block
If not, invoke the Lambda function block -> Disconnect block

In the Invoke AWS Lambda block, you’ll need to set up the function input parameters. Follow this structure for the input parameters:

6. Source Code Explanation

Calling the First Contact : Once the Lambda function is triggered, it initiates an outbound call to the FIRST_CONTACT_PHONE. The function then monitors the call status (whether it’s connected or disconnected) and logs the event accordingly.
Escalating to the Second Contact : If the first contact doesn’t respond, the function escalates the process by making an outbound call to the SECOND_CONTACT_PHONE.
Handling Call Acknowledgment : If an acknowledgment is received (set to ‘True’), the function stops any further escalation.

7. Wrapping Things Up

When revisiting the Lambda function, remember to update the following variables:

CONNECT_INSTANCE_ID: This is the unique Amazon Connect instance ARN (UUID) associated with your instance.
CONTACT_FLOW_ID: This is the UUID of your contact flow. You can find it in the URL of your flow in Amazon Connect, located immediately after /contact-flow/.
SOURCE_PHONE_NUMBER: This is the phone number you claimed in Amazon Connect.
FIRST_CONTACT_PHONE: The phone number of the first person to receive the call.
SECOND_CONTACT_PHONE: The phone number of the second person to receive the call if the first contact doesn’t answer.

In this setup, SNS is used to receive alerts from an AWS CloudWatch alarm, which triggers the SNS topic. You can simulate an alert by going to SNS and publishing a message manually.

However, for simplicity, we can skip that and go straight to Lambda and trigger the function directly to test the flow.

If everything works as expected, you should receive a call, and you’ll be able to view the call logs in DynamoDB under the CallLogs table.

While in DynamoDB, you will be able to see the CallLogs.

I hope you found this use case helpful.

Overall, I found it enjoyable to experiment with Aamzon Connect.

You can connect with me on linkedin: https://www.linkedin.com/in/marcuschanjh/