Topics

Kevin Powell - Community•3w ago

peterpumkineaterr

I accidentally made complex portfolio design, i don’t know how i should develop it in css.

Design is quite complex as it has side bar (like index) and picture box takes half of the screen and there are lines dividing pages (part of design). Also it has two columns when i added 8 rows in that there will be songs and in other column books, i know i will have to use api for that. Honestly i never worked this much on coding side as i mostly work on figma only. This is all I’m doing to get a job as a designer. So having a at least decent portfolio website is necessary. I can’t show the design of the website as i directly designed it and for text i used my personal details so first i will have to replace them with lorem ipsum then i will show the design. I’m little anxious that how I’m gonna complete the coding in 3 days maximum ‘cause then i also have work on other Shopify project. It is also design and coding using css. Any help is appreciated. 🩵 I’m little scared. ‘I’ll attach the screenshot in this post in the morning it’s late now’

32 Replies

clevermissfox•3w ago

Sounds like css grid would be helpful. If you have specific questions you could make a wireframe of the layout, sort of a skeleton with boxes instead of your content. https://images.app.goo.gl/ePeWGXDfGr57EJ9n8

www.google.com

15+ Skeleton Loading Screens Using HTML and CSS

Found on Google from codewithrandom.com

peterpumkineaterrOP•3w ago

Yes that’s what i will do when i open my laptop in some time and share the design here. For better understanding.

peterpumkineaterrOP•3w ago

here's the design

No description

No description

No description

clevermissfox•3w ago

Okay can you be specific about what you need advice on ? Do you have a codePen or anything with your code for the layout thus far?

peterpumkineaterrOP•3w ago

i just created html file and will make mobile first css

Rowe2ry•3w ago

If Figma is your specialty, and the jobs you are applying for are for Figma, you may want to comission a contracted dev on Fiver to code the site to look like your Figma. If you have to learn all of the dev skills needed to make modern complex layouts... then you may as well go into applying for dev roles by the time you've learned enought to deploy your working website ¯\_(ツ)_/¯ When I did my portfolio, I spent 3 days doing the Figma, and 4 days coding it out and I was going for dev positions. If I was trying to show off my design skills and I wasn't a dev and I wasn't applying for dev roles, I would make like a squarespace or wix site to host my portfolio, and then include links to the Figma.

peterpumkineaterrOP•3w ago

absolutely frontend would be nice. i was thinking bout it anyways and you sent this text. i know normal html css but this is quite complex i guess i need to work on layout and stuff. yes figma is done working on the code so far chat gpt and youtube is helping. if i need some help i will add a text here for sure. it's a little confusing too haha

snxxwyy•3w ago

you should be able to whip up the majority if not all of this with flex and grid quite simply i think.

peterpumkineaterrOP•3w ago

how can i customize the underline for text ?

peterpumkineaterrOP•3w ago

this is the result i want to achieve when it is selected or hovered

No description

peterpumkineaterrOP•3w ago

when i do

&:hover { text decoration: underline; }

&:hover { text decoration: underline; }

peterpumkineaterrOP•3w ago

i get it like this

No description

peterpumkineaterrOP•3w ago

only that section is white and when i did give that container color it looks worst

No description

peterpumkineaterrOP•3w ago

this is how it looks like

No description

peterpumkineaterrOP•3w ago

https://codepen.io/kev00690/pen/zYgpNVV

CodePen

...

Rowe2ry•3w ago

replace your li block with this and then tweak the left, top, background color, width, and height values to your liking. Pseudo element (::before) is easier to position and control than the browser-defined "underline" text decoration:

li {
        list-style: none;
        margin: 1em 0;
        font-size: 1.25rem;
        font-family: "satoshi-light";

        a {
            color: black;
            text-decoration: none;
            position: relative;
        
            &:hover::before {
                transform: scaleX(1);
            }
          
            &::before {
              content: '';
              width: 100%;
              height: 3px;
              background-color: black;
              position: absolute;
              left: 0;
              bottom: -4px;
              transition: transform 150ms ease-in-out;
              transform: scaleX(0);
            }
        }
    }

li {
        list-style: none;
        margin: 1em 0;
        font-size: 1.25rem;
        font-family: "satoshi-light";

        a {
            color: black;
            text-decoration: none;
            position: relative;
        
            &:hover::before {
                transform: scaleX(1);
            }
          
            &::before {
              content: '';
              width: 100%;
              height: 3px;
              background-color: black;
              position: absolute;
              left: 0;
              bottom: -4px;
              transition: transform 150ms ease-in-out;
              transform: scaleX(0);
            }
        }
    }

Rowe2ry•3w ago

You can also take off the transition if animations and design movement aren't your thing. If you like the animation but want to do another cool effect, you can try adding these lines too:

No description

Chris Bolson•3w ago

