Skip to content

Fullstackforgefinal #128

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
akushilan wants to merge 6 commits into
base: main
Choose a base branch
from
Open

Fullstackforgefinal #128

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
5642e9e
Add feature fullstackforge template
alaryafrec Feb 11, 2026
30a9293
Add feature add fullstackforge image
alaryafrec Feb 11, 2026
89f756a
Add feature: inserted fullstackforge portfolio to freefolio index.html
alaryafrec Feb 11, 2026
a9a13e4
Add feature: fullstackforge new template and inserted inside the inde…
alaryafrec Feb 11, 2026
afeba12
Delete fullstackforge/.DS_Store
akushilan Feb 11, 2026
15816d5
Delete images/fullstackforge.png
akushilan Feb 11, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 19 additions & 0 deletions fullstackforge/cv.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
Jan Michael Sibug
Full Stack Web Developer

Email: hello@fullstackforge.dev
Phone: +1 (234) 567-890

Summary:
Full stack engineer focused on building scalable, accessible, and high-impact web products.

Core Skills:
HTML, CSS, JavaScript, TypeScript, React, Node.js, Express, PostgreSQL, MongoDB

Experience:
Senior Full Stack Developer — ForgeLabs (2022 - Present)
Full Stack Developer — BrightWorks Studio (2019 - 2022)
Frontend Engineer — Launchpad Digital (2017 - 2019)

Education:
B.S. in Computer Science — University of Technology (2017)
Binary file added fullstackforge/fullstackforge.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
268 changes: 268 additions & 0 deletions fullstackforge/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,268 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>FullStackForge | Full Stack Web Developer</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header class="site-header">
<nav class="nav container">
<a class="brand" href="#top" aria-label="FullStackForge home">
<span class="brand-mark" aria-hidden="true">❤</span>
<span class="brand-text">FullStackForge</span>
</a>
<button class="nav-toggle" aria-expanded="false" aria-controls="nav-links">Menu</button>
<div id="nav-links" class="nav-links">
<a href="#about">About</a>
<a href="#skills">Skills</a>
<a href="#experience">Experience</a>
<a href="#education">Education</a>
<a href="#portfolio">Portfolio</a>
<a href="#contact">Contact</a>
</div>
<a class="btn btn-primary" href="cv.txt" download>Download CV</a>
</nav>
</header>

<main id="top">
<section class="hero">
<div class="container hero-grid">
<div class="hero-copy">
<div class="pill">FullStackForge · End-to-end product delivery</div>
<h1>Shipping reliable web platforms with speed, polish, and calm.</h1>
<p class="lead">
I combine product sense with engineering rigor—crafting resilient back ends, responsive UIs, and
clear collaboration for teams that need to move fast.
</p>
<div class="hero-actions">
<a class="btn btn-primary" href="#portfolio">View Portfolio</a>
<a class="btn btn-ghost" href="#contact">Let’s Talk</a>
</div>
<div class="hero-badges">
<span>Full Stack Web Developer</span>
<span>Remote · Onsite</span>
<span>Available now</span>
</div>
<div class="social">
<a href="https://github.com/" target="_blank" rel="noreferrer"><img class="icon-img" src="https://cdn.simpleicons.org/github/01b953" alt="" />GitHub</a>
<a href="https://gitlab.com/" target="_blank" rel="noreferrer"><img class="icon-img" src="https://cdn.simpleicons.org/gitlab/01b953" alt="" />GitLab</a>
</div>
</div>

<div class="hero-panel">
<div class="profile-card">
<img src="profile.svg" alt="Profile placeholder" />
<div class="profile-meta">
<h3>FullStackForge</h3>
<p>Full Stack Web Developer</p>
</div>
<div class="profile-stats">
<div><strong>6+</strong><span>Years</span></div>
<div><strong>25+</strong><span>Projects</span></div>
<div><strong>10+</strong><span>Stacks</span></div>
</div>
<span class="status">Open to opportunities</span>
</div>
</div>
</div>
</section>

