Added Files

Nic-Pham · Dec 15, 2023 · dd182e8 · dd182e8
commit dd182e8
Show file tree

Hide file tree

Showing 19 changed files with 321 additions and 0 deletions.
diff --git a/PhamNicholasResume.pdf b/PhamNicholasResume.pdf
diff --git a/css.css b/css.css
@@ -0,0 +1,130 @@
+a, a:visited {
+    color: #f5f5f5;
+}
+
+a:hover {
+    color: magenta;
+    text-decoration: none;
+}
+
+body {
+    background-color: #050505;
+}
+
+p {
+    margin-bottom: 0px;
+}
+
+/* Nav Bar Section */
+#navigationbar {
+    background-color: #050505;
+    color: #f5f5f5;
+    font-family: "Ramabhadra", sans-serif;
+}
+
+.navMargin {
+    padding-top: 100px;
+    margin-left: 23%;
+    margin-right: 23%;
+}
+
+/* About Section */
+#about {
+    background-color: #050505;
+    color: #f5f5f5;
+    font-family: "Ramabhadra", sans-serif;
+}
+
+.aboutName {
+    padding-top: 20px;
+    margin-left: 23.8%;
+    font-size: 20px;
+}
+
+.aboutSubtitle {
+    color: #c0c0c0;
+    margin-left: 23.8%;
+    font-size: 16px;
+}
+
+.aboutDescription {
+    margin-left: 23.5%;
+    font-size: 50px;
+    font-family: "Quicksand", sans-serif;
+}
+
+/* Projects Section */
+#projects {
+    background-color: #050505;
+    color: #f5f5f5;
+    font-family: "Ramabhadra", sans-serif;
+    padding-top: 50px;
+}
+
+.worksText {
+    color: #f5f5f5;
+}
+
+.worksCard {
+    background-color: #050505;
+}
+
+.centerImage {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+/* Modal Override */
+.push-to-middle {
+    top: 40% !important;
+}
+
+.dark-background-body {
+    background-color: #333333 !important;
+    color: #f5f5f5;
+}
+
+.dark-background-footer {
+    background-color: #333333 !important;
+    font-weight: bold;
+}
+
+
+
+/* Portfolio Project Specific */
+
+/*Title*/
+#title {
+    margin-left: 15%;
+    margin-right: 15%;
+    background-color: #050505;
+    color: #f5f5f5;
+    font-family: "Ramabhadra", sans-serif;
+    padding-top: 50px;
+}
+
+.center-title {
+    text-align: center;
+    font-size: 50px;
+}
+
+.subtitle {
+    color: #999999;
+}
+
+#body {
+    color: #f5f5f5;
+    margin-left:25%;
+    margin-right:25%;
+}
+
+.headers {
+    margin-bottom: 3%;
+    font-weight: bold;
+}
+
+.bodycopy {
+    margin-bottom: 3%;
+    line-height: 40px;
+}
diff --git a/images/NP_Logo.png b/images/NP_Logo.png
diff --git a/images/elportallogo.png b/images/elportallogo.png
diff --git a/images/final1.png b/images/final1.png
diff --git a/images/final2.png b/images/final2.png
diff --git a/images/final3.png b/images/final3.png
diff --git a/images/final4.png b/images/final4.png
diff --git a/images/lofi1.png b/images/lofi1.png
diff --git a/images/lofi2.png b/images/lofi2.png
diff --git a/images/lofi3.png b/images/lofi3.png
diff --git a/images/northcountylogo.png b/images/northcountylogo.png
diff --git a/images/personas.png b/images/personas.png
diff --git a/images/sketches1.png b/images/sketches1.png
diff --git a/images/sketches2.png b/images/sketches2.png
diff --git a/images/zillowbanner.png b/images/zillowbanner.png
diff --git a/images/zillowlogo.png b/images/zillowlogo.png
diff --git a/index.html b/index.html
@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Nicholas Pham's Portfolio</title>
+
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
+    <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=Quicksand&family=Ramabhadra&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="css.css">
+</head>
+
+<body>
+    <!--Navigation Bar-->
+    <section id="navigationbar">
+        <nav class="navbar navbar-expand-lg navbar-dark navMargin">
+            <a class="navbar-brand" href="index.html">
+                <img src="images/NP_Logo.png" width="84" height="60" class="d-inline-block align-top" alt="Logo">
+            </a>
+            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="collapse navbar-collapse" id="navbarNav">
+                <ul class="navbar-nav ml-auto">
+                    <li class="nav-item">
+                        <a class="nav-link" href="PhamNicholasResume.pdf">Resume</a>
+                    </li>
+                    <!--<li class="nav-item">
+                        <a class="nav-link" href="#projects">Projects</a>
+                    </li>-->
+                </ul>
+            </div>
+        </nav>
+    </section>
+
+    <!--About Section-->
+    <section id="about">
+        <p class="aboutName">NICHOLAS PHAM</p>
+        <p class="aboutSubtitle">UX/Product Designer</p> <br>
+        <p class="aboutDescription">Hello, I'm Nic.</p>
+        <p class="aboutDescription">I'm a UX/Product Designer.</p>
+    </section>
+
+    <!--Projects-->
+    <section id="projects" class="container my-5">
+        <h2 class="text-center ">My Work</h2> <br>
+        <div class="row">
+            <div class="col-lg-6 col-md-12 mb-4">
+                <div class="card worksCard">
+                    <div class="card-body">
+                        <a href="project_zillow.html">
+                            <img src="images/zillowlogo.png" class="d-block centerImage" height="150">
+                            <h5 class="card-title">Zillow: Redesigning the Home Searching Experience</h5>
+                            <p class="card-text">UX/Product Design</p>
+                        </a>
+                    </div>
+                </div>
+            </div>
+
+            <div class="col-lg-6 col-md-12 mb-4">
+                <div class="card worksCard">
+                    <div class="card-body">
+                        <a href="#" data-toggle="modal" data-target="#exampleModal">
+                            <img src="images/elportallogo.png" class="d-block centerImage" height="150">
+                            <h5 class="card-title">El Portal: Building a Site for my Go-To Eatery</h5>
+                            <p class="card-text">Website Creation</p>
+                        </a>
+                    </div>
+                </div>
+            </div>            
+        </div>
+    </section>
+
+    <!-- Modal -->
+    <div class="modal fade push-to-middle" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
+        <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-body dark-background-body">
+            This project is still ongoing. Please check back later!
+            </div>
+            <div class="modal-footer dark-background-footer">
+            <a href="#" data-dismiss="modal" style="color:magenta;">Done</a>
+            </div>
+        </div>
+        </div>
+    </div>
+
+    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
+</body>
+</html>