이정진

이정진

AI Software를 전공하며 웹 개발과 AI를 공부하고 있습니다.

포트폴리오

여기는 제가 지금까지 진행한 과제, 미니 프로젝트, 개인 작업들을 정리해 두는 공간입니다.
아직은 작은 프로젝트들이지만, 하나씩 쌓아가면서 제 성장을 보여주고 싶어요 😊

🌸 1. 개인 포트폴리오 & 블로그 웹사이트

  • 기간: 2025.11 ~ 2025.12
  • 역할: 개인 작업
  • 기술 스택: HTML, CSS, JavaScript, Jekyll(academicpages), GitHub Pages

프로젝트 소개

AI Software 전공 1학년 때 처음으로 만든 개인 포트폴리오 & 블로그 사이트입니다.
기본 템플릿을 그대로 사용하는 것이 아니라,

  • 내 이름과 전공, 소개글로 사이드바를 수정하고
  • 상단 메뉴를 홈 / 포트폴리오 / 블로그 / CV 중심으로 재구성하고
  • 블로그 글을 전부 한국어로 직접 작성해서 올리고
  • 전체 색감을 핑크 테마로 커스터마이징

하는 작업을 직접 진행했습니다.

주요 기능

  • 블로그 글 목록 및 개별 글 페이지
  • 포트폴리오 페이지에서 프로젝트 정리
  • CV 페이지에서 한눈에 보는 이력/기술 정리
  • GitHub Pages를 이용한 배포 및 버전 관리

느낀 점

웹사이트가 “파일 몇 개”가 아니라,
설정 파일, 스타일, 페이지 구조가 모두 연결되어 있다는 걸 직접 느꼈습니다.
처음엔 복잡했지만, 구조를 이해하고 하나씩 수정해 가면서
“아, 이제 나도 나만의 웹사이트를 만들 수 있구나” 하는 자신감이 생겼습니다.

🍙 2. 오늘 뭐 먹지? 메뉴 추천기 (JavaScript 미니 프로젝트)

  • 역할: 개인 작업
  • 기술 스택: HTML, CSS, JavaScript

프로젝트 소개

“오늘 뭐 먹지?”라는 고민에서 시작된 랜덤 메뉴 추천 웹페이지입니다.
버튼을 클릭하면 미리 정해 둔 메뉴 리스트에서 하나를 골라 화면에 보여줍니다.

주요 구현 내용

  • JavaScript 배열에 메뉴 목록 저장
  • 버튼 클릭 이벤트로 Math.random()을 사용해 메뉴 랜덤 선택
  • 추천 결과가 화면 중앙에 크게 보이도록 스타일 적용
  • 한식, 분식, 고기, 국물 요리 등 다양한 메뉴 추가

느낀 점

아주 간단한 기능이지만,
이벤트 처리 + DOM 조작 + 랜덤 함수를 모두 묶어서
하나의 작은 서비스처럼 만들 수 있다는 게 인상적이었습니다.
친구들에게도 보여주면서 “이거 눌러서 오늘 메뉴 뽑아보자!” 하고 같이 놀았습니다.

🌌 3. p5.js 미디어 아트 – 우주처럼 확장되는 나의 가능성

  • 역할: 개인 작업 (과제)
  • 기술 스택: p5.js

프로젝트 소개

제가 되고 싶은 개발자의 모습을 우주에 비유해 표현한
p5.js 기반 미디어 아트입니다.

화면에는 작은 노드와 선들이 떠다니고,
서로 연결되면서 마치 별자리처럼 보입니다.
노드 주변에는 컴퓨터, 코드, AI 등을 상징하는 요소들을 배치해
제가 배우고 있는 것들과 앞으로 도전해 보고 싶은 분야를 표현했습니다.

주요 구현 내용

  • 랜덤 위치에 노드 생성 후, 일정 거리 안의 노드끼리 선으로 연결
  • 노드 거리/속도에 따라 크기와 투명도가 달라지는 효과
  • 마우스 움직임에 반응해 일부 요소의 속도나 방향이 변하도록 설정
  • 인스턴스 모드로 변환하여 다른 코드와 충돌 없이 사용할 수 있게 정리

느낀 점

코드가 곧 그림 도구가 될 수 있다는 걸 체감하게 된 프로젝트입니다.
직접 손으로 그리는 대신, 수치와 함수로 감정과 분위기를 표현하는 과정이 새로웠고,
“프로그래밍을 활용한 예술”에 더 관심이 생겼습니다.

🎄 4. 크리스마스 트리 인터랙티브 페이지 (개인 작업)

  • 역할: 개인 작업
  • 기술 스택: HTML, CSS, JavaScript, 이미지 편집

프로젝트 소개

웹 페이지 위에 크리스마스 트리를 띄우고,
그 위를 투명 배경 PNG 장식들로 꾸밀 수 있도록 기획한 페이지입니다.

제가 직접 이미지 생성을 통해 만든

  • 사탕 지팡이
  • 눈송이
  • 리본
  • 종
  • 선물 상자
  • 쿠키, 공, 산타 양말

같은 장식들을 트리 주변에 배치해,
사용자가 각각을 클릭하거나 올려놓는 느낌을 줄 수 있도록 구성했습니다.

느낀 점

디자인 작업과 웹 작업을 함께 해야 해서 손이 많이 갔지만,
웹 페이지가 단순한 정보 전달을 넘어서
놀이처럼 느껴질 수 있다는 걸 깨달은 프로젝트였습니다.