[Day 17]独自一人的全端攻略(前端篇)

挑战目标: MockNative Camp

最近这两年在工作上一直想要有同事可以交流进步，或者是遇到可以学习的同事，但终究在这两份工作中都属於自己一个人单打独斗，自己上网学习然後实作并部署上去，也不知道自己做的到底好不好，像是现在从零开始的前端专案，自己照着後端学习前端的观念开始做，也一路做了三个月，一直觉得技术债越积越深，在开始开发不同模块时，总会觉得这个真的是可以给使用者使用的吗，总是会怀疑自己的前端专案架构等等的，但好像也没有同事可以帮忙review，只好继续累积业障了呢。

今天来研究第一个section，

可以看到分成左右两个区块，所以我们section也这样分，首先新增一个section folder然後建立SectionOne.js，并在Sections.js中引用。

Sections.js

import SectionOne from './section/SectionOne'

function Sections() {
    return (
        <div className="w-screen">
            <SectionOne />
        </div>
    )
}

export default Sections

SectionOne.js

import Image from "next/image";

function SectionOne() {
    return (
        <div className="w-full">
            {/* Left */}
            <div className="">
                <Image
                    src="	https://nativecamp.net/user/images/index/zh-tw/top-1.jpg"
                    width={1063}
                    height={685}
                />
            </div>
            {/* Right */}
            <div> </div>
        </div>
    )
}

export default SectionOne

这边要花时间研究一下clipPath因为Native Camp使用这个去达到图片遮罩的效果，目前还在研究如何用React去实作他。

所以目前的成果只有

CSS真的是太博大精深了，想要随心所欲的制作网页需要花很多时间去研究，但我身边写前端的朋友都要我不要碰这个坑XD