<title>Elul Tekeste | Portfolio</title>
<link rel="stylesheet" href="style.css">
<!-- Navigation -->
<nav>
<h2 class="logo">ET.</h2>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#careers">Careers</a></li>
<li><a href="#travel">Travel</a></li>
</ul>
<button id="themeButton">🌙</button>
</nav>
<!-- Home -->
<section id="home" class="hero">
<div class="hero-content">
<p class="welcome">WELCOME TO MY PORTFOLIO</p>
<h1>
Hi, I'm <span>Elul Tekeste</span>
</h1>
<h2 id="typingText">Future Tech Professional</h2>
<p>
I'm originally from Eritrea and currently live in Maryland.
I'm building my skills in technology and exploring different
careers in the tech industry.
</p>
<div class="buttons">
<a
href="https://www.linkedin.com/in/elul-tekeste-049a64172"
target="_blank"
class="btn"
>
LinkedIn
</a>
<!-- Replace this with your real GitHub -->
<a
href="https://github.com/YOUR-USERNAME"
target="_blank"
class="btn outline"
>
GitHub
</a>
</div>
</div>
<div class="code-box">
<div class="code-top">
<span></span>
<span></span>
<span></span>
</div>
<pre>
const developer = {
name: "Elul Tekeste",
from: "Eritrea",
location: "Maryland",
interests: [
"Cybersecurity",
"IT Support",
"Project Management"
]
};
console.log(“Welcome!”);
</div>
</section>
<!-- About -->
<section id="about">
<p class="section-label">GET TO KNOW ME</p>
<h2>About Me</h2>
<div class="about-card">
<h3>👋 Who am I?</h3>
<p>
My name is Elul Tekeste. I'm from Eritrea and currently
live in Maryland. Technology interests me because it is
constantly changing and gives me opportunities to solve
problems and learn new skills.
</p>
<p>
I'm especially interested in cybersecurity, technical
support, networking, and project management.
</p>
</div>
</section>
<!-- CodeSquad Projects -->
<section id="projects">
<p class="section-label">MY WORK</p>
<h2>CodeSquad Mini Course</h2>
<p class="section-description">
Here are some assignments I completed during my CodeSquad
Mini Course.
</p>
<div class="project-grid">
<div class="project-card">
<img
src="images/assignment1.png"
alt="CodeSquad Assignment 1"
class="project-image"
>
<div class="project-info">
<p>HTML</p>
<h3>Assignment #1</h3>
<span>My first CodeSquad project.</span>
</div>
</div>
<div class="project-card">
<img
src="images/assignment2.png"
alt="CodeSquad Assignment 2"
class="project-image"
>
<div class="project-info">
<p>HTML + CSS</p>
<h3>Assignment #2</h3>
<span>Practicing webpage design with CSS.</span>
</div>
</div>
<div class="project-card">
<img
src="images/assignment3.png"
alt="CodeSquad Assignment 3"
class="project-image"
>
<div class="project-info">
<p>WEB DEVELOPMENT</p>
<h3>Assignment #3</h3>
<span>Building my front-end development skills.</span>
</div>
</div>
</div>
</section>
<!-- Careers -->
<section id="careers">
<p class="section-label">MY FUTURE</p>
<h2>Tech Careers I Want to Explore</h2>
<div class="career-grid">
<div class="career-card">
<div class="career-number">01</div>
<h3>🔐 Cybersecurity</h3>
<p>
Protecting computer systems, networks, and information
from cyber threats.
</p>
</div>
<div class="career-card">
<div class="career-number">02</div>
<h3>🖥️ IT Support</h3>
<p>
Troubleshooting computers, networks, software, and
helping users solve technical problems.
</p>
</div>
<div class="career-card">
<div class="career-number">03</div>
<h3>📊 Project Management</h3>
<p>
Helping technology teams organize projects, communicate,
and successfully reach their goals.
</p>
</div>
</div>
</section>
<!-- Travel -->
<section id="travel">
<div class="travel-content">
<p class="section-label">MY BUCKET LIST</p>
<h2>Jamaica 🇯🇲</h2>
<p>
One place I would love to travel to is Jamaica. I would
like to experience the beaches, food, culture, and outdoor
activities.
</p>
<div class="travel-tags">
<span>🌊 Jet Ski</span>
<span>🏝️ Beaches</span>
<span>🚙 ATV</span>
<span>🚤 Boat Ride</span>
</div>
</div>
</section>
<!-- Contact -->
<footer>
<h2>Let's Connect.</h2>
<p>
Thanks for checking out my portfolio.
</p>
<div class="footer-links">
<a
href="https://www.linkedin.com/in/elul-tekeste-049a64172"
target="_blank"
>
LinkedIn
</a>
<a
href="https://github.com/YOUR-USERNAME"
target="_blank"
>
GitHub
</a>
</div>
<p class="copyright">
© 2026 Elul Tekeste • Built with HTML, CSS & JavaScript
</p>
</footer>
<!-- Image Popup -->
<div id="imageModal">
<span id="closeModal">×</span>
<img id="modalImage" src="" alt="Project Preview">
</div>
<button id="topButton">↑</button>
<script src="script.js"></script>
/* Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: Arial, Helvetica, sans-serif;
background: #08111f;
color: white;
line-height: 1.6;
}
/* Navigation */
nav {
height: 75px;
padding: 0 8%;
display: flex;
align-items: center;
justify-content: space-between;
position: sticky;
top: 0;
background: rgba(8, 17, 31, 0.95);
border-bottom: 1px solid #1c3048;
z-index: 100;
}
.logo {
color: #44d7b6;
font-size: 30px;
}
nav ul {
display: flex;
gap: 30px;
list-style: none;
}
nav a {
color: #c7d4e3;
text-decoration: none;
transition: 0.3s;
}
nav a:hover {
color: #44d7b6;
}
#themeButton {
border: none;
background: #14253a;
padding: 10px 13px;
border-radius: 10px;
cursor: pointer;
}
/* Sections */
section {
padding: 100px 10%;
}
.section-label {
color: #44d7b6;
font-size: 13px;
letter-spacing: 3px;
font-weight: bold;
}
section h2 {
font-size: 40px;
margin: 10px 0 30px;
}
.section-description {
color: #a9b8c9;
margin-bottom: 40px;
}
/* Hero */
.hero {
min-height: 90vh;
display: flex;
justify-content: space-between;
align-items: center;
gap: 70px;
}
.hero-content {
max-width: 650px;
}
.welcome {
color: #44d7b6;
letter-spacing: 3px;
font-weight: bold;
}
.hero h1 {
font-size: 65px;
line-height: 1.1;
margin: 15px 0;
}
.hero h1 span {
color: #44d7b6;
}
.hero h2 {
color: #9cb0c5;
font-size: 27px;
}
.hero-content > p {
color: #a9b8c9;
max-width: 600px;
}
.buttons {
display: flex;
gap: 15px;
margin-top: 30px;
}
.btn {
background: #44d7b6;
color: #08111f;
padding: 12px 25px;
text-decoration: none;
border-radius: 8px;
font-weight: bold;
transition: 0.3s;
}
.btn:hover {
transform: translateY(-4px);
}
.btn.outline {
background: transparent;
color: #44d7b6;
border: 1px solid #44d7b6;
}
/* Code Window */
.code-box {
width: 430px;
background: #0d1b2b;
border: 1px solid #233a54;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}
.code-top {
background: #14253a;
padding: 13px;
display: flex;
gap: 7px;
}
.code-top span {
width: 11px;
height: 11px;
background: #44d7b6;
border-radius: 50%;
}
.code-box pre {
padding: 25px;
overflow-x: auto;
}
.code-box code {
color: #c5d6e8;
}
/* About */
#about {
background: #0b1727;
}
.about-card {
background: #101f31;
border: 1px solid #20364e;
border-radius: 15px;
padding: 35px;
max-width: 850px;
}
.about-card h3 {
margin-bottom: 15px;
}
.about-card p {
color: #afbdcc;
margin-bottom: 15px;
}
/* Projects */
.project-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 25px;
}
.project-card {
background: #101f31;
border-radius: 15px;
overflow: hidden;
border: 1px solid #20364e;
transition: 0.3s;
}
.project-card:hover {
transform: translateY(-10px);
border-color: #44d7b6;
}
.project-card img {
width: 100%;
height: 220px;
object-fit: cover;
cursor: pointer;
background: #172b40;
}
.project-info {
padding: 20px;
}
.project-info p {
color: #44d7b6;
font-size: 12px;
font-weight: bold;
}
.project-info span {
color: #98aabc;
}
/* Careers */
#careers {
background: #0b1727;
}
.career-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 25px;
}
.career-card {
background: #101f31;
padding: 30px;
border-radius: 15px;
border: 1px solid #20364e;
transition: 0.3s;
}
.career-card:hover {
border-color: #44d7b6;
transform: translateY(-7px);
}
.career-number {
color: #44d7b6;
font-size: 14px;
margin-bottom: 20px;
}
.career-card h3 {
margin-bottom: 15px;
}
.career-card p {
color: #a9b8c9;
}
/* Travel */
#travel {
text-align: center;
min-height: 500px;
display: flex;
justify-content: center;
align-items: center;
}
.travel-content {
max-width: 700px;
}
.travel-content p {
color: #a9b8c9;
}
.travel-tags {
margin-top: 30px;
display: flex;
justify-content: center;
gap: 15px;
flex-wrap: wrap;
}
.travel-tags span {
background: #101f31;
border: 1px solid #20364e;
padding: 10px 18px;
border-radius: 30px;
}
/* Footer */
footer {
padding: 70px 10%;
text-align: center;
background: #050c15;
}
footer h2 {
font-size: 35px;
}
footer p {
color: #899caf;
margin: 10px 0;
}
.footer-links {
display: flex;
justify-content: center;
gap: 25px;
margin: 25px;
}
.footer-links a {
color: #44d7b6;
text-decoration: none;
}
.copyright {
font-size: 13px;
}
/* Image Modal */
#imageModal {
display: none;
position: fixed;
z-index: 500;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.9);
align-items: center;
justify-content: center;
}
#modalImage {
max-width: 85%;
max-height: 80%;
border-radius: 10px;
}
#closeModal {
position: absolute;
top: 30px;
right: 50px;
font-size: 45px;
cursor: pointer;
}
/* Back To Top */
#topButton {
display: none;
position: fixed;
right: 25px;
bottom: 25px;
width: 45px;
height: 45px;
border: none;
border-radius: 50%;
background: #44d7b6;
color: #08111f;
font-size: 20px;
cursor: pointer;
}
/* Light Mode */
body.light-mode {
background: #f5f7fa;
color: #142033;
}
body.light-mode nav {
background: rgba(255, 255, 255, 0.95);
}
body.light-mode nav a {
color: #142033;
}
body.light-mode #about,
body.light-mode #careers {
background: #e9eef4;
}
body.light-mode .about-card,
body.light-mode .project-card,
body.light-mode .career-card,
body.light-mode .travel-tags span {
background: white;
}
/* Mobile */
@media (max-width: 900px) {
nav ul {
display: none;
}
.hero {
flex-direction: column;
justify-content: center;
}
.hero h1 {
font-size: 45px;
}
.code-box {
width: 100%;
}
.project-grid,
.career-grid {
grid-template-columns: 1fr;
}
}
// ===========================
// Dark / Light Mode
// ===========================
const themeButton = document.getElementById("themeButton");
themeButton.addEventListener("click", function () {
document.body.classList.toggle("light-mode");
if (document.body.classList.contains("light-mode")) {
themeButton.textContent = "☀️";
} else {
themeButton.textContent = "🌙";
}
});
// ===========================
// Typing Animation
// ===========================
const typingText = document.getElementById("typingText");
const careers = [
"Future Tech Professional",
"Cybersecurity Enthusiast",
"IT Support Professional",
"Future Project Manager"
];
let careerIndex = 0;
let letterIndex = 0;
let deleting = false;
function typeAnimation() {
const currentCareer = careers[careerIndex];
if (!deleting) {
typingText.textContent =
currentCareer.substring(0, letterIndex + 1);
letterIndex++;
if (letterIndex === currentCareer.length) {
deleting = true;
setTimeout(typeAnimation, 1500);
return;
}
} else {
typingText.textContent =
currentCareer.substring(0, letterIndex - 1);
letterIndex--;
if (letterIndex === 0) {
deleting = false;
careerIndex++;
if (careerIndex === careers.length) {
careerIndex = 0;
}
}
}
const speed = deleting ? 50 : 100;
setTimeout(typeAnimation, speed);
}
typeAnimation();
// ===========================
// Project Image Popup
// ===========================
const projectImages =
document.querySelectorAll(".project-image");
const modal =
document.getElementById("imageModal");
const modalImage =
document.getElementById("modalImage");
const closeModal =
document.getElementById("closeModal");
projectImages.forEach(function (image) {
image.addEventListener("click", function () {
modal.style.display = "flex";
modalImage.src = image.src;
});
});
closeModal.addEventListener("click", function () {
modal.style.display = "none";
});
modal.addEventListener("click", function (event) {
if (event.target === modal) {
modal.style.display = "none";
}
});
// ===========================
// Back To Top Button
// ===========================
const topButton =
document.getElementById("topButton");
window.addEventListener("scroll", function () {
if (window.scrollY > 500) {
topButton.style.display = "block";
} else {
topButton.style.display = "none";
}
});
topButton.addEventListener("click", function () {
window.scrollTo({
top: 0,
behavior: "smooth"
});
});
// ===========================
// Navigation Animation
// ===========================
const navLinks =
document.querySelectorAll("nav a");
navLinks.forEach(function (link) {
link.addEventListener("click", function () {
console.log(
"Navigating to:",
link.textContent
);
});
});
// ===========================
// Welcome Message
// ===========================
console.log(
"Welcome to Elul Tekeste's Portfolio!"
);