#Portfolio

O. Francesco — Sat, 28 Mar 2026 17:03:32 +0000

My Developer Portfolio - Project, Skills and Personal Journey
Exploring the world of a Frontend Dev
Self-taught JavaScript Developer

This is the code

<!DOCTYPE html>

Frontend Developer Portfolio

Hi, I'm Yoichi Isagi, a Js Dev.

Welcome to my Website!

Self-taught Frontend Developer building interactive web applications.
Always learning, always improving.

class="bg-white text-purple-900 px-6 py-3 rounded-xl font-semibold hover:scale-105 transition">
View Projects

<div class="relative">

    <!-- Background Image -->
    <div class="absolute inset-0 bg-cover bg-center opacity-40"
   style="background-image: url('https://cdn.pixabay.com/photo/2024/05/02/09/16/web-development-8734249_1280.png');">
    </div>

    <!-- Content Wrapper -->
    <div class="relative z-10">

        <!-- About Section -->
        <section class="py-20 px-6 max-w-4xl mx-auto text-center">
            <h2 class="text-3xl font-semibold mb-6">About Me</h2>
            <p class="text-white leading-relaxed">
            I'm a self-taught frontend developer focused on building clean, interactive, and responsive web applications. 
            I enjoy turning ideas into real, usable products and constantly improving my skills. 
            </p>
        </section>

        <!-- More Projects Section -->
        <section class="py-20 px-6 text-center">
            <h2 class="text-3xl font-semibold mb-4">More Projects Coming 🚀</h2>
            <p class="text-white">
            I'm constantly working on new projects—stay tuned!
            </p>
        </section>

    </div>
</div>
<section class="py-10 text-center">

Find Me Online

<a href="https://github.com/dereckcole97-lab" target="_blank"
   class="hover:text-white transition">
   GitHub
</a>

<a href="https://www.linkedin.com/in/o-francesco-cole-3aa8b3165/" target="_blank"
   class="hover:text-white transition">
   LinkedIn
</a>

<a href="https://www.linkedin.com/in/o-francesco-cole-3aa8b3165/" target="_blank"
   class="hover:text-white transition">
   Facebook
</a>

<a href="https://www.instagram.com/yoichi_isagi.js?igsh=cjR0cXBhdDRjYmVq" target="_blank"
   class="hover:text-white transition">
   Instagram
</a>

Lunch Picker

O. Francesco — Thu, 26 Mar 2026 00:22:19 +0000

//Building a Lunch Picker Program

/*n this lab, you'll build a program that helps in managing lunch options. You'll work with an array of lunches, add and remove items from the array, and randomly select a lunch option. */

//create an empty array
let lunches = [];
//create a function
//give it two arguments which one is an array and the second is a string
//this function should add the string argument to the end of the array and log it to the console
//return the updated array
function addLunchToEnd(arr, lunchItem) {
arr.push(lunchItem);
console.log(${lunchItem} added to the end of the lunch menu.);
return arr;
}
//create a secondn function
//give it two arguments: an array as first and a string as a second
//this function should add the string argument to the beginning of the array and log it to the console
//return the updated array
function addLunchToStart(arr, lunchItem) {
arr.unshift(lunchItem);
console.log(${lunchItem} added to the beginning of the lunch menu.);
return arr;
}
//create a function
//give it one argument (array)
//this function should its last element, IF successful log the message 0
//return the updaated array
function removeLastLunch(arr) {
if (arr.length === 0) {
console.log("No lunches to remove.");
return arr;
}

const removed = arr.pop();
console.log(${removed} removed from the end of the lunch menu.);
return arr;
}

// Remove first item and IF successful, log the message
//return updated array
function removeFirstLunch(arr) {
if (arr.length === 0) {
console.log("No lunches to remove.");
return arr;
}
//create a variable that removes first item and log it to the console
//return updated array
const removed = arr.shift();
console.log(${removed} removed from the start of the lunch menu.);
return arr;
}

// Get random item and IF successful, log the message
//return value
function getRandomLunch(arr) {
if (arr.length === 0) {
console.log("No lunches available.");
return;
}
//create a variable
//where its needed the approximately the rounded number of the decimal method
const randomIndex = Math.floor(Math.random() * arr.length);
const item = arr[randomIndex];
console.log(Randomly selected lunch: ${item});
}

// Show menu
function showLunchMenu(arr) {
if (arr.length === 0) {
console.log("The menu is empty.");
return;
}

console.log(Menu items: ${arr.join(", ")});
}

DEV Community: O. Francesco

#Portfolio

Hi, I'm Yoichi Isagi, a Js Dev. Welcome to my Website!

Find Me Online

Lunch Picker

Hi, I'm Yoichi Isagi, a Js Dev.

Welcome to my Website!