180 lines
8.3 KiB
HTML
180 lines
8.3 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Alex_PF</title>
|
||
<link rel="stylesheet" href="css/main.css">
|
||
<link rel="icon" href="Replace-fav-icon.png">
|
||
|
||
</head>
|
||
<body>
|
||
<!--NAV-->
|
||
<div class="navbar">
|
||
<div class="nav-container">
|
||
<img class="LOGO" src="icon-2.png" alt="LOGO">
|
||
|
||
<a class="NAME" href="#">Alex_<span>ty</span></a>
|
||
|
||
|
||
<img id="mobile-cta" class="mobile-menu" src="menu.png" alt="Open Navigation">
|
||
|
||
<nav>
|
||
<img id="mobile-exit" class="mobile-menu-exit" src="menu-exit.png" alt="Close Navigation">
|
||
|
||
<ul class="primary-nav">
|
||
<li class="current"><a href="#">Home</a></li>
|
||
<li><a href="#Future Goals">Features</a></li>
|
||
<li><a href="#projects">Pricing</a></li>
|
||
<li><a href="#">Contact</a></li>
|
||
</ul>
|
||
</nav>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!--HERO-->
|
||
<section class="hero">
|
||
<div class="container">
|
||
<div>
|
||
<img class="hero-img" src="A1.jpg" alt="hero img">
|
||
|
||
<div class="intro">
|
||
<h1 class="inrto-1">Introduction</h1>
|
||
<p class="sub-intro">Hi, I'm Alsan Ahmed, a front-end developer with a passion for creating engaging digital experiences.</p>
|
||
<hr>
|
||
<P class="about-1">I come from a small island in the Maldives named Dharanboodhoo. Growing up in a place where technology isn't always at your fingertips, I found my curiosity sparked early on. At 16, I decided to dive into the world of IT and web development, and I was fortunate to have a mentor named Shihaam, a local genius and part-time internet provider. Shihaam's guidance helped me navigate the complexities of coding and technology. Now, I'm on my way to becoming a developer, fueled by the passion that began on this little island.</P>
|
||
|
||
<div class="icons">
|
||
<img class="icon-1" src="icon-1.png" alt="my icon">
|
||
<img class="icon-2" src="icon-2.png" alt="my icon">
|
||
</div>
|
||
<div class="Cont-info">
|
||
|
||
<div class="cont">
|
||
<h2 >Contact Me </h2>
|
||
</div>
|
||
<div class="cont-1">
|
||
<p>Hey there! I’m available across multiple platforms if you need to get in touch. You can find me on Instagram, Snapchat, Telegram, Facebook, and Viber. Feel free to drop me a message on any of these apps, and I’ll get back to you as soon as I can
|
||
|
||
If you have any questions, feel free to send a text on Telegram, or you can email me with your name and question down below. Looking forward to hearing from you!.</p>
|
||
</div>
|
||
<form action="ll">
|
||
<label for="name">Name</label>
|
||
<input class="text" type="text" id="name" name="name">
|
||
|
||
<label for="message">Message</label>
|
||
<textarea class="message" name="message" id="message" cols="30" rows="1"></textarea>
|
||
|
||
<input type="submit" class="send-message-cta" value="Send message">
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!--Goals-->
|
||
<section id="Future Goals" class="goal">
|
||
<div class="container">
|
||
<h1>Future Goals</h1>
|
||
<div class="p">
|
||
<p> A developer with some experience under my belt, my future goals include advancing my skills and expanding my knowledge base. I aim to deepen my expertise in my primary programming language and explore more advanced concepts, such as design patterns and software architecture. I also plan to improve my proficiency with multiple frameworks and libraries to become more versatile in my development work.
|
||
|
||
Another goal is to enhance my problem-solving capabilities by tackling more complex coding challenges and participating in coding competitions or hackathons. I want to get better at writing efficient, scalable code and learn more about performance optimization techniques.
|
||
|
||
Building on my experience, I aspire to take on more significant projects, perhaps contributing to larger open-source initiatives or leading small teams on development projects. I also want to develop my skills in areas like DevOps and cloud computing to understand the full lifecycle of software development and deployment.
|
||
|
||
Networking with other developers and participating in tech communities is important to me, as it will help me stay updated with industry trends and best practices. Additionally, I plan to mentor beginners, sharing my knowledge and experiences to help them grow.
|
||
|
||
Ultimately, I want to position myself for career advancement, possibly moving into roles with more responsibility, such as a senior developer or team lead, and continuing to pursue lifelong learning and professional growth in the tech field.</p>
|
||
</div>
|
||
<!--ext-->
|
||
<div>
|
||
<div class="container">
|
||
<div class="sub-web">
|
||
<img class="phone-lap" src="2024-09-18_14-27.png" alt="Web sub">
|
||
</div>
|
||
<div class="location">
|
||
<img class="maldives" src="maldives.png" alt="maldives">
|
||
<img class="faafu" src="faafu.png" alt="faafu">
|
||
<img class="dharanboodhoo" src="dharanboodhoo.jpg" alt="dharanboodhoo">
|
||
</div>
|
||
<div class="phone">
|
||
<img class="phone-1" src="untitled.png" alt="phone view">
|
||
</div>
|
||
<div class="tab">
|
||
<img class="tab-1" src="tab.png" alt="tablet view">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Projects Section -->
|
||
<section id="projects" class="container">
|
||
|
||
<h2 class="section-title">Projects</h2>
|
||
<div class="row">
|
||
<div class="back-page">
|
||
<div class="col-md-4-project">
|
||
<div class="card-shadow-lg">
|
||
<img src="project.png" class="card-img-top" alt="Project 1">
|
||
<div class="card-body">
|
||
<h5 class="card-title">Project 1</h5>
|
||
<p class="card-text">A brief description of Project 1, highlighting the key features and technologies used.</p>
|
||
<a href="#" class="btn-primary">View Project</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4-project">
|
||
<div class="card-shadow-lg">
|
||
<img src="project.png" class="card-img-top" alt="Project 2">
|
||
<div class="card-body">
|
||
<h5 class="card-title">Project 2</h5>
|
||
<p class="card-text">A brief description of Project 2, highlighting the key features and technologies used.</p>
|
||
<a href="#" class="btn-primary">View Project</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4-project">
|
||
<div class="card-shadow-lg">
|
||
<img src="project.png" class="card-img-top" alt="Project 3">
|
||
<div class="card-body">
|
||
<h5 class="card-title">Project 3</h5>
|
||
<p class="card-text">A brief description of Project 3, highlighting the key features and technologies used.</p>
|
||
<a href="#" class="btn-primary">View Project</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</section>
|
||
|
||
<footer>
|
||
<div class="container">
|
||
<p class="back-to-top">
|
||
<a class="back-to-top-1" href="#">Back to top</a>
|
||
</p>
|
||
|
||
<p class="alex">
|
||
<<< ©<a class="alex" href="about.html">ALex</a>>>>
|
||
</p>
|
||
</div>
|
||
</footer>
|
||
|
||
<script>
|
||
const mobileBtn = document.getElementById('mobile-cta')
|
||
nav = document.querySelector('nav')
|
||
mobileBtnExit = document.getElementById('mobile-exit');
|
||
|
||
mobileBtn.addEventListener('click', () => {
|
||
nav.classList.add('menu-btn');
|
||
})
|
||
|
||
mobileBtnExit.addEventListener('click', () => {
|
||
nav.classList.remove('menu-btn');
|
||
})
|
||
</script>
|
||
|
||
</body>
|
||
</html> |