Skip to content

Commit

Permalink
adjust navigation
Browse files Browse the repository at this point in the history
  • Loading branch information
@TrixDiaz
TrixDiaz committed Jan 18, 2024
1 parent 78b8126 commit 7c303bc
Show file tree
Hide file tree
Showing 3 changed files with 109 additions and 138 deletions.
78 changes: 54 additions & 24 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,17 +23,16 @@ <h2><strong>TRIX</strong></h2>
<li><a href="#about">About</a></li>
<li><a href="#project">Projects</a></li>
<li><a href="#contact">Contact</a></li>
<div class="mode" id="mode"><i class="bi bi-brightness-high" id="icon"></i></div>
</ul>
</div>
<div class="menu">
<i class="bi bi-brightness-high" id="menu-icon"></i>
<i class="bi bi-list-nested" id="toggle-menu"></i>
<i class="bi bi-brightness-high mode" id="icon"></i>
<i class="bi bi-list-nested " id="toggle-menu"></i>
</div>
</div>
<div class="toggle-menu" id="toggle-nav">
<ul>
<li><a href="#home" class="active">Home</a></li>
<li><a href="#home" class="active">Homes</a></li>
<li><a href="#about">About</a></li>
<li><a href="#project">Projects</a></li>
<li><a href="#contact">Contact</a></li>
Expand All @@ -48,7 +47,8 @@ <h2><strong>TRIX</strong></h2>
<div class="item-1 message">
<div class="intro">
<h1>Hi! I'm Trix <span id="typing-text"></span>👋</h1>
<p>I'm John Carlien Trix Darlucio 👆 | BUILD and maintain your own PATH for your GOALS in Life.🌎 </p>
<p>I'm John Carlien Trix Darlucio 👆 | BUILD and maintain your own PATH for your GOALS
in Life.🌎 </p>
</div>
<div class="social">
<a href="https://www.linkedin.com/in/john-carlien-trix-darlucio-6ab991245/"><i
Expand Down Expand Up @@ -86,9 +86,10 @@ <h4>Tech Stack</h4>
<h5>about</h5>
<h4>A Web and Mobile Developer located in Manila, Philippines.</h4>
<p>As a Laravel expert, I am skilled in crafting scalable and secure back-end solutions.
Leveraging Laravel's powerful features, I develop APIs, implement authentication systems,
and handle complex data operations with ease. I am adept at designing and building databases,
ensuring optimal performance and data integrity.
Leveraging Laravel's powerful features, I develop APIs, implement authentication systems,
and handle complex data operations with ease. I am adept at designing and building
databases,
ensuring optimal performance and data integrity.
</p>
</div>
</div>
Expand All @@ -108,11 +109,11 @@ <h4>Each project is a unique piece of development 🧩</h4>
<div class="title">Dynamic Baranggay System with Roles and Permission</div>
<div class="description">
<p>The Dynamic Barangay System with Roles and Permission Security is a modern
and efficient software platform designed to streamline the governance and
administrative processes within a barangay, the smallest administrative division
in the Philippines. This innovative system harnesses the power of technology to
enhance transparency, accountability, and collaboration among barangay officials
and residents.</p>
and efficient software platform designed to streamline the governance and
administrative processes within a barangay, the smallest administrative division
in the Philippines. This innovative system harnesses the power of technology to
enhance transparency, accountability, and collaboration among barangay officials
and residents.</p>
</div>
<div class="language">
<h5>Laravel</h5>
Expand All @@ -131,12 +132,12 @@ <h5>Code</h5>
<div class="item-2">
<div class="title">Dental Clinic Reservation with Email Notification</div>
<div class="description">
<p>The Dental Clinic Reservation System with Doctor's Approval and Email
<p>The Dental Clinic Reservation System with Doctor's Approval and Email
Notification is an advanced and user-friendly software designed to streamline
the appointment booking process for patients while ensuring seamless communication
between patients and dental practitioners. This cutting-edge system aims to enhance
the efficiency and effectiveness of dental clinic operations, providing a hassle-free
experience for both patients and clinic staff.</p>
the appointment booking process for patients while ensuring seamless communication
between patients and dental practitioners. This cutting-edge system aims to enhance
the efficiency and effectiveness of dental clinic operations, providing a hassle-free
experience for both patients and clinic staff.</p>
</div>
<div class="language">
<h5>Laravel</h5>
Expand All @@ -155,13 +156,19 @@ <h5>Code</h5>
<div class="grid-container-2 project">
<div class="item-1"><img src="assets/images/school.PNG" alt="Baranggay"></div>
<div class="item-2">
<div class="title">Dynamic School Management System with Integrated Grading and Learning Management System (LMS)</div>
<div class="title">Dynamic School Management System with Integrated Grading and Learning
Management System (LMS)</div>
<div class="description">
<p>The Dynamic School Management System with Integrated Grading and Learning Management System
(LMS) is a comprehensive and innovative software solution designed to revolutionize the way
educational institutions manage their administrative tasks, grading processes, and course delivery.
This all-in-one platform aims to enhance the efficiency, collaboration, and effectiveness of school
operations while providing a seamless learning experience for students and educators alike.</p>
<p>The Dynamic School Management System with Integrated Grading and Learning Management
System
(LMS) is a comprehensive and innovative software solution designed to revolutionize the
way
educational institutions manage their administrative tasks, grading processes, and
course delivery.
This all-in-one platform aims to enhance the efficiency, collaboration, and
effectiveness of school
operations while providing a seamless learning experience for students and educators
alike.</p>
</div>
<div class="language">
<h5>Laravel</h5>
Expand All @@ -175,6 +182,29 @@ <h5>Code</h5>
</div>
</div>
</div>

