Topics

Kevin Powell - Community•2mo 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•2mo 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•2mo 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•2mo ago

here's the design

No description

No description

No description

clevermissfox•2mo 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•2mo ago

i just created html file and will make mobile first css

Rowe2ry•2mo 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•2mo 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•2mo ago

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

peterpumkineaterrOP•2mo ago

how can i customize the underline for text ?

peterpumkineaterrOP•2mo ago

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

No description

peterpumkineaterrOP•2mo ago

when i do

&:hover { text decoration: underline; }

&:hover { text decoration: underline; }

peterpumkineaterrOP•2mo ago

i get it like this

No description

peterpumkineaterrOP•2mo ago

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

No description

peterpumkineaterrOP•2mo ago

this is how it looks like

No description

peterpumkineaterrOP•2mo ago

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

CodePen

...

Rowe2ry•2mo 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•2mo 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•2mo ago

You can define the underline offset distance with:

text-underline-offset: 10px;

text-underline-offset: 10px;

peterpumkineaterrOP•2mo ago

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

Chris Bolson•2mo 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•2mo ago

i don't have any .active class

Rowe2ry•2mo 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•2mo ago

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

peterpumkineaterrOP•2mo ago

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

No description

peterpumkineaterrOP•2mo ago

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

Rowe2ry•2mo ago

just add padding to the main container?

No description

peterpumkineaterrOP•2mo ago

why space between isn't working ? ?

Rowe2ry•2mo ago

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

Rowe2ry•2mo 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•2mo 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•2mo 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•2mo 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 🙂.

36KMembers

View on Discord

Want results from more Discord servers?

Add your server