My Name is

I'm a

My Name is

I'm a

Professional Profile

I am a passionate Web Developer specializing in building clean, functional, and responsive digital experiences. My journey started with a curiosity for how things work on the web, which evolved into a career dedicated to coding and continuous learning.

Currently, I am part of the SCS Scheme, honing my skills in modern front-end technologies and best practices.

What I'm Seeking

An entry-level Junior Frontend or Full-Stack Developer role where I can contribute to building clean, responsive web applications. I am eager to join a collaborative engineering team where I can learn from experienced mentors, apply my skills in React, TypeScript, and Node.js, and continuously grow my technical foundation.

My Core Interests

I am deeply interested in user-centric web development and translating designs into pixel-perfect, interactive UIs. I love the logic of problem solving, whether that's writing clean, maintainable code on the frontend or connecting APIs on the backend. I’m motivated by the challenge of turning ideas into functional digital products that make life easier for users.

Skills & Technologies

Front-End Development

HTML5CSS3Tailwind CSSSCSS JavaScriptTypeScriptReactjQuery AJAXMUIFramer MotionVite

Back-End Development

Node.jsExpress.jsLaravelPHPRESTful APIs

Database Management

MySQLFirebase

Authentication & Cloud

Firebase AuthenticationFirebase HostingClerkCloudinary

Tools & Practices

GitGitHubVS CodePostman FigmaVisual StudioResponsive Design Role-Based Access ControlAPI IntegrationAgile Methodologies

Career Background

January 2025 – January 2026

Full-Stack Developer (Contract)

Travel Industry Client
  • Independently developed a full-stack travel itinerary management platform for a travel industry client.
  • Built mobile-optimized, responsive frontend interfaces using React, TypeScript, and MUI.
  • Created Node.js/Express.js RESTful APIs to manage complex itinerary data, pricing, and user roles via MySQL JSON structures.
  • Integrated Clerk for secure authentication, Cloudinary for image handling, and ChatGPT API for automated PDF itinerary parsing.
  • Collaborated closely with the client to gather requirements and iteratively deploy a tailored solution.
August 2024 – January 2025

Software Developer

Marvenics
  • Developed responsive dashboards and landing pages for a restaurant table booking application using React, TypeScript, and MUI.
  • Collaborated closely within an Agile Scrum team alongside UI/UX designers and backend developers to deliver features and integrate Node.js APIs.
  • Maintained high code quality and component reusability through active participation in peer code reviews and Git version control.
  • Contributed actively to sprint planning, daily stand-ups, and precise task estimations.
July 2024 – December 2024

Volunteer Frontend Developer

TheITApprentice
  • Created, enhanced, and reworked multiple responsive landing pages using TypeScript, React, and MUI.
  • Utilized Framer Motion to implement smooth animations and elevate the interactive user experience.
  • Ensured layout fluidness and structural integrity across varied screen configurations and mobile viewports.
2020 – 2021 | India

Junior Software Developer

Shadreams
  • Co-designed and developed a desktop and web-based billing and inventory management application for a small-scale jewellery retail business.
  • Simplified UI/UX workflows to enhance day-to-day user efficiency and resolved cross-platform UI rendering bugs in C# and WPF.

Portfolio

Netmatters Homepage Recreation

Netmatters Homepage Recreation

Recreation of the Netmatters company homepage - Built with HTML, SCSS, and JavaScript - featuring a responsive layout and CSS animations.

Live Demo → Github →
Random Picture Mapper

Random Picture Mapper

A project developed using HTML, SCSS, and JavaScript that retrieves random images from the web and maps them to individual email addresses.

Live Demo → Github →
Corporate Admin Panel

Corporate Admin Panel

A mini-CRM admin system built with Laravel, PHP, and MySQL - featuring full CRUD functionality for managing companies and employees, secure authentication, file upload storage, and paginated data tables.

Live Demo → Github →
Gram Biller

Gram Biller

A billing and invoice management application built with HTML, CSS, and TypeScript to create, manage, and organize customer bills efficiently through a simple and user-friendly interface.

Live Demo → Github →
Global Currency Converter

Global Currency Converter

A responsive web application built with HTML, CSS, and JavaScript for converting currencies quickly and efficiently using live exchange rate data.

Live Demo → Github →

Coding Examples

typingEffect.js 
function startRoleTyping(selector) {
  
        new Typed(selector, {
          strings: ['Web Developer', 'Frontend Developer', 'UI/UX Enthusiast'],
          typeSpeed: 60,
          backSpeed: 40,
          backDelay: 1800,
          loop: true,
          showCursor: true,
          cursorChar: '|'
        });
      }

        new Typed('#name-typed-desk', {
          strings: ['Shyji John'],
          typeSpeed: 80,
          loop: false,
          showCursor: false,
          onComplete: function() {
            startRoleTyping('#role-typed-desk');
          }
        });
Language JavaScript - using the Typed.js library
What it does Animates a typewriter effect on the hero section. First it types the name "Shyji John", and once that completes, it loops through a list of role titles — Web Developer, Frontend Developer, and UI/UX Enthusiast — typing and deleting each one continuously.
Why I used it Animating the name before looping through roles looks smooth and natural.
DatabaseSeeder.php 
public function run(): void
{
    User::create([
        'name' => 'Admin',
        'email' => 'admin@admin.com',
        'password' => Hash::make('password'),
    ]);

    Company::factory(10)->create()->each(function ($company) {
        Employee::factory(5)->create(['company_id' => $company->id]);
    });
}
Language PHP - using Laravel Factories & Seeders
What it does Seeds the database with default administrator credentials ("admin@admin.com") and automatically generates mock data for 10 companies and 50 employees for testing.
Why I used it Automates environment setup so the application is immediately testable and functional upon running a fresh database migration.

Contact

Get In Touch

Got a cool idea or looking for a new addition to your team? I'd love to hear from you!

Please fill out the form or use the details below to contact me regarding projects or employment. Let's build something great together.

Email : shyjijohn90@gmail.com