-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
6fa9aff
commit 1dd7809
Showing
22 changed files
with
919 additions
and
2 deletions.
There are no files selected for viewing
This file was deleted.
Oops, something went wrong.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,378 @@ | ||
| <!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" /> | ||
| <title>My Portfolio</title> | ||
| <link rel="stylesheet" href="style.css" /> | ||
| <link rel="stylesheet" href="mediaqueries.css" /> | ||
| </head> | ||
| <body> | ||
| <nav id="desktop-nav"> | ||
| <div class="logo">Trang Vu</div> | ||
| <div> | ||
| <ul class="nav-links"> | ||
| <li><a href="#about">About</a></li> | ||
| <li><a href="#experience">Experience</a></li> | ||
| <li><a href="#projects">Projects</a></li> | ||
| <li><a href="#contact">Contact</a></li> | ||
| </ul> | ||
| </div> | ||
| </nav> | ||
| <nav id="hamburger-nav"> | ||
| <div class="logo">Trang Vu</div> | ||
| <div class="hamburger-menu"> | ||
| <div class="hamburger-icon" onclick="toggleMenu()"> | ||
| <span></span> | ||
| <span></span> | ||
| <span></span> | ||
| </div> | ||
| <div class="menu-links"> | ||
| <li><a href="#about" onclick="toggleMenu()">About</a></li> | ||
| <li><a href="#experience" onclick="toggleMenu()">Experience</a></li> | ||
| <li><a href="#projects" onclick="toggleMenu()">Projects</a></li> | ||
| <li><a href="#contact" onclick="toggleMenu()">Contact</a></li> | ||
| </div> | ||
| </div> | ||
| </nav> | ||
| <section id="profile"> | ||
| <div class="section__pic-container"> | ||
| <img src="./assets/Pic1.png" alt="Trang Vu profile picture" /> | ||
| </div> | ||
| <div class="section__text"> | ||
| <p class="section__text__p1">Hello, I'm</p> | ||
| <h1 class="title">Trang Vu</h1> | ||
| <p class="section__text__p2">Computer Science & Economic Student</p> | ||
| <div class="btn-container"> | ||
| <button | ||
| class="btn btn-color-2" | ||
| onclick="window.open('./assets/Trang-Resume.pdf')" | ||
| > | ||
| Download CV | ||
| </button> | ||
| <button class="btn btn-color-1" onclick="location.href='./#contact'"> | ||
| Contact Info | ||
| </button> | ||
| </div> | ||
| <div id="socials-container"> | ||
| <img | ||
| src="./assets/linkedin.png" | ||
| alt="My LinkedIn profile" | ||
| class="icon" | ||
| onclick="location.href='https://www.linkedin.com/in/trang-vu-4126b123b/'" | ||
| /> | ||
| <img | ||
| src="./assets/github.png" | ||
| alt="My Github profile" | ||
| class="icon" | ||
| onclick="location.href='https://github.com/Trangvu801'" | ||
| /> | ||
| </div> | ||
| </div> | ||
| </section> | ||
| <section id="about"> | ||
| <p class="section__text__p1">Get To Know More</p> | ||
| <h1 class="title">About Me</h1> | ||
| <div class="section-container"> | ||
| <div class="section__pic-container"> | ||
| <img | ||
| src="./assets/aboutme.png" | ||
| alt="Profile picture" | ||
| class="about-pic" | ||
| /> | ||
| </div> | ||
| <div class="about-details-container"> | ||
| <div class="about-containers"> | ||
| <div class="details-container"> | ||
| <img | ||
| src="./assets/experience.png" | ||
| alt="Experience icon" | ||
| class="icon" | ||
| /> | ||
| <h3>Experience</h3> | ||
| <p>1+ year <br />Project Coordinator</p> | ||
| </div> | ||
| <div class="details-container"> | ||
| <img | ||
| src="./assets/education.png" | ||
| alt="Education icon" | ||
| class="icon" | ||
| /> | ||
| <h3>Education</h3> | ||
| <p>B.Sc. Bachelors Degree in Computer Science and Economic<br /></p> | ||
| </div> | ||
| </div> | ||
| <div class="text-container"> | ||
| <p> | ||
| An active student majoring in Economics and Computer Science at Dickinson College. | ||
| I’m currently working on D-Pool (Dickinson College Carpool platform). | ||
| </p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <img | ||
| src="./assets/arrow.png" | ||
| alt="Arrow icon" | ||
| class="icon arrow" | ||
| onclick="location.href='./#experience'" | ||
| /> | ||
| </section> | ||
| <section id="experience"> | ||
| <p class="section__text__p1">Explore My</p> | ||
| <h1 class="title">Experience</h1> | ||
| <div class="experience-details-container"> | ||
| <div class="about-containers"> | ||
| <div class="details-container"> | ||
| <h2 class="experience-sub-title">Software Development</h2> | ||
| <div class="article-container"> | ||
| <article> | ||
| <img | ||
| src="./assets/checkmark.png" | ||
| alt="Experience icon" | ||
| class="icon" | ||
| /> | ||
| <div> | ||
| <h3>HTML</h3> | ||
| <p>Experienced</p> | ||
| </div> | ||
| </article> | ||
| <article> | ||
| <img | ||
| src="./assets/checkmark.png" | ||
| alt="Experience icon" | ||
| class="icon" | ||
| /> | ||
| <div> | ||
| <h3>CSS</h3> | ||
| <p>Experienced</p> | ||
| </div> | ||
| </article> | ||
| <article> | ||
| <img | ||
| src="./assets/checkmark.png" | ||
| alt="Experience icon" | ||
| class="icon" | ||
| /> | ||
| <div> | ||
| <h3>SASS</h3> | ||
| <p>Intermediate</p> | ||
| </div> | ||
| </article> | ||
| <article> | ||
| <img | ||
| src="./assets/checkmark.png" | ||
| alt="Experience icon" | ||
| class="icon" | ||
| /> | ||
| <div> | ||
| <h3>JavaScript</h3> | ||
| <p>Basic</p> | ||
| </div> | ||
| </article> | ||
| <article> | ||
| <img | ||
| src="./assets/checkmark.png" | ||
| alt="Experience icon" | ||
| class="icon" | ||
| /> | ||
| <div> | ||
| <h3>TypeScript</h3> | ||
| <p>Basic</p> | ||
| </div> | ||
| </article> | ||
| <article> | ||
| <img | ||
| src="./assets/checkmark.png" | ||
| alt="Experience icon" | ||
| class="icon" | ||
| /> | ||
| <div> | ||
| <h3>Material UI</h3> | ||
| <p>Intermediate</p> | ||
| </div> | ||
| </article> | ||
| </div> | ||
| </div> | ||
| <div class="details-container"> | ||
| <h2 class="experience-sub-title">Software Development</h2> | ||
| <div class="article-container"> | ||
| <article> | ||
| <img | ||
| src="./assets/checkmark.png" | ||
| alt="Experience icon" | ||
| class="icon" | ||
| /> | ||
| <div> | ||
| <h3>PostgreSQL</h3> | ||
| <p>Basic</p> | ||
| </div> | ||
| </article> | ||
| <article> | ||
| <img | ||
| src="./assets/checkmark.png" | ||
| alt="Experience icon" | ||
| class="icon" | ||
| /> | ||
| <div> | ||
| <h3>Node JS</h3> | ||
| <p>Intermediate</p> | ||
| </div> | ||
| </article> | ||
| <article> | ||
| <img | ||
| src="./assets/checkmark.png" | ||
| alt="Experience icon" | ||
| class="icon" | ||
| /> | ||
| <div> | ||
| <h3>Express JS</h3> | ||
| <p>Intermediate</p> | ||
| </div> | ||
| </article> | ||
| <article> | ||
| <img | ||
| src="./assets/checkmark.png" | ||
| alt="Experience icon" | ||
| class="icon" | ||
| /> | ||
| <div> | ||
| <h3>Git</h3> | ||
| <p>Intermediate</p> | ||
| </div> | ||
| </article> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <img | ||
| src="./assets/arrow.png" | ||
| alt="Arrow icon" | ||
| class="icon arrow" | ||
| onclick="location.href='./#projects'" | ||
| /> | ||
| </section> | ||
| <section id="projects"> | ||
| <p class="section__text__p1">Browse My Recent</p> | ||
| <h1 class="title">Projects</h1> | ||
| <div class="experience-details-container"> | ||
| <div class="about-containers"> | ||
| <div class="details-container color-container"> | ||
| <div class="article-container"> | ||
| <img | ||
| src="./assets/Proj1.png" | ||
| alt="Project 1" | ||
| class="project-img" | ||
| /> | ||
| </div> | ||
| <h2 class="experience-sub-title project-title">Customize Message</h2> | ||
| <div class="btn-container"> | ||
| <button | ||
| class="btn btn-color-2 project-btn" | ||
| onclick="location.href='https://github.com/Trangvu801/trangmess.github.io'" | ||
| > | ||
| Github | ||
| </button> | ||
| <button | ||
| class="btn btn-color-2 project-btn" | ||
| onclick="location.href='https://trangvu801.github.io/trangmess.github.io/'" | ||
| > | ||
| Live Demo | ||
| </button> | ||
| </div> | ||
| </div> | ||
| <div class="details-container color-container"> | ||
| <div class="article-container"> | ||
| <img | ||
| src="./assets/project-2.png" | ||
| alt="Project 2" | ||
| class="project-img" | ||
| /> | ||
| </div> | ||
| <h2 class="experience-sub-title project-title">D-Pool</h2> | ||
| <div class="btn-container"> | ||
| <button | ||
| class="btn btn-color-2 project-btn" | ||
| onclick="location.href='https://github.com/'" | ||
| > | ||
| Github | ||
| </button> | ||
| <button | ||
| class="btn btn-color-2 project-btn" | ||
| onclick="location.href='https://github.com/'" | ||
| > | ||
| Live Demo | ||
| </button> | ||
| </div> | ||
| </div> | ||
| <div class="details-container color-container"> | ||
| <div class="article-container"> | ||
| <img | ||
| src="./assets/project-3.png" | ||
| alt="Project 3" | ||
| class="project-img" | ||
| /> | ||
| </div> | ||
| <h2 class="experience-sub-title project-title">Project Three</h2> | ||
| <div class="btn-container"> | ||
| <button | ||
| class="btn btn-color-2 project-btn" | ||
| onclick="location.href='https://github.com/'" | ||
| > | ||
| Github | ||
| </button> | ||
| <button | ||
| class="btn btn-color-2 project-btn" | ||
| onclick="location.href='https://github.com/'" | ||
| > | ||
| Live Demo | ||
| </button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <img | ||
| src="./assets/arrow.png" | ||
| alt="Arrow icon" | ||
| class="icon arrow" | ||
| onclick="location.href='./#contact'" | ||
| /> | ||
| </section> | ||
| <section id="contact"> | ||
| <p class="section__text__p1">Get in Touch</p> | ||
| <h1 class="title">Contact Me</h1> | ||
| <div class="contact-info-upper-container"> | ||
| <div class="contact-info-container"> | ||
| <img | ||
| src="./assets/email.png" | ||
| alt="Email icon" | ||
| class="icon contact-icon email-icon" | ||
| /> | ||
| <p><a href="mailto:[email protected]">[email protected]</a></p> | ||
| </div> | ||
| <div class="contact-info-container"> | ||
| <img | ||
| src="./assets/linkedin.png" | ||
| alt="LinkedIn icon" | ||
| class="icon contact-icon" | ||
| /> | ||
| <p><a href="https://www.linkedin.com/in/trang-vu-4126b123b/">LinkedIn</a></p> | ||
| </div> | ||
| </div> | ||
| </section> | ||
| <footer> | ||
| <nav> | ||
| <div class="nav-links-container"> | ||
| <ul class="nav-links"> | ||
| <li><a href="#about">About</a></li> | ||
| <li><a href="#experience">Experience</a></li> | ||
| <li><a href="#projects">Projects</a></li> | ||
| <li><a href="#contact">Contact</a></li> | ||
| </ul> | ||
| </div> | ||
| </nav> | ||
| <p>Copyright © 2024 Trang Vu. All Rights Reserved.</p> | ||
| </footer> | ||
| <script src="script.js"></script> | ||
| </body> | ||
| </html> |
Oops, something went wrong.