john/coursera-ibm-java-developer-course
1
Fork 0
Code Issues 17 Pull Requests Actions Activity

Add Portfolio project

Browse Source
This commit is contained in:
John Ahlroos
2025-10-25 19:09:18 +02:00
parent 50e97e8a51
commit bd757d5ceb
30 changed files with 560 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

186
Portfolio/index.html Normal file
View File

@@ -0,0 +1,186 @@
<!DOCTYPE html>
<html>
<head>
<title>John Ahlroos - Portfolio</title>
<link rel="stylesheet" href="./style.css"/>
<script src="./script.js"></script>
</head>
<body>
<!-- Navigation Bar -->
<nav>
<div id="home">
<div class="profile_name">
<span>John Ahlroos</span>
<div class="contact_info">
<img src="html_finalprojimages/envelope.png" alt="https://icons8.com/icon/124377/circled-envelope"/>
john@nomail.com
</div>
<div style="clear:both;"></div>
<div class="contact_info">
<img src="html_finalprojimages/phone.png" alt="https://icons8.com/icon/124377/circled-envelope"/>
+13456764598
</div>
</div>
<div class="topdiv">
<a class="topmenu topmenu:hover" href="#about-me">About Me</a>
<a class="topmenu topmenu:hover" href="#skills">Skills</a>
<a class="topmenu topmenu:hover" href="#projects">Projects</a>
<a class="topmenu topmenu:hover" href="#recommendations">Recommendations</a>
</div>
</div>
</nav>
<!-- About Me -->
<section id="about-me" class="container">
<div>
<img src="html_finalprojimages/profile.webp" class="profile_image"/>
</div>
<div>
<h1>
Hi, I'm John Ahlroos! <img src="html_finalprojimages/waving-hand.png" width="60px"/>
</h1>
<p>
I am a full stack developer with 20 years of experience in both Back-End and Web development.
I haver worked on numerous different software stacks ranging from the most basic websites to large
cloud deployments with 100+ microservices.
My favourite development stack is Java Spring Boot combined with HTMX as the front-end.
</p>
</div>
</section>
<!-- Skills -->
<section id="skills">
<h2>Skills</h2>
<div style="clear:both;"></div>
<div class="all_skills">
<div class="skill">
<img src="html_finalprojimages/html5.png"/>
<h6>HTML</h6>
<p>15 years experience</p>
</div>
<div class="skill">
<img src="html_finalprojimages/js.jpeg"/>
<h6>JavaScript</h6>
<p>15 years experience</p>
</div>
<div class="skill">
<img src="html_finalprojimages/java.png"/>
<h6>Java</h6>
<p>15 years experience</p>
</div>
<div class="skill">
<img src="html_finalprojimages/react.png"/>
<h6>React</h6>
<p>2 years experience</p>
</div>
<div class="skill">
<img src="html_finalprojimages/node.png"/>
<h6>Node</h6>
<p>1 years experience</p>
</div>
</div>
</section>
<!-- Projects -->
<section class="projects" id="projects">
<h2>
Projects
</h2>
<div style="clear:both;"></div>
<div id="projects-container" class="projects-container">
<div class="project-card">
<h3>Software development blog</h3>
<ul>
<li>A blog providing the latest news in web development</li>
</ul>
</div>
<hr>
<div class="project-card">
<h3>Step Counter</h3>
<ul>
<li>A step counter which measures steps taken on the Moon. Only works in Zero-gravity.</li>
</ul>
</div>
<hr>
<div class="project-card">
<h3>Family secret recipes book</h3>
<ul>
<li>The secret recipes only known to my family - until now!</li>
</ul>
</div>
</div>
</section>
<div style="clear:both;"></div>
<!-- Recommendations -->
<section id="recommendations">
<h2>Recommendations</h2>
<div style="clear:both;"></div>
<div class="all_recommendations" id="all_recommendations">
<div class="recommendation">
<span>&#8220;</span>
I've been fortunate to get to know John well over the past
5 years, both personally and professionally. It's obvious to me that he has the key attributes necessary
to land a dream project. He could be a change-maker just
through her insurmountable spirit alone but the fact that he has the intelligence to match makes him a
formidable force and one to watch for the future.
<span>&#8221;</span>
</div>
<div class="recommendation">
<span>&#8220;</span>
I cannot recommend John more highly - he's an extremely capable and talented Web Developer,
not to mention an A+ human. From the moment he joined BigTech over 5 years ago, John stood out
for his work ethic, attitude, and intelligence. He was a stand-out IC and then a talented and respected leader,
and any company would be lucky to have him. I'd work with him again in a heartbeat.
<span>&#8221;</span>
</div>
<div class="recommendation">
<span>&#8220;</span>
John was an invaluable asset to the team and one of the highest performing consultants I worked with
during my tenure at Resume Worded. He independently managed multiple work streams where he demonstrated
strong project management skills, deep research and analytical capabilities and scenario-driven strategic
thinking. I know he will go on to lead and achieve great things in his career.
<span>&#8221;</span>
</div>
</div>
</section>
<!-- Recommendation Form -->
<section id="contact">
<div class="flex_center">
<fieldset>
<legend class="introduction">Leave a Recommendation</legend>
<input type="text" placeholder="Name (Optional)"> <br/>
<textarea id="new_recommendation" cols="500" rows="10" placeholder="Message"></textarea>
<div class="flex_center">
<button id="recommend_btn" onclick="addRecommendation()">Submit</button>
</div>
</fieldset>
</div>
</section>
<div class="iconbutton">
<a href="#home">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="white" width="63px">
<path stroke-linecap="round" stroke-linejoin="round" d="M15 11.25l-3-3m0 0l-3 3m3-3v7.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</a>
</div>
<div class="popup" id="popup" class="flex_center">
<img src="html_finalprojimages/checkmark--outline.svg"/>
<h3>Thanks for leaving a recommendation bro!</h3>
<button onclick="showPopup(false)">Ok</button>
</div>
</body>
</html>