How did you edit the logo?

[ghost]

Hi @bchiang7 I really liked your website. And was wondering to make one of my own. But i'm stuck with the logo.

I tried to edit the logo in figma, made a vector, copied as svg but the rendering doesn't work

the letter goes to top-left like this

How can i fix this?

[kvntzn]

Not sure if it is the best way to do it. Try adding auto layout on the letter then adjust the padding according to your need

[OladapoAjala]

@backermanbd have you been able to edit it if not I can put you through how I was able to edit the logo for my personal site (https://oladapo.netlify.app/)

[Adam-Al-Rahman]

@backermanbd have you been able to edit it if not I can put you through how I was able to edit the logo for my personal site (https://oladapo.netlify.app/)

Hi, @OladapoAjala can you help me with it.

[ghost]

Hi, @OladapoAjala i am facing the same issue, i have very little knowledge of we development. So please me.

[ghost]

@backermanbd have you been able to edit it if not I can put you through how I was able to edit the logo for my personal site (https://oladapo.netlify.app/)

sorry for the late reply, yes please guide me

[OladapoAjala]

Hello everyone sorry I didn't reply I don't get notifications for this issue so I wouldn't know if I have a message.

Thank you @backermanbd for sending me a mail.

[ghost]

Hello everyone sorry I didn't reply I don't get notifications for this issue so I wouldn't know if I have a message.

Thank you @backermanbd for sending me a mail.

@OladapoAjala would you please guide us how you edited your site logo?

[OladapoAjala]

Yes I'd drop a detailed response here, soonest!

[OladapoAjala]

Hello everyone, sorry I took sometime I was engaged.

STEPS

1. First off you might want to stop the site from leaving the loader page

• In the src/components/layout.js file set the isLoading state to always be true
• Next in src/components/loader.js, comment out the animation that blurs out the logo

2. The logo is an SVG file in src/components/icons/loader.js
3. The letter 'B' svg as an id of 'B' and you can move it to your desired location using it's transform property
4. Play around with the translate values to see how it affects the positioning of the letter B inside the logo.

Let me know if this helps.

PS: it's over a month I worked on this and I had to study the code again to remember what I did.

[SABERGLOW]

If anyone is still wondering how to make an SVG from your name initials (e.g. W for Wali)

1. Use Figma or Adobe Illustrator, type your name initials, and if you want to use the same font as Brittany's, make sure you get your hands on "Calibre" font family.

2. Export your text as an SVG. Make sure you get 'path' values for your text.

3. Replace the following path with your initial SVG's path:

<path
   d="M45.691667,45.15 C48.591667,46.1 50.691667,48.95 50.691667,52.2 C50.691667,57.95 46.691667,61 40.291667,61 L28.541667,61 L28.541667,30.3 L39.291667,30.3 C45.691667,30.3 49.691667,33.15 49.691667,38.65 C49.691667,41.95 47.941667,44.35 45.691667,45.15 Z M33.591667,43.2 L39.241667,43.2 C42.791667,43.2 44.691667,41.85 44.691667,38.95 C44.691667,36.05 42.791667,34.8 39.241667,34.8 L33.591667,34.8 L33.591667,43.2 Z M33.591667,47.5 L33.591667,56.5 L40.191667,56.5 C43.691667,56.5 45.591667,54.75 45.591667,52 C45.591667,49.2 43.691667,47.5 40.191667,47.5 L33.591667,47.5 Z"
   fill="currentColor"
/>

4. Play around with the transform="translate(11.000000, 5.000000)" values to center your initials in the Hexagon.

[WilfredAlmeida]

I changed the logo with the letter 'W'. Following are the steps I followed:

1. Goto Figma and type the letter you want in the font you want. I've used Inter Bold with font size 60.
2. Then export it as svg and open the .svg file in VSCODE.
3. From there copy the content inside <path d="<COPY EVERYTHING HERE IN THESE QUOTES>"
4. Paste it in the src/components/icons/loader.js file in the path tag
5. Now your letter will be shown. Sometimes browsers cache the loading animation so do a hard refresh using Ctrl + Shift + R
6. The letter might be small/big. Adjust the font size in figma and bring it in again.
7. The surrounding hexagon might not be aligned. To align it adjust the values in translate in <g id="B" transform="translate(20.000000, 29.000000)">. This will move your letter, not the hexagon so that the loading always stays in the center

Following my svg for the letter "W"

<svg id="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
    <title>Loader Logo</title>
    <g>
      <g id="W" transform="translate(20.000000, 29.000000)">
        <path
          d="M12.6151 44L0.129261 0.363635H10.2074L17.4304 30.6832H17.7926L25.7614 0.363635H34.3906L42.3381 30.7472H42.7216L49.9446 0.363635H60.0227L47.5369 44H38.5455L30.2358 15.4702H29.8949L21.6065 44H12.6151Z"
          fill="currentColor"
        />
      </g>
      <path
        stroke="currentColor"
        strokeWidth="5"
        strokeLinecap="round"
        strokeLinejoin="round"
        d="M 50, 5
                  L 11, 27
                  L 11, 72
                  L 50, 95
                  L 89, 73
                  L 89, 28 z"
      />
    </g>
  </svg>

You can checkout my portfolio at wilfredalmeida.com/ PS: I keep trying templates so this might not always be active. Connect with me if you need more help.

Additionally I also followed these steps for some convenience.

Hello everyone, sorry I took sometime I was engaged.

STEPS

1. First off you might want to stop the site from leaving the loader page

• In the src/components/layout.js file set the isLoading state to always be true
• Next in src/components/loader.js, comment out the animation that blurs out the logo

2. The logo is an SVG file in src/components/icons/loader.js
3. The letter 'B' svg as an id of 'B' and you can move it to your desired location using it's transform property
4. Play around with the translate values to see how it affects the positioning of the letter B inside the logo.

Let me know if this helps.

PS: it's over a month I worked on this and I had to study the code again to remember what I did.

[Moamal-2000]

I have made this logo with the animation effect using pure HTML, CSS, JS You can take a look at the code https://codepen.io/moamal-2000/pen/wvYzPJg

[dhruvsinghal7494]

I have made this logo with the animation effect using pure HTML, CSS, JS You can take a look at the code https://codepen.io/moamal-2000/pen/wvYzPJg

and how to changed the code of main files

[Moamal-2000]

I have made this logo with the animation effect using pure HTML, CSS, JS You can take a look at the code https://codepen.io/moamal-2000/pen/wvYzPJg

and how to changed the code of main files

Apologies for my delayed response; I've just come across your message. Could you please clarify what you mean? I want to ensure I understand your query accurately.

[dhruvsinghal7494]

Hey, I have cloned portfolio repo, at first, I have faced some logo related issues, but I have clarified it from stack overflow and ChatGPT. Thankyou.

On Mon, Mar 25, 2024, 12:42 PM Moamal Alaa @.***> wrote:

I have made this logo with the animation effect using pure HTML, CSS, JS You can take a look at the code https://codepen.io/moamal-2000/pen/wvYzPJg

and how to changed the code of main files

Apologies for my delayed response; I've just come across your message. Could you please clarify what you mean? I want to ensure I understand your query accurately.

— Reply to this email directly, view it on GitHub https://github.com/bchiang7/v4/issues/160#issuecomment-2017360494, or unsubscribe https://github.com/notifications/unsubscribe-auth/A5FMFLLR6NW35OCVIHWGJDTYZ7E4RAVCNFSM5DZIIGWKU5DIOJSWCZC7NNSXTN2JONZXKZKDN5WW2ZLOOQ5TEMBRG4ZTMMBUHE2A . You are receiving this because you commented.Message ID: @.***>