Skip to content

Commit e435b6a

Browse files
ColinCoderUmichColinCoderUmich
committed
sections for project
1 parent 5c186d6 commit e435b6a

10 files changed

Lines changed: 265 additions & 9 deletions

File tree

‎.DS_Store‎

6 KB
Binary file not shown.

‎images/favicon.png‎

975 KB
Loading

‎images/linkedin-svgrepo-com.svg‎

Lines changed: 14 additions & 0 deletions
Loading

‎images/p6.jpeg‎

13 KB
Loading

‎images/phish.jpg‎

23 KB
Loading

‎images/submarine.jpg‎

710 KB
Loading

‎index.html‎

Lines changed: 111 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,131 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
34
<head>
45
<meta charset="UTF-8" />
56
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
67
<title>Website Template</title>
78
<link rel="stylesheet" href="styles.css" />
9+
<link rel="icon" type="image/png" href="images/favicon.png">
10+
811
</head>
912
<body>
1013
<header>
11-
<h1>Colin Lam</h1>
12-
<!-- <p>Welcome to my website</p> -->
14+
<!-- <h1>Colin Lam</h1> -->
15+
<div class="page">
16+
<div class="card">
17+
<img src="images/phish.jpg" alt="this is me" class="avatar">
18+
<h1 class="name">Colin Lam </h1>
19+
<p class="tagline">Computer Engineering Student • Robotics Research</p>
20+
21+
<!-- GITHUB ICON -->
22+
<a href="https://github.com/ColinCoderUmich" target="_blank" class="icon">
23+
<svg viewBox="0 0 16 16" fill="currentColor">
24+
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54
25+
2.29 6.53 5.47 7.59.4.07.55-.17.55-.38
26+
0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94
27+
-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53
28+
.63-.01 1.08.58 1.23.82.72 1.21 1.87.87
29+
2.33.66.07-.52.28-.87.51-1.07
30+
-1.78-.2-3.64-.89-3.64-3.95
31+
0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12
32+
0 0 .67-.21 2.2.82.64-.18
33+
1.32-.27 2-.27.68 0 1.36.09 2 .27
34+
1.53-1.04 2.2-.82 2.2-.82
35+
.44 1.1.16 1.92.08 2.12.51.56.82
36+
1.27.82 2.15 0 3.07-1.87 3.75-3.65
37+
3.95.29.25.54.73.54 1.48
38+
0 1.07-.01 1.93-.01 2.19
39+
0 .21.15.46.55.38A8.013 8.013 0 0
40+
0 16 8c0-4.42-3.58-8-8-8z"/>
41+
</svg>
42+
</a>
43+
44+
<!-- <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100" height="100" viewBox="0 0 30 30">
45+
<path d="M24,4H6C4.895,4,4,4.895,4,6v18c0,1.105,0.895,2,2,2h18c1.105,0,2-0.895,2-2V6C26,4.895,25.105,4,24,4z M10.954,22h-2.95 v-9.492h2.95V22z M9.449,11.151c-0.951,0-1.72-0.771-1.72-1.72c0-0.949,0.77-1.719,1.72-1.719c0.948,0,1.719,0.771,1.719,1.719 C11.168,10.38,10.397,11.151,9.449,11.151z M22.004,22h-2.948v-4.616c0-1.101-0.02-2.517-1.533-2.517 c-1.535,0-1.771,1.199-1.771,2.437V22h-2.948v-9.492h2.83v1.297h0.04c0.394-0.746,1.356-1.533,2.791-1.533 c2.987,0,3.539,1.966,3.539,4.522V22z"></path>
46+
</svg> -->
47+
<a href="https://www.linkedin.com/in/colin-lam-668b5919b/" target="_blank" class="icon">
48+
<!-- <svg viewBox="0 0 448 512" fill="currentColor">
49+
<path d="M100.28 448H7.4V148.9h92.88zm-46.44-341C24.42 107 0
50+
82.6 0 53.7A53.69 53.69 0 0 1 53.84 0c29.9 0 53.7 24.42
51+
53.7 53.7c0 28.9-23.8 53.3-53.7 53.3zM447.9
52+
448h-92.4V302.4c0-34.7-.7-79.2-48.2-79.2c-48.3
53+
0-55.7 37.7-55.7 76.7V448h-92.5V148.9h88.8v40.8h1.3c12.4-"/>
54+
</svg> -->
55+
56+
57+
<svg viewBox="0 0 16 16" fill="currentColor">
58+
<path d="M100.28 448H7.4V148.9h92.88zm-46.44-341C24.42 107 0
59+
82.6 0 53.7A53.69 53.69 0 0 1 53.84 0c29.9 0 53.7 24.42
60+
53.7 53.7c0 28.9-23.8 53.3-53.7 53.3zM447.9
61+
448h-92.4V302.4c0-34.7-.7-79.2-48.2-79.2c-48.3
62+
0-55.7 37.7-55.7 76.7V448h-92.5V148.9h88.8v40.8h1.3c12.4-23.5
63+
42.5-48.2 87.4-48.2c93.5 0 110.7 61.5 110.7
64+
141.3V448z"/>
65+
</svg>
66+
67+
</a>
68+
69+
</div>
70+
</div>
1371
</header>
1472

