Skip to content

Commit

Permalink
add bootstrap header
Browse files Browse the repository at this point in the history
  • Loading branch information
@ttran293
ttran293 committed Aug 10, 2021
1 parent 066760b commit c459b6d
Show file tree
Hide file tree
Showing 14 changed files with 103 additions and 101 deletions.
Binary file removed css/images/bg.png
View file
Binary file not shown.
Binary file removed css/images/bg2.png
View file
Binary file not shown.
40 changes: 13 additions & 27 deletions css/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,25 +2,13 @@

/* --------------- Main Design ---------------*/

/* styling for Pen, unrelated to border-image */




/* div {
width: 40vw;
height: 40vh;
margin: 4em auto;
} */



body{
font-family: 'Lora', serif;
margin: 0;
color: #FFF47D;
/* background-image: url("images/bg2.png"); */
background-color: #1D1F1F;
color: #000000;
/* background-color: #1D1F1F; */
}

header{
Expand All @@ -40,11 +28,9 @@ h2{

/* --------------- Header Design ---------------*/

.header-Outer{
width: 90%;
position: fixed;
margin: 0 auto;
}




/* --------------- Introduction Homepage Design ---------------*/
.introduction{
Expand All @@ -57,15 +43,15 @@ h2{
}

.profile-picture{
display: block;
display: inline-block;
margin: 0 auto 0 auto;
max-width:100%;
height:auto;

}

.intro-text{
display: block;
display: inline-block;
margin: 0 auto;
}

Expand Down Expand Up @@ -121,8 +107,8 @@ h2{
width: 180px;
height: 180px;
/* object-fit: contain; */
border: 10px solid white;
border-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='50' height='50'><defs><linearGradient id='redgradient'><stop offset='0' stop-color='%23FFC14D'/><stop offset='0.362' stop-color='%23FF4834'/><stop offset='1' stop-color='%233B0300'/></linearGradient></defs><g id='Layer_1'><path d='M0,0 L50,0 L50,50 L0,50 L0,0 z' fill='url(%23redgradient)' width='100%' height='100%'/></g></svg>") 10% stretch;
/* border: 10px solid black; */

}

.role{
Expand Down Expand Up @@ -152,8 +138,8 @@ border-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/sv
width: 180px;
height: 180px;
/* object-fit: contain; */
border: 10px solid white;
border-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='50' height='50'><defs><linearGradient id='redgradient'><stop offset='0' stop-color='%23FFC14D'/><stop offset='0.362' stop-color='%23FF4834'/><stop offset='1' stop-color='%233B0300'/></linearGradient></defs><g id='Layer_1'><path d='M0,0 L50,0 L50,50 L0,50 L0,0 z' fill='url(%23redgradient)' width='100%' height='100%'/></g></svg>") 10% stretch;
/* border: 10px solid black; */

}


Expand All @@ -171,8 +157,8 @@ border-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/sv
width: 180px;
height: 180px;
/* object-fit: contain; */
border: 10px solid white;
border-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='50' height='50'><defs><linearGradient id='redgradient'><stop offset='0' stop-color='%23FFC14D'/><stop offset='0.362' stop-color='%23FF4834'/><stop offset='1' stop-color='%233B0300'/></linearGradient></defs><g id='Layer_1'><path d='M0,0 L50,0 L50,50 L0,50 L0,0 z' fill='url(%23redgradient)' width='100%' height='100%'/></g></svg>") 10% stretch;
/* border: 10px solid black; */
/* border-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='50' height='50'><defs><linearGradient id='redgradient'><stop offset='0' stop-color='%23FFC14D'/><stop offset='0.362' stop-color='%23FF4834'/><stop offset='1' stop-color='%233B0300'/></linearGradient></defs><g id='Layer_1'><path d='M0,0 L50,0 L50,50 L0,50 L0,0 z' fill='url(%23redgradient)' width='100%' height='100%'/></g></svg>") 10% stretch; */
}

/* --------------- Skills ---------------*/
Expand Down
Binary file removed images/bg.png
View file
Binary file not shown.
Binary file removed images/email.png
View file
Binary file not shown.
Binary file removed images/linkedin.png
View file
Binary file not shown.
Binary file removed images/mc-logo.jpg
View file
Binary file not shown.
Binary file removed images/mc-logo.png
View file
Binary file not shown.
Binary file removed images/mediacy-logo.png
View file
Binary file not shown.
Binary file removed images/phone-book.png
View file
Binary file not shown.
Binary file removed images/resume.png
View file
Binary file not shown.
Binary file removed images/setting.png
View file
Binary file not shown.
Binary file removed images/umbc-logo.jpg
View file
Binary file not shown.
164 changes: 90 additions & 74 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,115 +3,130 @@

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Thanh Nam Tran's Homepage</title>
<link rel="stylesheet" href="css/styles.css">
<link rel="icon" href="favicon.ico">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lora:400,700|Montserrat:300" rel="stylesheet">


<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">


</head>
<header>
<div class="header-outer">
<div class="header-content">

</div>
</div>

<header>
<nav class="navbar d-flex justify-content-center py-3 navbar-dark bg-dark">
<ul class="nav nav-pills">
<li class="nav-item"><a href="#" class="nav-link active" aria-current="page">Home</a></li>
<li class="nav-item"><a href="#" class="nav-link">About</a></li>
<li class="nav-item"><a href="#" class="nav-link">Resume</a></li>
<li class="nav-item"><a href="#" class="nav-link">Contact</a></li>
</ul>
</nav>
</header>

<body>

<div class="body-outer">


<div class="introduction">
<div class="intro-outer">

<img class="profile-picture" src="images/circle-cropped.png" alt="Profile Picture" style=width="180px" ; height="180px">
<!-- Xin chao -->
<div class="intro-text">
<h1 class="hello">_Hello World_</h1>
<h2 class="name">I'm Thanh Nam Tran</h2>
<h2 class="r">Software Engineer</h2>
</div>

<div class="introduction">
<div class="intro-outer">
<!-- Xin chao -->
<div class="intro-text">
<h1 class="hello">_Hello World_</h1>
<h2 class="name">I'm Thanh Nam Tran</h2>
<h2 class="r">Software Engineer</h2>
</div>
<img class="profile-picture" src="images/circle-cropped.png" alt="Profile Picture" style=width="180px" ; height="180px">
</div>
</div>


<h2 class="sep">Work & Education</h2>
<h2 class="sep">Work & Education</h2>

<div class="experience">
<div class="experience-outter">
<div class="intern-outer">
<img class="mediacy-logo" src="images/mediacy-logo.jpg" alt="Media Cybernetics Logo" style=width="180px" ; height="180px">
<div class="intern-description">
<h2 class="role">Media Cybernetics, Inc</h2>
<p class="desc">Engineering Intern <br>
May 2021 - Present
</p>
<div class="experience">
<div class="experience-outter">
<div class="intern-outer">
<img class="mediacy-logo" src="images/mediacy-logo.jpg" alt="Media Cybernetics Logo" style=width="180px" ; height="180px">
<div class="intern-description">
<h2 class="role">Media Cybernetics, Inc</h2>
<p class="desc">Engineering Intern <br>
May 2021 - Present
</p>
</div>
</div>
</div>

<div class="uni-outer">
<img class="UMBC-logo" src="images/umbc-logo.png" alt="UMBC Logo" style=width="180px" ; height="180px">
<div class="uni-description">
<h2 class="role">University of Maryland, Baltimore County</h2>
<p class="desc">B.S in Computer Science <br> August 2019 - Present
</p>
<div class="uni-outer">
<img class="UMBC-logo" src="images/umbc-logo.png" alt="UMBC Logo" style=width="180px" ; height="180px">
<div class="uni-description">
<h2 class="role">University of Maryland, Baltimore County</h2>
<p class="desc">B.S in Computer Science <br> August 2019 - Present
</p>
</div>
</div>
</div>

<div class="college-outer">
<img class="mc-logo" src="images/mc-logo.jpeg" alt="Montgomery College Logo" style=width="180px" ; height="180px">
<div class="college-description">
<h2 class="role">Montgomery College</h2>
<p class="desc">A.A in Computer Science <br> August 201 - May 2019
</p>
<div class="college-outer">
<img class="mc-logo" src="images/mc-logo.jpeg" alt="Montgomery College Logo" style=width="180px" ; height="180px">
<div class="college-description">
<h2 class="role">Montgomery College</h2>
<p class="desc">A.A in Computer Science <br> August 201 - May 2019
</p>
</div>
</div>
</div>

</div>
</div>
</div>


<div class="skills">
<div class="skill-header">
<h2 class="skill-h">Skills</h2>
<h2 class="proj-h">Projects</h2>
</div>
<div class="skills">
<div class="skill-header">
<h2 class="skill-h">Skills</h2>
<h2 class="proj-h">Projects</h2>
</div>


<div class="skill-outer">
<div class="subjects">
<p>Programming Language</p>
<p>Web & Database</p>
<p>Frameworks</p>
<p>Assembly Language</p>
<p>Agile Project Management Tool</p>
<p>Video Editing</p>
</div>
<div class="skill-outer">
<div class="subjects">
<p>Programming Language</p>
<p>Web & Database</p>
<p>Frameworks</p>
<p>Assembly Language</p>
<p>Agile Project Management Tool</p>
<p>Video Editing</p>
</div>

<div class="language">
<p>C++, C, C#, Python, Java</p>
<p>MySQL, HTML, CSS, JScript</p>
<p>Boostrap, NodeJS, ReactJS</p>
<p>X86-64 Assembly</p>
<p>Jira framework, Confluence Documentation, Zephyr Testing</p>
<p>Davinci Resolve, Adobe Premiere Pro</p>
</div>
<div class="language">
<p>C++, C, C#, Python, Java</p>
<p>MySQL, HTML, CSS, JScript</p>
<p>Boostrap, NodeJS, ReactJS</p>
<p>X86-64 Assembly</p>
<p>Jira framework, Confluence Documentation, Zephyr Testing</p>
<p>Davinci Resolve, Adobe Premiere Pro</p>
</div>

<div class="project">
<p>Adjacency Lists - github.com/ttran293/Adjacency-Lists</p>
<p>Skew Heap Priority Queue - github.com/ttran293/Skew-Heap-Priority-Queue</p>
<p>Pluto Realty Database Application - github.com/ttran293/pluto-realty-dbms</p>
<p>Tic Tac Toe in Assembly Language - github.com/ttran293/tictactoe-nasmx86-64</p>
<p>My Website - github.com/ttran293/my-website</p>
</div>
<div class="project">
<p>Adjacency Lists - github.com/ttran293/Adjacency-Lists</p>
<p>Skew Heap Priority Queue - github.com/ttran293/Skew-Heap-Priority-Queue</p>
<p>Pluto Realty Database Application - github.com/ttran293/pluto-realty-dbms</p>
<p>Tic Tac Toe in Assembly Language - github.com/ttran293/tictactoe-nasmx86-64</p>
<p>My Website - github.com/ttran293/my-website</p>
</div>

</div>
</div>
</div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>

</div>
</body>

<footer>
<div class="footer-outer">
<div class="copyright">
Expand All @@ -120,4 +135,5 @@ <h2 class="proj-h">Projects</h2>
</div>
</footer>


</html>

0 comments on commit c459b6d

Please sign in to comment.