Skip to content

London_11 | Saqib_Javed | Module-User-Focused-Data | portfolio | Week3 #104

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

Open
saqibjvd wants to merge 2 commits into
base: main
Choose a base branch
from
Open

London_11 | Saqib_Javed | Module-User-Focused-Data | portfolio | Week3 #104

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5125216
saqib-portfolio
saqibjvd Oct 23, 2024
635d100
update index.html
saqibjvd Oct 24, 2024
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
122 changes: 122 additions & 0 deletions Saqib_Portfolio/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,122 @@
<!DOCTYPE html>
<html lang="en-gb">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>My Portfolio</title>
<meta
name="description"
content="The technical portfolio of trainee name"
/>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- suppress FOUC-->
<style>
html {
animation: fade-in 1s;
}
@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
</style>
<link
rel="stylesheet"
href="style.css"
media="print"
onload="this.media='all'"
/>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Raleway:wght@300;800&display=swap"
rel="stylesheet"
/>
</head>
<body>
<header>
<h1>Saqib Javed</h1>
<nav>
<ul>
<li><a href="#about">About Me</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main tabindex="0">
<section id="about">
<header><h2>About Me</h2></header>
<p>
My name is Saqib Javed, and I am a trainee at CYF, working towards becoming a software developer.
As a passionate and motivated individual, I am excited to embark on this journey.
<br><br>
I have a strong foundation in web development, particularly in HTML, CSS and responsive web design and I am eager to expand my skills further in Python, JavaScript, Node.js, SQL, and cloud engineering.
I possess a solid understanding of data structures and algorithms and am proficient in using version control systems like Git.
<br><br>
My enthusiasm for problem-solving and collaboration drives me to embrace challenges and learn from each experience.
I am committed to continuous learning and look forward to contributing to innovative software solutions that make a difference.
</p>
</section>

<section id="projects">
<header><h2>Projects Showcase</h2></header>
<p>
For my project, I developed a responsive website that showcases my portfolio using HTML and CSS. The goal was to create an engaging and user-friendly interface that highlights my skills and previous work.
I utilized various CSS techniques to ensure the website is visually appealing and functions well across different devices.
One of the challenges I faced was ensuring cross-browser compatibility, which required thorough testing and adjustments to the styles.
Overall, this project not only enhanced my proficiency in HTML and CSS but also strengthened my ability to design intuitive web experiences.
</p>
<h3>My Projects are:</h3>
<ul>
<li>Home Town</li>
<p>Deployed version: <a href="https://saqib-hometown.netlify.app/" target="_blank">visit Website</a></p>
<p>Github code: <a href="https://github.com/saqibjvd/Hometown-Homepage" target="_blank" target="_blank">visit Github</a></p>
<li>WireFrame</li>
<p>Deployed version: <a href="https://saqib-wireframe.netlify.app/" target="_blank">visit Website</a></p>
<p>Github code: <a href="https://github.com/saqibjvd/Module-User-Focused-Data" target="_blank">visit Github</a></p>
<li>Form Control</li>
<p>Deployed version: <a href="https://saqib-form-control.netlify.app/" target="_blank">visit Website</a></p>
<p>Github code: <a href="https://github.com/saqibjvd/Module-User-Focused-Data" target="_blank">visit Github</a>.</p>
</ul>
</section>

<section id="contact">
<header><h2>Contact me</h2></header>

<p>I’d love to hear from you! Whether you have a question, a project in mind, or just want to connect, feel free to reach out.
You can contact me via the following methods:</p>
<ul>
<li><strong>Email:</strong> <a href="mailto:your-email@example.com">your-email@example.com</a></li>
<li><strong>LinkedIn:</strong> <a href="https://www.linkedin.com/in/your-profile" target="_blank">Your LinkedIn Profile</a></li>
<li><strong>GitHub:</strong> <a href="https://github.com/your-profile" target="_blank">Your GitHub Profile</a></li>
</ul>
</section>
</main>
<footer>
<!-- <h3>
<a href="https://github.com/CodeYourFuture/Portfolio"
><svg
focusable="false"
role="presentation"
viewbox="0 0 98 96"
width="48"
height="48"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z"
fill="currentColor"
/>
</svg>
Read me</a
>
</h3> -->
</footer>
</body>
</html>
58 changes: 58 additions & 0 deletions Saqib_Portfolio/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
/* Design tokens */
:root {
--paper: hsla(251, 28%, 88%, 0.99);
--ink: hsla(244, 16%, 17%, 0.95);
--brand: hsla(0, 79%, 63%, 0.9);
--font: "Raleway", system-ui, sans-serif;
--gap: 20px;
--container: clamp(280px, calc(100vw - calc(var(--gap) * 2)), 1180px);
}
/* General Styles */
html,
body {
scroll-behavior: smooth;
background: var(--paper);
color: var(--ink);
font-family: var(--font);
}
body {
display: grid;
margin: auto;
min-height: 100vh;
gap: var(--gap);
max-width: var(--container);
}
a,
a:any-link {
color: currentColor;
text-decoration: none;
border-bottom: 2px solid transparent;
transition: border-color ease-in-out 0.3s;
}
a:hover,
a:focus {
color: var(--brand);
border-color: currentColor;
}
/* Site header and navigation */
body > header {
background: var(--paper);
display: flex;
justify-content: space-between;
align-items: center;
position: sticky;
top: 0;
z-index: 1;
}
nav ul {
display: flex;
list-style: none;
gap: var(--gap);
}

/* Text readability */
section p {
line-height: 1.5;
max-width: 55ch;
}

0 index.html → example_portfolio/index.html
View file
Open in desktop
File renamed without changes.
0 style.css → example_portfolio/style.css
View file
Open in desktop
File renamed without changes.