rishikmr9.github.io/index.html at main · rishikmr9/rishikmr9.github.io · 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
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<!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">
    <meta name="description" content="Hi, I am Rishi, a web developer and graphic designer. I help brands / business stand out visually and also develop websites to create their online presence">
    <link rel="stylesheet" href="/css/style.css">
    <script src="/javascript/script.js" defer></script>
    <title>Rishi | graphic designer & web developer</title>
</head>
<body>
    <!-- navigation bar -->
    <header id="nav-bar" class="flex">

        <i class="nav-menu"><img src="/assets/nav-menu.png" alt="open navigation menu"></i>
        <nav class="nav-links">
            <ul class="flex animate-child-x">
                <li><a href="/">home</a></li>
                <li><a href="/#work-section">portfolio</a></li>
                <li><a href="/about">about</a></li>
            </ul>
        </nav>
    </header>
    <div class="nav-menu-overlay slide-x"></div>

    <!-- main content -->
    <main>
        <!-- hero section -->
        <section id="hero-section">
            <div class="container flex">
                <img src="/assets/background-pattern.png" alt="background pattern image" class="bg left">
                <div class="intro">
                    <h1>Hey there,<br> I am rishi</h1>
                    <p>graphic designer <b>&</b> web developer</p>
                    <a href="/about" class="cta link"><span>about </span><i class="arrow-icon"><img src="/assets/arrow.svg" alt="go to about page"></i></a>
                </div>
                <!-- background image -->
                <img src="/assets/background-pattern.png" alt="background pattern image" class="bg right">
            </div>
        </section>

        <!-- work / projects section -->
        <section id="work-section">

            <div class="carousel hide">
                <i class="close"><img src="/assets/close.png" alt="close project preview"></i>
                <div class="flex">
                    <i class="arrow left"><img src="/assets/arrow-left.png" alt="show previous image"></i>
                    <img src="" class="work">
                    <i class="arrow right"><img src="/assets/arrow-right.png" alt="show next image" ></i>
                </div>
                <div class="content">
                    <h3>Bluefire | website ui design</h3>
                    <p>brand identity and website desing for bluefire</p>
                </div>
            </div>

            <h2>Have a look at some of my work</h2>

            <div class="grid">
                <div class="project card">
                    <div class="carousel-sm flex">
                        <div class="overlay">
                            <i class="arrow left"><img src="/assets/arrow-left.png" alt="show previous image"></i>
                            <i class="arrow right"><img src="/assets/arrow-right.png" alt="show next image" ></i>
                        </div>
                        <img src="/assets/work/sullivanmedia-website design.png" alt="portfolio website design" class="work active-image">
                        <img src="/assets/work/sullivanmedia-portfolio.png" alt="portfolio website" class="work">
                        <img src="/assets/work/sullivanmedia-website ui design.png" alt="portfolio website" class="work">
                    </div>
                    <p class="description">Sullivanmedia | website design & development</p>
                </div>

                <div class="project card">
                    <div class="carousel-sm flex">
                        <div class="overlay">
                            <i class="arrow left"><img src="/assets/arrow-left.png" alt="show previous image"></i>
                            <i class="arrow right"><img src="/assets/arrow-right.png" alt="show next image" ></i>
                        </div>
                        <img src="/assets/work/visual identity design.png" alt="visual identity design" class="work active-image">
                        <img src="/assets/work/Breeze-Primary logo lettermark.png" alt="logo design" class="work">
                        <img src="/assets/work/Breeze-thumbnails.png" alt="thumbnail design" class="work">
                        <img src="/assets/work/Breeze-banner design.png" alt="banner design" class="work">
                        <img src="/assets/work/Breeze-website home page design.png" alt="website design" class="work">
                    </div>
                    <p class="description">Breeze | visual identity design</p>
                </div>

                <div class="project card">
                    <div class="carousel-sm flex">
                        <div class="overlay">
                            <i class="arrow left"><img src="/assets/arrow-left.png" alt="show previous image"></i>
                            <i class="arrow right"><img src="/assets/arrow-right.png" alt="show next image" ></i>
                        </div>
                        <img src="/assets/work/BLuefire-logo.png" alt="logo design of bluefire" class="work active-image">
                        <img src="/assets/work/Bluefire-Visual identity.png" alt="visual identity of bluefire" class="work">
                        <img src="/assets/work/Bluefire-Website design2.png" alt="website design of bluefire" class="work">
                        <img src="/assets/work/Bluefire-web design.png" alt="website design of bluefire" class="work">
                    </div>
                    <p class="description">Bluefire | visual identity design & website design</p>
                </div>
            </div>

        </section>

        <section id="services-section">

            <div class="services-container flex">
                <div class="flex">
                    <h2 class="lg">Services I offer</h2>
                    <div class="line"></div>
                </div>

                <div class="service">
                    <img src="assets/service-graphic-design.png" alt="graphic design">
                    <h3>graphic design</h3>
                    <div class="container flex">
                        <p>Logo design, brand visual identity design, web design, and ui/ux design</p>
                    </div>
                </div>

                <div class="service">
                    <img src="assets/service-web-dev.png" alt="web development">
                    <h3>web development</h3>
                    <div class="container flex">
                        <p>frontend and backend development of e-commerce website, personal portfolio, blog website and more.<br>technologies - html, css, js and nodejs</p>
                    </div>
                </div>
            </div>
        </section>

        <section id="contact-section" class="bg-pattern dark">
            <div class="flex container">
                <div class="contact-title">
                    <div>
                        <h2 class="lg">Get in touch <br> with me</h2>
                        <p class="email"> email: <a href="mailto:rishikumarchaudhari9@gmail.com">rishikumarchaudhari9@gmail.com</a></p>
                        <div class="social-links flex">
                            <a href="https://www.youtube.com/channel/UC7YWDhd3GQ6iTvVLMHI6sFQ"><i><img src="/assets/youtube.png" class="icon" alt="youtube"></i></a>
                            <a href="https://www.linkedin.com/in/rishikumar-chaudhari-a80bb6256/"><i><img src="/assets/linkedin.png" class="icon" alt="linkiden"></i></a>
                            <a href="https://www.instagram.com/rishi.kmr7/"><i><img src="/assets/instagram.png" class="icon" alt="instagram"></i></a>
                        </div>
                    </div>
                </div>

        </section>
    </main>
</body>
</html>