Skip to content

Kyle Vann #74

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

Kyle Vann #74

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c975a5b
section one and two nearly done
iscreamvann Mar 11, 2024
4273cec
Kyle Vann
iscreamvann Mar 11, 2024
d842ee2
Kyle Vann
iscreamvann Mar 11, 2024
34cdd76
minor changes
iscreamvann Mar 11, 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
98 changes: 97 additions & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,102 @@
<title>Full Stack Portfolio</title>
</head>
<body>

<header class="header">
<a class="header-name">Kyle Vann</a>
<nav class="header-nav">
<a href="#aboutme" class="header-button">About Me</a>
<a href="#portfolio" class="header-button">Portfolio</a>
<a href="#experience" class="header-button">Experience</a>
</nav>
</header>
<main>
<section class="section intro-section">
<div>
<h1>
Hiring A Full-Stack Developer?
</h1>
<p>
I have experience with <span class="span-one">React</span>, <span class="span-one">NodeJS</span> and <span class="span-one">Typescript</span>. I would love to work at an <span class="span-two">innovative</span> and <span class="span-two">eco-friendly</span> start-up in the <span class="span-one">sustainable energy sector</span>.
</p>
</div>
</section>
<section id="aboutme" class="section about-me">
<div>
<h1 class="ab-me-header">
ABOUT ME
</h1>
<div>
<h2 class="intro-header">Introduction</h2>
<br/>
<p>
Greetings! I'm Kyle Vann, a passionate and innovative web developer dedicated to transforming ideas into engaging digital experiences. With a background deeply rooted in the ever-evolving world of web technologies, I thrive on the challenge of crafting elegant and functional solutions. My expertise spans across front-end and back-end development, allowing me to create seamless and user-friendly websites that not only meet but exceed client expectations. I am driven by a commitment to staying abreast of the latest industry trends and technologies, ensuring that my work is always at the forefront of innovation. Let's collaborate to bring your digital vision to life and leave a lasting impact on the web.
</p>
</div>
<div>
<h2 class="techskill-header">Technical Skills</h2>
<div class="bp-container">
<div class="bullet-point">• HTML & CSS</div>
<div class="bullet-point">• React</div>
<div class="bullet-point">• Javascript</div>
<div class="bullet-point">• Redux</div>
<div class="bullet-point">• Typescript</div>
<div class="bullet-point">• NodeJS</div>
</div>
</div>
</div>
</section>
<section id="portfolio" class="section section-three">
<h1 class="port-header">PORTFOLIO</h1>
<div class="portfolio-column column-one">
<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, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
<button>READ MORE</button>
<a href="https://github.com/iscreamvann">Github Repo</a>
</div>
<div class="portfolio-column column-two">
<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, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
<button>READ MORE</button>
<a href="https://github.com/iscreamvann">Github Repo</a>
</div>
<div class="portfolio-column column-three">
<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, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
<button>READ MORE</button>
<a href="https://github.com/iscreamvann">Github Repo</a>
</div>
</section>
<section id="experience" class="section about-me">
<div>
<h1 class="ab-me-header">
EXPERIENCE
</h1>
<div>
<h2 class="intro-header">Boolean Full-Stack, 6 Month Bootcamp:</h2>
<br/>
<p>

During my transformative journey in the Boolean Full Stack 6-month boot camp, I honed my skills and solidified my foundation in web development. The intensive program equipped me with comprehensive knowledge in both front-end and back-end technologies, empowering me to navigate the complexities of modern web development with confidence. I delved into hands-on projects, collaborating with a diverse group of talented individuals, and solving real-world challenges that sharpened my problem-solving abilities. The experience not only expanded my technical toolkit but also fostered a growth mindset, teaching me the importance of adaptability in the ever-evolving tech landscape. Completing the Boolean Full Stack boot camp has not only enriched my technical proficiency but has also instilled in me a passion for creating robust and innovative solutions in the dynamic world of web development.
</p>
</div>
<div>
<h2 class="intro-header">Freelance and Personal Projects:</h2>
<br/>
<p>

