186 lines
6.7 KiB
HTML
186 lines
6.7 KiB
HTML
<!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>“</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>”</span>
|
|
</div>
|
|
<div class="recommendation">
|
|
<span>“</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>”</span>
|
|
</div>
|
|
<div class="recommendation">
|
|
<span>“</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>”</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> |