Skip to content

Hotfix/1.2.2 - Homepage updates to add more projects #10

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
AmbyrDevelops merged 8 commits into from
Jan 13, 2025
Merged

Hotfix/1.2.2 - Homepage updates to add more projects #10

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
a96b861
Merge branch 'release/1.2.0' into develop
AmbyrDevelops Sep 22, 2024
18f1833
Merge branch 'hotfix/1.2.1' into develop
AmbyrDevelops Sep 22, 2024
30313f1
version bump to 1.2.2
AmbyrDevelops Jan 12, 2025
c377606
add game and figma project video previews
AmbyrDevelops Jan 12, 2025
3c42c3c
refactor style elements and add new projects
AmbyrDevelops Jan 12, 2025
497cc1c
Merge branch 'hotfix/1.2.2' into develop
AmbyrDevelops Jan 12, 2025
3298424
Merge branch 'main' of https://github.com/AmbyrElan/AmbyrElan.github.…
AmbyrDevelops Jan 12, 2025
0d01efe
remove azure workflow
AmbyrDevelops Jan 12, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 0 additions & 58 deletions .github/workflows/azure-static-web-apps-black-wave-0ab103a0f.yml
View file
Open in desktop

This file was deleted.

2 changes: 1 addition & 1 deletion about/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ <h2>About</h2>
</p>

<p>
💻 Tech Enthusiast: With over 3 years of professional development experience, I specialize in both front-end and back-end development. I love diving into Data Structures and Algorithms (DSA), applying SOLID principles, and coding efficiently with Vim and WSL2. Currently, I’m expanding my knowledge in Docker and system design.
💻 Tech Enthusiast: With over 4 years of professional development experience, I specialize in both front-end and back-end development. I love diving into Data Structures and Algorithms (DSA), applying SOLID principles, and coding efficiently with Vim and WSL2. Currently, I’m expanding my knowledge in Docker and system design.
</p>

<p>
Expand Down
104 changes: 76 additions & 28 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@
<a class="nav-link" href="#skills-section">Skills</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#projects-section">Projects</a>
<a class="nav-link" href="#projects-section">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about/index.html">About</a>
Expand All @@ -61,7 +61,7 @@
<img src="img/Cartoon_Profile_Ambyr-Lantigua.png" alt="Cartoon photo of Ambyr" />
</div>
<h1>Ambyr Develops...</h1>
<p>...web, software, and game applications</p>
<p>...software and game applications</p>
</div>
</div>
</section>
Expand All @@ -75,10 +75,10 @@ <h1>Ambyr Develops...</h1>
<div class="mission-content">
<h2>Mission</h2>
<p>
To transform innovative ideas into impactful digital products. I thrive in agile,
To transform ideas into impactful digital products. I thrive in agile,
remote work environments that foster continuous learning and growth. With a passion
for full stack web development, game development, and software application development,
I’m always seeking opportunities to push the boundaries of technology and create seamless,
for full stack application development,
I’m seeking opportunities to create seamless,
user-friendly experiences.
</p>
</div>
Expand Down Expand Up @@ -158,58 +158,106 @@ <h2>Competencies</h2>
</section>

<section id="projects-section">
<h2 class="myrow contain">Portfolio</h2>
<h3 class="myrow contain">Web projects</h3>
<div class="myrow card-group contain">
<h2>Personal projects</h2>
<div class="card">
<video class="card-img-top" src="previews/preview-css-crawling-text.mp4"
alt="Preview of a self scrolling text feature" controls></video>
<video class="card-img-top" src="previews/preview-figma-parallax-project.mp4"
alt="Preview of upcoming figma design project" controls></video>
<div class="card-body">
<h5 class="card-title">CSS Crawling Text</h5>
<p class="card-text">Scrolling text feature utilizing transforms and transitions to
create the hover effect over the text box area using HTML and CSS.
<h5 class="card-title">Upcoming project: Design-to-code implementation</h5>
<p class="card-text">
Created an interactive Figma mock.
Development work will feature a responsive parallax scrolling design and images customized for the page using photoshop.
</p>
</div>
<div class="card-footer">
<small class="text-body-secondary"><a href="https://codepen.io/ambyrelan/pen/KKbRWxq">See this feature on codepen</a></small>
<small class="text-body-secondary">Live version coming soon.</small>
</div>
</div>
<div class="card">
<video src="previews/preview-popup-modal.mp4" class="card-img-top" alt="Preview of a popup modal feature" controls></video>
<video class="card-img-top" src="previews/preview-wsu-business-homepage.mp4"
alt="Preview of Wayne State University's Business homepage" controls></video>
<div class="card-body">
<h5 class="card-title">Question Dialogue Box</h5>
<p class="card-text">Clicking the button triggers a pop up modal with an embedded text box using HTML, CSS, and JavaScript. </p>
<h5 class="card-title">Website redesign and template integration</h5>
<p class="card-text">
Integrated a custom site design developed with TypeScript, Astro Pages, and CSS
with custom component development and CMS integration in PHP.

</p>
</div>
<div class="card-footer">
<small class="text-body-secondary"><a href="https://codepen.io/ambyrelan/pen/xxLyqyB" alt="Link to codepen page for dialogue box">See this feature on codepen</a></small>
<small class="text-body-secondary"><a href="https://ilitchbusiness.wayne.edu/" alt="Link to the technology homepage">View the business site.</a></small>
</div>
</div>
</div>

