Skip to content

James C PR #94

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
JDC-horizons wants to merge 2 commits into
base: main
Choose a base branch
from
Open

James C PR #94

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
47fcb9c
core complete
JDC-horizons May 19, 2024
103a053
added smooth scrolling
JDC-horizons May 19, 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
73 changes: 73 additions & 0 deletions debug.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
/* blue */
.dbg-bg-blue {
background-color: #8da2fc;
}

.dbg-border-blue {
border: 2px dotted #76a9fa;
}
/* gray */
.dbg-bg-gray {
background-color: #6b7280;
}

.dbg-border-gray {
border: 2px dotted #6b7280;
}
/* red */
.dbg-bg-red {
background-color: #f98080;
}

.dbg-border-red {
border: 2px dotted #f98080;
}

/* green */
.dbg-bg-green {
background-color: #def7ec;
}

.dbg-border-green {
border: 2px dotted #30c48d;
}

/* yellow */
.dbg-bg-yellow {
background-color: #fdf6b2;
}

.dbg-border-yellow {
border: 2px dotted #faca16;
}

/* indigo */
.dbg-bg-indigo {
background-color: #e4edff;
}

.dbg-border-indigo {
border: 2px dotted #8da2fc;
}

/* purple */
.dbg-bg-purple {
background-color: #edebfe;
}

.dbg-border-purple {
border: 2px dotted #ac94fa;
}

/* pink */
.dbg-bg-pink {
background-color: #fce8f3;
}

.dbg-border-pink {
border: 2px dotted #f17eb8;
}

.dbg-border-margin {
margin: 2px;
}
127 changes: 124 additions & 3 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,131 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="debug.css" />
<link rel="stylesheet" href="styles.css" />
<title>Full Stack Portfolio</title>
</head>
<body>

<div class="introduction section">
<h3>James Canterbury</h3>
<div class="navbar">
<a href="#about-me" class="nav-links">About Me</a>
<a href="#portfolio" class="nav-links">Portfolio</a>
<a href="#experience" class="nav-links">Experience</a>
</div>
<div class="introduction main-text">
<h1>Hiring A Full-Stack Developer?</h1>
<p>
I have experience with <span class="bold-text">React</span>,
<span class="bold-text">NodeJS</span> and
<span class="bold-text">Typescript</span>. I would love to work at an
<span class="underlined-italics">innovative</span> and
<span class="underlined-italics">eco-friendly</span> start-up in the
<span class="bold-text">sustainable energy sector</span>.
</p>
</div>
</div>
<div class="about-me section" id="about-me">
<div class="container">
<h2 class="section-title">ABOUT ME</h2>
<p class="section-head">Introdution</p>
<p class="text-section">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit.
</p>
<br />
<p class="section-head">Technical Skills</p>
<br />
<ul class="skills-list">
<li>HTML & CSS</li>
<li>Javascript</li>
<li>Typescript</li>
<li>React</li>
<li>Redux</li>
<li>NodeJS</li>
</ul>
</div>
</div>
<div class="portfolio section" id="portfolio">
<h2 class="section-title">PORTFOLIO</h2>
<div class="portfolio-cards">
<div class="card">
<h2>Title</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam.
</p>
<a class="read-more">READ MORE</a>
<a
href="https://github.com/boolean-uk/html-full-stack-portfolio?tab=readme-ov-file"
class="repo-link"
>GitHub Repo</a
>
</div>
<div class="card">
<h2>Title</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam.
</p>
<a class="read-more">READ MORE</a>
<a
href="https://github.com/JDC-horizons/html-adding-the-rest"
class="repo-link"
>GitHub Repo</a
>
</div>
<div class="card">
<h2>Title</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam.
</p>
<a class="read-more">READ MORE</a>
<a
href="https://github.com/JDC-horizons/html-adding-the-rest"
class="repo-link"
>GitHub Repo</a
>
</div>
</div>
</div>
<div class="experience section" id="experience">
<h2 class="section-title">EXPERIENCE</h2>
<div class="container">
<div class="experience-text">
<p class="experience-title">Job Title</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur.
</p>
</div>
<br />
<div class="experience-text">
<p class="experience-title">Job Title</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur.
</p>
</div>
</div>
</div>
<div class="footer-bar">
<p>&copy; James Canterbury</p>
</div>
</body>
</html>
</html>
181 changes: 181 additions & 0 deletions styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,181 @@
* {
padding: 0px;
margin: 0px;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}

html {
scroll-behavior: smooth;
}

body {
background-color: darkslategray;
}

.section {
min-height: 400px;
background-color: white;
margin: 15px 0;
}

.introduction.section {
display: grid;
grid-template-columns: 25% auto 25%;
grid-template-rows: 80px auto;
background-color: darkcyan;
color: white;
}

.introduction h3 {
grid-column: 1;
grid-row: 1;
margin: 15px 0 0 15px;
}

.introduction .navbar {
display: flex;
flex: 1;
gap: 12px;
justify-content: end;
align-items: center;
height: 50px;
margin-right: 15px;
}

.introduction .navbar > * {
background-color: white;
color: darkcyan;
font-size: 13px;
padding: 5px;
border-radius: 8px;
}

.introduction .navbar {
grid-column: 3;
grid-row: 1;
}

.introduction.main-text {
grid-column: 2;
grid-row: 2;
margin-bottom: 80px;
}

.main-text h1 {
font-size: 65px;
font-weight: 600;
}

.main-text .bold-text {
font-weight: bold;
color: darkslategray;
}

.main-text .underlined-italics {
font-style: italic;
text-decoration: underline darkslategrey;
}

.container {
margin: 0 25%;
color: darkslategray;
}

.section-title {
margin: 0 auto;
padding: 25px 0;
text-align: center;
color: darkslategrey;
}

.about-me .text-section {
padding: 8px 0;
}
.about-me .section-head {
font-weight: bolder;
}

.about-me .skills-list {
column-count: 2;
column-gap: 20px;
margin-left: 35px;
padding-bottom: 30px;
}

.about-me .skills-list li {
margin-bottom: 2px;
}

.portfolio.section {
background-color: rgb(248, 200, 207);
}

.portfolio h2 {
color: black;
}

.portfolio-cards {
display: flex;
gap: 20px;
margin: 30px 80px;
padding-bottom: 30px;
}

@media (max-width: 700px) {
.portfolio-cards {
flex-direction: column;
}
}

.portfolio-cards .card {
border: 5px solid mediumvioletred;
background-color: white;
border-radius: 5px;
margin: 2px;
}

.portfolio-cards .card > * {
margin: 25px;
}

.portfolio-cards .read-more {
display: block;
text-align: center;
padding: 5px 0;
text-align: center;
background-color: mediumvioletred;
color: white;
border-radius: 5px;
}

.portfolio-cards .repo-link {
display: block;
text-align: center;
font-size: 0.75em;
color: mediumvioletred;
text-decoration: underline;
}

.experience-title {
font-weight: bolder;
}

.experience-text > * {
margin: 5px 0 10px 0;
}

.experience .container {
padding-bottom: 40px;
}

.footer-bar {
height: 60px;
}

.footer-bar p {
color: white;
text-justify: center;
margin-left: 40px;
font-size: 0.75em;
}