J\u306e\u30dd\u30fc\u30c8\u30d5\u30a9\u30ea\u30aa \u2014 \u533b\u8005\u304b\u3089\u4e00\u822c\u4f01\u696d\u3078\u306e\u5c31\u8077\u3092\u76ee\u6307\u3059\u30d6\u30ed\u30b0<\/title>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+JP:wght@300;400;500;700;900&family=JetBrains+Mono:wght@400;600&family=Syne:wght@700;800&display=swap\" rel=\"stylesheet\">\n<style>\n\/* ============================================================\n RESET & BASE\n ============================================================ *\/\n*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n\n:root {\n --teal: #1a9b8c;\n --teal-light: #4ec9b8;\n --teal-pale: #e6f7f5;\n --yellow: #f5c842;\n --yellow-pale: #fdf8e3;\n --bg: #f7f6f2;\n --surface: #ffffff;\n --text: #1a1a1a;\n --text-muted: #7a7a7a;\n --border: #e4e0d8;\n --code-bg: #f0ede6;\n --radius: 10px;\n --max: 760px;\n}\n\nhtml { scroll-behavior: smooth; }\n\nbody {\n background: var(--bg);\n color: var(--text);\n font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', sans-serif;\n font-size: 16px;\n line-height: 1.85;\n -webkit-font-smoothing: antialiased;\n}\n\na { color: inherit; text-decoration: none; }\nimg { max-width: 100%; display: block; }\n\n\/* ============================================================\n HEADER\n ============================================================ *\/\n.site-header {\n position: sticky;\n top: 0;\n z-index: 200;\n background: rgba(247, 246, 242, 0.92);\n backdrop-filter: blur(12px);\n border-bottom: 1px solid var(--border);\n}\n\n.header-inner {\n max-width: 1100px;\n margin: 0 auto;\n padding: 0 32px;\n height: 60px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 24px;\n}\n\n.site-logo {\n font-family: 'Syne', sans-serif;\n font-size: 20px;\n font-weight: 800;\n letter-spacing: -0.02em;\n background: linear-gradient(90deg, var(--teal), #7bbf6a);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n white-space: nowrap;\n}\n\n.site-nav {\n display: flex;\n gap: 4px;\n align-items: center;\n flex-wrap: wrap;\n}\n\n.site-nav a {\n font-size: 13px;\n font-weight: 500;\n color: var(--text-muted);\n padding: 6px 14px;\n border-radius: 20px;\n transition: background 0.2s, color 0.2s;\n letter-spacing: 0.02em;\n}\n\n.site-nav a:hover {\n background: var(--teal-pale);\n color: var(--teal);\n}\n\n.site-nav a.active {\n background: var(--teal);\n color: #fff;\n}\n\n\/* ============================================================\n HERO\n ============================================================ *\/\n.hero {\n position: relative;\n overflow: hidden;\n padding: 80px 32px 90px;\n text-align: center;\n}\n\n\/* \u30b0\u30e9\u30c7\u30fc\u30b7\u30e7\u30f3\u80cc\u666f \u2014 \u30b5\u30a4\u30c8\u306e\u5143\u306e\u96f0\u56f2\u6c17\u3092\u7d99\u627f *\/\n.hero::before {\n content: '';\n position: absolute;\n inset: 0;\n background: linear-gradient(135deg,\n #1a9b8c 0%,\n #3dbfad 25%,\n #7bbf6a 55%,\n #c8d952 80%,\n #f5c842 100%\n );\n opacity: 0.12;\n z-index: 0;\n}\n\n\/* \u30c9\u30c3\u30c8\u88c5\u98fe *\/\n.hero::after {\n content: '';\n position: absolute;\n inset: 0;\n background-image: radial-gradient(circle, rgba(26,155,140,0.08) 1px, transparent 1px);\n background-size: 28px 28px;\n z-index: 0;\n}\n\n.hero-inner {\n position: relative;\n z-index: 1;\n max-width: var(--max);\n margin: 0 auto;\n}\n\n.hero-badge {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n background: var(--surface);\n border: 1px solid var(--border);\n border-radius: 20px;\n padding: 5px 16px;\n font-size: 12px;\n font-weight: 500;\n color: var(--teal);\n letter-spacing: 0.05em;\n margin-bottom: 28px;\n box-shadow: 0 2px 8px rgba(0,0,0,0.06);\n animation: fadeDown 0.6s ease both 0.1s;\n}\n\n.hero-badge::before {\n content: '';\n width: 6px; height: 6px;\n background: var(--teal);\n border-radius: 50%;\n animation: pulse 2s infinite;\n}\n\n@keyframes pulse {\n 0%, 100% { opacity: 1; transform: scale(1); }\n 50% { opacity: 0.5; transform: scale(1.4); }\n}\n\n.hero h1 {\n font-family: 'Syne', sans-serif;\n font-size: clamp(36px, 6vw, 58px);\n font-weight: 800;\n letter-spacing: -0.03em;\n line-height: 1.15;\n margin-bottom: 20px;\n animation: fadeDown 0.6s ease both 0.25s;\n}\n\n.hero h1 .grad {\n background: linear-gradient(90deg, var(--teal), #7bbf6a 60%, var(--yellow));\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n}\n\n.hero-desc {\n font-size: 15px;\n color: var(--text-muted);\n max-width: 480px;\n margin: 0 auto 36px;\n line-height: 1.8;\n animation: fadeDown 0.6s ease both 0.4s;\n}\n\n.hero-links {\n display: flex;\n gap: 12px;\n justify-content: center;\n flex-wrap: wrap;\n animation: fadeDown 0.6s ease both 0.55s;\n}\n\n.btn {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding: 11px 24px;\n border-radius: 8px;\n font-size: 14px;\n font-weight: 600;\n letter-spacing: 0.02em;\n transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s;\n cursor: pointer;\n}\n\n.btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.12); }\n.btn:active { transform: translateY(0); }\n\n.btn-primary {\n background: var(--teal);\n color: #fff;\n box-shadow: 0 2px 10px rgba(26,155,140,0.3);\n}\n\n.btn-outline {\n background: var(--surface);\n color: var(--text);\n border: 1px solid var(--border);\n}\n\n@keyframes fadeDown {\n from { opacity: 0; transform: translateY(-16px); }\n to { opacity: 1; transform: translateY(0); }\n}\n\n\/* ============================================================\n SECTION WRAPPER\n ============================================================ *\/\n.section {\n max-width: 1100px;\n margin: 0 auto;\n padding: 64px 32px;\n}\n\n.section-label {\n font-size: 11px;\n font-weight: 700;\n letter-spacing: 0.12em;\n text-transform: uppercase;\n color: var(--teal);\n margin-bottom: 10px;\n}\n\n.section-title {\n font-family: 'Syne', sans-serif;\n font-size: 26px;\n font-weight: 800;\n letter-spacing: -0.02em;\n margin-bottom: 32px;\n}\n\n\/* ============================================================\n CARD GRID \u2014 \u30d6\u30ed\u30b0\u30fb\u30a2\u30d7\u30ea\n ============================================================ *\/\n.card-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n gap: 20px;\n}\n\n.card {\n background: var(--surface);\n border: 1px solid var(--border);\n border-radius: 14px;\n overflow: hidden;\n transition: transform 0.25s, box-shadow 0.25s;\n display: flex;\n flex-direction: column;\n}\n\n.card:hover {\n transform: translateY(-5px);\n box-shadow: 0 16px 40px rgba(0,0,0,0.1);\n}\n\n.card-thumb {\n height: 160px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 52px;\n position: relative;\n overflow: hidden;\n}\n\n.card-thumb-blog {\n background: linear-gradient(135deg, #e6f7f5 0%, #fdf8e3 100%);\n}\n\n.card-thumb-app {\n background: linear-gradient(135deg, #e8f4fd 0%, #f0e8fd 100%);\n}\n\n.card-thumb-about {\n background: linear-gradient(135deg, #fdf0e8 0%, #fdeaea 100%);\n}\n\n.card-thumb-contact {\n background: linear-gradient(135deg, #e8fdf0 0%, #e8f4fd 100%);\n}\n\n.card-body {\n padding: 22px 24px;\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.card-tag {\n font-size: 10px;\n font-weight: 700;\n letter-spacing: 0.1em;\n text-transform: uppercase;\n color: var(--teal);\n background: var(--teal-pale);\n display: inline-block;\n padding: 2px 10px;\n border-radius: 20px;\n align-self: flex-start;\n}\n\n.card h3 {\n font-size: 17px;\n font-weight: 700;\n line-height: 1.4;\n letter-spacing: -0.01em;\n}\n\n.card p {\n font-size: 13px;\n color: var(--text-muted);\n line-height: 1.7;\n flex: 1;\n}\n\n.card-link {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n font-size: 13px;\n font-weight: 600;\n color: var(--teal);\n margin-top: 8px;\n transition: gap 0.2s;\n}\n\n.card-link:hover { gap: 10px; }\n.card-link::after { content: '\u2192'; }\n\n\/* ============================================================\n ABOUT STRIP\n ============================================================ *\/\n.about-strip {\n background: var(--surface);\n border: 1px solid var(--border);\n border-radius: 16px;\n padding: 40px 48px;\n display: grid;\n grid-template-columns: 1fr auto;\n gap: 32px;\n align-items: center;\n}\n\n.about-text h2 {\n font-family: 'Syne', sans-serif;\n font-size: 22px;\n font-weight: 800;\n margin-bottom: 12px;\n}\n\n.about-text p {\n font-size: 14px;\n color: var(--text-muted);\n line-height: 1.8;\n max-width: 480px;\n}\n\n.about-chips {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n margin-top: 16px;\n}\n\n.chip {\n font-size: 12px;\n font-weight: 500;\n padding: 4px 12px;\n border-radius: 20px;\n border: 1px solid var(--border);\n color: var(--text-muted);\n background: var(--bg);\n}\n\n.chip.teal { background: var(--teal-pale); color: var(--teal); border-color: rgba(26,155,140,0.2); }\n.chip.yellow { background: var(--yellow-pale); color: #9a7a00; border-color: rgba(245,200,66,0.3); }\n\n.about-icon {\n font-size: 72px;\n line-height: 1;\n opacity: 0.85;\n flex-shrink: 0;\n}\n\n\/* ============================================================\n RECENT POSTS\n ============================================================ *\/\n.post-list {\n display: flex;\n flex-direction: column;\n gap: 1px;\n background: var(--border);\n border-radius: 12px;\n overflow: hidden;\n border: 1px solid var(--border);\n}\n\n.post-item {\n background: var(--surface);\n padding: 20px 28px;\n display: flex;\n align-items: center;\n gap: 20px;\n transition: background 0.2s;\n}\n\n.post-item:hover { background: var(--teal-pale); }\n\n.post-date {\n font-family: 'JetBrains Mono', monospace;\n font-size: 12px;\n color: var(--text-muted);\n white-space: nowrap;\n flex-shrink: 0;\n}\n\n.post-cat {\n font-size: 10px;\n font-weight: 700;\n letter-spacing: 0.08em;\n text-transform: uppercase;\n color: var(--teal);\n background: var(--teal-pale);\n padding: 2px 8px;\n border-radius: 20px;\n white-space: nowrap;\n flex-shrink: 0;\n}\n\n.post-title {\n font-size: 14px;\n font-weight: 500;\n flex: 1;\n line-height: 1.5;\n}\n\n.post-arrow {\n color: var(--text-muted);\n font-size: 16px;\n flex-shrink: 0;\n transition: transform 0.2s, color 0.2s;\n}\n\n.post-item:hover .post-arrow {\n color: var(--teal);\n transform: translateX(4px);\n}\n\n\/* ============================================================\n DIVIDER\n ============================================================ *\/\n.section-divider {\n height: 1px;\n background: var(--border);\n max-width: 1100px;\n margin: 0 auto;\n}\n\n\/* ============================================================\n FOOTER\n ============================================================ *\/\n.site-footer {\n border-top: 1px solid var(--border);\n padding: 40px 32px;\n text-align: center;\n background: var(--surface);\n}\n\n.footer-logo {\n font-family: 'Syne', sans-serif;\n font-size: 16px;\n font-weight: 800;\n background: linear-gradient(90deg, var(--teal), #7bbf6a);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n margin-bottom: 8px;\n}\n\n.footer-copy {\n font-size: 12px;\n color: var(--text-muted);\n letter-spacing: 0.03em;\n}\n\n\/* ============================================================\n CODE\n ============================================================ *\/\ncode {\n font-family: 'JetBrains Mono', monospace;\n font-size: 0.88em;\n background: var(--code-bg);\n padding: 2px 6px;\n border-radius: 4px;\n color: #c0392b;\n}\n\npre {\n background: #1e1e1e;\n color: #d4d4d4;\n font-family: 'JetBrains Mono', monospace;\n font-size: 14px;\n line-height: 1.7;\n padding: 24px;\n border-radius: var(--radius);\n overflow-x: auto;\n margin: 28px 0;\n}\n\npre code { background: none; color: inherit; padding: 0; }\n\n\/* ============================================================\n RESPONSIVE\n ============================================================ *\/\n@media (max-width: 700px) {\n .header-inner { padding: 0 20px; }\n .hero { padding: 60px 20px 70px; }\n .section { padding: 48px 20px; }\n .about-strip { grid-template-columns: 1fr; padding: 28px 24px; }\n .about-icon { display: none; }\n .post-item { flex-wrap: wrap; gap: 10px; }\n .post-date { display: none; }\n}\n<\/style>\n<\/head>\n<body>\n\n\n<header class=\"site-header\">\n <div class=\"header-inner\">\n <a href=\"\/notjbutj\/\" class=\"site-logo\">J’s Portfolio<\/a>\n <nav class=\"site-nav\">\n <a href=\"\/notjbutj\/\u30d6\u30ed\u30b0\u30c8\u30c3\u30d7\/\" >\u30d6\u30ed\u30b0<\/a>\n <a href=\"\/notjbutj\/\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\/\">\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3<\/a>\n <a href=\"\/notjbutj\/about-me\/\">About me<\/a>\n <a href=\"\/notjbutj\/contact-me\/\" class=\"active\">Contact<\/a>\n <\/nav>\n <\/div>\n<\/header>\n\n\n<section class=\"hero\">\n <div class=\"hero-inner\">\n <div class=\"hero-badge\">\u533b\u8005\u304b\u3089\u4e00\u822c\u4f01\u696d\u3078\u306e\u30ad\u30e3\u30ea\u30a2\u30c1\u30a7\u30f3\u30b8\u3092\u76ee\u6307\u3059<\/div>\n <h1>\n <span class=\"grad\">J\u306e\u30dd\u30fc\u30c8\u30d5\u30a9\u30ea\u30aa<\/span>\n <\/h1>\n <p class=\"hero-desc\">\n \u533b\u5e2b\u514d\u8a31\u3092\u6301\u3061\u306a\u304c\u3089\u30d7\u30ed\u30b0\u30e9\u30df\u30f3\u30b0\u30fb\u6a5f\u68b0\u5b66\u7fd2\u3092\u72ec\u5b66\u3002<br>\n \u533b\u7642 \u00d7 \u30c6\u30af\u30ce\u30ed\u30b8\u30fc\u306e\u8996\u70b9\u3067\u30d7\u30ed\u30c0\u30af\u30c8\u3092\u3064\u304f\u3063\u3066\u3044\u307e\u3059\u3002\n <\/p>\n <div class=\"hero-links\">\n <a href=\"\/notjbutj\/\u30d6\u30ed\u30b0\u30c8\u30c3\u30d7\/\" class=\"btn btn-primary\">\ud83d\udcdd \u30d6\u30ed\u30b0\u3092\u8aad\u3080<\/a>\n <a href=\"\/notjbutj\/about-me\/\" class=\"btn btn-outline\">\ud83d\udc64 About me<\/a>\n <\/div>\n <\/div>\n<\/section>\n\n\n<div class=\"section\">\n <p class=\"section-label\">Navigate<\/p>\n <h2 class=\"section-title\">\u30b3\u30f3\u30c6\u30f3\u30c4<\/h2>\n <div class=\"card-grid\">\n\n <a href=\"\/notjbutj\/\u30d6\u30ed\u30b0\u30c8\u30c3\u30d7\/\" class=\"card\">\n <div class=\"card-thumb card-thumb-blog\">\ud83d\udcdd<\/div>\n <div class=\"card-body\">\n <span class=\"card-tag\">Blog<\/span>\n <h3>\u30d6\u30ed\u30b0<\/h3>\n <p>\u6a5f\u68b0\u5b66\u7fd2\u30fb\u7d71\u8a08\u30fb\u30d7\u30ed\u30b0\u30e9\u30df\u30f3\u30b0\u306e\u5b66\u7fd2\u8a18\u9332\u3002\u533b\u7642\u00d7\u30c6\u30c3\u30af\u306e\u8996\u70b9\u3067\u66f8\u3044\u3066\u3044\u307e\u3059\u3002<\/p>\n <span class=\"card-link\">\u8a18\u4e8b\u3092\u8aad\u3080<\/span>\n <\/div>\n <\/a>\n\n <a href=\"\/notjbutj\/\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\/\" class=\"card\">\n <div class=\"card-thumb card-thumb-app\">\u2699\ufe0f<\/div>\n <div class=\"card-body\">\n <span class=\"card-tag\">App<\/span>\n <h3>\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3<\/h3>\n <p>\u7d71\u8a08\u30fb\u30c7\u30fc\u30bf\u53ef\u8996\u5316\u30c4\u30fc\u30eb\u306a\u3069\u3001\u5b9f\u969b\u306b\u52d5\u304f\u30a2\u30d7\u30ea\u3092\u516c\u958b\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n <span class=\"card-link\">\u898b\u3066\u307f\u308b<\/span>\n <\/div>\n <\/a>\n\n <a href=\"\/notjbutj\/about-me\/\" class=\"card\">\n <div class=\"card-thumb card-thumb-about\">\ud83e\ude7a<\/div>\n <div class=\"card-body\">\n <span class=\"card-tag\">About<\/span>\n <h3>About me<\/h3>\n <p>\u533b\u5e2b\u2192\u30a8\u30f3\u30b8\u30cb\u30a2\u3092\u76ee\u6307\u3059\u7d4c\u7def\u3084\u30b9\u30ad\u30eb\u30bb\u30c3\u30c8\u3001\u8208\u5473\u5206\u91ce\u306b\u3064\u3044\u3066\u3002<\/p>\n <span class=\"card-link\">\u30d7\u30ed\u30d5\u30a3\u30fc\u30eb\u3078<\/span>\n <\/div>\n <\/a>\n\n <a href=\"\/notjbutj\/contact-me\/\" class=\"card\">\n <div class=\"card-thumb card-thumb-contact\">\u2709\ufe0f<\/div>\n <div class=\"card-body\">\n <span class=\"card-tag\">Contact<\/span>\n <h3>Contact me<\/h3>\n <p>\u304a\u4ed5\u4e8b\u306e\u3054\u76f8\u8ac7\u30fb\u30b3\u30e9\u30dc\u30fb\u96d1\u8ac7\u306a\u3069\u3001\u304a\u6c17\u8efd\u306b\u3069\u3046\u305e\u3002<\/p>\n <span class=\"card-link\">\u9023\u7d61\u3059\u308b<\/span>\n <\/div>\n <\/a>\n\n <\/div>\n<\/div>\n\n<div class=\"section-divider\"><\/div>\n\n\n<div class=\"section\">\n <div class=\"about-strip\">\n <div class=\"about-text\">\n <h2>\ud83e\ude7a \u00d7 \ud83d\udcbb \u533b\u5e2b \u00d7 \u30a8\u30f3\u30b8\u30cb\u30a2<\/h2>\n <p>\n \u81e8\u5e8a\u7d4c\u9a13\u3092\u6301\u3064\u533b\u5e2b\u3068\u3057\u3066\u50cd\u304d\u306a\u304c\u3089\u3001\u6a5f\u68b0\u5b66\u7fd2\u30fb\u7d71\u8a08\u30fbPython\u3092\u72ec\u5b66\u3002\n \u533b\u7642\u30c7\u30fc\u30bf\u3092\u6271\u3046\u73fe\u5834\u306e\u8ab2\u984c\u3092\u3001\u30c6\u30af\u30ce\u30ed\u30b8\u30fc\u3067\u89e3\u6c7a\u3059\u308b\u3053\u3068\u3092\u76ee\u6307\u3057\u3066\u3044\u307e\u3059\u3002\n <\/p>\n <div class=\"about-chips\">\n <span class=\"chip teal\">Python<\/span>\n <span class=\"chip teal\">\u6a5f\u68b0\u5b66\u7fd2<\/span>\n <span class=\"chip teal\">\u7d71\u8a08<\/span>\n <span class=\"chip yellow\">\u533b\u5e2b\u514d\u8a31<\/span>\n <span class=\"chip yellow\">\u533b\u7642\u00d7DX<\/span>\n <span class=\"chip\">\u5c31\u8077\u6d3b\u52d5\u4e2d<\/span>\n <\/div>\n <\/div>\n <div class=\"about-icon\">\ud83e\ude7a<\/div>\n <\/div>\n<\/div>\n\n<div class=\"section-divider\"><\/div>\n\n\n<div class=\"section\">\n <p class=\"section-label\">Latest<\/p>\n <h2 class=\"section-title\">\u6700\u8fd1\u306e\u8a18\u4e8b<\/h2>\n <div class=\"post-list\">\n <a href=\"#\" class=\"post-item\">\n <span class=\"post-date\">2026.03.05<\/span>\n <span class=\"post-cat\">\u6a5f\u68b0\u5b66\u7fd2<\/span>\n <span class=\"post-title\">\u30ab\u30a4\u4e8c\u4e57\u5206\u5e03\u3092\u5b9f\u88c5\u3057\u3066\u53ef\u8996\u5316\u3057\u3066\u307f\u305f<\/span>\n <span class=\"post-arrow\">\u2192<\/span>\n <\/a>\n <a href=\"#\" class=\"post-item\">\n <span class=\"post-date\">2026.02.20<\/span>\n <span class=\"post-cat\">\u7d71\u8a08<\/span>\n <span class=\"post-title\">\u533b\u5e2b\u304cPython\u3092\u5b66\u3076\u7406\u7531\u3068\u5b66\u7fd2\u30ed\u30fc\u30c9\u30de\u30c3\u30d7<\/span>\n <span class=\"post-arrow\">\u2192<\/span>\n <\/a>\n <a href=\"#\" class=\"post-item\">\n <span class=\"post-date\">2026.02.10<\/span>\n <span class=\"post-cat\">\u5c31\u6d3b<\/span>\n <span class=\"post-title\">\u533b\u5e2b\u2192\u4e00\u822c\u4f01\u696d\u30a8\u30f3\u30b8\u30cb\u30a2\u8ee2\u8077\u3092\u76ee\u6307\u3059\u7406\u7531<\/span>\n <span class=\"post-arrow\">\u2192<\/span>\n <\/a>\n <\/div>\n<\/div>\n\n\n<footer class=\"site-footer\">\n <div class=\"footer-logo\">J’s Portfolio<\/div>\n <p class=\"footer-copy\">\u00a9 2026 J\u306e\u30dd\u30fc\u30c8\u30d5\u30a9\u30ea\u30aa \u2014 \u533b\u8005\u304b\u3089\u4e00\u822c\u4f01\u696d\u3078\u306e\u5c31\u8077\u3092\u76ee\u6307\u3059\u30d6\u30ed\u30b0<\/p>\n<\/footer>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>J\u306e\u30dd\u30fc\u30c8\u30d5\u30a9\u30ea\u30aa \u2014 \u533b\u8005\u304b\u3089\u4e00\u822c\u4f01\u696d\u3078\u306e\u5c31\u8077\u3092\u76ee\u6307\u3059\u30d6\u30ed\u30b0 J’s Portfolio \u30d6\u30ed\u30b0 \u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3 About me Contact \u533b\u8005\u304b\u3089\u4e00\u822c\u4f01\u696d\u3078\u306e\u30ad\u30e3\u30ea\u30a2\u30c1\u30a7\u30f3\u30b8\u3092\u76ee\u6307\u3059 J\u306e\u30dd\u30fc\u30c8 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"open","template":"","meta":{"footnotes":""},"class_list":["post-2","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/bonkers-mouseion.boo.jp\/notjbutj\/wp-json\/wp\/v2\/pages\/2","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bonkers-mouseion.boo.jp\/notjbutj\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bonkers-mouseion.boo.jp\/notjbutj\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bonkers-mouseion.boo.jp\/notjbutj\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bonkers-mouseion.boo.jp\/notjbutj\/wp-json\/wp\/v2\/comments?post=2"}],"version-history":[{"count":57,"href":"https:\/\/bonkers-mouseion.boo.jp\/notjbutj\/wp-json\/wp\/v2\/pages\/2\/revisions"}],"predecessor-version":[{"id":1487,"href":"https:\/\/bonkers-mouseion.boo.jp\/notjbutj\/wp-json\/wp\/v2\/pages\/2\/revisions\/1487"}],"wp:attachment":[{"href":"https:\/\/bonkers-mouseion.boo.jp\/notjbutj\/wp-json\/wp\/v2\/media?parent=2"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":2,"date":"2024-04-23T18:32:09","date_gmt":"2024-04-23T09:32:09","guid":{"rendered":"http:\/\/notjbutj.com\/?page_id=2"},"modified":"2026-03-07T12:29:24","modified_gmt":"2026-03-07T03:29:24","slug":"flont-page","status":"publish","type":"page","link":"https:\/\/bonkers-mouseion.boo.jp\/notjbutj\/","title":{"rendered":""},"content":{"rendered":"\n\n\n\n\n\nJ\u306e\u30dd\u30fc\u30c8\u30d5\u30a9\u30ea\u30aa \u2014 \u533b\u8005\u304b\u3089\u4e00\u822c\u4f01\u696d\u3078\u306e\u5c31\u8077\u3092\u76ee\u6307\u3059\u30d6\u30ed\u30b0<\/title>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+JP:wght@300;400;500;700;900&family=JetBrains+Mono:wght@400;600&family=Syne:wght@700;800&display=swap\" rel=\"stylesheet\">\n<style>\n\/* ============================================================\n RESET & BASE\n ============================================================ *\/\n*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n\n:root {\n --teal: #1a9b8c;\n --teal-light: #4ec9b8;\n --teal-pale: #e6f7f5;\n --yellow: #f5c842;\n --yellow-pale: #fdf8e3;\n --bg: #f7f6f2;\n --surface: #ffffff;\n --text: #1a1a1a;\n --text-muted: #7a7a7a;\n --border: #e4e0d8;\n --code-bg: #f0ede6;\n --radius: 10px;\n --max: 760px;\n}\n\nhtml { scroll-behavior: smooth; }\n\nbody {\n background: var(--bg);\n color: var(--text);\n font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', sans-serif;\n font-size: 16px;\n line-height: 1.85;\n -webkit-font-smoothing: antialiased;\n}\n\na { color: inherit; text-decoration: none; }\nimg { max-width: 100%; display: block; }\n\n\/* ============================================================\n HEADER\n ============================================================ *\/\n.site-header {\n position: sticky;\n top: 0;\n z-index: 200;\n background: rgba(247, 246, 242, 0.92);\n backdrop-filter: blur(12px);\n border-bottom: 1px solid var(--border);\n}\n\n.header-inner {\n max-width: 1100px;\n margin: 0 auto;\n padding: 0 32px;\n height: 60px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 24px;\n}\n\n.site-logo {\n font-family: 'Syne', sans-serif;\n font-size: 20px;\n font-weight: 800;\n letter-spacing: -0.02em;\n background: linear-gradient(90deg, var(--teal), #7bbf6a);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n white-space: nowrap;\n}\n\n.site-nav {\n display: flex;\n gap: 4px;\n align-items: center;\n flex-wrap: wrap;\n}\n\n.site-nav a {\n font-size: 13px;\n font-weight: 500;\n color: var(--text-muted);\n padding: 6px 14px;\n border-radius: 20px;\n transition: background 0.2s, color 0.2s;\n letter-spacing: 0.02em;\n}\n\n.site-nav a:hover {\n background: var(--teal-pale);\n color: var(--teal);\n}\n\n.site-nav a.active {\n background: var(--teal);\n color: #fff;\n}\n\n\/* ============================================================\n HERO\n ============================================================ *\/\n.hero {\n position: relative;\n overflow: hidden;\n padding: 80px 32px 90px;\n text-align: center;\n}\n\n\/* \u30b0\u30e9\u30c7\u30fc\u30b7\u30e7\u30f3\u80cc\u666f \u2014 \u30b5\u30a4\u30c8\u306e\u5143\u306e\u96f0\u56f2\u6c17\u3092\u7d99\u627f *\/\n.hero::before {\n content: '';\n position: absolute;\n inset: 0;\n background: linear-gradient(135deg,\n #1a9b8c 0%,\n #3dbfad 25%,\n #7bbf6a 55%,\n #c8d952 80%,\n #f5c842 100%\n );\n opacity: 0.12;\n z-index: 0;\n}\n\n\/* \u30c9\u30c3\u30c8\u88c5\u98fe *\/\n.hero::after {\n content: '';\n position: absolute;\n inset: 0;\n background-image: radial-gradient(circle, rgba(26,155,140,0.08) 1px, transparent 1px);\n background-size: 28px 28px;\n z-index: 0;\n}\n\n.hero-inner {\n position: relative;\n z-index: 1;\n max-width: var(--max);\n margin: 0 auto;\n}\n\n.hero-badge {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n background: var(--surface);\n border: 1px solid var(--border);\n border-radius: 20px;\n padding: 5px 16px;\n font-size: 12px;\n font-weight: 500;\n color: var(--teal);\n letter-spacing: 0.05em;\n margin-bottom: 28px;\n box-shadow: 0 2px 8px rgba(0,0,0,0.06);\n animation: fadeDown 0.6s ease both 0.1s;\n}\n\n.hero-badge::before {\n content: '';\n width: 6px; height: 6px;\n background: var(--teal);\n border-radius: 50%;\n animation: pulse 2s infinite;\n}\n\n@keyframes pulse {\n 0%, 100% { opacity: 1; transform: scale(1); }\n 50% { opacity: 0.5; transform: scale(1.4); }\n}\n\n.hero h1 {\n font-family: 'Syne', sans-serif;\n font-size: clamp(36px, 6vw, 58px);\n font-weight: 800;\n letter-spacing: -0.03em;\n line-height: 1.15;\n margin-bottom: 20px;\n animation: fadeDown 0.6s ease both 0.25s;\n}\n\n.hero h1 .grad {\n background: linear-gradient(90deg, var(--teal), #7bbf6a 60%, var(--yellow));\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n}\n\n.hero-desc {\n font-size: 15px;\n color: var(--text-muted);\n max-width: 480px;\n margin: 0 auto 36px;\n line-height: 1.8;\n animation: fadeDown 0.6s ease both 0.4s;\n}\n\n.hero-links {\n display: flex;\n gap: 12px;\n justify-content: center;\n flex-wrap: wrap;\n animation: fadeDown 0.6s ease both 0.55s;\n}\n\n.btn {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding: 11px 24px;\n border-radius: 8px;\n font-size: 14px;\n font-weight: 600;\n letter-spacing: 0.02em;\n transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s;\n cursor: pointer;\n}\n\n.btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.12); }\n.btn:active { transform: translateY(0); }\n\n.btn-primary {\n background: var(--teal);\n color: #fff;\n box-shadow: 0 2px 10px rgba(26,155,140,0.3);\n}\n\n.btn-outline {\n background: var(--surface);\n color: var(--text);\n border: 1px solid var(--border);\n}\n\n@keyframes fadeDown {\n from { opacity: 0; transform: translateY(-16px); }\n to { opacity: 1; transform: translateY(0); }\n}\n\n\/* ============================================================\n SECTION WRAPPER\n ============================================================ *\/\n.section {\n max-width: 1100px;\n margin: 0 auto;\n padding: 64px 32px;\n}\n\n.section-label {\n font-size: 11px;\n font-weight: 700;\n letter-spacing: 0.12em;\n text-transform: uppercase;\n color: var(--teal);\n margin-bottom: 10px;\n}\n\n.section-title {\n font-family: 'Syne', sans-serif;\n font-size: 26px;\n font-weight: 800;\n letter-spacing: -0.02em;\n margin-bottom: 32px;\n}\n\n\/* ============================================================\n CARD GRID \u2014 \u30d6\u30ed\u30b0\u30fb\u30a2\u30d7\u30ea\n ============================================================ *\/\n.card-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n gap: 20px;\n}\n\n.card {\n background: var(--surface);\n border: 1px solid var(--border);\n border-radius: 14px;\n overflow: hidden;\n transition: transform 0.25s, box-shadow 0.25s;\n display: flex;\n flex-direction: column;\n}\n\n.card:hover {\n transform: translateY(-5px);\n box-shadow: 0 16px 40px rgba(0,0,0,0.1);\n}\n\n.card-thumb {\n height: 160px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 52px;\n position: relative;\n overflow: hidden;\n}\n\n.card-thumb-blog {\n background: linear-gradient(135deg, #e6f7f5 0%, #fdf8e3 100%);\n}\n\n.card-thumb-app {\n background: linear-gradient(135deg, #e8f4fd 0%, #f0e8fd 100%);\n}\n\n.card-thumb-about {\n background: linear-gradient(135deg, #fdf0e8 0%, #fdeaea 100%);\n}\n\n.card-thumb-contact {\n background: linear-gradient(135deg, #e8fdf0 0%, #e8f4fd 100%);\n}\n\n.card-body {\n padding: 22px 24px;\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.card-tag {\n font-size: 10px;\n font-weight: 700;\n letter-spacing: 0.1em;\n text-transform: uppercase;\n color: var(--teal);\n background: var(--teal-pale);\n display: inline-block;\n padding: 2px 10px;\n border-radius: 20px;\n align-self: flex-start;\n}\n\n.card h3 {\n font-size: 17px;\n font-weight: 700;\n line-height: 1.4;\n letter-spacing: -0.01em;\n}\n\n.card p {\n font-size: 13px;\n color: var(--text-muted);\n line-height: 1.7;\n flex: 1;\n}\n\n.card-link {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n font-size: 13px;\n font-weight: 600;\n color: var(--teal);\n margin-top: 8px;\n transition: gap 0.2s;\n}\n\n.card-link:hover { gap: 10px; }\n.card-link::after { content: '\u2192'; }\n\n\/* ============================================================\n ABOUT STRIP\n ============================================================ *\/\n.about-strip {\n background: var(--surface);\n border: 1px solid var(--border);\n border-radius: 16px;\n padding: 40px 48px;\n display: grid;\n grid-template-columns: 1fr auto;\n gap: 32px;\n align-items: center;\n}\n\n.about-text h2 {\n font-family: 'Syne', sans-serif;\n font-size: 22px;\n font-weight: 800;\n margin-bottom: 12px;\n}\n\n.about-text p {\n font-size: 14px;\n color: var(--text-muted);\n line-height: 1.8;\n max-width: 480px;\n}\n\n.about-chips {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n margin-top: 16px;\n}\n\n.chip {\n font-size: 12px;\n font-weight: 500;\n padding: 4px 12px;\n border-radius: 20px;\n border: 1px solid var(--border);\n color: var(--text-muted);\n background: var(--bg);\n}\n\n.chip.teal { background: var(--teal-pale); color: var(--teal); border-color: rgba(26,155,140,0.2); }\n.chip.yellow { background: var(--yellow-pale); color: #9a7a00; border-color: rgba(245,200,66,0.3); }\n\n.about-icon {\n font-size: 72px;\n line-height: 1;\n opacity: 0.85;\n flex-shrink: 0;\n}\n\n\/* ============================================================\n RECENT POSTS\n ============================================================ *\/\n.post-list {\n display: flex;\n flex-direction: column;\n gap: 1px;\n background: var(--border);\n border-radius: 12px;\n overflow: hidden;\n border: 1px solid var(--border);\n}\n\n.post-item {\n background: var(--surface);\n padding: 20px 28px;\n display: flex;\n align-items: center;\n gap: 20px;\n transition: background 0.2s;\n}\n\n.post-item:hover { background: var(--teal-pale); }\n\n.post-date {\n font-family: 'JetBrains Mono', monospace;\n font-size: 12px;\n color: var(--text-muted);\n white-space: nowrap;\n flex-shrink: 0;\n}\n\n.post-cat {\n font-size: 10px;\n font-weight: 700;\n letter-spacing: 0.08em;\n text-transform: uppercase;\n color: var(--teal);\n background: var(--teal-pale);\n padding: 2px 8px;\n border-radius: 20px;\n white-space: nowrap;\n flex-shrink: 0;\n}\n\n.post-title {\n font-size: 14px;\n font-weight: 500;\n flex: 1;\n line-height: 1.5;\n}\n\n.post-arrow {\n color: var(--text-muted);\n font-size: 16px;\n flex-shrink: 0;\n transition: transform 0.2s, color 0.2s;\n}\n\n.post-item:hover .post-arrow {\n color: var(--teal);\n transform: translateX(4px);\n}\n\n\/* ============================================================\n DIVIDER\n ============================================================ *\/\n.section-divider {\n height: 1px;\n background: var(--border);\n max-width: 1100px;\n margin: 0 auto;\n}\n\n\/* ============================================================\n FOOTER\n ============================================================ *\/\n.site-footer {\n border-top: 1px solid var(--border);\n padding: 40px 32px;\n text-align: center;\n background: var(--surface);\n}\n\n.footer-logo {\n font-family: 'Syne', sans-serif;\n font-size: 16px;\n font-weight: 800;\n background: linear-gradient(90deg, var(--teal), #7bbf6a);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n margin-bottom: 8px;\n}\n\n.footer-copy {\n font-size: 12px;\n color: var(--text-muted);\n letter-spacing: 0.03em;\n}\n\n\/* ============================================================\n CODE\n ============================================================ *\/\ncode {\n font-family: 'JetBrains Mono', monospace;\n font-size: 0.88em;\n background: var(--code-bg);\n padding: 2px 6px;\n border-radius: 4px;\n color: #c0392b;\n}\n\npre {\n background: #1e1e1e;\n color: #d4d4d4;\n font-family: 'JetBrains Mono', monospace;\n font-size: 14px;\n line-height: 1.7;\n padding: 24px;\n border-radius: var(--radius);\n overflow-x: auto;\n margin: 28px 0;\n}\n\npre code { background: none; color: inherit; padding: 0; }\n\n\/* ============================================================\n RESPONSIVE\n ============================================================ *\/\n@media (max-width: 700px) {\n .header-inner { padding: 0 20px; }\n .hero { padding: 60px 20px 70px; }\n .section { padding: 48px 20px; }\n .about-strip { grid-template-columns: 1fr; padding: 28px 24px; }\n .about-icon { display: none; }\n .post-item { flex-wrap: wrap; gap: 10px; }\n .post-date { display: none; }\n}\n<\/style>\n<\/head>\n<body>\n\n\n<header class=\"site-header\">\n <div class=\"header-inner\">\n <a href=\"\/notjbutj\/\" class=\"site-logo\">J’s Portfolio<\/a>\n <nav class=\"site-nav\">\n <a href=\"\/notjbutj\/\u30d6\u30ed\u30b0\u30c8\u30c3\u30d7\/\" >\u30d6\u30ed\u30b0<\/a>\n <a href=\"\/notjbutj\/\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\/\">\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3<\/a>\n <a href=\"\/notjbutj\/about-me\/\">About me<\/a>\n <a href=\"\/notjbutj\/contact-me\/\" class=\"active\">Contact<\/a>\n <\/nav>\n <\/div>\n<\/header>\n\n\n<section class=\"hero\">\n <div class=\"hero-inner\">\n <div class=\"hero-badge\">\u533b\u8005\u304b\u3089\u4e00\u822c\u4f01\u696d\u3078\u306e\u30ad\u30e3\u30ea\u30a2\u30c1\u30a7\u30f3\u30b8\u3092\u76ee\u6307\u3059<\/div>\n <h1>\n <span class=\"grad\">J\u306e\u30dd\u30fc\u30c8\u30d5\u30a9\u30ea\u30aa<\/span>\n <\/h1>\n <p class=\"hero-desc\">\n \u533b\u5e2b\u514d\u8a31\u3092\u6301\u3061\u306a\u304c\u3089\u30d7\u30ed\u30b0\u30e9\u30df\u30f3\u30b0\u30fb\u6a5f\u68b0\u5b66\u7fd2\u3092\u72ec\u5b66\u3002<br>\n \u533b\u7642 \u00d7 \u30c6\u30af\u30ce\u30ed\u30b8\u30fc\u306e\u8996\u70b9\u3067\u30d7\u30ed\u30c0\u30af\u30c8\u3092\u3064\u304f\u3063\u3066\u3044\u307e\u3059\u3002\n <\/p>\n <div class=\"hero-links\">\n <a href=\"\/notjbutj\/\u30d6\u30ed\u30b0\u30c8\u30c3\u30d7\/\" class=\"btn btn-primary\">\ud83d\udcdd \u30d6\u30ed\u30b0\u3092\u8aad\u3080<\/a>\n <a href=\"\/notjbutj\/about-me\/\" class=\"btn btn-outline\">\ud83d\udc64 About me<\/a>\n <\/div>\n <\/div>\n<\/section>\n\n\n<div class=\"section\">\n <p class=\"section-label\">Navigate<\/p>\n <h2 class=\"section-title\">\u30b3\u30f3\u30c6\u30f3\u30c4<\/h2>\n <div class=\"card-grid\">\n\n <a href=\"\/notjbutj\/\u30d6\u30ed\u30b0\u30c8\u30c3\u30d7\/\" class=\"card\">\n <div class=\"card-thumb card-thumb-blog\">\ud83d\udcdd<\/div>\n <div class=\"card-body\">\n <span class=\"card-tag\">Blog<\/span>\n <h3>\u30d6\u30ed\u30b0<\/h3>\n <p>\u6a5f\u68b0\u5b66\u7fd2\u30fb\u7d71\u8a08\u30fb\u30d7\u30ed\u30b0\u30e9\u30df\u30f3\u30b0\u306e\u5b66\u7fd2\u8a18\u9332\u3002\u533b\u7642\u00d7\u30c6\u30c3\u30af\u306e\u8996\u70b9\u3067\u66f8\u3044\u3066\u3044\u307e\u3059\u3002<\/p>\n <span class=\"card-link\">\u8a18\u4e8b\u3092\u8aad\u3080<\/span>\n <\/div>\n <\/a>\n\n <a href=\"\/notjbutj\/\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\/\" class=\"card\">\n <div class=\"card-thumb card-thumb-app\">\u2699\ufe0f<\/div>\n <div class=\"card-body\">\n <span class=\"card-tag\">App<\/span>\n <h3>\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3<\/h3>\n <p>\u7d71\u8a08\u30fb\u30c7\u30fc\u30bf\u53ef\u8996\u5316\u30c4\u30fc\u30eb\u306a\u3069\u3001\u5b9f\u969b\u306b\u52d5\u304f\u30a2\u30d7\u30ea\u3092\u516c\u958b\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n <span class=\"card-link\">\u898b\u3066\u307f\u308b<\/span>\n <\/div>\n <\/a>\n\n <a href=\"\/notjbutj\/about-me\/\" class=\"card\">\n <div class=\"card-thumb card-thumb-about\">\ud83e\ude7a<\/div>\n <div class=\"card-body\">\n <span class=\"card-tag\">About<\/span>\n <h3>About me<\/h3>\n <p>\u533b\u5e2b\u2192\u30a8\u30f3\u30b8\u30cb\u30a2\u3092\u76ee\u6307\u3059\u7d4c\u7def\u3084\u30b9\u30ad\u30eb\u30bb\u30c3\u30c8\u3001\u8208\u5473\u5206\u91ce\u306b\u3064\u3044\u3066\u3002<\/p>\n <span class=\"card-link\">\u30d7\u30ed\u30d5\u30a3\u30fc\u30eb\u3078<\/span>\n <\/div>\n <\/a>\n\n <a href=\"\/notjbutj\/contact-me\/\" class=\"card\">\n <div class=\"card-thumb card-thumb-contact\">\u2709\ufe0f<\/div>\n <div class=\"card-body\">\n <span class=\"card-tag\">Contact<\/span>\n <h3>Contact me<\/h3>\n <p>\u304a\u4ed5\u4e8b\u306e\u3054\u76f8\u8ac7\u30fb\u30b3\u30e9\u30dc\u30fb\u96d1\u8ac7\u306a\u3069\u3001\u304a\u6c17\u8efd\u306b\u3069\u3046\u305e\u3002<\/p>\n <span class=\"card-link\">\u9023\u7d61\u3059\u308b<\/span>\n <\/div>\n <\/a>\n\n <\/div>\n<\/div>\n\n<div class=\"section-divider\"><\/div>\n\n\n<div class=\"section\">\n <div class=\"about-strip\">\n <div class=\"about-text\">\n <h2>\ud83e\ude7a \u00d7 \ud83d\udcbb \u533b\u5e2b \u00d7 \u30a8\u30f3\u30b8\u30cb\u30a2<\/h2>\n <p>\n \u81e8\u5e8a\u7d4c\u9a13\u3092\u6301\u3064\u533b\u5e2b\u3068\u3057\u3066\u50cd\u304d\u306a\u304c\u3089\u3001\u6a5f\u68b0\u5b66\u7fd2\u30fb\u7d71\u8a08\u30fbPython\u3092\u72ec\u5b66\u3002\n \u533b\u7642\u30c7\u30fc\u30bf\u3092\u6271\u3046\u73fe\u5834\u306e\u8ab2\u984c\u3092\u3001\u30c6\u30af\u30ce\u30ed\u30b8\u30fc\u3067\u89e3\u6c7a\u3059\u308b\u3053\u3068\u3092\u76ee\u6307\u3057\u3066\u3044\u307e\u3059\u3002\n <\/p>\n <div class=\"about-chips\">\n <span class=\"chip teal\">Python<\/span>\n <span class=\"chip teal\">\u6a5f\u68b0\u5b66\u7fd2<\/span>\n <span class=\"chip teal\">\u7d71\u8a08<\/span>\n <span class=\"chip yellow\">\u533b\u5e2b\u514d\u8a31<\/span>\n <span class=\"chip yellow\">\u533b\u7642\u00d7DX<\/span>\n <span class=\"chip\">\u5c31\u8077\u6d3b\u52d5\u4e2d<\/span>\n <\/div>\n <\/div>\n <div class=\"about-icon\">\ud83e\ude7a<\/div>\n <\/div>\n<\/div>\n\n<div class=\"section-divider\"><\/div>\n\n\n<div class=\"section\">\n <p class=\"section-label\">Latest<\/p>\n <h2 class=\"section-title\">\u6700\u8fd1\u306e\u8a18\u4e8b<\/h2>\n <div class=\"post-list\">\n <a href=\"#\" class=\"post-item\">\n <span class=\"post-date\">2026.03.05<\/span>\n <span class=\"post-cat\">\u6a5f\u68b0\u5b66\u7fd2<\/span>\n <span class=\"post-title\">\u30ab\u30a4\u4e8c\u4e57\u5206\u5e03\u3092\u5b9f\u88c5\u3057\u3066\u53ef\u8996\u5316\u3057\u3066\u307f\u305f<\/span>\n <span class=\"post-arrow\">\u2192<\/span>\n <\/a>\n <a href=\"#\" class=\"post-item\">\n <span class=\"post-date\">2026.02.20<\/span>\n <span class=\"post-cat\">\u7d71\u8a08<\/span>\n <span class=\"post-title\">\u533b\u5e2b\u304cPython\u3092\u5b66\u3076\u7406\u7531\u3068\u5b66\u7fd2\u30ed\u30fc\u30c9\u30de\u30c3\u30d7<\/span>\n <span class=\"post-arrow\">\u2192<\/span>\n <\/a>\n <a href=\"#\" class=\"post-item\">\n <span class=\"post-date\">2026.02.10<\/span>\n <span class=\"post-cat\">\u5c31\u6d3b<\/span>\n <span class=\"post-title\">\u533b\u5e2b\u2192\u4e00\u822c\u4f01\u696d\u30a8\u30f3\u30b8\u30cb\u30a2\u8ee2\u8077\u3092\u76ee\u6307\u3059\u7406\u7531<\/span>\n <span class=\"post-arrow\">\u2192<\/span>\n <\/a>\n <\/div>\n<\/div>\n\n\n<footer class=\"site-footer\">\n <div class=\"footer-logo\">J’s Portfolio<\/div>\n <p class=\"footer-copy\">\u00a9 2026 J\u306e\u30dd\u30fc\u30c8\u30d5\u30a9\u30ea\u30aa \u2014 \u533b\u8005\u304b\u3089\u4e00\u822c\u4f01\u696d\u3078\u306e\u5c31\u8077\u3092\u76ee\u6307\u3059\u30d6\u30ed\u30b0<\/p>\n<\/footer>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>J\u306e\u30dd\u30fc\u30c8\u30d5\u30a9\u30ea\u30aa \u2014 \u533b\u8005\u304b\u3089\u4e00\u822c\u4f01\u696d\u3078\u306e\u5c31\u8077\u3092\u76ee\u6307\u3059\u30d6\u30ed\u30b0 J’s Portfolio \u30d6\u30ed\u30b0 \u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3 About me Contact \u533b\u8005\u304b\u3089\u4e00\u822c\u4f01\u696d\u3078\u306e\u30ad\u30e3\u30ea\u30a2\u30c1\u30a7\u30f3\u30b8\u3092\u76ee\u6307\u3059 J\u306e\u30dd\u30fc\u30c8 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"open","template":"","meta":{"footnotes":""},"class_list":["post-2","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/bonkers-mouseion.boo.jp\/notjbutj\/wp-json\/wp\/v2\/pages\/2","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bonkers-mouseion.boo.jp\/notjbutj\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bonkers-mouseion.boo.jp\/notjbutj\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bonkers-mouseion.boo.jp\/notjbutj\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bonkers-mouseion.boo.jp\/notjbutj\/wp-json\/wp\/v2\/comments?post=2"}],"version-history":[{"count":57,"href":"https:\/\/bonkers-mouseion.boo.jp\/notjbutj\/wp-json\/wp\/v2\/pages\/2\/revisions"}],"predecessor-version":[{"id":1487,"href":"https:\/\/bonkers-mouseion.boo.jp\/notjbutj\/wp-json\/wp\/v2\/pages\/2\/revisions\/1487"}],"wp:attachment":[{"href":"https:\/\/bonkers-mouseion.boo.jp\/notjbutj\/wp-json\/wp\/v2\/media?parent=2"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}