-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
183 lines (162 loc) · 10 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
183
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="icon" href="./pic/images/1311.png" />
<title>Zhiwei022 profile</title>
<meta name="description" content="A portfolio template for the Unemployables community.">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="./css/bootstrap.css">
<link rel="stylesheet" href="./css/layout.css">
<link rel="stylesheet" href="./css/nav.css">
<link rel="stylesheet" href="./css/footer.css">
<link rel="stylesheet" href="./css/media.css">
<link rel="stylesheet" href="./css/main.css">
<link rel="stylesheet" href="./css/utilities.css">
<link rel="stylesheet" href="./css/typography.css">
<link href='https://cdn.jsdelivr.net/npm/boxicons@2.0.5/css/boxicons.min.css' rel='stylesheet'>
<script defer src="script.js"></script>
</head>
<body>
<!--===== HEADER =====-->
<header class="l-header">
<nav class="nav bd-grid">
<div>
<a href="#" class="nav__logo">Wei</a>
</div>
<div class="nav__menu" id="nav-menu">
<ul class="nav__list">
<li class="nav__item"><a href="#" class="nav__link active">Home</a></li>
<li class="nav__item"><a href="#about-section" class="nav__link">About</a></li>
<li class="nav__item"><a href="#projects-section" class="nav__link">Projects</a></li>
<li class="nav__item"><a href="#footer-section" class="nav__link">Contact</a></li>
</ul>
</div>
<div class="nav__toggle" id="nav-toggle">
<i class='bx bx-menu'></i>
</div>
</nav>
</header>
<!-- MAIN PAGE CONTENT -->
<main id="main-content" >
<!-- PORTFOLIO HEADER -->
<section id="portfolio-header">
<div id="portfolio-header-image-container">
<!--
TODO
- Change the img "src" attribute to point to the Unemployable image you uploaded (or whatever image).
- Change the number to point to your Unemployable & replace the OpenSea link with your own
- If you aren't using an Unemployable as your image, remove the entire "a" element
-->
<img src="./assets/images/momo.jpg" class="portfolio-header-image">
<a class="no-underline" target="_blank" href=""></a>
</div>
<!--
TODO
- Change the main-title to whatver you want
- Change the body-text after that to a quick introduction to what you do
- Edit the button text if you feel like it. It will link to the projects section below.
-->
<div id="portfolio-header-text-container">
<div class="header-text">
<span class="main-title">Hey, I'm Liu-Zhi-Wei.</span>
<div class="body-text">I’m a freelance designer and developer who aims to help other creatives build out their portfolios, skillset, and businesses.</div>
</div>
<a class="button" id="my-work-link" href="#projects-section">
<span class="button-text">Check out my projects</span>
<image src="./assets/icons/arrow-right.svg" class="right-arrow-icon"/>
</a>
</div>
</section>
<!-- ABOUT SECTION -->
<!--
TODO
- Change the subheader-text to whatever header you want
- Add paragraphs using the <div class="body-text"></div> elements in the "about-section-content"
-->
<section id="about-section">
<span class="subheader-text" id="about-section-text">About Me / My Background</span>
<div class="about-section-content">
<div class="body-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tristique risus nec feugiat in fermentum. Sed id semper risus in hendrerit gravida. Placerat duis ultricies lacus sed. Id neque aliquam vestibulum morbi blandit cursus risus. Elit pellentesque habitant morbi tristique senectus et netus et. Elementum tempus egestas sed sed risus pretium quam. Nibh ipsum consequat nisl vel pretium lectus quam id leo. Vitae congue mauris rhoncus aenean vel elit.</div>
<div class="body-text">Vitae justo eget magna fermentum. Imperdiet nulla malesuada pellentesque elit eget gravida. Aliquet nec ullamcorper sit amet. Aliquet sagittis id consectetur purus. Ac tortor dignissim convallis aenean. Enim neque volutpat ac tincidunt vitae. Lobortis feugiat vivamus at augue. Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper. Viverra orci sagittis eu volutpat. Massa tincidunt nunc pulvinar sapien et ligula. Donec enim diam vulputate ut.</div>
</div>
</section>
<!-- PROJECTS / MY WORK SECTION -->
<section id="projects-section">
<!-- TODO - Change the subheader-text to whatever you want the Projects section header to say -->
<span class="subheader-text">My Projects / My Work</span>
<div class="projects-container">
<!--
TODO
This is where the project cards live. Here's a base level project card for you to copy:
<div class="project-card">
<img src="./assets/images/IMAGE_NAME" class="project-image">
<div class="project-card-text-container">
<div class="subheader-text project-title">PROJECT_NAME</div>
<div class="body-text project-card-text">SMALL_PROJECT_DESCRIPTION</div>
</div>
<a class="button" href="./project-pages/PROJECT_PAGE_NAME.html">
<span class="button-text">Read More</span>
<image src="./assets/icons/arrow-right.svg" class="right-arrow-icon"/>
</a>
</div>
- To add a project to the this area, copy the above, paste it below this comment, and change the following:
- IMAGE_NAME: the name of the image file in assets/images
- PROJECT_NAME: the name of the project (keep it short, it only shows 1 line)
- SMALL_PROJECT_DESCRIPTION: a quick project description (max 4 lines)
- PROJECT_PAGE_NAME.html: the html filename for the project (must be in project-pages folder)
-->
<article class="project-card">
<img src="./assets/images/desktop.jpeg" class="project-image">
<div class="project-card-text-container">
<div class="subheader-text project-title">Simple Money Tracker</div>
<div class="body-text project-card-text">Elit pellentesque habitant morbi tristique senectus et netus et. Elementum tempus egestas sed sed risus pretium quam. Nibh ipsum consequat nisl vel pretium</div>
</div>
<a class="button" href="./project-pages/project-template.html">
<span class="button-text">Read More</span>
<image src="./assets/icons/arrow-right.svg" class="right-arrow-icon"/>
</a>
</article>
<article class="project-card">
<img src="./assets/images/code.jpeg" class="project-image">
<div class="project-card-text-container">
<div class="subheader-text project-title">Project Name</div>
<div class="body-text project-card-text">Elit pellentesque habitant morbi tristique senectus et netus et. Elementum tempus egestas sed sed risus pretium quam. Nibh ipsum consequat nisl vel pretium</div>
</div>
<a class="button" href="./project-pages/project-template.html">
<span class="button-text">Read More</span>
<image src="./assets/icons/arrow-right.svg" class="right-arrow-icon"/>
</a>
</article>
<article class="project-card">
<img src="./assets/images/sketchbook.jpeg" class="project-image">
<div class="project-card-text-container">
<div class="subheader-text project-title">Super Long Project Name That Should be Hidden</div>
<div class="body-text project-card-text">Elit pellentesque habitant morbi tristique senectus et netus et. Elementum tempus egestas sed sed risus pretium quam. Nibh ipsum consequat nisl vel pretium</div>
</div>
<a class="button" href="./project-pages/project-template.html">
<span class="button-text">Read More</span>
<image src="./assets/icons/arrow-right.svg" class="right-arrow-icon"/>
</a>
</article>
</div>
</section>
</main>
<!--===== FOOTER =====-->
<footer class="footer" id="footer-section">
<p class="footer__title">Wei</p>
<div class="footer__social">
<a href="https://www.facebook.com/profile.php?id=100006902282559" class="footer__icon"><i class='bx bxl-facebook' ></i></a>
<a href="https://instagram.com/wei.0731__?igshid=MzNlNGNkZWQ4Mg==" class="footer__icon"><i class='bx bxl-instagram' ></i></a>
<a href="https://github.com/ZhiWei0731" class="footer__icon"><i class='bx bxl-github' ></i></a>
</div>
<p>© 2023 copyright all right reserved</p>
</footer>
<!--===== SCROLL REVEAL =====-->
<script src="https://unpkg.com/scrollreveal"></script>
<!---JS CDN Link---->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!--Custom JS File-->
<script src="script.js"></script>
</body>
</html>