01-prj-personal-site/index.html at main · tri0504/01-prj-personal-site · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Personal Site</title>
  <link rel="stylesheet" href="style.css">
  <!-- Font Awesome for icons -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
</head>
<body>
  <!-- Navigation Bar -->
  <nav>
    <div class="nav-container">
      <h1 class="logo">Tri Nguyen</h1>
      <ul class="nav-links">
        <li><a href="#hero">Home</a></li>
        <li><a href="#bio">About</a></li>
        <li><a href="#skills">Skills</a></li>
        <li><a href="#projects">Projects</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </div>
  </nav>

  <!-- Hero Section -->
  <section id="hero">
    <div class="hero-content">
      <h2 class="hero-title">Welcome to the Future</h2>
      <p class="hero-subtitle">Web Developer | Designer | Creator</p>
      <p class="hero-text">Building tomorrow's web experiences today</p>
      <a href="#projects" class="hero-button">View My Work</a>
    </div>
  </section>

  <!-- Bio Section -->
  <section id="bio">
    <div class="container">
      <h2 class="section-title">About Me</h2>
      <div class="bio-content">
        <div class="bio-image">
          <!-- Your profile photo -->
          <img src="img/CB164466-C4CB-49DC-8910-A890808B7404_1_105_c.jpeg" alt="Tri Nguyen profile photo">
        </div>
        <div class="bio-text">
          <p>Hello! I'm a web development student passionate about creating innovative digital experiences. I'm currently learning HTML, CSS, and JavaScript to bring my creative ideas to life.</p>
          <p>My goal is to combine cutting-edge technology with unique design principles to build websites that are both functional and stunning.</p>
          <p>When I'm not coding, you can find me enjoying reading comics, getting active, or aspiring to be a better version of myself.</p>
        </div>
      </div>
    </div>
  </section>

  <!-- Skills Section -->
  <section id="skills">
    <div class="container">
      <h2 class="section-title">My Skills</h2>
      <div class="skills-grid">
        <!-- Skill Card 1 -->
        <div class="skill-card">
          <div class="skill-icon"><i class="fab fa-html5"></i></div>
          <h3>HTML</h3>
          <p>Building semantic and accessible web structures</p>
        </div>
        <!-- Skill Card 2 -->
        <div class="skill-card">
          <div class="skill-icon"><i class="fab fa-css3-alt"></i></div>
          <h3>CSS</h3>
          <p>Styling beautiful and responsive layouts</p>
        </div>
        <!-- Skill Card 3 -->
        <div class="skill-card">
          <div class="skill-icon"><i class="fab fa-js"></i></div>
          <h3>JavaScript</h3>
          <p>Adding interactivity and dynamic features</p>
        </div>
        <!-- Skill Card 4 -->
        <div class="skill-card">
          <div class="skill-icon"><i class="fas fa-code"></i></div>
          <h3>C++</h3>
          <p>Building efficient and high-performance applications</p>
        </div>
      </div>
    </div>
  </section>

  <!-- Projects Section -->
  <section id="projects">
    <div class="container">
      <h2 class="section-title">My Projects</h2>
      <div class="projects-grid">
        <!-- Project Card 1 -->
        <div class="project-card">
          <div class="project-image">PLACEHOLDER PROJECT 1</div>
          <div class="project-info">
            <h3>StudyBuddy</h3>
            <p>StudyBuddy is a simple planner that helps students organize homework, track deadlines, and set daily goals. It features a clean layout, a weekly overview, and a task checklist built with basic HTML and CSS.</p>
            <a href="#" class="project-link">View Project →</a>
          </div>
        </div>
        <!-- Project Card 2 -->
        <div class="project-card">
          <div class="project-image">PLACEHOLDER PROJECT 2</div>
          <div class="project-info">
            <h3>FitTrack</h3>
            <p>FitTrack is a beginner-friendly fitness tracker that logs workouts, tracks minutes active, and celebrates weekly progress. The project focuses on clear typography, easy-to-read cards, and simple icon use.</p>
            <a href="#" class="project-link">View Project →</a>
          </div>
        </div>
        <!-- Project Card 3 -->
        <div class="project-card">
          <div class="project-image">PLACEHOLDER PROJECT 3</div>
          <div class="project-info">
            <h3>RecipeVault</h3>
            <p>RecipeVault is a digital recipe box that organizes favorite meals by category and prep time. Users can browse quick dinners, save notes, and view ingredients in a clean, mobile-friendly layout.</p>
            <a href="#" class="project-link">View Project →</a>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Contact Section -->
  <section id="contact">
    <div class="container">
      <h2 class="section-title">Get In Touch</h2>
      <p class="contact-text">Interested in working together? Let's connect!</p>
      <div class="contact-links">
        <a href="mailto:bonnynguyen0504@gmail.com" class="contact-button" target="_blank" rel="noopener noreferrer">Email Me</a>
        <a href="https://www.linkedin.com/in/tri-nguyen-73b676386/" class="contact-button" target="_blank" rel="noopener noreferrer">LinkedIn</a>
        <a href="#" class="contact-button" target="_blank" rel="noopener noreferrer">GitHub</a>
      </div>
    </div>
  </section>

  <!-- Footer -->
  <footer>
    <p>&copy; 2026 Tri Nguyen. Built with passion for the future.</p>
  </footer>
</body>
</html>