-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
132 lines (119 loc) · 5.78 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
<!DOCTYPE html>
<html>
<head>
<title>Brian's Portfolio</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="header">
<button class="tablinks" onclick="openTab(event, 'Home')">Home</button>
<button class="tablinks" onclick="openTab(event, 'Projects')">Projects</button>
</div>
<div id="Home" class="tabcontent">
<a href="https://www.linkedin.com/in/brian-lu-9687b1211/" target="_blank">
<img src="linkedin-logo.png" alt="LinkedIn" style="width:150px; height:50px; margin-bottom: 20px;">
</a>
<div class="time-passing">
<div class="time"></div>
<div>
<div class="arrow"></div>
<div class="percentage">0.00%</div>
</div>
<div class="water-animation"></div>
</div>
<p><strong>Hi!</strong></p>
<p>i enjoy backend infrastructure, full-stack, apis, etc. and a faster learner</p>
<a href="javascript:void(0)" class="tablinks" style="color: lightblue;" onclick="openTab(event, 'Projects')">View Projects</a>
<p></p>
<p>COURSES TAKEN:</p>
<p>Programming Languages and Techniques I & II: (Object Oriented Programming, Data Structures, Algorithms, Time Complexity), </p>
<p>Introduction to Algorithms: (Graph Algorithms, P vs NP), </p>
<p>Database and Information Systems: (Apache Spark, mySQL, React JS, ACID Properties, AWS RDS), </p>
<p>Software Design/Engineer: (Github, HTML, CSS, JavaScript, Google Extensions, Agile, Scrum, CI/CD), </p>
<p>Big Data Analytics: (Sharding, SQLite), </p>
<p>Applied Machine Learning: (Python, NLP, Optimizing models, Deep Learning, Supervised vs Unsupervised), </p>
<p>Market and Social Systems on the Internet: (Networks Fundamentals, TCP, UDP), </p>
<p>Introduction to Computer Systems: (Assembly & C), </p>
<p>Computer Operating Systems: (Created Shells and OS, C), </p>
<p>Computer Organization & Design: (Docker, ISM Data pipelines)</p>
</div>
<div id="Projects" class="tabcontent">
<div class="projects-container">
<!-- Project 1 -->
<div class="project">
<h4>Project 1: WeighIn</h4>
<p><strong>Description:</strong> Crowdsourcing platform designed to tackle indecisiveness in group decision-making by allowing users to post anonymous questions or dilemmas and receive anonymous multiple-choice feedback from the crowd.</p>
<p><strong>Skills Used:</strong> React TypeScript <strong>||</strong> Python Flask, SQLite</p>
<div>
<img src="Weighin.png" alt="WeighIn Image" style="width:50%; height:50%;">
</div>
<div>
<a href="https://weigh-in.vercel.app/" target="_blank">Check out website</a>
</div>
<div>
<a href="https://github.com/sydsimon/WeighIn?tab=readme-ov-file#project-description-weighin" target="_blank">View on Github</a>
</div>
</div>
<!-- Project 2 -->
<div class="project">
<h4>Project 2: Coinage</h4>
<p><strong>Description:</strong> If you like Wordle and Math/Coins, you will definitely like this game.</p>
<p><strong>Creation:</strong> 12/26/2024</p>
<div>
<img src="Coinage.png" alt="Coinage Image" style="width:50%; height:50%;">
</div>
<a href="https://www.coinage.website/" target="_blank">View on coinage.website</a>
</div>
<!-- Project 2 -->
<div class="project">
<h4>Project 3: TabsOFF</h4>
<p><strong>Description:</strong> Chrome extension that organizes open tabs by time/days unused.</p>
<p><strong>Skills Used:</strong> HTML, CSS, TypeScript, JavaScript, Chrome caching </p>
<div>
<img src="TabsOff.png" alt="Tabs OFF Extension Image" style="width:50%; height:50%;">
</div>
<div>
<a href="https://github.com/chenxilll/chrome-extension/#tabsoff-chrome-extension" target="_blank">View on Github</a>
</div>
<div>
<a href="https://brian-program.github.io/TabsOFF-Landing-Page/" target="_blank">Landing Page</a>
</div>
</div>
<!-- Project 4 -->
<div class="project">
<h4>Project 4: FlixFinder</h4>
<p><strong>Description:</strong> FlixFinder is a web app that allows users to discover new movies and streaming services. Users can create an account, login, and browse through a movie database to search for movies based on keywords or see what their friends are watching.</p>
<p><strong>Skills Used:</strong> HTML, CSS, React.JS <strong>||</strong> Express.JS & Node.JS <strong>||</strong> mySQL, AWS RDS, Python Data Cleaning, Relational Databases </p>
<div>
<img src="FlixFinder.png" alt="FlixFinder Image" style="width:50%; height:50%;">
</div>
<div>
<a href="https://github.com/Brian-program/platformer#flixfinder" target="_blank">View on Github</a>
</div>
<div>
<a href="https://www.youtube.com/watch?v=Xu9F1s1wrNs" target="_blank">Demo Video</a>
</div>
</div>
<!-- Project 5 -->
<div class="project">
<h4>Project 5: Mock Landing Page Autodeployment</h4>
<p><strong>Description:</strong> Pages that autodeploy upon files updates/uploaded on github repo.</p>
<p><strong>Skills Used:</strong> CI/CD, Github pages, Bootstrap, yaml </p>
<div>
<img src="GithubActions.png" alt="Github Actions Image" style="width:50%; height:50%;">
</div>
<a href="https://brian-program.github.io/hugo-mock-landing-page-autodeployed/" target="_blank">View on GitHub</a>
</div>
<!-- Project 6 -->
<div class="project">
<h4>Project 6: OS Final Project</h4>
<p><strong>Description:</strong> Developed File Allocation Table and Kernel System to manage system resources and multithreading processes.</p>
<p><strong>Skills Used:</strong> C, Assembly, OS, Shell, Docker </p>
<span style="color: #0091ff; cursor: default;">Cannot link due to Course restrictions</span>
</div>
</div>
</div>
<!-- TODO: -->
<script src="script.js"></script>
</body>
</html>