Skip to content

Commit dbc4ac7

Browse files
XavierCruz5106anthonydmays
XavierCruz5106
and
anthonydmays
authored
chore: adds html README for Xavier (code-differently#28)
* feat: Converted Lesson00 README.md to HTML * feat: organization, added README.md * feat: copied github README.md preview * feat: Added theme changer btn * removed readme * hotfix: reverted settings.json to original state --------- Co-authored-by: Anthony D. Mays <[email protected]>
1 parent 15f16b8 commit dbc4ac7

File tree

7 files changed

+270
-0
lines changed

7 files changed

+270
-0
lines changed

‎lesson_01/xaviercruz/icons/dark.png

7.44 KB
Loading

‎lesson_01/xaviercruz/icons/light.png

23.2 KB
Loading

‎lesson_01/xaviercruz/images/pic1_work.jpg

1.02 MB
Loading

‎lesson_01/xaviercruz/images/pic2_work.jpg

960 KB
Loading

‎lesson_01/xaviercruz/index.html

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link rel="stylesheet" href="styles/style.css">
7+
<title>Document</title>
8+
</head>
9+
<body>
10+
11+
<div class="header">
12+
<button id="theme-btn">
13+
<img id="theme-img" src="icons/dark.png" height="30">
14+
</button>
15+
</div>
16+
17+
18+
<div class="card">
19+
20+
21+
<div class="card-header">
22+
<h2>README.md</h2>
23+
</div>
24+
25+
<div class="card-body">
26+
<h1>Xavier Cruz README.md</h1>
27+
<hr>
28+
29+
<h2>Introduction</h2>
30+
<hr>
31+
<p>
32+
I started programming when I was fairly young.
33+
I was 12 when when I was playing CS:GO when I died to a hacker in game.
34+
I obviously got frustrated but besides being mad I found an interest.
35+
I wondered how did those cheats work. So I went online and downloaded a cheat and googled a youtube tutorial on how to decipher the source code of the cheat.
36+
From there I was entranced with programming.
37+
Since I've unlocked that passion I've managed to acquire 2 separate internships at JPMorgan Chase & Co. where I worked on a multitude of backend and frontend systems.
38+
</p>
39+
40+
<h2>Likes</h2>
41+
<hr>
42+
<p>
43+
I enjoy gaming from time to time, spending time with friends and, meeting new people.
44+
I love how different everyone is, not everyone has the same idea on one thing and that to me is very inspiring. Im a big believer in "you can learn new from everyone".
45+
This includes people that may not be in your field but they have some life experience or knowledge they are willing to share.
46+
</p>
47+
48+
<h2>Dislikes</h2>
49+
<hr>
50+
<p>
51+
Nothing much really I think im a fairly chill and understanding person when it comes to a lot of things.
52+
A pet peeve of mine would be being interrupted when im deep in thought.
53+
I don't hate it but its frustrating to continue where I left off with the same focus as before.
54+
</p>
55+
56+
<h2>Hobbies</h2>
57+
<hr>
58+
<p>
59+
This kind of ties in with my Likes but im very into
60+
</p>
61+
<ul>
62+
<li>Cars</li>
63+
<li>Gaming</li>
64+
<li>Programming</li>
65+
<li>Racing</li>
66+
</ul>
67+
68+
<p>
69+
I love working on my car and customizing it to be my personal thing. I think I picked that passion of making things mine from programming coincidentally.
70+
Im a big fan of the older Fast and Furious movies and that JDM-esque style.
71+
I used to love gaming when I was younger. Gaming got me into programming and cars. I used to absolutely love the Midnight Club series.
72+
Programming is a very big passion of mine for the simple fact that it allows for my creativity to be expressed in a way that I believe is on par with modern arts.
73+
Programming in it of itself is an art form.
74+
Lastly I love racing. I occasionally take my car to the track with my friends and we would just race.
75+
My car is bone stock except for some general maintenance things (upgraded axles, better starter, alternator, new battery).
76+
I currently have underglow installed on my car with no performance modifications so people will say my car is a "ricer".
77+
But I like the term ricer because it reminds me of those Fast and Furious cars with all those crazy LEDs everywhere. I own a 06 Acura TL.
78+
Since im stock I currently push about 285 HP @ 6200 rpm and 233 lb-ft @ 3500 rpm. I have the auto version which is a 6 speed auto transmission with a sequential mode.
79+
Im currently planning on upgrading some of my internals to have a bit more power.
80+
Some things im looking to do are
81+
</p>
82+
<ul>
83+
<li>Forged pistons</li>
84+
<li>Cold Air Intake</li>
85+
<li>Better Fuel Rail</li>
86+
<li>A standalone ECU</li>
87+
<li>Maybe a Turbo (not sure yet)</li>
88+
</ul>
89+
90+
<h2>Pictures</h2>
91+
<hr>
92+
93+
<img src="images/pic1_work.jpg" height=400 style="max-width: 100%;"/></a>
94+
<img src="images/pic2_work.jpg" height=400 style="max-width: 100%;" /></a>
95+
96+
</div>
97+
98+
</div>
99+
100+
101+
102+
</body>
103+
<script src="scripts/index.js"></script>
104+
</html>

‎lesson_01/xaviercruz/scripts/index.js

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
var themeBtn = document.getElementById("theme-btn");
2+
var themeImg = document.getElementById("theme-img");
3+
let theme = "dark";
4+
5+
// Grabbed from https://www.w3schools.com/css/css3_variables_javascript.asp
6+
var r = document.querySelector(":root");
7+
var rs = getComputedStyle(r);
8+
9+
console.log(r);
10+
console.log(rs);
11+
12+
themeBtn.addEventListener("click", (e) => {
13+
if (theme.includes("dark")) {
14+
r.style.setProperty(
15+
"--bg-color",
16+
rs.getPropertyValue("--light-mode-bg-color")
17+
);
18+
r.style.setProperty(
19+
"--line-sep-color",
20+
rs.getPropertyValue("--light-mode-line-sep-color")
21+
);
22+
r.style.setProperty(
23+
"--card-border",
24+
rs.getPropertyValue("--light-mode-card-border")
25+
);
26+
r.style.setProperty(
27+
"--theme-btn-color",
28+
rs.getPropertyValue("--light-mode-theme-btn-color")
29+
);
30+
r.style.setProperty(
31+
"--text-color",
32+
rs.getPropertyValue("--light-mode-text-color")
33+
);
34+
theme = "light";
35+
themeImg.setAttribute("src", "icons/" + theme + ".png");
36+
} else {
37+
r.style.setProperty(
38+
"--bg-color",
39+
rs.getPropertyValue("--dark-mode-bg-color")
40+
);
41+
r.style.setProperty(
42+
"--line-sep-color",
43+
rs.getPropertyValue("--dark-mode-line-sep-color")
44+
);
45+
r.style.setProperty(
46+
"--card-border",
47+
rs.getPropertyValue("--dark-mode-card-border")
48+
);
49+
r.style.setProperty(
50+
"--theme-btn-color",
51+
rs.getPropertyValue("--dark-mode-theme-btn-color")
52+
);
53+
r.style.setProperty(
54+
"--text-color",
55+
rs.getPropertyValue("--dark-mode-text-color")
56+
);
57+
theme = "dark";
58+
themeImg.setAttribute("src", "icons/" + theme + ".png");
59+
}
60+
});

‎lesson_01/xaviercruz/styles/style.css

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
* {
2+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans",
3+
Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
4+
line-height: 1.5;
5+
word-wrap: break-word;
6+
}
7+
8+
:root {
9+
--bg-color: #0d1117;
10+
--dark-mode-bg-color: #0d1117;
11+
--light-mode-bg-color: white;
12+
13+
--line-sep-color: rgba(61, 68, 77, 0.7);
14+
--dark-mode-line-sep-color: rgba(61, 68, 77, 0.7);
15+
--light-mode-line-sep-color: rgba(209, 217, 224, 0.7);
16+
17+
--card-border: rgb(61, 68, 77);
18+
--dark-mode-card-border: rgb(61, 68, 77);
19+
--light-mode-card-border: rgb(209, 217, 224);
20+
21+
--theme-btn-color: white;
22+
--dark-mode-theme-btn-color: white;
23+
--light-mode-theme-btn-color: #0d1117;
24+
25+
--text-color: rgb(240, 246, 252);
26+
--dark-mode-text-color: rgb(240, 246, 252);
27+
--light-mode-text-color: rgb(31, 35, 40);
28+
}
29+
30+
body {
31+
background-color: var(--bg-color);
32+
color: var(--text-color);
33+
}
34+
35+
/* Grabbed from stack overflow https://stackoverflow.com/questions/6382023/changing-the-color-of-an-hr-element*/
36+
hr {
37+
display: block;
38+
height: 1px;
39+
border: 0;
40+
border-top: 1px solid var(--line-sep-color);
41+
margin: 1em 0;
42+
padding: 0;
43+
}
44+
45+
.header {
46+
width: 96%;
47+
display: flex;
48+
justify-content: flex-end;
49+
margin: 20px;
50+
}
51+
52+
.header #theme-btn {
53+
border-radius: 8px;
54+
border: none;
55+
background-color: var(--theme-btn-color);
56+
}
57+
58+
.header #theme-btn:hover {
59+
cursor: pointer;
60+
}
61+
62+
.header #theme-img {
63+
margin-top: 4px;
64+
background-color: transparent;
65+
}
66+
67+
.card-header {
68+
padding: 8px 8px 8px 16px;
69+
border-bottom: var(--line-sep-color) 1px solid;
70+
background-color: transparent;
71+
}
72+
73+
.card-header h2 {
74+
font-size: 14px;
75+
}
76+
77+
.card {
78+
width: 95%;
79+
margin: auto;
80+
border-style: solid;
81+
border-width: 1px;
82+
border-color: var(--card-border);
83+
border-radius: 6px;
84+
}
85+
86+
.card-body {
87+
width: 70%;
88+
max-width: 90%;
89+
margin: auto;
90+
padding: 32px;
91+
background-color: transparent;
92+
}
93+
94+
.card-body h1,
95+
hr,
96+
h2 {
97+
margin: 0;
98+
}
99+
100+
.card-body h2 {
101+
margin-top: 24px;
102+
}
103+
104+
.card-body hr {
105+
margin-bottom: 16px;
106+
}

0 commit comments

Comments
 (0)