Skip to content

Commit

Permalink
reorganized page structure
Browse files Browse the repository at this point in the history
  • Loading branch information
@JuanSierra99
JuanSierra99 committed Dec 26, 2023
1 parent 520a860 commit fa28948
Show file tree
Hide file tree
Showing 2 changed files with 130 additions and 112 deletions.
68 changes: 10 additions & 58 deletions dist/output.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -584,8 +584,8 @@ video {
z-index: 10;
}

.tw-m-5 {
margin: 1.25rem;
.tw-mb-5 {
margin-bottom: 1.25rem;
}

.tw-mb-auto {
Expand All @@ -608,6 +608,10 @@ video {
margin-top: 0.5rem;
}

.tw-mt-5 {
margin-top: 1.25rem;
}

.tw-mt-auto {
margin-top: auto;
}
Expand All @@ -624,19 +628,15 @@ video {
height: 25%;
}

.tw-h-full {
height: 100%;
}

.tw-h-screen {
height: 100vh;
}

.tw-h-fit {
height: -moz-fit-content;
height: fit-content;
}

.tw-h-full {
height: 100%;
}

.tw-min-h-screen {
min-height: 100vh;
}
Expand Down Expand Up @@ -694,14 +694,6 @@ video {
flex-direction: column;
}

.tw-items-center {
align-items: center;
}

.tw-justify-center {
justify-content: center;
}

.tw-space-y-reverse > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 1;
}
Expand Down Expand Up @@ -738,10 +730,6 @@ video {
overflow-y: hidden;
}

.tw-border-t-8 {
border-top-width: 8px;
}

.tw-border-dashed {
border-style: dashed;
}
Expand All @@ -756,26 +744,11 @@ video {
background-color: rgb(0 0 0 / var(--tw-bg-opacity));
}

.tw-bg-gray-700 {
--tw-bg-opacity: 1;
background-color: rgb(55 65 81 / var(--tw-bg-opacity));
}

.tw-bg-gray-800 {
--tw-bg-opacity: 1;
background-color: rgb(31 41 55 / var(--tw-bg-opacity));
}

.tw-bg-gray-900 {
--tw-bg-opacity: 1;
background-color: rgb(17 24 39 / var(--tw-bg-opacity));
}

.tw-bg-red-100 {
--tw-bg-opacity: 1;
background-color: rgb(254 226 226 / var(--tw-bg-opacity));
}

.tw-bg-opacity-70 {
--tw-bg-opacity: 0.7;
}
Expand All @@ -797,14 +770,6 @@ video {
text-align: center;
}

.tw-align-middle {
vertical-align: middle;
}

.tw-align-bottom {
vertical-align: bottom;
}

.tw-text-2xl {
font-size: 1.5rem;
line-height: 2rem;
Expand All @@ -815,10 +780,6 @@ video {
line-height: 1.5rem;
}

.tw-font-bold {
font-weight: 700;
}

.tw-font-extrabold {
font-weight: 800;
}
Expand Down Expand Up @@ -915,10 +876,6 @@ video {
height: 100%;
}

.sm\:tw-w-2\/3 {
width: 66.666667%;
}

.sm\:tw-w-full {
width: 100%;
}
Expand Down Expand Up @@ -948,11 +905,6 @@ video {
line-height: 1.25rem;
}

.sm\:tw-text-xl {
font-size: 1.25rem;
line-height: 1.75rem;
}

.sm\:tw-text-xs {
font-size: 0.75rem;
line-height: 1rem;
Expand Down
174 changes: 120 additions & 54 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,32 +36,144 @@
role="button" aria-expanded="false">Projects</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="#scrollspyHeading3">Bucket Buddy</a>
<a class="dropdown-item" href="#scrollspyHeading1">Bucket Buddy</a>
</li>
<li>
<a class="dropdown-item" href="#scrollspyHeading4">Fourth</a>
<a class="dropdown-item" href="#scrollspyHeading2">Decibel Warrior</a>
</li>
<li>
<hr class="dropdown-divider" />
</li>
<li>
<a class="dropdown-item" href="#scrollspyHeading5">Fifth</a>
<a class="dropdown-item" href="#scrollspyHeading3">Film Website</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link tw-text-blue-300 tw-font-extrabold" href="#scrollspyHeading1">Education</a>
<a class="nav-link tw-text-blue-300 tw-font-extrabold" href="#scrollspyHeading4">Education</a>
</li>
<li class="nav-item">
<a class="nav-link tw-text-purple-400 tw-font-extrabold" href="#scrollspyHeading2">Me !</a>
<a class="nav-link tw-text-purple-400 tw-font-extrabold" href="#scrollspyHeading5">Me !</a>
</li>
</ul>
</nav>

<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-root-margin="0px 0px -40%"
data-bs-smooth-scroll="true" class="scrollspy-example rounded-2" tabindex="0"
style="padding-top: 60px; background-color: black">

<h4 id="scrollspyHeading1" class="tw-text-white tw-text-center tw-font-extrabold sm:tw-text-4xl tw-underline tw-mt-2">
Projects
</h4>
<div id="BucketBuddy">
<div class="card tw-block tw-ml-auto tw-mr-auto tw-mt-5 tw-mb-5" style="width: 18rem;">
<img src="/Static/bucket-buddy-login.jpeg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Bucket Buddy</h5>
<p class="card-text">Create and manage your bucket list on this easy to use website</p>
<a href="https://github.com/JuanSierra99/BucketBuddy" class="btn btn-primary">Github Repository</a>
</div>
</div>
<div class="progress tw-ml-auto tw-mr-auto" role="progressbar" aria-label="Default striped example" aria-valuenow="10" aria-valuemin="0"
aria-valuemax="100" style="margin-bottom: 10px; width:18rem">
<div class="progress-bar progress-bar-striped" style="width: 8%">
TS
</div>
</div>
<div class="progress tw-ml-auto tw-mr-auto " role="progressbar" aria-label="Success striped example" aria-valuenow="25" aria-valuemin="0"
aria-valuemax="100" style="margin-bottom: 10px; width:18rem">
<div class="progress-bar progress-bar-striped bg-success" style="width: 18.3%">
CSS
</div>
</div>
<div class="progress tw-ml-auto tw-mr-auto" role="progressbar" aria-label="Info striped example" aria-valuenow="50" aria-valuemin="0"
aria-valuemax="100" style="margin-bottom: 10px; width:18rem">
<div class="progress-bar progress-bar-striped bg-info" style="width: 50%">
React
</div>
</div>
<div class="progress tw-ml-auto tw-mr-auto" role="progressbar" aria-label="Warning striped example" aria-valuenow="75" aria-valuemin="0"
aria-valuemax="100" style="margin-bottom: 10px; width:18rem">
<div class="progress-bar progress-bar-striped bg-danger" style="width: 72%">
JavaScript
</div>
</div>
</div>

<h4 id="scrollspyHeading2"></h4>
<div id="decibel-warrior">
<div class="card tw-block tw-ml-auto tw-mr-auto tw-mt-5 tw-mb-5" style="width: 18rem;">
<img src="" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Decibel Warrior</h5>
<p class="card-text">lipsum...</p>
<a href="https://github.com/JuanSierra99/decibel_warrior" class="btn btn-primary">Github Repository</a>
</div>
</div>
<div class="progress tw-ml-auto tw-mr-auto" role="progressbar" aria-label="Default striped example" aria-valuenow="10" aria-valuemin="0"
aria-valuemax="100" style="margin-bottom: 10px; width:18rem">
<div class="progress-bar progress-bar-striped" style="width: 8%">
TS
</div>
</div>
<div class="progress tw-ml-auto tw-mr-auto " role="progressbar" aria-label="Success striped example" aria-valuenow="25" aria-valuemin="0"
aria-valuemax="100" style="margin-bottom: 10px; width:18rem">
<div class="progress-bar progress-bar-striped bg-success" style="width: 18.3%">
CSS
</div>
</div>
<div class="progress tw-ml-auto tw-mr-auto" role="progressbar" aria-label="Info striped example" aria-valuenow="50" aria-valuemin="0"
aria-valuemax="100" style="margin-bottom: 10px; width:18rem">
<div class="progress-bar progress-bar-striped bg-info" style="width: 50%">
React
</div>
</div>
<div class="progress tw-ml-auto tw-mr-auto" role="progressbar" aria-label="Warning striped example" aria-valuenow="75" aria-valuemin="0"
aria-valuemax="100" style="margin-bottom: 10px; width:18rem">
<div class="progress-bar progress-bar-striped bg-danger" style="width: 72%">
JavaScript
</div>
</div>
</div>

<h4 id="scrollspyHeading3"></h4>
<div id="film-website">
<div class="card tw-block tw-ml-auto tw-mr-auto tw-mt-5 tw-mb-5" style="width: 18rem;">
<img src="" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Film Website</h5>
<p class="card-text">lipsum...Dipsum</p>
<a href="https://github.com/JuanSierra99/Film-Site" class="btn btn-primary">Github Repository</a>
</div>
</div>
<div class="progress tw-ml-auto tw-mr-auto" role="progressbar" aria-label="Default striped example" aria-valuenow="10" aria-valuemin="0"
aria-valuemax="100" style="margin-bottom: 10px; width:18rem">
<div class="progress-bar progress-bar-striped" style="width: 8%">
TS
</div>
</div>
<div class="progress tw-ml-auto tw-mr-auto " role="progressbar" aria-label="Success striped example" aria-valuenow="25" aria-valuemin="0"
aria-valuemax="100" style="margin-bottom: 10px; width:18rem">
<div class="progress-bar progress-bar-striped bg-success" style="width: 18.3%">
CSS
</div>
</div>
<div class="progress tw-ml-auto tw-mr-auto" role="progressbar" aria-label="Info striped example" aria-valuenow="50" aria-valuemin="0"
aria-valuemax="100" style="margin-bottom: 10px; width:18rem">
<div class="progress-bar progress-bar-striped bg-info" style="width: 50%">
React
</div>
</div>
<div class="progress tw-ml-auto tw-mr-auto" role="progressbar" aria-label="Warning striped example" aria-valuenow="75" aria-valuemin="0"
aria-valuemax="100" style="margin-bottom: 10px; width:18rem">
<div class="progress-bar progress-bar-striped bg-danger" style="width: 72%">
JavaScript
</div>
</div>
</div>

<div id="education-container" class="tw-pt-4 tw-relative tw-min-h-screen tw-flex tw-flex-col">
<h4 id="scrollspyHeading1" class="sm:tw-text-4xl tw-text-center tw-text-blue-300 tw-font-extrabold tw-underline">
<h4 id="scrollspyHeading4" class="sm:tw-text-4xl tw-text-center tw-text-blue-300 tw-font-extrabold tw-underline">
Education
</h4>
<h id="im-a-titan" class="tw-text-white sm:tw-text-3xl tw-font-extrabold tw-text-center tw-block tw-pt-3">A PROUD
Expand All @@ -81,7 +193,7 @@ <h4 id="scrollspyHeading1" class="sm:tw-text-4xl tw-text-center tw-text-blue-300
</div>

<div class="tw-w-full tw-min-h-screen" id="about-me-section">
<h4 id="scrollspyHeading2"
<h4 id="scrollspyHeading5"
class="sm:tw-text-4xl tw-text-purple-400 tw-text-center tw-font-extrabold tw-underline">
About Me
</h4>
Expand Down Expand Up @@ -129,7 +241,7 @@ <h1 class="tw-text-inherit">Other Hobbies</h1>
</ul>
</div>
<div class="tw-relative tw-overflow-scroll tw-overflow-y-hidden tw-flex">
<h4 id="scrollspyHeading2" class="tw-text-orange-600 tw-text-2xl tw-mt-auto tw-mb-auto tw-font-extrabold">
<h4 class="tw-text-orange-600 tw-text-2xl tw-mt-auto tw-mb-auto tw-font-extrabold">
This is Bubba. The BIGGEST part of me.
</h4>
<img src="https://github.com/JuanSierra99/juansierra99.github.io/raw/main/Static/looking-at-angels Large.jpeg"
Expand All @@ -146,52 +258,6 @@ <h4 id="scrollspyHeading2" class="tw-text-orange-600 tw-text-2xl tw-mt-auto tw-m
alt="Image" /> -->
</div>
</div>

<h4 id="scrollspyHeading3" class="tw-text-white tw-text-center tw-font-extrabold sm:tw-text-4xl tw-underline tw-mt-2">
Projects
</h4>
<!-- Bucket Buddy Starts Here -->
<div id="BucketBuddy">
<h4 id="scrollspyHeading3" class="tw-text-white tw-text-center tw-font-extrabold sm: tw-text-2xl">
Now, Let me introduce you to...
</h4>
<h4 id="scrollspyHeading3" class="tw-text-white tw-text-center tw-font-extrabold sm:tw-text-2xl">
BUCKET BUDDY
</h4>
<img src="/Static/bucket-buddy-login.jpeg" class="tw-mr-auto tw-ml-auto tw-block sm:tw-w-2/3" />
<p class="tw-text-white tw-m-5 tw-font-bold sm:tw-text-xl tw-text-center">
A Bucket List Website
</p>
<div class="progress" role="progressbar" aria-label="Default striped example" aria-valuenow="10" aria-valuemin="0"
aria-valuemax="100" style="margin-bottom: 10px">
<div class="progress-bar progress-bar-striped" style="width: 8%">
TS
</div>
</div>
<div class="progress" role="progressbar" aria-label="Success striped example" aria-valuenow="25" aria-valuemin="0"
aria-valuemax="100" style="margin-bottom: 10px">
<div class="progress-bar progress-bar-striped bg-success" style="width: 18.3%">
18.3% CSS
</div>
</div>
<div class="progress" role="progressbar" aria-label="Info striped example" aria-valuenow="50" aria-valuemin="0"
aria-valuemax="100" style="margin-bottom: 10px">
<div class="progress-bar progress-bar-striped bg-info" style="width: 50%">
React
</div>
</div>
<div class="progress" role="progressbar" aria-label="Warning striped example" aria-valuenow="75" aria-valuemin="0"
aria-valuemax="100" style="margin-bottom: 10px">
<div class="progress-bar progress-bar-striped bg-danger" style="width: 72%">
72% JavaScript
</div>
</div>
</div>
<!-- Bucket Buddy Ends Here -->
<h4 id="scrollspyHeading4">Fourth heading</h4>
<p>...</p>
<h4 id="scrollspyHeading5">Fifth heading</h4>
<p>...</p>
<script src="./script.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
Expand Down

0 comments on commit fa28948

Please sign in to comment.