-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
165 lines (144 loc) · 7.35 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
<!DOCTYPE html>
<html lang="en">
<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 rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&family=Raleway:wght@400;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
<title>Christine Lin | Front-end Developer</title>
</head>
<body>
<div class="nav-container">
<div class="portfolio-logo">
<img src="images/portfolio-logo.PNG" alt="flower initial logo" class="logo">
</div>
<div class="nav-links">
<ul>
<li><a class="menu-items" href="#about-me-id">About Me</a></li>
<li><a class="menu-items" href="#projects-id">Projects</a></li>
<li><a class="menu-items" href="#contact-me-id">Contact Me</a></li>
</ul>
<!-- bring back when media queries are set -->
<!-- <button class="hamburger">
<span class="menu-icon material-symbols-outlined">menu</span>
<span class="close-menu-icon material-symbols-outlined">close</span>
</button> -->
</div>
</div>
<section class="header-container">
<section class="header-content">
<h1>Hello! I'm <span class="header-gradient">Christine Lin.</span></h1>
<p>I'm a front-end developer focused on building beautiful interfaces & experiences.</p>
</section>
</section>
<section class="about-me-container" id="about-me-id">
<div class="about-me-title">
<h2>About me <span class="flower">✿</span></h2>
<img class="selfie" src="images/selfie.jpg" alt="where a selfie would go">
</div>
<section class="about-me-content">
<h1>Hi there!</h1>
<p> As mentioned above, I’m Christine. I'm a self taught front-end developer
currently based in Seattle, WA. After being confused about what I wanted to do in life,
I was introduced to front-end development and was immediately got hooked into it.
I’ve always been interested in design, creating, and technology, so front-end development
is a perfect combination. Since then, I really enjoy making ideas come to life, so I love
learning anything about front-end development, and I am always searching for opportunities
to work with those who are willing to share their knowledge with me.
</p>
</section>
</section>
<section class="tech-stack-container">
<section class="skills-container">
<h2>My Toolkit <span class="flower">✿</span></h2>
<ul class="skills">
<li><img src="images/html.svg" alt="html">HTML5</li>
<li><img src="images/css.svg" alt="css">CSS</li>
<li><img src="images/javascript.svg" alt="Javascript">Javascript</li>
<li><img src="images/github.svg" alt="github">GitHub</li>
</ul>
</section>
</section>
<section class="projects-container" id="projects-id">
<div class="projects-title ugh">
<h2>Projects <span class="flower">✿</span></h2>
</div>
<section class="projects-content">
<section class="project-content-image">
<img src="images/project.jpg" alt="where project would go">
</section>
<section class="project-content-summary">
<h3>Name of project</h3>
<p>Where my explanation of a project would go and a Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Laboriosam tenetur obcaecati nostrum? Explicabo magni, eos asperiores ea molestias.</p>
<span>_____________</span>
<p>What tech stack I used to create project</p>
<button>Live</button>
<button>GitHub</button>
</section>
</section>
<section class="projects-content">
<section class="project-content-image">
<img src="images/project.jpg" alt="where project would go">
</section>
<section class="project-content-summary">
<h3>Name of project</h3>
<p>Where my explanation of a project would go and a Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Laboriosam tenetur obcaecati nostrum? Explicabo magni, eos asperiores ea molestias.</p>
<span>_____________</span> <!--divider-->
<p>What tech stack I used to create project</p>
<button>Live</button>
<button>GitHub</button>
</section>
</section>
<section class="projects-content">
<section class="project-content-image">
<img src="images/project.jpg" alt="where project would go">
</section>
<section class="project-content-summary">
<h3>Name of project</h3>
<p>Where my explanation of a project would go and a Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Laboriosam tenetur obcaecati nostrum? Explicabo magni, eos asperiores ea molestias.</p>
<span>_____________</span> <!--divider-->
<p>What tech stack I used to create project</p>
<button>Live</button>
<button>GitHub</button>
</section>
</section>
<section class="projects-content">
<section class="project-content-image">
<img src="images/project.jpg" alt="where project would go">
</section>
<section class="project-content-summary">
<h3>Name of project</h3>
<p>Where my explanation of a project would go and a Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Laboriosam tenetur obcaecati nostrum? Explicabo magni, eos asperiores ea molestias.</p>
<span>_____________</span> <!--divider-->
<p>What tech stack I used to create project</p>
<button>Live</button>
<button>GitHub</button>
</section>
</section>
</section>
<section class="contact-me-container" id="contact-me-id">
<section class="contact-me-content">
<h2>Want to say hello?</h2>
<p>Feel free to reach out and talk to me! I am always open to hearing about new opportunities or making new friends. Let's collaborate and start the beginning of something cool.</p>
<button class="email-button">
<a href="mailto:[email protected]">[email protected]</a>
</button>
<!-- link github, linkedin here -->
</section>
</section>
<footer>
<section class="footer-container">
<h2>@ 2022 created by Christine Lin</h2>
</section>
</footer>
<script src="script.js"></script>
</body>
</html>