<section class="trust">
<div class="container trust-grid">
<p>Tooling I use to deliver fast and safely</p>
<div class="trust-logos">
<span><img class="icon-img" src="https://cdn.simpleicons.org/react/61dafb" alt="" />React</span>
<span><img class="icon-img" src="https://cdn.simpleicons.org/nodedotjs/3c873a" alt="" />Node.js</span>
<span><img class="icon-img" src="https://cdn.simpleicons.org/typescript/3178c6" alt="" />TypeScript</span>
<span><img class="icon-img" src="https://cdn.simpleicons.org/postgresql/336791" alt="" />PostgreSQL</span>
<span><img class="icon-img" src="https://cdn.simpleicons.org/mongodb/116149" alt="" />MongoDB</span>
<span><img class="icon-img" src="https://cdn.simpleicons.org/docker/0db7ed" alt="" />Docker</span>
<span><img class="icon-img" src="https://cdn.simpleicons.org/figma/f24e1e" alt="" />Figma</span>
</div>
</div>
</section>

<section id="about" class="section container">
<div class="section-heading">
<p class="kicker">About</p>
<h2>Clarity-first engineering for modern teams</h2>
</div>
<div class="feature-grid">
<p>
I build products from concept to launch—balancing thoughtful UX, scalable architecture, and
maintainable code. My approach is collaborative, outcome-driven, and focused on sustainable
velocity.
</p>
<div class="feature-card">
<h3>What drives my work</h3>
<ul>
<li>Reliable delivery, documented decisions, and clean handoffs</li>
<li>Design systems that stay consistent across squads</li>
<li>APIs that are predictable, secure, and easy to extend</li>
</ul>
</div>
<div class="feature-card">
<h3>How I partner</h3>
<ul>
<li>Translate requirements into clear technical plans</li>
<li>Ship iteratively with instrumentation and monitoring</li>
<li>Coach teams on front-end patterns and API contracts</li>
</ul>
</div>
</div>
</section>

<section id="skills" class="section alt">
<div class="container">
<div class="section-heading">
<p class="kicker">Skills</p>
<h2>Stack and capabilities</h2>
</div>
<div class="chip-grid">
<span><img class="icon-img" src="https://cdn.simpleicons.org/html5/e34f26" alt="" />HTML5</span>
<span><img class="icon-img" src="https://cdn.simpleicons.org/css3/1572B6" alt="" />CSS3</span>
<span><img class="icon-img" src="https://cdn.simpleicons.org/javascript/f7df1e" alt="" />JavaScript</span>
<span><img class="icon-img" src="https://cdn.simpleicons.org/typescript/3178c6" alt="" />TypeScript</span>
<span><img class="icon-img" src="https://cdn.simpleicons.org/react/61dafb" alt="" />React</span>
<span><img class="icon-img" src="https://cdn.simpleicons.org/nodedotjs/3c873a" alt="" />Node.js</span>
<span><img class="icon-img" src="https://cdn.simpleicons.org/express/000000" alt="" />Express</span>
<span><img class="icon-img" src="https://cdn.simpleicons.org/postgresql/336791" alt="" />PostgreSQL</span>
<span><img class="icon-img" src="https://cdn.simpleicons.org/mongodb/116149" alt="" />MongoDB</span>
<span><span class="icon-emoji" aria-hidden="true">🔗</span>REST APIs</span>
<span><span class="icon-emoji" aria-hidden="true">⚙️</span>CI/CD</span>
<span><span class="icon-emoji" aria-hidden="true">☁️</span>Cloud Deployments</span>
</div>
</div>
</section>

<section id="experience" class="section container">
<div class="section-heading">
<p class="kicker">Experience</p>
<h2>Delivery you can measure</h2>
</div>
<div class="timeline">
<article>
<div>
<h3>Senior Full Stack Developer — ForgeLabs</h3>
<p class="meta">2022 - Present</p>
</div>
<p>Rebuilt a multi-tenant SaaS with microservices; improved load times by 38% and CI/CD reliability.</p>
</article>
<article>
<div>
<h3>Full Stack Developer — BrightWorks Studio</h3>
<p class="meta">2019 - 2022</p>
</div>
<p>Delivered 12+ client platforms, crafted UI libraries, and integrated analytics and billing services.</p>
</article>
<article>
<div>
<h3>Frontend Engineer — Launchpad Digital</h3>
<p class="meta">2017 - 2019</p>
</div>
<p>Shipped responsive experiences for B2B SaaS clients in close partnership with design teams.</p>
</article>
</div>
</section>

