Full-Stack-Portfolio/main.html at main · hsn200406/Full-Stack-Portfolio · 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
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Personal Website</title>
        <link rel="stylesheet" href="Styles\reset.css">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
        <!--My cutsom css-->
        <link rel="stylesheet" href="Styles\style.css">
    </head>

    <body class="text-bg-dark p-3">
        <header class="title-section">
            <div>
                <header class="border rounded p-4 text-center bg-daek">
                <h1 class="display-4 ">Welcome to My Portfolio!</h1>
                </header>
                <nav class="navbar navbar-expand">
                    <div class="container-fluid" style="background-color: #43472387;">
                        <!-- <a class="navbar-brand" href="#">Brand</a> -->
                        <ul class="navbar-nav">
                            <li class="nav-item">
                                <a class="nav-link active" aria-current="page" href="#">Home</a>
                            </li>
                            <!-- <li class="nav-item">
                                <a class="nav-link" href="#Projects">Projects</a>
                            </li> -->
                            <!-- Dropdown for Projects -->
                            <!-- Dropdown without arrow -->
                            <li class="nav-item dropdown">
                                <a class="nav-link" href="#Projects" id="projectsMenu">Projects</a>
                                <ul class="dropdown-menu" aria-labelledby="projectsMenu">
                                <li><a class="dropdown-item" href="Soft_Projects.html">Software Projects</a></li>
                                <li><a class="dropdown-item" href="Manu_Projects.html">Manufacturing Engineering Projects</a></li>
                                <!-- <li><a class="dropdown-item" href="#others">Other Projects</a></li> -->
                                </ul>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="About.html">About</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="Contact.html">Contact</a>
                            </li>
                        </ul>
                    </div>
                </nav>
            </div>
        </header>
        <main>
            <div class="container text-center custom-Intro-container">
                <h1>Introduction</h1>
                <div class="row align-items-stretch custom-intro-row">
                    <!-- Text column -->
                    <div class="col-sm-8 d-flex">
                    <p class="border rounded custom-intro-text flex-fill">
                        I am a 4th year Undergraduate Manufacturing Engineering student at the University of British Columbia.
                        I am very passionate about utilizing software development and Manufacturing Engineering skills to solve
                        the world’s most challenging problems. I have experience as an Engineering Services Intern and a Data Intern
                        at Seaspan ULC and I also volunteer as a Software Developer at 2 design teams: UBC MINT & UBC Sailbot.
                    </p>

                    </div>
                    <!-- Image column -->
                    <div class="col-sm-4 d-flex">
                    <img src="Images/IMG_3596.PNG" class="img-thumbnail intro-img flex-fill" alt="UBC Headshot Image">
                    </div>
                </div>
            </div>

            <div class="container text-center custom-Projects-container" id="Projects">
                <h1>Projects</h1>
                <div class="row gx-4">
                    <div class="col">
                    <a href="Soft_Projects.html" class="border rounded custom-link">
                        <h3>Software</h3>
                            <div id="carousel-Projects" class="carousel slide mb-2" data-bs-ride="carousel">
                                <div class="carousel-inner">
                                    <div class="carousel-item active">
                                    <img src="Images\MINT EEG HEadset.jpg" class="d-block w-100" alt="First slide">
                                    </div>
                                    <div class="carousel-item">
                                    <img src="Images\CellularSimulation.png" class="d-block w-100" alt="Second slide">
                                    </div>
                                    <div class="carousel-item">
                                    <img src="Images\Software Images\softwareteamphoto.webp
                                    " class="d-block w-100" alt="Third slide">
                                    </div>
                                </div>
                                <button class="carousel-control-prev pointer-events-auto" type="button" data-bs-target="#carouselExampleAutoplaying" data-bs-slide="prev">
                                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                    <span class="visually-hidden">Previous</span>
                                </button>
                                <button class="carousel-control-prev pointer-events-auto" type="button" data-bs-target="#carousel-Projects" data-bs-slide="prev">
                                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                    <span class="visually-hidden">Previous</span>
                                </button>

                                <button class="carousel-control-next pointer-events-auto" type="button" data-bs-target="#carousel-Projects" data-bs-slide="next">
                                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                    <span class="visually-hidden">Next</span>
                                </button>
                            </div>
                        <p>
                            Some pictures from my software projects
                        </p>
                    </a>
                    </div>
                    <div class="col">
                    <a href="Manu_Projects.html" class="border rounded custom-link">
                        <h3>Manufacturing Engineering</h3>
                        <!-- Autoplay carousel for Manufacturing Engineering -->
                        <div id="carouselManufacturing" class="carousel slide mb-2" data-bs-ride="carousel">
                            <div class="carousel-inner">
                                <div class="carousel-item active">
                                    <img src="Images\MANU RC Car.png" class="d-block w-100" alt="First slide">
                                </div>
                                <div class="carousel-item">
                                    <img src="Images\Robotics.jpeg" class="d-block w-100" alt="Second slide">
                                </div>
                                <div class="carousel-item">
                                    <img src="Images\Thermoforming.png" class="d-block w-100" alt="Second slide">
                                </div>
                            </div>
                            <!-- Arrows clickable -->
                            <button class="carousel-control-prev pointer-events-auto" type="button" data-bs-target="#carouselManufacturing" data-bs-slide="prev">
                                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                <span class="visually-hidden">Previous</span>
                            </button>
                            <button class="carousel-control-next pointer-events-auto" type="button" data-bs-target="#carouselManufacturing" data-bs-slide="next">
                                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                <span class="visually-hidden">Next</span>
                            </button>
                        </div>
                        <p>
                            Some pictures from my manufacturing projects
                        </p>
                    </a>
                    </div>
                </div>
            </div>
            <br>
            <hr>
        </main>
        <footer class="site-footer text-center text-white">
                <div class="container py-4">
                    <p>&copy; 2025 Hassan ElGhayaty. All rights reserved.</p>
                    <p>
                        <a href="main.html" class="text-white">Home</a> |
                        <a href="About.html" class="text-white">About</a> |
                        <a href="Contact.html" class="text-white">Contact</a>
                    </p>
                </div>
        </footer>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
    </body>
</html>