<div class="myrow card-group contain">
<h2>Recent work projects</h2>
<div class="card">
<video class="card-img-top" src="previews/preview-wsu-tech-homepage.mp4"
alt="Preview of Wayne State University's Tech homepage" controls></video>
<div class="card-body">
<h5 class="card-title">Computing & Information Technology Homepage</h5>
<p class="card-text">Template proramming to incorporate a new design for their homepage,
with custom gradients, and some floating container effects optimized for desktop and mobile.
<h5 class="card-title">Website redesign and codebase upgrade</h5>
<p class="card-text">
Developed custom site design with TailwindCSS, Blade template pages, and PHP including a major PHP version update to get the site on the latest version.
</p>
</div>
<div class="card-footer">
<small class="text-body-secondary"><a href="https://tech.wayne.edu" alt="Link to the technology homepage">Visit the C&IT homepage</a></small>
<small class="text-body-secondary"><a href="https://tech.wayne.edu" alt="Link to the technology homepage">View the tech site.</a></small>
</div>
</div>
<div class="card">
<video class="card-img-top" src="previews/preview-wsu-doso-homepage.mp4"
alt="Preview of Wayne State University's Dean of Students Office homepage" controls></video>
<div class="card-body">
<h5 class="card-title">Dean of Students Office Homepage</h5>
<p class="card-text">Template proramming to incorporate a new design for their homepage with a highlighted image grid.
<h5 class="card-title">Website redesign and codebase upgrade</h5>
<p class="card-text">
Programmed site redesign and custom policy numbering page for the student code of conduct ensuring accessibility standards are met along with a major PHP version upgrade.
</p>
</div>
<div class="card-footer">
<small class="text-body-secondary"><a href="https://doso.wayne.edu" alt="Link to the technology homepage">View the Dean's site.</a></small>
</div>
</div>
</div>

<h3 class="myrow contain">Game projects</h3>
<div class="myrow card-group contain">
<div class="card">
<video class="card-img-top" src="previews/preview-unity-blaster-project.mp4"
alt="Preview of Unity Game Enginer project" controls></video>
<div class="card-body">
<h5 class="card-title">2D space shooter game</h5>
<p class="card-text">
Developed a 2D space shooter PC game in Unity using scriptable objects, custom background, and animations.
</p>
</div>
<div class="card-footer">
<small class="text-body-secondary">Built with Unity Game Engine.</small>
</div>
</div>
<div class="card">
<video class="card-img-top" src="previews/preview-unity-fireworks-project.mp4"
alt="Preview of Unity Game Engine project." controls></video>
<div class="card-body">
<h5 class="card-title">Fireworks display scene</h5>
<p class="card-text">
Developed an animation using lighting to mimic fireworks and their explosive sound.
</p>
</div>
<div class="card-footer">
<small class="text-body-secondary">Built with Unity Game Engine</small>
</div>
</div>
<div class="card">
<video class="card-img-top" src="previews/preview-unity-runner-project.mp4"
alt="Preview of Unity Game Engine project." controls></video>
<div class="card-body">
<h5 class="card-title">3D endless runner game</h5>
<p class="card-text">
Developd a 3D game using scriptable objects to create a character that can phase through objects and
receives boosters or debuffs based on which obstacle they collide with.
</p>
</div>
<div class="card-footer">
<small class="text-body-secondary"><a href="https://doso.wayne.edu" alt="Link to the technology homepage">Visit the DOSO homepage</a></small>
<small class="text-body-secondary">Built with Unity Game Engine</small>
</div>
</div>
</div>
Expand All @@ -232,7 +280,7 @@ <h5 class="card-title">Dean of Students Office Homepage</h5>

<footer class="footer">
<i class="bi bi-c-circle"></i>
<span>Ambyr Develops. All rights reserved.</span>
<span>2025 Ambyr Develops™ All rights reserved.</span>
</footer>
</body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "ambyrelan.github.io",
"version": "1.2.1",
"version": "1.2.2",
"description": "",
"main": "index.js",
"scripts": {
Expand Down
Binary file added previews/preview-figma-parallax-project.mp4
View file
Open in desktop
Binary file not shown.
Binary file added previews/preview-unity-blaster-project.mp4
View file
Open in desktop
Binary file not shown.
Binary file added previews/preview-unity-fireworks-project.mp4
View file
Open in desktop
Binary file not shown.
Binary file added previews/preview-unity-runner-project.mp4
View file
Open in desktop
Binary file not shown.
Binary file added previews/preview-wsu-business-homepage.mp4
View file
Open in desktop
Binary file not shown.
45 changes: 39 additions & 6 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ body {
font-weight: 900;
}

h2 {
h2, h3 {
margin-top: 2rem;
margin-bottom: 2rem;
letter-spacing: 2px;
Expand Down Expand Up @@ -225,28 +225,61 @@ section {
}
}

#projects-section {
margin-bottom: 4rem;
}

.card-group {
column-gap: 1rem;
column-gap: 2rem;
justify-content: center;

h2 {
display: block;
width: 100%;
}
}

.card {
box-shadow: 4px 4px 10px gray;
--bs-card-border-color: none;
.card-group > .card {
flex: 1 0 33%;
margin-bottom: 18px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
box-shadow: 10px 0 10px gray;
--bs-card-border-color: gray;

@media only screen and (min-width: 768px) {
max-width: 50%;
max-width: 33%;
}
}

.card-group > .card:not(:last-child) {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}

.card-body {
background-color: #EADDCA; /* almond */
}

.card-img-top {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.card-group > .card:not(:first-child) {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}

.card-group > .card:not(:first-child) .card-img-top {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}

.card-group > .card:not(:last-child) .card-img-top {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}

.card-footer {
background-color: #967969; /* light brown */

Expand Down