diff --git a/README.md b/README.md index 98549832..87e66c14 100644 --- a/README.md +++ b/README.md @@ -1,31 +1,28 @@ -# Portfolio +# Nadika Zavodovska's Portfolio -Your starting portfolio, to iterate on. +Welcome to my portfolio! This repository showcases my web development projects and skills. -## Learning Objectives +## Live Demo +[Visit the Live Portfolio](https://nadika-zavodovska-portfolio.netlify.app/) -- Customise the starting portfolio with your professional details -- Iterate on your portfolio every module -- Review your colleague's portfolio +## Features +- Project showcase with images and descriptions +- Responsive design +- User-friendly navigation +- Integration with GitHub for version control -## Requirements +## Technologies Used +- HTML +- CSS +- Web design +- GitHub Pages or Netlify for deployment -At Code Your Future, we expect everyone to graduate with a unique professional portfolio. Begin building this portfolio as soon as you begin our Software Development Course. At first, your portfolio will be a simple HTML/CSS page deployed to Github Pages or Netlify. This is your MVP. +## Installation +To view the project locally, clone the repository: +git clone https://github.com/nadika-zavodovska/Portfolio.git -Every module, you will _iterate_ on your portfolio, adding a new project and improving your design and presentation. By the time you apply to Final Projects, your portfolio will help you show you are ready to be accepted on to a Final Projects team. +## Usage +Open index.html in your web browser to see the portfolio. -## Acceptance Criteria - -- [ ] My portfolio introduces me and my work -- [ ] The design and code is my own, not a template or tutorial -- [ ] Each project is linked to my code on Github and the deployed project -- [ ] I have published my professional contact information on my portfolio -- [ ] My Accessibility and SEO scores are 100 on Lighthouse -- [ ] My portfolio is deployed -- [ ] I have replaced this README with one that describes my own portfolio - -## Resources - -- [Josh Comeau on building your early career profile](https://www.youtube.com/watch?v=OXiaEXfkAec) -- [How to Build an Effective Dev Portfolio](https://www.joshwcomeau.com/effective-portfolio/) -- [CYF Graduate Module](https://module-graduates.codeyourfuture.io/) +## Contribution +Feel free to fork this repository and submit pull requests. diff --git a/index.html b/example-name-portfolio/index.html similarity index 64% rename from index.html rename to example-name-portfolio/index.html index 7b0d8b5a..b76f5bbc 100644 --- a/index.html +++ b/example-name-portfolio/index.html @@ -59,12 +59,37 @@

My Name

Projects Showcase

-

- Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla nisi - excepturi quidem, eum rem doloribus quam aspernatur hic enim eligendi - commodi minima ullam necessitatibus, cumque blanditiis, nihil magni - amet consectetur? -

+

Contact me

diff --git a/example-name-portfolio/style.css b/example-name-portfolio/style.css new file mode 100644 index 00000000..ec5097cb --- /dev/null +++ b/example-name-portfolio/style.css @@ -0,0 +1,151 @@ +/* Design tokens. +With tokens, stick to communicating the PURPOSE not the VALUE. +Code should explain, not mystify, your design. +*/ +: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); + /* https://web.dev/accessible-tap-targets/ */ + --tap-target: 48px; + --box: clamp(280px, 50vw + 2px, 530px); +} + +/* Hey look, dark mode is +so easy with design tokens done this way +*/ +@media (prefers-color-scheme: dark) { + :root { + --ink: hsla(252, 38%, 92%, 0.99); + --paper: hsla(244, 16%, 17%, 1); + } +} + +/* 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; +} +p a:any-link { + border-color: var(--brand); +} +/* Site header and navigation +https://elad.medium.com/css-position-sticky-how-it-really-works-54cd01dc2d46 +*/ +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 +https://baymard.com/blog/line-length-readability +*/ +section p { + line-height: 1.5; + max-width: 55ch; +} +/* targeted resets +We're resetting elements with a class - ANY class +- on the grounds that if you added a class, +you added your own styles +*/ +h3[class] { + margin: 0 auto 0 0; +} +ul[class], +li[class] { + margin: 0; + padding: 0; +} + +/* Basic image rules +Don't size images in css, size their containers +Just make images take up the entire space you give them +in every context +*/ +svg { + height: 100%; + width: auto; + min-width: var(--tap-target); +} + +img { + width: 100%; + height: 100%; + max-width: 100%; + object-fit: cover; +} + +picture { + height: auto; + overflow: hidden; +} +/* +I would start breaking this up into component files now btw! +*/ +.showcase { + display: flex; + flex-flow: row wrap; + gap: var(--gap); +} +/* +Here's an example of a grid layout. Notice there's no margin, padding, or sizes given on elements +All the spacing and sizing is set on the template, and the elements +are just slotted in. +The little dots are how we precisely place and size white-space +https://www.interaction-design.org/literature/article/the-power-of-white-space +*/ + +.project { + display: grid; + grid-template: + "picture picture picture" var(--box) + "....... ....... ......." calc(var(--gap) / 2) + "....... heading ......." min-content + "....... blurb ......." auto / + var(--gap) var(--box) var(--gap); +} +.project__picture { + grid-area: picture; +} +.project__heading { + grid-area: heading; +} +.project__blurb { + grid-area: blurb; +} diff --git a/nadika-zavodovska-portfolio/images/Nadika_Zavodovska.jpeg b/nadika-zavodovska-portfolio/images/Nadika_Zavodovska.jpeg new file mode 100644 index 00000000..20adf0aa Binary files /dev/null and b/nadika-zavodovska-portfolio/images/Nadika_Zavodovska.jpeg differ diff --git a/nadika-zavodovska-portfolio/images/git_website.png b/nadika-zavodovska-portfolio/images/git_website.png new file mode 100644 index 00000000..3e5195e0 Binary files /dev/null and b/nadika-zavodovska-portfolio/images/git_website.png differ diff --git a/nadika-zavodovska-portfolio/images/kharkiv_website.png b/nadika-zavodovska-portfolio/images/kharkiv_website.png new file mode 100644 index 00000000..c034ea10 Binary files /dev/null and b/nadika-zavodovska-portfolio/images/kharkiv_website.png differ diff --git a/nadika-zavodovska-portfolio/images/lets_go_animation.png b/nadika-zavodovska-portfolio/images/lets_go_animation.png new file mode 100644 index 00000000..4427f664 Binary files /dev/null and b/nadika-zavodovska-portfolio/images/lets_go_animation.png differ diff --git a/nadika-zavodovska-portfolio/index.html b/nadika-zavodovska-portfolio/index.html new file mode 100644 index 00000000..6ccb683b --- /dev/null +++ b/nadika-zavodovska-portfolio/index.html @@ -0,0 +1,172 @@ + + + + + + + Nadika's Portfolio + + + + + + + + + + + +
+