<section id="education" class="section alt">
<div class="container">
<div class="section-heading">
<p class="kicker">Education</p>
<h2>Education & credentials</h2>
</div>
<div class="cards">
<article>
<h3>B.S. in Computer Science</h3>
<p class="meta">University of Technology — 2017</p>
<p>Grounded in software engineering, data structures, and human-computer interaction.</p>
</article>
<article>
<h3>Professional Certifications</h3>
<p class="meta">2020 - 2024</p>
<p>AWS Cloud Practitioner, Google UX Design, and Advanced JavaScript.</p>
</article>
</div>
</div>
</section>

<section id="portfolio" class="section container">
<div class="section-heading">
<p class="kicker">Portfolio</p>
<h2>Selected work</h2>
</div>
<div class="portfolio-grid">
<article>
<div class="card-top">
<h3>PulseTrack Analytics</h3>
<span class="tag">Analytics</span>
</div>
<p>Real-time marketing insights dashboard with RBAC, alerts, and usage metering.</p>
<div class="tags">
<span><img class="icon-img" src="https://cdn.simpleicons.org/nodedotjs/3c873a" alt="" />Node.js</span>
<span><img class="icon-img" src="https://cdn.simpleicons.org/react/61dafb" alt="" />React</span>
<span><img class="icon-img" src="https://cdn.simpleicons.org/postgresql/336791" alt="" />PostgreSQL</span>
</div>
</article>
<article>
<div class="card-top">
<h3>Onward HR Portal</h3>
<span class="tag">Operations</span>
</div>
<p>Employee onboarding suite with secure messaging, documents, and workflows.</p>
<div class="tags">
<span><img class="icon-img" src="https://cdn.simpleicons.org/typescript/3178c6" alt="" />TypeScript</span>
<span><img class="icon-img" src="https://cdn.simpleicons.org/express/000000" alt="" />Express</span>
<span><img class="icon-img" src="https://cdn.simpleicons.org/mongodb/116149" alt="" />MongoDB</span>
</div>
</article>
</div>
</section>

<section id="contact" class="section alt">
<div class="container">
<div class="section-heading">
<p class="kicker">Contact</p>
<h2>Let’s build together</h2>
</div>
<div class="contact-grid">
<div class="contact-card">
<h3>Get in touch</h3>
<p>
<span class="contact-line"><span class="inline-icon phone-icon" aria-hidden="true"></span><a href="tel:+1234567890">+1 (234) 567-890</a></span><br />
<span class="contact-line"><span class="inline-icon mail-icon" aria-hidden="true"></span><a href="mailto:hello@fullstackforge.dev">hello@fullstackforge.dev</a></span><br />
<span class="contact-line"><span class="inline-icon mail-icon" aria-hidden="true"></span><a href="mailto:careers@fullstackforge.dev">careers@fullstackforge.dev</a></span>
</p>
</div>
<form class="contact-form">
<label>
Name
<input type="text" name="name" placeholder="Your name" />
</label>
<label>
Email
<input type="email" name="email" placeholder="you@email.com" />
</label>
<label>
Message
<textarea name="message" rows="4" placeholder="Tell me about your project"></textarea>
</label>
<button type="button" class="btn btn-primary">Send Message</button>
</form>
</div>
</div>
</section>
</main>

<footer class="footer">
<p>
Made with <span class="heart" aria-hidden="true">&#10084;</span> by Jan Michael Sibug · ©
<span id="year"></span> Freefolio template by OSSPH
</p>
</footer>

<script src="script.js"></script>
</body>
</html>
17 changes: 17 additions & 0 deletions fullstackforge/profile.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
33 changes: 33 additions & 0 deletions fullstackforge/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
const navToggle = document.querySelector('.nav-toggle');
const navLinks = document.querySelector('.nav-links');
const navItems = document.querySelectorAll('.nav-links a');

if (navToggle && navLinks) {
navToggle.addEventListener('click', () => {
const isOpen = navLinks.classList.toggle('open');
navToggle.setAttribute('aria-expanded', String(isOpen));
});
}

const sections = document.querySelectorAll('section[id]');
const setActiveLink = () => {
let current = '';
sections.forEach((section) => {
const sectionTop = section.offsetTop - 120;
if (window.scrollY >= sectionTop) {
current = section.getAttribute('id');
}
});

navItems.forEach((link) => {
link.classList.toggle('active', link.getAttribute('href') === `#${current}`);
});
};

window.addEventListener('scroll', setActiveLink);
setActiveLink();

const year = document.getElementById('year');
if (year) {
year.textContent = new Date().getFullYear();
}
Loading
Loading