diff --git a/ColorPalette.png b/ColorPalette.png index 8b5245b..4693676 100644 Binary files a/ColorPalette.png and b/ColorPalette.png differ diff --git a/Images/experience/briefcase.svg b/Images/experience/briefcase.svg new file mode 100644 index 0000000..76897e8 --- /dev/null +++ b/Images/experience/briefcase.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/Images/experience/cmu-scotty-head-scarf.svg b/Images/experience/cmu-scotty-head-scarf.svg new file mode 100644 index 0000000..d0883fe --- /dev/null +++ b/Images/experience/cmu-scotty-head-scarf.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Images/experience/file.svg b/Images/experience/file.svg new file mode 100644 index 0000000..3cafc8c --- /dev/null +++ b/Images/experience/file.svg @@ -0,0 +1,75 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/Images/experience/flask.svg b/Images/experience/flask.svg new file mode 100644 index 0000000..8d978b5 --- /dev/null +++ b/Images/experience/flask.svg @@ -0,0 +1,33 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/Images/experience/github.svg b/Images/experience/github.svg new file mode 100644 index 0000000..84e4d2f --- /dev/null +++ b/Images/experience/github.svg @@ -0,0 +1,19 @@ + + + + + github [#142] + Created with Sketch. + + + + + + + + + + + + + \ No newline at end of file diff --git a/Images/experience/site.svg b/Images/experience/site.svg new file mode 100644 index 0000000..ad1e934 --- /dev/null +++ b/Images/experience/site.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/css/experience.css b/css/experience.css new file mode 100644 index 0000000..9f3294e --- /dev/null +++ b/css/experience.css @@ -0,0 +1,201 @@ +@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@100;200;300;400;500;600;700;800;900&display=swap"); + +*, +*:before, +*:after { + box-sizing: border-box; +} + + +#experience { + scroll-behavior: smooth; +} + +/* Some basic CSS overrides */ +.experience { + line-height: 1.5; + min-height: 100vh; + font-family: "Outfit", sans-serif; + padding-bottom: 20vh; +} + +.experience:hover .section_header h1 { + color: var(--orange-light); +} + +.experience button, +.experience input, +.experience select, +.experience textarea { + font: inherit; +} + +.experience .section_header h1 { + color: var(--navy-blue); +} + +.experience a { + color: inherit; +} + +.experience img { + display: block; + max-width: 100%; +} + +/* End basic CSS override */ + +.experience .timeline { + width: 85%; + max-width: 70vw; + margin-left: auto; + margin-right: auto; + display: flex; + flex-direction: column; + padding: 32px 0 32px 32px; + border-left: 4px solid var(--navy-blue); + font-size: 1.125rem; +} + + +.experience .timeline-item { + display: flex; + gap: 24px; + width: 100%; +} + +.experience .timeline-item+* { + margin-top: 24px; +} + +.experience .timeline-item+.extra-space { + margin-top: 48px; +} + +.experience .timeline-item:hover .card { + border-color: var(--orange); + box-shadow: 0 4px 4px 0 var(--orange-light); + color: var(--orange-light); +} + +.experience .timeline-item:hover .card .button { + border-color: var(--orange-light); + color: var(--orange-light); +} + +.experience .timeline-item:hover .card .button .hover-orange { + filter: invert(88%) sepia(94%) saturate(1799%) hue-rotate(305deg) brightness(101%) contrast(101%); +} + +.experience .timeline-item:hover .icon { + filter: invert(55%) sepia(73%) saturate(1298%) hue-rotate(339deg) brightness(101%) contrast(102%); +} + +.experience .timeline-item-icon { + display: flex; + align-items: center; + justify-content: center; + width: 40px; + height: 40px; + border-radius: 50%; + margin-left: -52px; + flex-shrink: 0; + overflow: hidden; + background-color: var(--background); + box-shadow: 0 0 0 8px var(--background); +} + +.experience .timeline-item-icon img { + width: 35px; + height: 35px; + filter: invert(54%) sepia(17%) saturate(958%) hue-rotate(160deg) brightness(90%) contrast(91%); + /* https://isotropic.co/tool/hex-color-to-css-filter/ */ +} + +.experience .card { + margin-top: -24px; + margin-bottom: 36px; + color: var(--navy-blue-light); + border: 3px solid var(--navy-blue); + box-shadow: 0 4px 4px 0 var(--navy-blue-light); + border-radius: 6px; + padding: 16px; + font-weight: 600; + width: 100%; +} + +.experience .card h1 { + padding: 0; + margin: 0; + + font-weight: 900; + font-size: 2rem; + font-family: "Source Code Pro", monospace; + font-optical-sizing: auto; + font-style: normal; +} + +.experience .card h2 { + padding: 0; + margin: 0; + + font-weight: 700; + font-size: 1.25rem; + font-family: "Source Code Pro", monospace; + font-optical-sizing: auto; + font-style: italic; +} + +.experience .card p { + margin-top: 4px; + color: var(--offwhite); +} + +.experience a { + color: var(--background); +} + +.experience .button { + border: 0; + padding: 0; + display: inline-flex; + vertical-align: middle; + margin-right: 4px; + align-items: center; + justify-content: center; + height: max-content; + padding: 4px 12px; + + border: 5px solid var(--offwhite); + border-radius: 15px; + background-color: var(--background); + color: var(--offwhite); + flex-shrink: 0; + cursor: pointer; + + font-weight: 400; + font-size: 1.25rem; + font-family: "Source Code Pro", monospace; + font-optical-sizing: auto; +} + +.experience .button img { + width: 1.5rem; + height: 1.5rem; + margin: 0px 16px 0px 8px; + filter: invert(100%) sepia(1%) saturate(4960%) hue-rotate(173deg) brightness(89%) contrast(101%); +} + +.experience .button:hover { + border-color: var(--orange) !important; + color: var(--orange) !important; + font-weight: 700; +} + +.experience .button:hover .hover-orange { + filter: invert(55%) sepia(73%) saturate(1298%) hue-rotate(339deg) brightness(101%) contrast(102%) !important; +} + +.experience .button:hover .icon { + filter: invert(55%) sepia(73%) saturate(1298%) hue-rotate(339deg) brightness(101%) contrast(102%); +} \ No newline at end of file diff --git a/css/style.css b/css/nav_home.css similarity index 83% rename from css/style.css rename to css/nav_home.css index 43517e9..63e5f5a 100644 --- a/css/style.css +++ b/css/nav_home.css @@ -1,7 +1,7 @@ body { margin: 0; padding: 0; - background-color: #32373B; + background-color: var(--background); } @@ -14,7 +14,7 @@ nav { display: flex; height: 8vh; width: 100%; - background-color: rgba(215, 232, 186, 0.3); + background-color: rgba(215, 232, 186, 0.4); align-items: center; font-weight: bold; } @@ -39,7 +39,7 @@ nav .nav-links a { display: inline-block; font-size: 3vh; text-decoration: none; - color: #fff; + color: var(--offwhite); padding: 20px 5px; position: relative; margin-left: 20px; @@ -50,7 +50,7 @@ nav .nav-links a::before { display: block; width: 100%; height: 3px; - background-color: #fff; + background-color: var(--offwhite); position: absolute; bottom: 20px; left: 0; @@ -69,7 +69,7 @@ nav .nav-links a:hover::before { nav .nav-links a:last-child { padding: 0.5vh; border-radius: 1.5vh; - color: #FFB560; + color: var(--orange); } nav .nav-links a:last-child::before { @@ -77,7 +77,7 @@ nav .nav-links a:last-child::before { display: block; width: 100%; height: 3px; - background-color: #ffc98c; + background-color: var(--orange-light); position: absolute; bottom: 0.5vh; left: 0; @@ -87,7 +87,7 @@ nav .nav-links a:last-child::before { nav .nav-links a:last-child:hover { text-decoration: none; - color: #ffc98c; + color: var(--orange-light); } nav .nav-links a:last-child:hover::before { @@ -99,7 +99,7 @@ nav .nav-links a:last-child:hover::before { /* Styling for the welcome text and image */ .welcome-section { text-align: center; - padding: 6vh 0vh; + padding: 6vh 0vh 0vh 0vh; width: 100%; height: max-content; } @@ -122,7 +122,7 @@ nav .nav-links a:last-child:hover::before { vertical-align: middle; max-width: max-content; margin: 0 auto; - color: #fff; + color: var(--offwhite); } .text-wrapper h1 { margin-top: 0; @@ -162,7 +162,8 @@ nav .nav-links a:last-child:hover::before { bottom: 0; left: 0; right: 0; - background-color: #32373B; + background-color: var(--background); + height: 2.25rem; } .typing-container .text_cursor{ @@ -172,7 +173,7 @@ nav .nav-links a:last-child:hover::before { left: 0; right: 0; background-color: transparent; - border-left: 3px solid #ff7f2d; + border-left: 3px solid var(--orange); } .welcome-section .nav-links { @@ -186,25 +187,33 @@ nav .nav-links a:last-child:hover::before { .welcome-section .nav-links a { display: inline-block; text-decoration: none; - color: #fff; + color: var(--offwhite); padding: 32px 5px; position: relative; - margin-left: 16px; } .text-wrapper img { height: 48px; + width: 48px; + margin: 8px 12px; +} +.text-wrapper img:hover { + height: 56px; + width: 56px; + margin: 0px 8px; } #particles-js { width: 100%; + height: 84vh; } #particles-js .container { position: absolute; left: 0; right: 0; - padding: 13vh; + padding: 13vh 13vh 0vh 13vh; + height: 82vh; margin-left: auto; margin-right: auto; width: max-content; diff --git a/css/utlities.css b/css/utlities.css index 5cba223..084bbfd 100644 --- a/css/utlities.css +++ b/css/utlities.css @@ -1,3 +1,7 @@ +html{ + scroll-behavior: smooth; +} + h1 { font-family: 'Righteous', cursive; } @@ -9,7 +13,8 @@ h3 { font-style: normal; } -p, a{ +p, +a { font-family: "Source Code Pro", monospace; font-optical-sizing: auto; font-weight: 500; @@ -17,5 +22,71 @@ p, a{ } #orange { - color: #fe7f2d; + color: var(--orange); +} + +:root { + --c-grey-100: #f4f6f8; + --c-grey-200: #e3e3e3; + --c-grey-300: #b2b2b2; + --c-grey-400: #7b7b7b; + --c-grey-500: #3d3d3d; + + --c-blue-500: #688afd; + + --navy-blue-light: #81b3d3; + --navy-blue: #5889a8; + + --background: #32373b; + --offwhite: #DEE1E3; + /*filter: invert(100%) sepia(1%) saturate(4960%) hue-rotate(173deg) brightness(89%) contrast(101%); */ + + --orange-light: #ff9e44; + /*filter: invert(60%) sepia(64%) saturate(494%) hue-rotate(342deg) brightness(102%) contrast(101%);*/ + --orange: #ff7f2d; + /* filter: invert(55%) sepia(73%) saturate(1298%) hue-rotate(339deg) brightness(101%) contrast(102%); */ +} + +::-webkit-scrollbar { + position: fixed; + width: 16px; +} + +::-webkit-scrollbar-track { + background-color: transparent; +} + +::-webkit-scrollbar-thumb { + background-color: #d6dee1; +} + +::-webkit-scrollbar-thumb { + background-color: #d6dee1; + border-radius: 20px; +} + +::-webkit-scrollbar-thumb { + background-color: #d6dee1; + border-radius: 20px; + border: 6px solid transparent; + background-clip: content-box; +} + +::-webkit-scrollbar-thumb:hover { + background-color: #a8bbbf; +} + +.section_header h1 { + font-size: 4rem; + font-weight: 900; + font-style: normal; + text-decoration: underline; + + position: relative; + left: 15vw; + margin: 0px; + margin-top: -2srem; + margin-bottom: 3rem; + width: max-content; + } \ No newline at end of file diff --git a/files/MBR_SIM_FINAL.pdf b/files/MBR_SIM_FINAL.pdf new file mode 100644 index 0000000..98e9ab8 Binary files /dev/null and b/files/MBR_SIM_FINAL.pdf differ diff --git a/index.html b/index.html index 6c403b1..12df935 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,8 @@ - + + @@ -17,9 +18,12 @@ Mehul Goel's logo + +
@@ -38,16 +42,125 @@

Mehul Goel

- + +
+
+

PROFESSIONAL EXPERIENCE

+
+
    +
  1. + + + +
    +

    Carnegie Mellon University, Pittsburgh, PA

    +

    TEACHING ASSISTANT FOR 15-122 (IMPERATIVE COMPUTATION)

    +

    ☑ Leading interactive labs for ~60 students, totalling 120 minutes, teaching fundamentals of coding, C, and datastructures.
    + ☑ Orchestrate office hours for personalized student support, focusing on largely theoretical discussions about C, alongside debugging sessions.
    + ☑ Working with professors to develop new material and problem sets to effectively challenge students in a collaborative and engaging format that enhances learning. +

    + + + +
    +
  2. +
  3. + + + +
    +

    Biorobotics Lab CMU, Pittsburgh, PA

    +

    COMPUTER VISION RESEARCH INTERN FOR CMU & APPLE

    +

    ☑ Developed Computer Vision implementation based off ResNet to segment internals of 36 different iPhone models
    + ☑ Implemented SORT algorithim for sementing parts on a convery belt moving at 5 m/s at real-time (> 60 FPS) with 96% IOU accuracy
    + ☑ Used YOLO V8 Image Classifcation to train a top-down model to detect screws from 3 differnt angles on 720p cameras on 36 models of iPhones, 12 models of iPads, and 4 models of Apple Watches. Led the creation of a demonstration video that was presented to Apple and leads of 100+ member lab.

    +
    +
  4. +
  5. + + + +
    +

    Robo Club - CMU, Pittsburgh, PA

    +

    ROBOBUGGY SOFTWARE LEAD & CLUB SYS ADMIN

    +

    + ☑ Led a team of 10 in building out autonomous vehicle driving and passing, including position communication, implementing a Model Predictive Controller, and racing at 30 mph.
    + ☑ Innovating a LiDAR + Stereo Camera setup for perception of surrounding vehicles for autonomous zero aid passing.
    + ☑ Assisted in development of a new website to improve traffic, potential member interest, and promotion for sponsors.
    + ☑ Control security of 3 remote workstations, a variety of 3D printers that can be accessed by the 100+ members of the club. +

    + + + + + + +
    +
  6. +
  7. + + + +
    +

    D-Matrix, Santa Clara, CA

    +

    ML Performance Modeling Chip Architect Intern

    +

    ☑ Developed performance modeling software to assist in chip development with 97% accurate benchmarks on a variety of ML workloads (BERT, ResNet50, etc.).
    + ☑ Improved prior softwares hardware resource utilization by over 46% with a novel weighted round-robin load management solution.
    + ☑ Created a memory modeling software that modeled memory packets throughout the chip, and the variety of paths to identify bottlenecks in current designs. +

    + + + +
    +
  8. +
  9. + + + +
    +

    MBR Sim, Washington DC

    +

    CO-AUTHOR OF PAPER PRESENTED AT AAAI (2023, DC)

    +

    ☑ Published and presented this paper to over 30 audience members, passing a rigourous approval period with 2 seperate peer-revision trials.
    + ☑ Built universal modeling software for variety of different silicons to test against 10+ ML Workloads, compatible with CPUs, GPUs, and even TPUs.
    + ☑ Modeled memory and performance accuracy of Google TPU and other hardware within 5% of lab-tested measurements. +

    + + + + + + +
    +
  10. +
+