From c975a5b453940e2420391576ea90d74e4815abd2 Mon Sep 17 00:00:00 2001 From: Kyle Vann Date: Mon, 11 Mar 2024 14:21:55 +0000 Subject: [PATCH 1/4] section one and two nearly done --- index.html | 43 +++++++++++++++++++- style.css | 116 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 158 insertions(+), 1 deletion(-) create mode 100644 style.css diff --git a/index.html b/index.html index dc73fbe..a7b34c5 100644 --- a/index.html +++ b/index.html @@ -8,6 +8,47 @@ Full Stack Portfolio - +
+Kyle Vann + +
+
+
+
+

+ Hiring A Full-Stack Developer? +

+

+ I have experience with React, NodeJS and Typescript. I would love to work at an innovative and eco-friendly start-up in the sustainable energy sector. +

+
+
+
+
+

+ ABOUT ME +

+
+

Introduction

+
+

+ 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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

+
+
+

Technical Skills

+ +
+
+
+
section 4
+
section 5
+
section 6
+
section 7
+
\ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..9a56232 --- /dev/null +++ b/style.css @@ -0,0 +1,116 @@ +* { + 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; + border-radius: 5px; + cursor: pointer; + } + .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: 11px; + color: black; + padding: 150px; +} +.intro-header { + margin-top: 20px; + font-size: 400; +} +.techskill-header { + margin-top: 50px; + font-size: 400; + +} + + + @media (max-width: 768px) { + + } + \ No newline at end of file From 4273cecd8aa0c7f72326582c5df33b5cad47d170 Mon Sep 17 00:00:00 2001 From: Kyle Vann Date: Mon, 11 Mar 2024 16:37:43 +0000 Subject: [PATCH 2/4] Kyle Vann --- index.html | 71 ++++++++++++++++++++++++++++++----- style.css | 108 +++++++++++++++++++++++++++++++++++++++++++++++++++-- 2 files changed, 167 insertions(+), 12 deletions(-) diff --git a/index.html b/index.html index a7b34c5..1023ebe 100644 --- a/index.html +++ b/index.html @@ -11,9 +11,9 @@
Kyle Vann
@@ -27,7 +27,7 @@

-
+

ABOUT ME @@ -41,14 +41,67 @@

Introduction

Technical Skills

- +
+
• HTML & CSS
+
• React
+
• Javascript
+
• Redux
+
• Typescript
+
• NodeJS
+
-
section 4
-
section 5
-
section 6
-
section 7
+
+

PORTFOLIO

+
+

Title

+

+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. +

+ + Github Repo +
+
+

Title

+

+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. +

+ + Github Repo +
+
+

Title

+

+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. +

+ + Github Repo +
+
+
+
+

+ EXPERIENCE +

+
+

Job Title

+
+

+ 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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

+
+
+

Job Title

+
+

+ 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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

+
+
+
+

© 2024 Kyle Vann Coding.

+

\ No newline at end of file diff --git a/style.css b/style.css index 9a56232..b50f7b8 100644 --- a/style.css +++ b/style.css @@ -34,9 +34,12 @@ body { 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); } @@ -49,6 +52,7 @@ body { .section { height: 500px; } + .section:first-child { margin-top: 78px; } @@ -60,6 +64,7 @@ body { background-color: #1CD760; border-bottom: solid 5px black; } + .intro-section > div { background-color: #1CD760; font-size: 50px; @@ -67,6 +72,7 @@ body { margin-top: -100px; color: #E6FFFF; } + .intro-section p { margin-top: 40px; font-size: 13px; @@ -87,6 +93,7 @@ body { display: flex; border-bottom: solid 5px black; } + .ab-me-header { display: flex; justify-content: center; @@ -94,23 +101,118 @@ body { padding: 20px; margin-top: -130px; } + .about-me > div { - font-size: 11px; + font-size: 14px; color: black; padding: 150px; } + .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; + } - @media (max-width: 768px) { + .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-shrink: 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; +} + +@media (max-width: 768px) { +} \ No newline at end of file From d842ee2d913e694c87a152f05de269520c13a6cb Mon Sep 17 00:00:00 2001 From: Kyle Vann Date: Mon, 11 Mar 2024 16:45:55 +0000 Subject: [PATCH 3/4] Kyle Vann --- style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/style.css b/style.css index b50f7b8..809f392 100644 --- a/style.css +++ b/style.css @@ -180,7 +180,7 @@ grid-area: column-3; } .portfolio-column p { - flex-shrink: 1; + flex: 1; overflow: hidden; text-overflow: ellipsis; padding: 10px 0; From 34cdd763ca690515e04768ff86e56f3d33a78890 Mon Sep 17 00:00:00 2001 From: Kyle Vann Date: Mon, 11 Mar 2024 17:08:27 +0000 Subject: [PATCH 4/4] minor changes --- index.html | 12 +++++++----- style.css | 4 ++++ 2 files changed, 11 insertions(+), 5 deletions(-) diff --git a/index.html b/index.html index 1023ebe..34855cc 100644 --- a/index.html +++ b/index.html @@ -36,7 +36,7 @@

Introduction


- 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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. + 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.

@@ -85,17 +85,19 @@

EXPERIENCE

-

Job Title

+

Boolean Full-Stack, 6 Month Bootcamp:


- 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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. + +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.

-

Job Title

+

Freelance and Personal Projects:


- 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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. + +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.

diff --git a/style.css b/style.css index 809f392..d8b974d 100644 --- a/style.css +++ b/style.css @@ -106,6 +106,7 @@ body { font-size: 14px; color: black; padding: 150px; + overflow-x: scroll; } .intro-header { @@ -211,6 +212,9 @@ height: 40px; color: #FFFFFF; text-align: center; padding-top: 15px; +position: fixed; +bottom: 0; +width: 100%; } @media (max-width: 768px) {