diff --git a/index.html b/index.html index dc73fbe..34855cc 100644 --- a/index.html +++ b/index.html @@ -8,6 +8,102 @@ 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

+
+

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

+
+
+

Technical Skills

+
+
• HTML & CSS
+
• React
+
• Javascript
+
• Redux
+
• Typescript
+
• NodeJS
+
+
+
+
+
+

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 +

+
+

Boolean Full-Stack, 6 Month Bootcamp:

+
+

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

+
+
+

Freelance and Personal Projects:

+
+

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

+
+
+
+ + +
\ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..d8b974d --- /dev/null +++ b/style.css @@ -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) { +} + \ No newline at end of file