I'm Nadika Zavodovska

+ +
+
+
+
+

About Me

+
+
+ Nadika's photo +
+

+ I am a Front-End Developer with a passion for creating engaging and + user-friendly websites. With experience in HTML, CSS, Bootstrap, + JavaScript, React, and WordPress, I specialise in transforming ideas + into visually appealing digital experiences. I am dedicated to + continuous learning and aspire to explore new technologies that + improve my skills and keep me updated in web development. +

+
+
+
+

Projects Showcase

+
+
+
+ screenshot view of the Explore Kharkiv website. +

Explore Kharkiv website

+

+ The Explore Kharkiv website offers detailed information about + Kharkiv's history, attractions, parks, museums, and more, helping + visitors easily decide where to go. The site solves the problem of + guiding users to interesting places through rich descriptions and + images. Technologies used include HTML, CSS, JavaScript, and Adobe + Photoshop, along with Web Design skills. Additionally, the site + uses JavaScript to fetch and display current weather data for + Kharkiv, enhancing the user experience by providing real-time + information. +

+
+ GitHub linkSee project +
+
+
+ +
+ screenshot view of the Exploring GIT website. +

Exploring Git website

+

+ The Exploring Git website introduces developers to Git, explaining + its importance and offering links to additional resources for + further learning. The site is structured in blocks, dividing topics + into articles for easy navigation. Built using HTML, CSS, and web + design techniques, it aims to create a user-friendly experience that + helps users understand version control effectively. +

+
+ GitHub linkSee + project +
+
+
+ screenshot view of the Let's go website. +

Let's go website

+

+ The Let's Go website introduces concepts for designing and + implementing engaging animations for the initial screen of a + website. Built with HTML and CSS, it allows users to view and + interact with various animation styles. My approach focused on + creating these animations easily using CSS without the need for + JavaScript, making it accessible for developers looking to enhance + user experience through simple yet effective animations. Don't forget to use the scroll button when you open + the website! +

+
+ GitHub + linkSee + project +
+
+
+
+
+

Contact me

+
+

+ I would love to hear from you! Whether you have a question, want to + discuss a project, or just want to connect, feel free to reach out. + I'll get back to you as soon as possible. +

+ +
+
+ + + + \ No newline at end of file diff --git a/style.css b/nadika-zavodovska-portfolio/style.css similarity index 52% rename from style.css rename to nadika-zavodovska-portfolio/style.css index c911f90c..34d77047 100644 --- a/style.css +++ b/nadika-zavodovska-portfolio/style.css @@ -7,14 +7,17 @@ --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-size: 16px; font-family: var(--font); } + body { display: grid; margin: auto; @@ -22,6 +25,7 @@ body { gap: var(--gap); max-width: var(--container); } + a, a:any-link { color: currentColor; @@ -29,13 +33,25 @@ a:any-link { border-bottom: 2px solid transparent; transition: border-color ease-in-out 0.3s; } + a:hover, a:focus { color: var(--brand); border-color: currentColor; } + +img { + filter: brightness(100%); + transition: filter 0.8s ease-in-out; +} + +img:hover { + filter: brightness(115%); + +} + /* Site header and navigation */ -body > header { +body>header { background: var(--paper); display: flex; justify-content: space-between; @@ -44,14 +60,77 @@ body > header { top: 0; z-index: 1; } + nav ul { display: flex; list-style: none; gap: var(--gap); } +.contact_list { + padding-left: 0; +} + + +/* #region About me section */ +.author-img { + max-width: 15%; + border-radius: 5px; +} + +/* #endregion About me section */ + +/* #region Projects showcase section */ + +.portfolio_btn-block a { + padding: 10px 20px; + margin-right: 10px; + border-radius: 5px; + color: #fff; +} + +.github-btn { + background-color: #074592; +} + +.project-link { + background-color: #0a60ca; +} + +.portfolio_btn-block a:hover { + background-color: #05346d; +} + +.portfolio_btn-block { + margin-bottom: 50px; +} + +.portfolio_img { + max-width: 52%; + border-radius: 5px; +} + +.portfolio_description { + margin-bottom: 30px; +} + +/* #endregion Projects showcase section */ + /* Text readability */ section p { line-height: 1.5; max-width: 55ch; } + + +@media(max-width: 768px) { + + h1 { + flex-basis: 30%; + font-size: 1.5rem; + } + + .author-img { + max-width: 35%; + } +} \ No newline at end of file