-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
182 lines (163 loc) · 7.83 KB
/
index.html
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
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<title>Jukiya's Portfolio</title>
</head>
<body>
<section class="top-view">
<div class="top-items position-relative">
<div class="top-image-wrapper">
<img src="./img/background.jpg" alt="top-image" class="top-image image-fulid">
</div>
<div class="top-header position-absolute top-0 start-50 translate-middle">
<h1>Jukiya's Portfolio</h1>
</div>
<div
class="buttons top-button-list d-flex justify-content-center position-absolute top-50 start-50 translate-middle">
<div class="top-button-wrapper px-3">
<button class="home-button btn btn-transparent">Home</button>
</div>
<div class="top-button-wrapper px-3">
<button class="profile-button btn btn-transparent">Profile</button>
</div>
<div class="top-button-wrapper px-3">
<button class="skill-button btn btn-transparent">Skill</button>
</div>
<div class="top-button-wrapper px-3">
<button class="blog-button btn btn-transparent">Blog</button>
</div>
<div class="top-button-wrapper px-3">
<button class="contact-button btn btn-transparent">Contact</button>
</div>
</div>
</div>
</section>
<main class="container">
<section class="profile my-5">
<div class="profile-items">
<div class="profile-header text-center py-5">
<h1>Profile</h1>
</div>
<div class="profile-content d-flex justify-content-center">
<div class="profile-image d-flex align-items-center text-center">
<img class="rounded-circle" src="./img/profile_image.jpg" alt="profile image">
</div>
<div class="introduction d-flex align-items-center">
<div>
<div class="introduction-header py-2">
<h3>Self-Introduction</h3>
</div>
<div class="introduction-content">
<p>はじめまして。私はJukiya(<a href="#">twitter-link</a>)と申します。</p>
<p>都内のIT企業でエンジニアとして働いている現在1年目です(23卒)。</p>
<p>大学2年の時にC#とunityを使いゲーム開発を始めたことをきっかけに、</p>
<p>プログラミングにはまりました。</p>
<p>言語はPythonをメインに使用しています。(主に個人で)</p>
<p>他にもC#, PHPに軽く触ったことがあります。</p>
<p>メインエディタはvscodeを使用しています。</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="skill my-5">
<div class="skill-items">
<div class="skill-header text-center py-4">
<h1>Skill</h1>
</div>
<div class="skill-title d-flex align-items-center py-5">
<h3>使用したことのある技術</h3>
<p class="px-2">✳実務経験は現時点ではないです</p>
</div>
<div class="skill-list d-flex align-items-center row">
<div class="skill-item python col-sm-3">
<img src="./img/python.svg" alt="Python image">
<div class="short-desc py-5">
<p>メインで使用してます。</p>
</div>
</div>
<div class="skill-item c# col-sm-3">
<img src="./img/c-sharp.svg" alt="C# image">
<div class="short-desc py-5">
<p>一番最初に触れた言語です。</p>
</div>
</div>
<div class="skill-item php col-sm-3">
<img src="./img/php.svg" alt="PHP image">
<div class="short-desc py-5">
<p>最近勉強し始めました。</p>
</div>
</div>
<div class="skill-item javascript col-sm-3">
<img src="./img/javascript.svg" alt="javascript image">
<div class="short-desc py-5">
<p>最近勉強し始めました。</p>
</div>
</div>
</div>
</div>
</section>
<section class="works my-5">
<div class="works-items">
<div class="works-header text-center">
<h1>Works</h1>
</div>
<div class="works-contents">
<h3>Coming Soon...</h3>
</div>
</div>
</section>
<section class="blog my-5">
<div class="blog-items">
<div class="blog-header text-center">
<h1>Blog</h1>
</div>
</div>
<div class="blog-contents">
<h3>Coming Soon...</h3>
</div>
</section>
<section class="contact my-5">
<div class="contact-items">
<div class="contact-header text-center py-3">
<h1>Contact</h1>
</div>
<div class="contact-list">
<div class="contact-item email">
<div class="email-icon text-center">
<i class="fa-solid fa-envelope fa-3x"></i>
</div>
<div class="email-content text-center py-3">
<p class="fs-3">[email protected]</p>
</div>
</div>
<div class="contact-sns d-flex justify-content-center">
<div class="contact-item twitter">
<div class="twitter-icon text-center px-3">
<a href="https://twitter.com/jukiya_engineer" target="_blank"><i
class="fa-brands fa-twitter fa-3x"></i></a>
</div>
</div>
<div class="contact-item github px-3">
<div class="github-icon text-center">
<a href="https://github.com/ju-ki" target="_blank"><i
class="fa-brands fa-github fa-3x"></i></a>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
</body>
<script src="./index.js"></script>
</html>