73+
<!-- want to eventually make this scrollable -->
1574
<nav>
16-
<a href="#">About me</a>
17-
<a href="#">Projects</a>
18-
<a href="#">Resume</a>
75+
<a href="#about">About me</a>
76+
<a href="#projects">Projects</a>
77+
<a href="#resume">Resume</a>
1978
</nav>
2079

21-
<section class="hero">
80+
81+
82+
83+
<section id="about" class="container">
84+
<h2>About Me</h2>
85+
<p>I am a student</p>
86+
</section>
87+
88+
<section id="projects" class="container">
89+
<h2>Projects</h2>
90+
<p>These are some of my projects!</p>
91+
<div class="projects-grid">
92+
93+
<div class="project-card">
94+
<img src="images/p6.jpeg" alt="RISC-V Out of Order Superscalar Processor" class="project-img">
95+
<h3 class="project-title">RISC-V Out of Order Superscalar Processor</h3>
96+
<p class="project-desc">
97+
Made an RISC-V Out of Order Superscalar Processor as part of my EECS 470 (Advance Computer Architecture) class.
98+
</p>
99+
<a href="processor.html" class="project-link" target="_blank">View Project →</a>
100+
<a href="processor.html" class="project-link" target="_blank">View Report →</a>
101+
</div>
102+
103+
104+
<div class="project-card">
105+
<img src="images/submarine.jpg" alt="Project 1" class="project-img">
106+
<h3 class="project-title">Submarine EECS 373</h3>
107+
<p class="project-desc">
108+
Made an embedded submarine as part of my EECS 373 (Embedded Systems) class.
109+
</p>
110+
<a href="submarine.html" class="project-link" target="_blank">View Project →</a>
111+
</div>
112+
113+
114+
115+
116+
</div>
117+
118+
</section>
119+
120+
<section id="resume" class="container">
121+
<h2>Resume</h2>
122+
<p></p>
123+
</section>
124+
125+
<!-- <section class="hero"> -->
22126
<!-- <h2>Welcome to the Template</h2>
23127
<p>This is a hero section you can customize.</p> -->
24-
</section>
128+
<!-- </section> -->
25129

26130
<!-- <div class="container">
27131
<h2>Section Title</h2>

‎processor.html‎

Whitespace-only changes.

‎styles.css‎