As a front-end web developer, I've ventured into the dynamic realm of freelance work, delivering tailored solutions that blend creativity with functionality. Through various freelance projects, I've had the opportunity to collaborate with diverse clients, translating their visions into captivating and responsive web interfaces. My commitment to user-centric design and proficiency in front-end technologies has allowed me to craft seamless digital experiences. Beyond freelance engagements, I've dedicated time to a myriad of personal projects, each serving as a canvas for my creativity and a playground for experimenting with new technologies. These endeavors showcase my versatility and passion for staying ahead of industry trends. Whether it's customizing user interfaces or conceptualizing innovative features, my freelance work and personal projects reflect my unwavering dedication to pushing the boundaries of front-end development.
</p>
</div>
</div>
</section>
<footer> <p>&copy; 2024 Kyle Vann Coding.</p></footer>

</main>
</body>
</html>
222 changes: 222 additions & 0 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,222 @@
* {
margin: 0;
}

body {
margin: 0;
font-family: Arial, sans-serif;
overflow-y: scroll;
}

.header {
position: fixed;
top: 0;
display: grid;
width: 100%;
grid-template-rows: 1fr;
grid-template-areas:
"header-name header-nav header-nav header-nav";
background-color: #1CD760;
padding: 20px;
box-sizing: border-box;
}

.header-name {
grid-area: header-name;
color: white;
padding: 10px 10px 10px 10px;
font-weight: bold;
}

.header-button {
grid-area: header-button;
display: inline-block;
background-color: #E6FFFF;
color: #1CD760;
padding: 10px 10px 10px 10px;
margin-left: 30px;
border-radius: 5px;
cursor: pointer;
text-decoration: none;
}

.header-button:hover {
background-color: rgba(0, 0, 0, 0.648);
}

.header-nav {
grid-area: header-nav;
text-align: right;
}

.section {
height: 500px;
}

.section:first-child {
margin-top: 78px;
}

.intro-section {
display: flex;
justify-content: center;
align-items: center;
background-color: #1CD760;
border-bottom: solid 5px black;
}

.intro-section > div {
background-color: #1CD760;
font-size: 50px;
width: 400px;
margin-top: -100px;
color: #E6FFFF;
}

.intro-section p {
margin-top: 40px;
font-size: 13px;
}

.span-one {
color: black;
font-weight: 500;
}

.span-two {
text-decoration: black underline;
font-style: italic;

}

.about-me {
display: flex;
border-bottom: solid 5px black;
}

.ab-me-header {
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
margin-top: -130px;
}

.about-me > div {
font-size: 14px;
color: black;
padding: 150px;
overflow-x: scroll;
}

.intro-header {
margin-top: 20px;
font-size: 400;
}

.techskill-header {
margin-top: 50px;
font-size: 400;
}

.bp-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 5px;
padding: 20px;
font-size: 13px;
}

.port-header {
grid-area: port-header;
display: flex;
justify-content: center;
align-items: center;
padding-top: 20px;
}

.section-three {
display: grid;
grid-template-columns:
1fr 1fr 1fr;
grid-template-rows:
100px 300px;
grid-template-areas:
"port-header port-header port-header"
"column-1 column-2 column-3";
background-color: #c2ffd8;
gap: 20px;
padding: 0 20px 0 20px;
border-bottom: solid 5px black;
}

.section-three a {
font-size: 12px;
text-decoration: none;
color: black;
}

.column-one {
grid-area: column-1;
}

.column-two {
grid-area: column-2;
}

.column-three {
grid-area: column-3;
}

.portfolio-column {
background-color: #FFFFFF;
display: flex;
align-items: center;
flex-direction: column;
padding: 10px 10px 10px 10px;
height: 100%;
border-radius: 5px;
border: solid 5px black;
box-shadow: 2px 2px 2px 5px rgba(0, 0, 0, 0.1)
}

.portfolio-column p {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
padding: 10px 0;
}

.portfolio-column h2 {
font-size: 18px;
text-align: left;
width:100%;
}

.portfolio-column button {
width: 150px;
height: 25px;
border-radius: 5px;
border: none;
cursor: pointer;
background-color: #c2ffd8;
}

.portfolio-column button:hover {
background-color: rgb(255, 125, 125);
}

footer {
background-color: black;
height: 40px;
color: #FFFFFF;
text-align: center;
padding-top: 15px;
position: fixed;
bottom: 0;
width: 100%;
}

@media (max-width: 768px) {
}