Mitsutan.github.io/index.html at main · Mitsutan/Mitsutan.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="google-site-verification" content="NyzerJi7ICyqCGV7q5fEP4FV_JqWF0DU8twhYrBjtgs" />
    <meta name="description" content="福岡出身。プログラミング界隈にいるつもりです。" />

    <!-- font -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" />

    <!-- bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <!-- css -->
    <link rel="stylesheet" type="text/css" href="css/StyleSheet.css">

    <!-- favicon -->
    <link rel="icon" href="image/favicon.ico" />

    <title>Mitsutan</title>
</head>

<body class="container-fluid px-1">
    <header id="top">
        <h1 class="anime2">Welcome!</h1>
        <div class="d-none d-lg-block" id="contents">
            <button class="index" onclick="jumpTo('about')">About me</button><br />
            <button class="index" onclick="jumpTo('skills')">Skills</button><br />
            <button class="index" onclick="jumpTo('creations')">Creations</button><br />
            <button class="index" onclick="jumpTo('contact')">Contact</button>
        </div>
    </header>
    <div class="container-fluid" id="articles">
        <section class="block" id="about">
            <h1 class="windowCrossAnimeFire">About me</h1>
            <img class="anime5" id="icon" width="0" alt="Mitsutan" src="image/Mitsutan.jpeg"><br />
            <h2 class="windowCrossAnimeFire">Mitsutan</h2>
            <div class="mb-4">
                <i class="fas fa-birthday-cake"></i><span class="list">2002/08/20</span><br />
                <i class="fas fa-map-marker-alt"></i><span class="list">Fukuoka, JP</span>
            </div>
            <p class="windowCrossAnimeFire">
                色々なことに手を出しては、投げ出している。<br />
                良く言えば好奇心旺盛、悪く言えば飽きっぽい。<br />
                このサイトもその一環。
            </p>
            <p class="windowCrossAnimeFire">
                福岡の専門学校を２５年卒業、上京して関東でプログラマーをやっています。<br />
            </p>
            <p class="windowCrossAnimeFire">
                高校時代は放送部に所属し、主に動画編集をしていました。<br />
                一応、朗読もやっていましたが、全て県大会予選落ち。
            </p>
        </section>
        <section class="block" id="skills">
            <h1 class="windowCrossAnimeFire">Skills</h1>
            <p class="windowCrossAnimeFire">
                (得意とは言っていない)<br />
                (ちょっと触っただけなやつも含む)
            </p>
            <h2 class="windowCrossAnimeFire">プログラミング言語+α</h2>
            <p class="windowCrossAnimeFire">
                <i class="fa-brands fa-js mx-1"></i>JavaScript<br />
                <i class="fa-brands fa-vuejs mx-1"></i>Vue.js<br />
                Next.js<br />
                <i class="fa-brands fa-java mx-1"></i>Java<br />
                Spring Framework<br />
                Kotlin<br />
                Smile Basic(プチコン３号)<br />
                <i class="fa-brands fa-php mx-1"></i>PHP<br />
                <i class="fa-solid fa-code mx-1"></i>HTML<br />
                <i class="fa-brands fa-bootstrap mx-1"></i>Bootstrap<br />
                CSS<br />
                Flutter<br />
                Dart<br />
                <i class="fa-brands fa-golang mx-1"></i>Go<br />
            </p>
            <h2 class="windowCrossAnimeFire">ソフトウェア</h2>
            <p class="windowCrossAnimeFire">
                DaVinci Resolve 17<br />
                Unity
            </p>
            <h2 class="windowCrossAnimeFire">資格・試験</h2>
            <p class="windowCrossAnimeFire">
                基本情報技術者試験<br />
                応用情報技術者試験<br />
                Java™プログラミング能力認定試験 2級
            </p>
        </section>
        <section class="block" id="creations">
            <h1 class="windowCrossAnimeFire">Creations</h1>

            <h2 class="windowCrossAnimeFire"><a href="https://mitsutan.dev/">このサイト</a></h2>
            <p class="windowCrossAnimeFire">
                割と気に入っている
            </p>
            <h2 class="windowCrossAnimeFire"><a href="https://github.com/Mitsutan/sysdev_suretti">すれっち</a></h2>
            <p class="windowCrossAnimeFire">
                卒業制作、Flutter製モバイルアプリ。<br />
                <a href="https://youtu.be/dnXJiQga-W4">デモ動画</a>
            </p>
            <h2 class="windowCrossAnimeFire"><a href="creations/dog/dog.html">「犬」</a></h2>
            <p class="windowCrossAnimeFire">
                APIとかjsonの取り込みとかの習作。
            </p>
            <h2 class="windowCrossAnimeFire"><a href="creations/VerTranslator-1.0.1.vsix" download="VerTranslator-1.0.1.vsix">「VerTranslator」v1.0.1(click to download)</a></h2>
            <p class="windowCrossAnimeFire">
                変数名や関数名を決めてくれるVScodeの拡張機能。<br />
                .vsix形式での配布。
            </p>
            <p class="windowCrossAnimeFire">
                メンテナンスしてないのでもう動かないかも。
            </p>
            <h2 class="windowCrossAnimeFire"><a href="https://youtu.be/DDuqR7si_34">「PCPD -code 3-」(Youtube)</a></h2>
            <p class="windowCrossAnimeFire">
                プチコン3号で作成した、警察アクションシューティングゲーム。<br />
                いつかPCで動作する環境に移植したい。<br />
                公開キー【WPK4AD】
            </p>
            <h2 class="windowCrossAnimeFire"><a href="https://petitcom.mitsutan.dev">プチコン３号作品倉庫</a></h2>
            <p class="windowCrossAnimeFire">
                プチコン３号の作品を集めるサイト。<br />
                集まらないと倉庫の意味ないから、みんなぜひ投稿してね！
            </p>
            <h2 class="windowCrossAnimeFire"><a href="https://github.com/Mitsutan/spajam2024_kumamoto">もっとも</a></h2>
            <p class="windowCrossAnimeFire">
                SPAJAM2024九州予選in熊本 提出作品<br />
                優秀賞でした。（<a href="https://www.mcf.or.jp/newsletter/20240917-36727#:~:text=%E8%BC%9D%0A%20%0A%E3%83%BB%E3%83%81%E3%83%BC%E3%83%A0%E5%90%8D%EF%BC%9A-,ASO%C3%97SINTOKU%20ConnecTech,-%E3%82%A2%E3%83%97%E3%83%AA%E5%90%8D%EF%BC%9A%E3%82%82%E3%81%A3%E3%81%A8%E3%82%82">リンク</a>）
            </p>
            <h2 class="windowCrossAnimeFire"><a href="https://www.youtube.com/channel/UCw5YkU5DLtyp8bPfjgAksgw">Movies</a></h2>
            <p class="windowCrossAnimeFire">
                放送部時代に作った動画
            </p>
            <div class="px-md-5" id="moviearea">
                <iframe class="m-sm-1 m-xl-2 windowCrossAnimeFire" src="https://www.youtube-nocookie.com/embed/nalIitRZSO0" loading="lazy" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
                <iframe class="m-sm-1 m-xl-2 windowCrossAnimeFire" src="https://www.youtube-nocookie.com/embed/b0vy9JGY3Oc" loading="lazy" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
                <iframe class="m-sm-1 m-xl-2 windowCrossAnimeFire" src="https://www.youtube-nocookie.com/embed/9CZ5fGU-esM" loading="lazy" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
            </div>

        </section>
        <section class="block" id="contact">
            <h1 class="windowCrossAnimeFire">Contact</h1>
            <p class="windowCrossAnimeFire">
                <i class="fab fa-twitter"></i><span class="list">kndu_ptcm</span><br />
                <i class="fa-brands fa-bluesky"></i><span class="list"><a href="https://bsky.app/profile/mitsutan.dev">@mitsutan.dev</a></span><br />
                <!-- <i class="fab fa-instagram"></i><span class="list">mt_site</span><br /> -->
                <i class="fa-brands fa-github"></i><span class="list">Mitsutan</span><br />
                <i class="far fa-envelope"></i><span class="list">contact@mitsutan.dev</span><br />
            </p>
        </section>
    </div>
    <footer id="end">
        2025 Mitsutan
    </footer>
    <script type="text/javascript" src="javascript/MainJS.js"></script>
    <script defer src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>

</html>