commit.design/index.html at main · mini-page/commit.design · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Commit Product Portfolio</title>
    <link rel="stylesheet" href="loco.css">
    <link href="https://cdn.jsdelivr.net/npm/remixicon@3.2.0/fonts/remixicon.css" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <!-- Minicircle div remains as is for design purposes -->
    <div id="minicircle"></div>

    <!-- Main container for all sections -->
    <div id="main">

        <!-- Hero Section -->
        <header id="hero">
            <nav id="nav">
                <a href="#"><big>C</big>ommit Product</a>
                <h4 id="menuh4">MENU +</h4>
                <div id="menu">
                    <!-- <a href="#">Home</a> -->
                    <!-- <a href="#">About</a> -->
                    <!-- <a href="#">Projects</a> -->
                    <!-- <a href="#">Contact</a> -->
                </div>
            </nav>
            </nav>

            <section id="heading">
                <div class="bounding">
                    <h1 class="boundingelem">Product</h1>
                </div>
                <div class="blocktext">
                    <div class="bounding">
                        <h1 class="boundingelem" id="secondh1">Designer</h1>
                    </div>
                    <div class="bounding">
                        <h5 class="boundingelem">Based in Toronto</h5>
                    </div>
                </div>
            </section>

            <section id="chhotiheadings">
                <div class="bounding">
                    <h3 class="boundingelem">Available for freelance</h3>
                </div>
                <div class="bounding">
                    <h4 class="boundingelem">Work from May 23'</h4>
                </div>
            </section>

            <footer id="herofooter">
                <a href="#">Previously worked at YML <i class="ri-arrow-right-up-line"></i></a>
                <a href="#">Photopia Ambassador <i class="ri-arrow-right-up-line"></i></a>
                <div id="iconset">
                    <div class="circle"><i class="ri-arrow-down-line"></i></div>
                    <div class="circle"><i class="ri-arrow-up-line"></i></div>
                </div>
            </footer>
        </header>

        <!-- Projects Section -->
        <section id="second">
            <div class="elem">
                <img src="img/plug.png" alt="The Plug Project">
                <h1>The Plug</h1>
                <h5>2022</h5>
            </div>
            <div class="elem">
                <img src="img/wolf.jpg" alt="Experience Project">
                <h1>Experience</h1>
                <h5>2022</h5>
            </div>
            <div class="elem elemlast">
                <img src="img/oycaqybi.png" alt="Kudu Project">
                <h1>Kudu</h1>
                <h5>2022</h5>
            </div>
        </section>

        <!-- About Me Section -->
        <section id="about">
            <img src="img/cat.jpg" id="profile" alt="Profile Image">
            <div id="textabout">
                <h5>(About Me)</h5>
                <p>I'm a product designer with a passion for creating products that not only look good but also solve
                    real problems. When I'm not sketching ideas on paper, you can find me binge-watching a Netflix
                    series or playing video games. My design philosophy is simple: make it visually appealing,
                    functional, and bring a smile to people's faces. I'm the designer you want on your team if you want
                    to make people say 'I need that in my life!'.</p>
                <a href="#">Let's talk</a>
            </div>
        </section>

        <!-- Subscribe Section -->
        <section id="subscribe">
            <h5>(Forgot to Mention)</h5>
            <h3>Subscribe to my YouTube channel <i class="ri-arrow-right-up-line"></i></h3>
        </section>

        <!-- Footer Section -->
        <footer id="footer">
            <div id="footerleft">
                <h5>2023 &copy;</h5>
                <h5>0:05 AM EST</h5>
            </div>
            <br><br>
            <hr>
            <div id="footerright">
                <a href="#">Telegram</a>
                <a href="#">Instagram</a>
                <a href="#">LinkedIn</a>
                <a href="#">Twitter</a>
            </div>
        </footer>

    </div>

    <!-- External JavaScript Libraries and Custom Scripts -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"
        integrity="sha512-cOH8ndwGgPo+K7pTvMrqYbmI8u8k6Sho3js0gOqVWTmQMlLIi6TbqGWRTpf1ga8ci9H3iPsvDLr4X7xwhC/+DQ=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.4/dist/locomotive-scroll.min.js"></script>
    <script src="script.js"></script>
</body>

</html>