Hochu_Portfolio

Full-stack Developer, network engineer, AI enthusiast

Profile

About me and my approach

Hochu Shunsuke / 宝中俊介

Full-stack Developer, network engineer, AI enthusiast

Nagoya, Japan born in 2005

Mission

I have a great goal of creating a communication infrastructure for all to live, and we are moving forward every day toward that goal. Everything is an experience, and we approach our work with sincerity.

Goals

I aim to continuously advance my technical expertise and build systems that empower global connectivity. Every project is a step toward open, accessible technology, and I work to ensure real impact through shared knowledge and thoughtful design.

Strengths

• Creative problem-solving with logic and curiosity
• Clean, scalable code with growing design precision
• Quick to learn and adapt as a full-stack developer
• Clear, empathetic communicator in AI and networking topics

Areas for Growth

• Learning to delegate more effectively within teams
• Balancing perfectionism with practical delivery
• Improving public speaking and presentation confidence

My Approach

I’m growing as a full-stack developer by combining technical depth with a design-first mindset. I explore backend systems, network design, and AI-assisted development to build experiences that are both reliable and intuitive. I value clarity, clean code, and open collaboration throughout the process.

Nagoya, Japan

Available for freelance projects and collaborations

Skills

Technical proficiency and expertise

Tech Stack

I work with modern technologies to create performant and scalable applications. My toolkit includes frontend frameworks, backend technologies, and design tools.

React

Next.js

TypeScript

supabase

Docker

Python

AWS

Django

Vercel

Vue.js

Dify

GAS

Proficiency

sample0%

Code

Clean, efficient, and maintainable

React Hook: useMousePosition

import { useState, useEffect } from 'react';

export function useMousePosition() {
  const [position, setPosition] = useState({ 
    x: 0, 
    y: 0 
  });
  
  useEffect(() => {
    const updatePosition = (e: MouseEvent) => {
      setPosition({ 
        x: e.clientX, 
        y: e.clientY 
      });
    };
    
    window.addEventListener('mousemove', updatePosition);
    
    return () => {
      window.removeEventListener('mousemove', updatePosition);
    };
  }, []);
  
  return position;
}

Animation Utility

import { useRef, useEffect, useState } from 'react';

export function useIntersectionObserver(
  options = { threshold: 0.1 }
) {
  const ref = useRef(null);
  const [isVisible, setIsVisible] = useState(false);
  
  useEffect(() => {
    const observer = new IntersectionObserver(([entry]) => {
      setIsVisible(entry.isIntersecting);
    }, options);
    
    if (ref.current) {
      observer.observe(ref.current);
    }
    
    return () => {
      if (ref.current) {
        observer.unobserve(ref.current);
      }
    };
  }, [options]);
  
  return [ref, isVisible];
}

Animation Utility

import { useRef, useEffect, useState } from 'react';

export function useIntersectionObserver(
  options = { threshold: 0.1 }
) {
  const ref = useRef(null);
  const [isVisible, setIsVisible] = useState(false);
  
  useEffect(() => {
    const observer = new IntersectionObserver(([entry]) => {
      setIsVisible(entry.isIntersecting);
    }, options);
    
    if (ref.current) {
      observer.observe(ref.current);
    }
    
    return () => {
      if (ref.current) {
        observer.unobserve(ref.current);
      }
    };
  }, [options]);
  
  return [ref, isVisible];
}