-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
209 lines (195 loc) · 11.2 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
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=VT323&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@master/devicon.min.css">
<title>Diem Tran</title>
</head>
<body>
<nav class = "flex-nav">
<ul>
<li>
<a href="#" class="nav-link">diem tran</a>
</li>
<li>
<a href="#about" class="nav-link">about</a>
</li>
<li>
<a href="#skills" class="nav-link">skills</a>
</li>
<li>
<a href="#projects" class="nav-link">projects</a>
</li>
<li class="social">
<a href="https://www.linkedin.com/in/diembtran/" target="_blank">
<i class="fab fa-linkedin" alt="LinkedIn's signature icon"></i>
</a>
</li>
<li class="social">
<a href="https://github.com/DiemBTran" target="_blank">
<i class="fab fa-github-alt" alt="GitHub's signature icon"></i>
</a>
</li>
<li class="social">
<a href="https://twitter.com/diem_yml" target="_blank">
<i class="fab fa-twitter-square" alt="Twitter's signature icon"></i>
</a>
</li>
<li class="social">
<a href="https://www.canva.com/design/DAEKhJ8mEnM/dJpwrgHEUxl4x1dW6-Srzg/view?utm_content=DAEKhJ8mEnM&utm_campaign=designshare&utm_medium=link&utm_source=sharebutton" target="_blank">
<i class="fas fa-scroll" alt="a paper scroll icon"></i>
</a>
</li>
</ul>
</nav>
<section class="home-container">
<h2 class="ml11 home-item">
<span class="text-wrapper">
<span class="line line1"></span>
<span class="letters">i yam yeem</span>
</span>
<br>
(i am diem)
<br>
a full-stack web developer
<br>
she/her/hers
<br>
⬇ scroll along or
<br>
use the nav bar! 🧭
</h2>
<img src="/img/pixel-me.png" id="pixel-me" alt="a pixelated portrait of Diem">
</section>
<section class="about-container" id="about">
<h1 id="about-header"> ✨about diem "the yam" tran✨ </h1>
<img src="img/map-cali.png" class="about-item" id="map-cali" alt="a map of California">
<p class="about-item">
Do you like my page? Thank you, I grew it myself! 🍠 My name is pronounced as "<span class="highlight">Yeem</span>", and I'm a <span class="highlight">first-generation Vietnamese-American</span>. My first day of work was at the age of 8 helping my mom sell ice cream, and I've been working in the service industry ever since. I was a microbiology major at UCLA, but I wanted to pursue a profession where I could immediately see the <span class="highlight">impact</span> of my work. It was then when I found my enthusiasm for <span class="highlight">web development</span>, a field that encompasses my passions for <span class="highlight">problem solving</span>, <span class="highlight">collaboration</span>, <span class="highlight">constant learning</span>, and <span class="highlight">personal growth</span>. I love the satisfaction of planning, prioritizing, and achieving those tasks in a team setting. In my spare time, I want to create a visual-novel style role-playing game as my passion project.✨🕹
</p>
</section>
<section class="skills-container" id="skills">
<h1 class= "skills-item"> ✨skills to pay the bills✨ </skills></h1>
<p class="skills-item">
JavaScript <i class="fab fa-js-square" alt="JavaScript's iconic logo"></i>
</p>
<p class="skills-item">
Ruby <i class="fas fa-gem" alt="Ruby's iconic logo"></i>
</p>
<p class="skills-item">
HTML <i class="fab fa-html5" alt="HTML's iconic logo"></i>
</p>
<p class="skills-item">
CSS <i class="fab fa-css3-alt" alt="CSS's iconic logo"></i>
</p>
<p class="skills-item">
React.js <i class="fab fa-react" alt="React's iconic logo"></i>
</p>
<p class="skills-item">
Ruby on Rails <i class="devicon-rails-plain" alt="Ruby on Rail's iconic logo"></i>
</p>
<p class="skills-item">
PostgreSQL <i class="devicon-postgresql-plain " alt="PostgreSQL's iconic logo"></i>
</p>
<p class="skills-item">
GitHub <i class="fab fa-github-alt" alt="GitHub's iconic logo"></i>
</p>
<p class="skills-item">
Zoom <i class="fas fa-video" alt="Zoom's iconic logo"></i>
</p>
<p class="skills-item">
Slack <i class="fab fa-slack" alt="Slack's iconic logo"></i>
</p>
</section>
<section class="projects-container" id="projects">
<h1 class= "projects-item"> ✨featured projects✨</h1>
<!--<div class="projects-item" id="capstone">
<h3>Capstone Project</h3>
<img src="img/project-img1.png" alt="placeholder for project image">
<p>Placeholder description, placeholder description, placeholder description, placeholder description, placeholder description, placeholder description.</p>
<div class="projects-anchor-container">
<a href="#" target="_blank">View on GitHub</a>
<a href="#" target="_blank">See it in Action</a>
</div>
<div class="projects-tech-container">
<p class="tech">tech language used</p>
<p class="tech">tech language used</p>
<p class="tech">tech language used</p>
</div>
</div>
<div class="projects-item" id="cat-tinder">
<h3>Cat Tinder</h3>
<img src="img/project-img1.png" alt="placeholder for project image">
<p>Placeholder description, placeholder description, placeholder description, placeholder description, placeholder description, placeholder description.</p>
<div class="projects-anchor-container">
<a href="#" target="_blank">View on GitHub</a>
<a href="#" target="_blank">See it in Action</a>
</div>
<div class="projects-tech-container">
<p class="tech">tech language used</p>
<p class="tech">tech language used</p>
<p class="tech">tech language used</p>
</div>
</div>
<div class="projects-item" id="apartment">
<h3>Apartment Finder</h3>
<img src="img/project-img1.png" alt="placeholder for project image">
<p>Placeholder description, placeholder description, placeholder description, placeholder description, placeholder description, placeholder description.</p>
<div class="projects-anchor-container">
<a href="#" target="_blank">View on GitHub</a>
<a href="#" target="_blank">See it in Action</a>
</div>
<div class="projects-tech-container">
<p class="tech">tech language used</p>
<p class="tech">tech language used</p>
<p class="tech">tech language used</p>
</div>
</div>-->
<div class="projects-item" id="react-here">
<h3>REACT Here, Tryna FUNCTION</h3>
<img src="img/project-img1.png" alt="placeholder for project image">
<p>You're tryna throw a <span class="highlight">FUNCTION</span> with E-40? Enter your party size and budget, and Uncle Sam will tell you how much each of your guests have to Cash App you before they can be added to the guest list! This app was created for the <span class="highlight">2020 DeltaCathalon</span> competition, and I had so much fun adding our style and personality to the project.</p>
<div class="projects-anchor-container">
<a href="https://github.com/DiemBTran/react-here-tryna-function" target="_blank">View on GitHub</a>
<a href="#" target="_blank">See it in Action</a>
</div>
<div class="projects-tech-container">
<p class="tech">JavaScript</p>
<p class="tech">React</p>
</div>
</div>
<div class="projects-item" id="text-game">
<h3>LEARN Academy Text-Based Game</h3>
<img src="img/project-img1.png" alt="placeholder for project image">
<p>You're a student at LEARN Academy and today is the day you interview for your internship placements! Play through the options in this text-based game to simulate the (<span class="highlight">not so?</span>) ordinary day of a full-stack web developer! I was responsible for <span class="highlight">wireframing</span> and <span class="highlight">planning the logic</span> for each of the paths of this project. I'll always remember how much fun everybody had with this game!</p>
<div class="projects-anchor-container">
<a href="https://github.com/DiemBTran/text-based-game-text-based-game-ryan-brian-diem" target="_blank">View on GitHub</a>
<a href="#" target="_blank">See it in Action</a>
</div>
<div class="projects-tech-container">
<p class="tech"> Ruby </p>
</div>
</div>
<div class="projects-item" id="text-game">
<h3>Tic-Tac-Toe</h3>
<img src="img/project-img1.png" alt="placeholder for project image">
<p>Play against another player in this classic tic-tac-toe game. This project was a great exercise in <span class="highlight">setting state</span>, <span class="highlight">passing props</span>, and <span class="highlight">nesting components</span>. Although the game is simple enough, much planning and deliberation were required to write the functions for play. My favorite part of this project was <span class="highlight">figuring out the logic of passing turns from X and O</span> (through state) and <span class="highlight">how to determine the winner</span> (by searching each player's array of choices for a winning combination).</p>
<div class="projects-anchor-container">
<a href="https://github.com/DiemBTran/tic-tac-toe-team-diem-drew-nate" target="_blank">View on GitHub</a>
<a href="#" target="_blank">See it in Action</a>
</div>
<div class="projects-tech-container">
<p class="tech">JavaScript</p>
<p class="tech">React</p>
</div>
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
<script src="main.js"></script>
</body>
</html>