<!-- <div class="grid-container-2 project">
<div class="item-2">
<div class="title">Baranggay</div>
<div class="description">
<p>A car rental website is an online platform that allows users to rent cars for personal or
business use. The website provides an interface for searching, comparing, and reserving
cars.</p>
</div>
<div class="language">
<h5>Laravel</h5>
<h5>Tailwind</h5>
</div>
<div class="link">
<a href="https://github.com/TrixDiaz/Baranggay_Complain">
<h5>Code</h5>
<i class="bi bi-github"></i>
</a>
</div>
</div>
<div class="item-1"><img src="assets/images/parking.PNG" alt="Baranggay"></div>
</div> -->

</div>
</section>

Expand Down
4 changes: 0 additions & 4 deletions script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,10 +31,6 @@ const toggleNav = () => {
const icon = document.getElementById("icon");
icon.addEventListener("click", mode);

// Add a click event listener to the menu icon element
const menuIcon = document.getElementById("menu-icon");
menuIcon.addEventListener("click", mode);

// Add a click event listener to the toggle menu element
const toggleMenu = document.getElementById("toggle-menu");
toggleMenu.addEventListener("click", toggleNav);
Expand Down
165 changes: 55 additions & 110 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,11 +64,6 @@ img {
.container-fluid {
max-width: 100%;
}
.grid-container-2 > div,
.grid-container-3 > div,
.grid-container-4 > div {
/* background-color: var(--orange-color); */
}

.grid-container {
display: grid;
Expand All @@ -94,26 +89,23 @@ img {
gap: 1.25rem;
}

/*---------------------*\
#Buttons
\*----------------------*/

/*---------------------*\
#Header
\*----------------------*/
.header {
display: flex;
justify-content: space-between;
align-items: center;
height: 1rem;
height: 4rem; /* Increase the height to provide more space */
background-color: var(--dim-black-color);
position: fixed;
width: 100%;
z-index: 10;
transition: 2s ease;
padding-block: 1.5rem;
padding: 1rem;
transition: ease 2s;
animation: slideFromTop 1s ease-in;
}

/* Define the keyframes for the animation */
@keyframes slideFromTop {
0% {
Expand All @@ -125,52 +117,60 @@ img {
opacity: 1;
}
}

.logo,
.menu,
.links {
margin-inline: 1rem;
cursor: pointer;
display: flex;
align-items: center;
margin-inline: 1em;
}

.mode i {
font-size: 1.5rem;
}

.header .links ul {
display: flex;
justify-content: center;
align-items: center;
margin-left: auto; /* Move the links to the right */
}

.header .links ul li {
margin-right: 1rem; /* Adjust the margin between links */
}

.header .links ul li a {
margin-inline: 1rem;
font-size: 1.25rem;
font-weight: 600;
margin-inline: 1rem;
color: var(--white-color);
}

.header .links ul li a:hover {
color: var(--blue-color);
}
.header .links button {
background-color: transparent;
padding: 0.5rem;
border-radius: 0.25rem;
cursor: pointer;
border: 1px solid var(--white-color);
font-weight: 600;
font-size: 1rem;
color: var(--white-color);
transition: 2s ease;
}
.header .links button:hover {
color: var(--dark-black-color);
background-color: var(--white-color);
}

.header .menu {
display: none;
display: flex;
align-items: center;
}

header .toggle-menu {
display: none;
}

/* Adjust the icon styles */
.header i {
font-size: 1.5rem;
margin-right: 1rem; /* Add margin to the right of the icon */
}

.toggle-menu.open ul {
transform: translateX(0);
}

/*---------------------*\
#Body
\*----------------------*/
Expand Down Expand Up @@ -590,7 +590,14 @@ body.light-mode .footer .item-2 i:hover {
/*---------------------*\
#Header
\*----------------------*/

.header .links {
display: none;
}
.header .menu {
display: block;
font-size: 1.5rem;
}

header .toggle-menu {
display: none;
background-color: rgba(255, 255, 255, 0.2);
Expand Down Expand Up @@ -712,90 +719,28 @@ body.light-mode .footer .item-2 i:hover {
#End for 1024 Media Queries
\*----------------------*/

/* Mobile phones and smaller screens */
@media (max-width: 768px) {

/* ... Your existing CSS for smaller screens ... */

/*---------------------*\
#Header
\*----------------------*/
.header .links {
/* Add this media query at the end of your CSS file */
@media (min-width: 1025px) {
.menu i:nth-child(2) {
display: none;
}


.header .menu {
display: block;
font-size: 1.5rem;
}
}

/* Mobile phones and smaller screens */
@media (max-width: 768px) {
/*---------------------*\
#Header
\*----------------------*/
header .toggle-menu {
display: none;
background-color: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(1rem);
position: relative;
text-align: center;
top: 5rem;
right: 2rem;
width: 50%;
height: 100%;
padding-block: 1rem;
border-radius: 1rem;
transition: 0.5s ease;
}

header .toggle-menu.open {
display: block;
transition: 0.5s ease;
position: fixed;
z-index: 20;
top: 0;
left: 0;
width: 75%; /* Adjusted width to take up half of the screen */
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
}

header .toggle-menu ul {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
}

header .toggle-menu ul li {
padding-block: 1rem;
}

header .toggle-menu ul li a {
color: var(--white-color);
font-weight: 600;
cursor: pointer;
}

header .toggle-menu ul li button {
width: 100%;
background-color: transparent;
padding: 0.5rem;
border-radius: 0.25rem;
cursor: pointer;
border: 1px solid var(--white-color);
font-weight: 600;
font-size: 0.75rem;
color: var(--white-color);
}

header .toggle-menu .close-btn {
position: absolute;
top: 1rem;
right: 1rem;
cursor: pointer;
color: var(--white-color);
font-size: 1.5rem;
margin-inline: 1rem;
top: 2;
right: 0;
width: 47%;
}
header .toggle-menu {
padding-inline: 7rem;
}

/*---------------------*\
#Home
\*----------------------*/
Expand Down

0 comments on commit 7c303bc

Please sign in to comment.