You can define the underline offset distance with:

text-underline-offset: 10px;

text-underline-offset: 10px;

peterpumkineaterrOP•3w ago

it works thanks man i appriciate it how can i make it like this when it is selected ?

Chris Bolson•3w ago

you will probably need JS for that. Something like this should work:

a{
  text-decoration: none;
}
.active,
a:hover{
  text-decoration: underline;
  text-underline-offset: 10px;
}

a{
  text-decoration: none;
}
.active,
a:hover{
  text-decoration: underline;
  text-underline-offset: 10px;
}

// select links - this may well need to be more specific
const links = document.querySelectorAll("a");
links.forEach(link  => {
 link.addEventListener("click", () => {
    // remove class from current active link    
    const activeLink = document.querySelector("a.active");
    if (activeLink) activeLink.classList.remove("active");
    
  // add "active" class to clicked link
    link.classList.add("active");
  })
})

// select links - this may well need to be more specific
const links = document.querySelectorAll("a");
links.forEach(link  => {
 link.addEventListener("click", () => {
    // remove class from current active link    
    const activeLink = document.querySelector("a.active");
    if (activeLink) activeLink.classList.remove("active");
    
  // add "active" class to clicked link
    link.classList.add("active");
  })
})

peterpumkineaterrOP•3w ago

i don't have any .active class

Rowe2ry•3w ago

Yeah, he is saying to use JS to toggle to remove the active class from all of your links, then add the active to only one clicked. Then include a css selector along with your &:hover { /*styles here*/ } => &:hover,&.active { /* styles here */ } Its been a while since I've been using something other than the Blazor web assembly framework we use in prod, but just showing the HTML and styling I'd use is something like:

<ul>
   <li><a href="#work" aria-selected="false">Work</a></li>
   <li><a href="#aboutMe" aria-selected="false">Me</a></li>
   <li><a href="#resume" aria-selected="false">Resume<li><a href="#work" aria-selected="false">Work</a></li></a></li>
</ul>

<ul>
   <li><a href="#work" aria-selected="false">Work</a></li>
   <li><a href="#aboutMe" aria-selected="false">Me</a></li>
   <li><a href="#resume" aria-selected="false">Resume<li><a href="#work" aria-selected="false">Work</a></li></a></li>
</ul>

li {
     a {
         position: relative;
        
         &:hover::before,
         [aria-selected="true"]::before {
             transform: scaleX(1);
         }
          
         &::before {
             content: '';
             width: 100%;
             height: 3px;
             background-color: black;
             position: absolute;
             left: 0;
             bottom: -4px;
             transition: transform 150ms ease-in-out;
             transform: scaleX(0);
         }
    }
}

li {
     a {
         position: relative;
        
         &:hover::before,
         [aria-selected="true"]::before {
             transform: scaleX(1);
         }
          
         &::before {
             content: '';
             width: 100%;
             height: 3px;
             background-color: black;
             position: absolute;
             left: 0;
             bottom: -4px;
             transition: transform 150ms ease-in-out;
             transform: scaleX(0);
         }
    }
}

And then instead of toggling on the class list, you flip the attribute boolean value on aria-selected

peterpumkineaterrOP•3w ago

okay i will try this, now i have a new problem

peterpumkineaterrOP•3w ago

the my name and rest of the things won't go down

No description

peterpumkineaterrOP•3w ago

https://codepen.io/kev00690/pen/zYgpNVV updated codepen

Rowe2ry•3w ago

just add padding to the main container?

No description

peterpumkineaterrOP•3w ago

why space between isn't working ? ?

Rowe2ry•3w ago

You are only defining a space-between property value in your header { /*styles*/ } declaration

Rowe2ry•3w ago

Oh I see you also have it on your .hero-section but that only has 1 direct child, <div class="wrap1"></div> so a flex layout on an element with only one child doesn't make sense here. The justify content property doesn't cascade down to the grandchildren. Sorry to sound negative but I'd use a low or no-code tool to make a page you can point to that isn't this portfolio from this design, but has links to your Figma layotus and wireframes. If you manage to pull this all off, you will be misrepresenting to the potential employer that you know how to do the dev work too and you're a bit of a ways off on a few fundamentals here to get it done in 3 days correctly

No description

peterpumkineaterrOP•3w ago

i created that wrap1 by myself it isn't from figma layout i will rename it do so i will have to put li in some container ?

peterpumkineaterrOP•3w ago

codepen updated : https://codepen.io/kev00690/pen/zYgpNVV the current issue is content of hero section is not staying down instead it sticks up. and now selection of nav bar is working but underline is not available.

CodePen

...

peterpumkineaterrOP•3w ago

it is late so i will be back tomorrow note : this is an mobile first css.

Kevin Powell - Community Join

A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.

35KMembers

View on Discord

Want results from more Discord servers?

Add your server