Lines changed: 140 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,143 @@
1+
/* --- PROJECT SECTION LAYOUT --- */
2+
.projects-section {
3+
padding: 80px 20px;
4+
max-width: 1000px;
5+
margin: auto;
6+
text-align: center;
7+
}
8+
9+
.projects-section h2 {
10+
font-size: 2.2rem;
11+
margin-bottom: 40px;
12+
color: #e5e7eb;
13+
}
14+
15+
/* --- GRID FOR PROJECT CARDS --- */
16+
.projects-grid {
17+
display: grid;
18+
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
19+
gap: 32px;
20+
}
21+
22+
/* --- PROJECT CARD STYLE --- */
23+
.project-card {
24+
background: rgba(15, 23, 42, 0.75);
25+
border: 1px solid rgba(148, 163, 184, 0.25);
26+
border-radius: 20px;
27+
padding: 24px;
28+
text-align: left;
29+
transition: 0.25s ease;
30+
box-shadow: 0 10px 25px rgba(0,0,0,0.15);
31+
}
32+
33+
.project-card:hover {
34+
transform: translateY(-6px);
35+
border-color: #60a5fa;
36+
box-shadow: 0 18px 35px rgba(0,0,0,0.3);
37+
}
38+
39+
/* --- PROJECT IMAGE --- */
40+
.project-img {
41+
width: 100%;
42+
height: 160px;
43+
object-fit: cover;
44+
border-radius: 14px;
45+
margin-bottom: 16px;
46+
}
47+
48+
/* --- TEXT --- */
49+
.project-title {
50+
font-size: 1.3rem;
51+
margin-bottom: 8px;
52+
color: #e5e7eb;
53+
}
54+
55+
.project-desc {
56+
font-size: 0.95rem;
57+
color: #cbd5e1;
58+
margin-bottom: 16px;
59+
}
60+
61+
/* --- PROJECT LINK --- */
62+
.project-link {
63+
color: #60a5fa;
64+
font-weight: 600;
65+
text-decoration: none;
66+
transition: 0.2s;
67+
}
68+
69+
.project-link:hover {
70+
color: #93c5fd;
71+
}
72+
73+
74+
75+
76+
77+
78+
79+
80+
81+
82+
183
body {
284
margin: 0;
385
font-family: Arial, sans-serif;
486
background-color: #f5f5f5;
587
color: #333;
688
}
89+
90+
html {
91+
scroll-behavior: smooth;
92+
}
93+
94+
/* github icon*/
95+
.icon {
96+
display: inline-block;
97+
margin-top: 12px;
98+
color: #e5e7eb;
99+
width: 32px;
100+
height: 32px;
101+
transition: 0.2s ease;
102+
}
103+
.icon:hover {
104+
color: #60a5fa; /* same blue glow */
105+
transform: scale(1.1);
106+
}
107+
108+
/* Face card */
109+
.page {
110+
/* min-height: 100vh; */
111+
display: flex;
112+
align-items: center;
113+
justify-content: center;
114+
padding: 16px;
115+
}
116+
117+
.card {
118+
background: rgba(15, 23, 42, 0.9);
119+
border-radius: 24px;
120+
padding: 32px 40px;
121+
max-width: 360px;
122+
width: 100%;
123+
text-align: center;
124+
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
125+
border: 1px solid rgba(148, 163, 184, 0.35);
126+
}
127+
.avatar {
128+
width: 160px;
129+
height: 160px;
130+
border-radius: 50%;
131+
object-fit: cover;
132+
display: block;
133+
margin: 0 auto 20px;
134+
border: 3px solid rgba(96, 165, 250, 0.7);
135+
}
136+
/* all for the face */
137+
138+
7139
header {
8-
background-color: #222;
140+
background-color: #ffffff;
9141
color: white;
10142
padding: 20px;
11143
text-align: center;
@@ -22,9 +154,15 @@ nav a {
22154
text-decoration: none;
23155
font-weight: bold;
24156
}
25-
nav a:hover {
157+
/* nav a:hover {
26158
color: #ffd700;
159+
} */
160+
161+
nav a:hover {
162+
color: #60a5fa; /* same blue glow */
163+
transform: scale(1.1);
27164
}
165+
28166
.hero {
29167
background: #ddd;
30168
padding: 60px 20px;

‎submarine.html‎

Whitespace-only changes.

0 commit comments

Comments
 (0)